Les transformations

translate(), rotate(), push() et pop() servent à déplacer et faire tourner ce que l’on dessine. Elles déroutent souvent au début, parce qu’elles ne font pas ce qu’on imagine. Tout devient simple avec une seule image en tête :

Les schémas reprennent le style de la page Les coordonnées. Dans les animations, la grille grise représente la feuille, avec ses axes X et Y et son origine (0, 0), le point bleu. Le cadre, lui, c’est le canevas : il ne bouge jamais. Le bandeau sous chaque animation affiche l’instruction en cours.

Rappel : le repère de p5.js

1
circle(400, 150, 20);

Le point (0, 0), l’origine, est dans le coin en haut à gauche du canevas.

x augmente vers la droite. y augmente vers le bas : c’est l’inverse des maths du secondaire !

Le point (400, 150) est donc à 400 pixels du bord gauche et à 150 pixels du haut. Voir aussi la page Les coordonnées.

translate() déplace la feuille

1
translate(200, 150);
2
rect(0, 0, 150, 90);

translate(x, y) fait glisser l’origine de la feuille.

On dessine ensuite en (0, 0)… qui se trouve maintenant en (200, 150) sur l’écran.

Le canevas ne bouge pas : c’est la grille grise, notre feuille, qui a glissé.

L’intérêt ? Le code de la forme ne change jamais, aussi compliquée soit-elle : elle est toujours dessinée autour de (0, 0). On ne change que la position de la feuille. Ici, la feuille suit la souris :

1
function setup() {
2
  createCanvas(800, 400);
3
}
4

5
function draw() {
6
  background(240);
7
  translate(mouseX, mouseY); // la feuille suit la souris
8
  fill(255, 150, 50);
9
  // la forme, dessinée autour de (0, 0)
10
  beginShape();
11
  vertex(0, 0);
12
  vertex(90, 20);
13
  vertex(60, 40);
14
  vertex(90, 40);
15
  vertex(60, 60);
16
  vertex(90, 60);
17
  vertex(60, 80);
18
  vertex(70, 90);
19
  vertex(60, 100);
20
  vertex(50, 90);
21
  vertex(40, 100);
22
  vertex(0, 70);
23
  vertex(10, 40);
24
  endShape(CLOSE);
25
}

Les déplacements s’additionnent

1
translate(50, 250);
2
rect(0, 0, 80, 80);
3
translate(150, 0);
4
rect(0, 0, 80, 80);
5
translate(150, 0);
6
rect(0, 0, 80, 80);

Chaque translate() part de la position actuelle de la feuille, pas du coin du canevas : le troisième carré est en x = 50 + 150 + 150 = 350.

Attention donc : un translate(0, 0) après un translate(50, 50) ne ramène pas la feuille à zéro. Il ne fait… rien du tout.

rotate() tourne autour de (0, 0)

1
rotate(30);
2
rect(300, 100, 150, 90);

rotate(angle) fait tourner toute la feuille… autour de son origine, c’est-à-dire le coin en haut à gauche.

Le rectangle ne tourne donc pas sur lui-même : il décrit un grand arc de cercle.

C’est le piège classique. On voit plus bas comment l’éviter.

Degrés et sens de rotation

1
function setup() {
2
  createCanvas(600, 600);
3
  angleMode(DEGREES);
4
}

Par défaut, p5.js compte les angles en radians (un tour complet = TWO_PI, environ 6,28). Pour travailler en degrés, ajoutez angleMode(DEGREES) dans setup() : un tour complet vaut alors 360. Tous les exemples de cette page utilisent les degrés.

Un angle positif tourne dans le sens des aiguilles d’une montre, parce que y va vers le bas.

La recette pour tourner sur place

Pour faire tourner une forme sur elle-même, on combine les deux :

Aller : translate(x, y)

Placer l’origine de la feuille au centre de la forme.
Tourner : rotate(angle)

Faire tourner la feuille autour de ce centre.
Dessiner : rect(0, 0, w, h)

Dessiner la forme en (0, 0). Avec rectMode(CENTER), le rectangle est centré sur ce point.

À répéter comme une comptine : je vais au centre, je tourne, je dessine.

Un rectangle qui tourne

1
function setup() {
2
  createCanvas(600, 600);
3
  angleMode(DEGREES);
4
  rectMode(CENTER);
5
}
6

7
function draw() {
8
  background(255);
9
  translate(300, 300);  // 1. aller
10
  rotate(frameCount);   // 2. tourner
11
  rect(0, 0, 200, 100); // 3. dessiner
12
}

frameCount compte les images depuis le début du sketch. Il augmente de 1 à chaque image : l’angle grandit tout seul et le rectangle tourne.

L’ordre des lignes compte

Mêmes instructions, ordre différent, résultat différent. Dans les deux animations, l’angle a va et vient entre 0 et 50 :

1
translate(300, 150);
2
rotate(a);
3
rect(0, 0, 100, 60);

1
rotate(a);
2
translate(300, 150);
3
rect(0, 0, 100, 60);

À gauche, on va d’abord au bon endroit, puis on tourne : la forme tourne sur place. À droite, on tourne d’abord la feuille entière autour du coin, puis on avance le long de l’axe x qui a tourné : la forme tourne autour du coin.

push() et pop()

Le problème : tout ce qui suit est transformé

1
translate(300, 300);
2
rotate(45);
3
fill(255, 120, 141);
4
rect(0, 0, 150, 150);
5

6
fill(29, 161, 242);
7
rect(100, 100, 80, 80);

Une transformation reste active jusqu’à la fin de draw().

Le carré bleu est déplacé et tourné lui aussi, au lieu d’apparaître en (100, 100).

La solution : une photo de la feuille

push()

Je prends une photo de la feuille : sa position, sa rotation, et aussi les réglages de style comme fill() ou stroke().

pop()

Je remets la feuille exactement comme sur la photo. Tout ce qui a été fait entre les deux est oublié.

Toujours par paire, comme des parenthèses : chaque push() a son pop().

1
push();
2
  translate(300, 200);
3
  rotate(45);
4
  fill(255, 120, 141);
5
  rect(0, 0, 120, 120);
6
pop();
7

8
fill(29, 161, 242);
9
rect(150, 450, 120, 120);

Entre push() et pop(), les axes en pointillés montrent la photo prise par push(). Au moment du pop(), la feuille y retourne : le carré bleu est dessiné au bon endroit.

Le décalage des lignes entre push() et pop() n’est pas obligatoire, mais il aide à voir ce qui est « entre parenthèses ».

Avec rectMode(CENTER) et angleMode(DEGREES) dans setup().

En pratique : l’horloge

Une aiguille

1
function draw() {
2
  background(255);
3
  translate(300, 300);
4
  rotate(second() * 6);
5
  line(0, 0, 0, -250);
6
}

Un tour = 360°. En 60 secondes : 360 / 60 = 6° par seconde.

On dessine l’aiguille vers le haut, de (0, 0) à (0, -250) : c’est midi. La rotation fait le reste.

Trois aiguilles

Chaque aiguille a sa propre rotation : on range le push(), le rotate() et le pop() dans une fonction, et on l’appelle trois fois.

1
function draw() {
2
  background(255);
3
  translate(300, 300);
4
  aiguille(second() * 6, 250);
5
  aiguille(minute() * 6, 200);
6
  aiguille(hour() * 30, 130);
7
}
8

9
function aiguille(angle, longueur) {
10
  push();
11
    rotate(angle);
12
    line(0, 0, 0, -longueur);
13
  pop();
14
}

Les heures : 12 heures pour un tour, soit 360 / 12 = 30° par heure.

Pour aller plus loin, voir l’exercice Créez une horloge.

Pour aller plus loin : le système solaire

Les push() et pop() peuvent s’emboîter. La Terre tourne autour du Soleil ; la Lune tourne autour de la Terre, dans le repère de la Terre.

1
function draw() {
2
  background(255);
3
  translate(300, 300);
4
  circle(0, 0, 80); // Soleil
5

6
  push();
7
    rotate(frameCount);
8
    translate(200, 0);
9
    circle(0, 0, 30); // Terre
10

11
    push();
12
      rotate(frameCount * 4);
13
      translate(45, 0);
14
      circle(0, 0, 10); // Lune
15
    pop();
16
  pop();
17
}

Les petites flèches autour de la Terre montrent son repère : c’est dans cette feuille-là que la Lune est dessinée.

L’antisèche

Fonction	Ce qu’elle fait	À retenir
`translate(x, y)`	Déplace l’origine de la feuille	Les déplacements s’additionnent
`rotate(angle)`	Tourne la feuille autour de l’origine	Sens horaire
`push()`	Prend une photo de la feuille	Toujours suivi d’un `pop()`
`pop()`	Remet la feuille comme sur la photo	Oublie tout depuis le `push()`
`rectMode(CENTER)`	Dessine le rectangle depuis son centre	Pour tourner sur place
`angleMode(DEGREES)`	Compte les angles en degrés	À mettre dans `setup()`
`draw()`	Remet la feuille à zéro à chaque image	Rien ne s’accumule d’une image à l’autre

La référence de rotate() sur p5js.org