p5.js

l’antiseche
des débutants

structure du programme

//tourne une fois, au démarrage
function setup(){
  createCanvas(800,600);
}

//tourne en boucle, aprés setup()
function draw(){
  //instructions de dessin
}

variables système

windowWidth / windowHeight
//largeur / hauteur de fenêtre

width / height
//largueur / hauteur de la toile

mouseX / mouseY
//position horizontale / verticale actuelle de la souris

feedback non-visuel

print();
//écrit dans la console

couleurs

fill(120); //gris: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //couleur par noms
fill('#ccc'); //3-digit hex
fill('#222222'); //6-digit hex fill
color(0, 0, 255); //object p5.Color

math

+ - / *

random(limite basse,limite haute);

map(valeur, in1, in2, out1, out2);
//map une valeur entre 2 intervales in/out

primitives 2d

line(x1, y1, x2, y2);

ellipse(x, y, largeur, hauteur);

rect(x, y, largeur, hauteur);

arc(x, y, largeur, hauteur, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //ajoute plus de vertices
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
  • grille

  • line()

  • ellipse()

  • rect()

  • arc()

  • vertex()

attributs

background(couleur);
//définit la couleur de fond

fill(couleur);
//définit la couleur de remplissage

noFill();
//désactive le remplissage

stroke(couleur);
//définit la couleur de contour

strokeWeight(épaisseur);
//définit l’épaisseur de contour

noStroke();
//désactive le contour

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER

textSize(pixels);

logique if/then

if(condition){
  //instructions
}

=== égal à
!== différent de
>  supérieur à
<  inférieur à
>= supérieur ou égal à
<= inférieur ou égal à