Les translations

Le système de coordonnées de P5JS fonctionne sur le principe du système de coordonnées habituel en informatique. Les abscisses correspondent à l'axe horizontal orienté de gauche à droite, les ordonnées à l'axe vertical orienté de haut en bas. Comme on l'a vue dans la page traitant des coordonnées, le point en haut à gauche a donc pour coordonnées (0,0) et celui en bas à droite à son abscisse qui correspond à la largeur et son ordonnée à la hauteur de la fenêtre.

Parfois, il serait intéressant d'avoir le centre du repère qui soit placé autrement qu'en haut à gauche. Deux cas de figure en particulier présente un intérêt pour cela. Si je dois faire une figure complexe et que j'appelle une fonction pour le faire, il serait bien de puovoir décaler le repère pour que la figure soit tracée toujours de la même façon.

l'exemple ci desssous montre bien ce cas de figure. Nous voulons avoir une ellipse qui oscille autour du curseur de la souris. Pour avoir une oscillation, nous utilisons une variable oscillation et la fonction mathématique cosinus qui oscille entre les valeurs 0 et 1.

Pour effectuer le déplacement du repère, nous utilisons la fonction translate.

translate(X,Y)

Cette a pour effet de déplacer le centre du repère par translation comme le montre le schéma ci contre.

Sur l'exemple ci dessus, on a appliqué la translation avec la fonction translate(6,4). Le centre du repère qui était en haut à gauche sur le cercle noir est donc maintenant au niveau du cercle rouge. Les coordonnées du repère sont maintenant représentées par les chiffres rouges.

Deux autres fonctions sont utiles. En effet, si nous changeons à plusieurs reprises la position du repère,nous risquons de nous y perdre. Il y a une fonction qui permet de mémoriser la position du repère, la fonction push() et une seconde qui permet de revenir à la position mémorisée du repère, la fonction pop(). Si nous utilisons la séquence

push();
translate(6,4);
faisUnDessin();
pop();

nous allons mémoriser la position du repère qui correspond aux chiffres noirs dans le schéma précédent. Ensuite, nous déplaçons le repère pour arriver à la position avec les chiffres rouges. Nous faisons un dessin avec la fonction faisUnDessin(). Tous les éléments de ce dessin sont placés dans e système de coordonnées qui est en rouge. Puis enfin nous restaurons avec la fonction pop le système de coordonnées correspondant aux chiffres noirs que nous avions mémorisé.

Exemple

Le script exemple ci dessous utilise la translation à deux reprises. Il place le centre du repère à l'endroit où se trouve la souris et fait osciller un point autour du curseur de la souris

À faire vous même

Commencez par analyser le script exemple ci dessus.
On donne la fonction croix() définie par ce qui est ci dessous :
```
function croix() {
  noStroke();
  fill('white');
  rect(-10,-2,20,4);
  rect(-2,-10,4,20);  
}
```
Utilisez la fonction croix() en la recopiant dans le script puis ensuite modifier le script pour placer une croix sous le curseur de la souris, puis ensuite pour placer 3 croix sur l'image à des positions que vous choisirez.
N.B. c'est particulièrement lorsque l'on fait appel à des fonctions qui créent des formes prédéfinies que l'on voit l'utilité des transformations.