Les transformations

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:

void setup() {
    size(800,400);
}
void 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:

void setup() {
    size(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);
}

void 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);
    pushMatrix();// Isole les transformations qui suivent, jusque popMatrix()
    // 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);
    popMatrix();//Rétabli l'état initial
}

Plus d'infos sur les rotations

Cumul

Attention, gardez à l'esprit que les transformations s'accumulent dans Processing. 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.

Vous trouverez plus d'informations sur les transformations sur cette page des FLOSS Manuals FR ou en faisant une recherche sur le web..

results matching ""

    No results matching ""