Variable : définir une variable, c'est définir un mot-clé, comme p.ex. "vitesse", qui contiendra un nombre pouvant changer.

Dans P5, width et height sont des variables par défaut, qui contiennent la hauteur et largeur du canevas, en pixels.

D'autres variables sont: mouseX et mouseY, qui correspond à la valeur x et y de la position de la souris.

Nommer une variable : on peut définir librement une variable, mais il faut éviter les termes déjà utilisés par P5.js (voir référence) ou les mots-clés réservés du javascript (reserved names).

Pour éviter des conflits avec les mots-clés réservés, on va donc souvent préfixer ses variables, comme: My_vitesse, ProjectName_vitesse, etc.

Thèmes en vrac:

• Formes et dessin
• Couleurs
• Les variables mouseX & mouseY
• Les boucles, while & for

Voici le code de l'exemple Hello_P5:_shapes

function setup() {
 // Create the canvas
 createCanvas(720, 400);
 background(200);
 // Set colors
 fill(204, 101, 192, 127);
 stroke(127, 63, 120);
 // A rectangle
 rect(40, 120, 120, 40);
 // An ellipse
 ellipse(240, 240, 80, 80);
 // A triangle
 triangle(300, 100, 320, 100, 310, 80);
}

Dessiner une ligne:

line(15, 25, 70, 90);

Couleur de fond:

background(192, 64, 0);

Changer la couleur du trait:

stroke(255); // le trait sera blanc
stroke(255, 255, 255); // blanc, mais en RVB
stroke(255, 128, 0); // orange clair
stroke(#FF8000); // toujours orange clair
stroke(255, 128, 0, 128); // orange avec 50% de transparence