← Geometry Demos

Images dans les figures

Placement d'images sur les figures geometriques avec image(). Position libre ou ancree a un point, avec largeur et hauteur configurables.

Image en position libre

image(url, x, y, largeur=W) place une image centree aux coordonnees (x, y) avec une largeur en unites mathematiques.

-6-4-2246-4-224ABC
Code DSL
A = point(-3, -1, couleur="bleu")
B = point(3, -1, couleur="bleu")
C = point(0, 3, couleur="bleu")
segment(A, B)
segment(B, C)
segment(C, A)
image("/game/monsters/dragon_tete.png", -0.5, 1.5, largeur=3)

Images ancrees a des points

image(url, point, largeur=W, dx=D, dy=E) ancre l'image a un point. L'image suit le point quand on le deplace.

-6-4-2246-4-224ABAB = 4.47
Code DSL
A = point(0, 0, couleur="rouge")
B = point(4, 2, couleur="bleu")
segment(A, B)
d = distance(A, B)
texte(2, 1.5, "AB = {d:.2f}")
image("/game/monsters/griffon_tete.png", A, largeur=2, dx=0.5, dy=0.5)
image("/game/monsters/lion_tete.png", B, largeur=2, dx=0.5, dy=0.5)

Largeur et hauteur explicites

Avec largeur et hauteur, l'image occupe exactement le rectangle specifie. Sans hauteur, le ratio naturel est preserve.

-6-4-2246-4-224ABCD
Code DSL
A = point(-4, -2, couleur="bleu")
B = point(4, -2, couleur="bleu")
C = point(4, 3, couleur="bleu")
D = point(-4, 3, couleur="bleu")
segment(A, B)
segment(B, C)
segment(C, D)
segment(D, A)
image("/game/monsters/hydre_tete.png", 0, 0.5, largeur=7, hauteur=4)

Images deplacables

Les images en position libre sont deplacables a la souris, comme les elements texte.

-6-4-2246-4-224ADeplacez les images !
Code DSL
image("/game/monsters/cyclope_tete.png", -1.5, 2.5, largeur=3)
image("/game/monsters/jaguar_tete.png", 2.5, 2.5, largeur=3)
A = point(0, -2, couleur="rouge")
texte(A, "Deplacez les images !", dx=0.5, dy=0.5)

Image sur un point contraint

L'image suit un point_sur(cercle). Combinez avec un slider pour varier le rayon du cercle.

-6-4-2246-4-224OPP
r 3.0
Code DSL
O = point(0, 0, couleur="bleu")
r = slider(min=1, max=5, valeur=3, pas=0.5)
c = cercle(O, rayon=r, couleur="gris", trait="tirets")
P = point_sur(c, 45, couleur="rouge")
image("/game/monsters/aigle_tete.png", P, largeur=1.5, dx=-0.7, dy=0.3)
texte(P, "P", dx=0.5, dy=-0.5)

Image de fond (couche="fond")

Avec couche="fond", l'image est rendue derriere toutes les constructions geometriques. Ideal pour les supports visuels.

-6-4-2246-4-224ABC6.32
Code DSL
image("/game/monsters/hydre_tete.png", 0, 0, largeur=10, hauteur=6, couche="fond")
A = point(-3, -1, couleur="rouge")
B = point(3, 1, couleur="rouge")
segment(A, B, couleur="jaune", epaisseur=3)
d = distance(A, B)
texte(0, 0.5, "{d:.2f}", couleur="jaune")
C = point(0, 3, couleur="vert")
segment(A, C, couleur="jaune", epaisseur=3)
segment(B, C, couleur="jaune", epaisseur=3)

Image entre 2 points

image("url", A, B) remplit le rectangle defini par les deux points. L'image se redimensionne quand les points bougent.

-6-4-2246-4-224ABDeplacez A et B !
Code DSL
A = point(-3, -2, couleur="bleu")
B = point(3, 2, couleur="bleu")
image("/game/monsters/dragon_tete.png", A, B)
segment(A, B, couleur="gris", trait="tirets")
texte(-4, 3, "Deplacez A et B !")

Rotation

Rotation — image 2 points

Image definie par 2 coins draggables. Les rotations preservent les dimensions et l'orientation visuelle.

-6-4-2246-4-224ABrectrectO
Code DSL
A = point(2, -1, couleur="vert")
B = point(4, 1, couleur="vert")
rect = polygone(A, point(B.x, A.y), B, point(A.x, B.y), couleur="vert")
img = image("/game/monsters/griffon_tete.png", A, B)
O = point(0, 0, couleur="bleu")
r1 = rotation(centre=O, angle=45)
transforme(r1, img)
transforme(r1, rect)
r2 = rotation(centre=O, angle=90)
transforme(r2, img)
transforme(r2, rect)
r3 = rotation(centre=O, angle=135)
transforme(r3, img)
transforme(r3, rect)
r4 = rotation(centre=O, angle=180)
transforme(r4, img)
transforme(r4, rect)
r5 = rotation(centre=O, angle=225)
transforme(r5, img)
transforme(r5, rect)
r6 = rotation(centre=O, angle=270)
transforme(r6, img)
transforme(r6, rect)
r7 = rotation(centre=O, angle=315)
transforme(r7, img)
transforme(r7, rect)
cercle(O, rayon=3, couleur="gris", trait="tirets")

Rotation — image ancree

Image ancree au point A avec offset de centrage. Le point A tourne sur le cercle, l'image suit et tourne visuellement.

-6-4-2246-4-224AO
Code DSL
A = point(3, 0, couleur="rouge")
img = image("/game/monsters/lion_tete.png", A, largeur=2, dx=-1, dy=-1)
O = point(0, 0, couleur="bleu")
r1 = rotation(centre=O, angle=45)
transforme(r1, img)
r2 = rotation(centre=O, angle=90)
transforme(r2, img)
r3 = rotation(centre=O, angle=135)
transforme(r3, img)
r4 = rotation(centre=O, angle=180)
transforme(r4, img)
r5 = rotation(centre=O, angle=225)
transforme(r5, img)
r6 = rotation(centre=O, angle=270)
transforme(r6, img)
r7 = rotation(centre=O, angle=315)
transforme(r7, img)
cercle(O, rayon=3, couleur="gris", trait="tirets")

Rotation — image libre

Image en position libre (x, y). Le centre de l'image est transforme et l'image tourne visuellement.

-6-4-2246-4-224O
Code DSL
img = image("/game/monsters/cobra_tete.png", 3, 0, largeur=2, hauteur=2)
O = point(0, 0, couleur="bleu")
r1 = rotation(centre=O, angle=45)
transforme(r1, img)
r2 = rotation(centre=O, angle=90)
transforme(r2, img)
r3 = rotation(centre=O, angle=135)
transforme(r3, img)
r4 = rotation(centre=O, angle=180)
transforme(r4, img)
r5 = rotation(centre=O, angle=225)
transforme(r5, img)
r6 = rotation(centre=O, angle=270)
transforme(r6, img)
r7 = rotation(centre=O, angle=315)
transforme(r7, img)
cercle(O, rayon=3, couleur="gris", trait="tirets")

Translation

Translation — image 2 points

Les deux coins sont translatees par le vecteur. Deplacez U ou V pour changer le vecteur.

-6-4-2246-4-224vABUV
Code DSL
A = point(-4, -1, couleur="bleu")
B = point(-1, 1, couleur="bleu")
img = image("/game/monsters/griffon_tete.png", A, B)
U = point(0, 0, couleur="vert")
V = point(3, 2, couleur="vert")
v = vecteur(U, V, couleur="vert")
t = translation(vecteur=v)
img2 = transforme(t, img)

Translation — image ancree

L'image ancree au point A est translatee. Deplacez A ou le vecteur.

-6-4-2246-4-224vAUV
Code DSL
A = point(-3, 0, couleur="rouge")
img = image("/game/monsters/lion_tete.png", A, largeur=2, dx=-1, dy=-1)
U = point(0, 0, couleur="vert")
V = point(4, 1, couleur="vert")
v = vecteur(U, V, couleur="vert")
t = translation(vecteur=v)
img2 = transforme(t, img)

Translation — image libre

L'image libre est translatee. Deplacez l'image ou le vecteur.

-6-4-2246-4-224vUV
Code DSL
img = image("/game/monsters/cobra_tete.png", -3, 0, largeur=2, hauteur=2)
U = point(0, 0, couleur="vert")
V = point(4, 1, couleur="vert")
v = vecteur(U, V, couleur="vert")
t = translation(vecteur=v)
img2 = transforme(t, img)

Symetrie centrale

Symetrie centrale — image 2 points

Les deux coins sont reflechis par rapport au centre O. Equivalent a une rotation de 180°.

-6-4-2246-4-224ABO
Code DSL
A = point(-4, -1, couleur="bleu")
B = point(-1, 1, couleur="bleu")
img = image("/game/monsters/dragon_tete.png", A, B)
O = point(0, 0, couleur="rouge")
s = symetrie(centre=O)
img2 = transforme(s, img)
segment(A, O, couleur="gris", trait="tirets")

Symetrie centrale — image ancree

L'image ancree est reflechie par rapport a O. Deplacez A ou O.

-6-4-2246-4-224AO
Code DSL
A = point(-3, 1, couleur="rouge")
img = image("/game/monsters/griffon_tete.png", A, largeur=2, dx=-1, dy=-1)
O = point(0, 0, couleur="bleu")
s = symetrie(centre=O)
img2 = transforme(s, img)
segment(A, O, couleur="gris", trait="tirets")

Symetrie centrale — image libre

L'image libre est reflechie par rapport a O.

-6-4-2246-4-224O
Code DSL
img = image("/game/monsters/lion_tete.png", -3, 1, largeur=2, hauteur=2)
O = point(0, 0, couleur="bleu")
s = symetrie(centre=O)
img2 = transforme(s, img)

Homothetie

Homothetie — image 2 points

Les deux coins sont dilates par rapport a O avec rapport 1.5. L'image grandit et s'eloigne.

-6-4-2246-4-224ABO
Code DSL
A = point(-3, -1, couleur="bleu")
B = point(-1, 1, couleur="bleu")
img = image("/game/monsters/cobra_tete.png", A, B)
O = point(0, 0, couleur="rouge")
h = homothetie(centre=O, rapport=1.5)
img2 = transforme(h, img)
segment(O, A, couleur="gris", trait="tirets")

Homothetie — image ancree

L'homothetie de rapport 2 deplace l'ancrage et double les dimensions de l'image.

-6-4-2246-4-224AO
Code DSL
A = point(1, 1, couleur="rouge")
img = image("/game/monsters/lion_tete.png", A, largeur=1.5, dx=-0.75, dy=-0.75)
O = point(0, 0, couleur="bleu")
h = homothetie(centre=O, rapport=2)
img2 = transforme(h, img)
segment(O, A, couleur="gris", trait="tirets")

Homothetie — image libre

L'image libre est agrandie par rapport a O avec rapport 2.

-6-4-2246-4-224O
Code DSL
img = image("/game/monsters/dragon_tete.png", 1, 1, largeur=1.5, hauteur=1.5)
O = point(0, 0, couleur="bleu")
h = homothetie(centre=O, rapport=2)
img2 = transforme(h, img)

Symetrie axiale

Symetrie axiale — image 2 points

Les deux coins A et B sont reflechis par la symetrie. Deplacez A, B ou l'axe pour voir la mise a jour reactive.

-6-4-2246-4-224dABP1P2
Code DSL
A = point(-4, -1, couleur="bleu")
B = point(-1, 1, couleur="bleu")
img = image("/game/monsters/cobra_tete.png", A, B)
P1 = point(0, -3, couleur="rouge")
P2 = point(0, 3, couleur="rouge")
d = droite(P1, P2, couleur="gris", trait="tirets")
s = symetrie(axe=d)
img2 = transforme(s, img)

Symetrie axiale — image ancree

L'image ancree au point A est reflechie. Deplacez A ou l'axe pour verifier la reactivite.

-6-4-2246-4-224dAP1P2
Code DSL
A = point(-3, 0, couleur="rouge")
img = image("/game/monsters/lion_tete.png", A, largeur=2, dx=-1, dy=-1)
P1 = point(0, -3, couleur="rouge")
P2 = point(0, 3, couleur="rouge")
d = droite(P1, P2, couleur="gris", trait="tirets")
s = symetrie(axe=d)
img2 = transforme(s, img)

Symetrie axiale — image libre

L'image en position libre est reflechie. Deplacez l'image ou l'axe.

-6-4-2246-4-224dP1P2
Code DSL
img = image("/game/monsters/dragon_tete.png", -3, 0, largeur=2, hauteur=2)
P1 = point(0, -3, couleur="rouge")
P2 = point(0, 3, couleur="rouge")
d = droite(P1, P2, couleur="gris", trait="tirets")
s = symetrie(axe=d)
img2 = transforme(s, img)