← Retour aux demos

Geometry Demo

Deplacez les points pour explorer la figure. Les elements dependants suivent en temps reel : milieux (rouge), centre de gravite G (jaune, intersection des medianes), symetriques A' B' C' (violet, par rapport au centre S). Deplacez R pour changer le rayon du cercle, S pour deplacer le centre de symetrie. Arcs : K (cyan, arc par angles), P/Q/R2 (orange, arc par 3 points — deplacez P ou R2 pour changer l'angle).

-10-8-6-4-2246810-6-4-2246ABCMNPGORSA'B'C'KPQR28.0068°

41 elements | geometry-core demo | renderMode="normal"


Rough mode (renderMode="rough")

Toute la figure est rendue en style "fait main" via rough.js. Les points et labels restent nets. Deplacez les points — le rendu reste stable grace aux seeds deterministes.

-10-8-6-4-2246810-6-4-2246ABCMNPORK

22 elements | rough mode | defaultRoughness=1.2


Mixed mode (renderMode="mixed")

Segments bleus = normaux, segments/cercle/arc rouges et orange = rough (style: render="rough"). Chaque element choisit individuellement son style de rendu.

-10-8-6-4-2246810-6-4-2246ABCDO1E1O2E2K

16 elements | mixed mode


Parametres rough.js

Ligne 1 : bowing (courbure des traits) — 0 = droit, 1 = defaut, 8 = tres courbe.
Ligne 2 : fillStyle (motif de remplissage) — hachure, cross-hatch, zigzag, dots. Cercle bleu : solid fill.
Ligne 3 : styles de trait — solid, tirets (dashed), pointilles (dotted) en mode rough.
Ligne 4 : epaisseur de trait — 1, 3, 6 en mode rough.
Ligne 5 : tirets/pointilles epais — dashed ep=3, dashed ep=5, dotted ep=5.
Ligne 6 : preserveVertices — false (sommets decales aleatoirement) vs true (sommets precis).

-10-8-6-4-2246810-6-4-2246bowing=0bowing=1bowing=8solidtiretspointillesepaisseur=1epaisseur=3epaisseur=6tirets ep=3tirets ep=5pointilles ep=5preserveVertices=falsepreserveVertices=truesolid fill

63 elements | parametres rough