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 à