Les transformations

Dans P5js, les transformations s'appliquent à tout le système de coordonnées. De ce fait, elles ne sont pas faciles à appréhender.

Translation (translate)

La fonction translate() modifie le point d'origine du système de coordonnées pour tout ce qui va être dessiné à sa suite.

L'avantage, par rapport à une utilisation de variables ici, est que le code qui concerne directement notre forme ne change pas, aussi complexe soit-elle. Seul le point d'origine des coordonnées change. Le forme peut alors être déplacée.

Par exemple:

function setup() {
    createCanvas(800,400);
}
function draw() {
    background(240);
    fill(255,150,50);
    //Ma translation
    translate(mouseX, mouseY);
    // Ma forme
    beginShape();
        vertex(0,0);
        vertex(90,20);
        vertex(60,40);
        vertex(90,40);
        vertex(60,60);
        vertex(90,60);
        vertex(60,80);
        vertex(70,90);
        vertex(60,100);
        vertex(50,90);
        vertex(40,100);
        vertex(0,70);
        vertex(10,40);
    endShape(CLOSE);
}

Rotation (rotate)

Un exemple simple de rotation:

function setup() {
    createCanvas(750, 300);
    fill(249, 229, 112);
    stroke(242, 200, 48);
    strokeWeight(10);
    //Dessine les rectangles à partir de leur centre (et non le coin supérieur droit)
    rectMode(CENTER);
}

function draw() {
    // Si vous voulez donner l'impression qu'un élément tourne sur lui-même, il vous faudra à chaque boucle redessiner un background pour masquer les éléments précédents.
    background(188, 182, 196);
    push();// Isole les transformations qui suivent, jusque pop();
    // Translation : Déplace le point d'origine du système de coordonnées.
    translate(width/2, height/2);
    // Rotation. Tout le système de coordonnées effectue une rotation.
    rotate(frameCount / 10.0); //On utilise la variable frameCount
    rect(0,0,200,100);
    pop();//Rétabli l'état initial
}

Plus d'infos sur les rotations dans P5js

Cumul

Attention, gardez à l'esprit que les transformations s'accumulent dans P5js. Si vous redéfinissez un translate(0,0) après un translate(50,50), une forme dessinée et placée au point 0,0 sera en fait positionnée au point 50,50 dans votre sketch.