Documentation

Formes

Le canvas est une grille de pixels.

Le système de coordonnées

//  (0,0) ──────────────→ x
//    │
//    │      · (300, 200)
//    │
//    ↓ y
//                    (width, height)

width et height

p5 met à disposition deux variables qui contiennent les dimensions du canvas.

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(240);
  circle(width / 2, height / 2, 100);   // toujours centré
}

Les formes de base

point(x, y)un pixel

line(x1, y1, x2, y2)segment entre deux points

circle(x, y, d)cercle ; centre + diamètre

ellipse(x, y, w, h)ellipse ; centre + largeur et hauteur

square(x, y, c)carré ; coin supérieur gauche + côté

rect(x, y, w, h)rectangle ; coin supérieur gauche + dimensions

triangle(x1, y1, x2, y2, x3, y3)triangle ; trois sommets

arc(x, y, w, h, start, fin)portion d'ellipse ; angles en radians

Attention aux points d'ancrage !

Changer le point d'ancrage

rectMode(CENTER);      // rect() se positionne par son centre
rectMode(CORNER);      // valeur par défaut

ellipseMode(CORNER);   // ellipse() se positionne par son coin
ellipseMode(CENTER);   // valeur par défaut

Coins arrondis

rect(100, 100, 200, 100, 20);          // même rayon aux 4 coins
rect(100, 100, 200, 100, 20, 0, 20, 0); // haut-gauche, haut-droit, bas-droit, bas-gauche

L'ordre de dessin

Le code s'exécute ligne par ligne, de haut en bas. Chaque forme se dessine par-dessus les précédentes. Il n'y a pas de calques ou de z-index.

background(240);

fill(255, 0, 0);
circle(200, 200, 200);   // dessiné en premier

fill(0, 0, 255);
circle(200, 200, 100);   // dessiné après (dessus)

Formes libres

Pour dessiner un polygone, on décrit chaque sommets avec `vertex(x, y)` entre beginShape() et endShape().

beginShape();
vertex(100, 100);
vertex(300, 150);
vertex(250, 350);
vertex(120, 280);
endShape(CLOSE);   // CLOSE referme la forme sur le premier point

Déplacer et tourner le repère

Plutôt que de recalculer les coordonnées de chaque point, on peut déplacer le repère lui-même.

push();                    // sauvegarde l'état actuel
translate(width/2, height/2);       // l'origine (0,0) se déplace ici
rect(0, 0, 100, 100);         // dessiné au centre
rotate(PI / 4);              // rotation autour de la nouvelle origine
rect(0, 0, 100, 100);       // dessiné à 45°
pop();                     // restaure l'état sauvegardé
rect(0, 0, 100, 100);

translate(x, y)déplace l'origine

rotate(angle)tourne le repère ; angle en radians

scale(n)agrandit ou réduit

push()mémorise l'état (repère + styles)

pop()revient à l'état mémorisé

Les angles sont en radians par défaut : un tour complet vaut TWO_PI ou 2 * PI. Pour passer en degrés :

angleMode(DEGREES);   // dans setup()
rotate(45);           // désormais en degrés

// ou ponctuellement
rotate(radians(45));

← syntaxe couleurs →