8) Translate, rotate et pushMatrix() en 2 dimensions

Les commandes translate() et rotate() permettent de déplacer le point d’origine d’une animation. Ces commandes affectent tous les dessins qui vont suivre. pushMatrix() va nous permettre d’isoler ces opérations, comme on le verra.

Précédent | 9/16 | Suivant

Translate

Pour notre test, nous allons charger un fichier SVG, plutôt qu’une image. Le SVG est un format vectoriel à la norme ouverte, un concurrent open source au format illustrator, lisible nativement.

PShape m16;

void setup() {
 size(600, 600);
 m16=loadShape("m16.svg");
}

void draw() {
 background(255);
 shape(m16, 0, 0);
}

L’image s’affiche dans le coin supérieur gauche, sans surprise.
Pour notre exemple, nous voulons faire tourner ce flingue comme l’aiguille d’une horloge. Pour cela, nous allons déplacer le point 0,0 de notre animation au centre de l’animation. Pour ça, utilisons la commande translate().

PShape m16;

void setup() {
 size(600, 600);
 m16=loadShape("m16.svg");
}

void draw() {
 background(255);
translate(width/2, height/2);
 shape(m16, 0, 0);
}

Magnifique. Voilà notre m16 au centre de l’image. Tout ce qui sera dessiné après la fonction translate() le sera à partir de ces nouvelles coordonnées.

Rotate

Maintenant que le flingue est au centre, nous allons le faire tourner sur base de la fonction rotate(), couplée à la fonction second(), qui donne un chiffre de 0 à 59.

PShape m16;

void setup() {
 size(400, 400);
 m16=loadShape("m16.svg");
}

void draw() {
 background(255);
 translate(width/2, height/2);
 
 float angle=map(second(),0,59,0,TWO_PI);
 rotate(angle);
 shape(m16, 0, 0);
}

Rotate() fait tourner la surface de l’animation exactement comme si on tournait une feuille de papier pour dessiner une ligne plus confortablement avec un crayon. L’argument dans les parenthèses est exprimée en radiants, un chiffre entre 0 et deux fois la valeur de PI (environ 6,28).

Le problème, c’est que tout ce qui sera dessiné ensuite gardera les mêmes coordonnées 0,0...

PShape m16;

void setup() {
 size(400, 400);
 m16=loadShape("m16.svg");
}

void draw() {
 background(255);
 translate(width/2, height/2);
 
 float angle=map(second(),0,59,0,TWO_PI);
 rotate(angle);
 shape(m16, 0, 0);
 
 line(0,30,200,30);
}

Ça peut être compliqué, du coup, de dessiner une autre forme au point 0,0 d’origine. Heureusement, les fonctions pushMatrix() et popMatrix() sont là pour aider.

pushMatrix() et popMatrix()

pushMatrix() crée une parenthèse, retenant l’endroit ou se trouve le point d’origine avant qu’on l’appelle. On peut ensuite opérer toutes les fonctions translate() et rotate() nécessaire.
popMatrix() ferme cette parenthèse, et revient au point d’origine avant l’appel de pushMatrix().

PShape m16;

void setup() {
 size(400, 400);
 m16=loadShape("m16.svg");
}

void draw() {
 background(255);
 
 pushMatrix();
 translate(width/2, height/2);
 
 float angle=map(second(),0,59,0,TWO_PI);
 rotate(angle);
 shape(m16, 0, 0);
 popMatrix();
 line(0,30,200,30);
}

Voilà. Ces méthodes sont très utiles pour dessiner différents objets, à différents endroits d’une animation, sans se soucier des coordonnées. Translate() se charge de déplacer le point d’écriture, dessiner, puis revenir à zéro.