Une variable stocke une valeur en mémoire afin qu’elle puisse être utilisée par la suite dans un programme.
Une variable peut être utilisée plusieurs fois dans un programme.
La raison principale pour utiliser des variables est d’éviter de répéter sa valeur dans le code. Le code est plus facile à mettre à jour grâce aux variables .

var y = 60;
var d = 100;
function setup() {
createCanvas(800, 600);
}
function draw() {
background(200);
ellipse(100, y, d, d); // Gauche
ellipse(250, y, d, d); // Milieu
ellipse(400, y, d, d); // Droite
}

Il est simple de modifier les valeurs y et d

Créer des variables

Pour créer une variable il faut lui donner un nom (pertinent avec son usage).
Une variable doit être déclarée var suivi par son nom et sa valeur initiale.

var y = 60;

Il est également possible d’écrire :

var y;
y = 60;

Deux variables avec le même nom ne peuvent exister dans la même partie du programme.

Les variables peuvent être placées à l’extérieur de setup () et draw (). Une variable à l’intérieur de setup (), ne peut être utilisée à l’intérieur de draw (). Les variables globales (placées en dehors de setup () et draw (), peuvent être utilisées partout dans le programme.

p5.js a une série de variables spéciales. Par exemple, la largeur et la hauteur de l’animation sont stockées dans des variables appelées width et height. Ces valeurs sont définies par la fonction createCanvas ().

function setup() {
createCanvas(800, 600);
}
function draw() {
background(200);
line(0, 0, width, height); 
line(width, 0, 0, height);
ellipse(width/2, height/2, 150, 150);
}

Il est possible d’utiliser les opérateurs + (plus), – (moins), / (diviser), et * (multiplier)

var x = 100
var y = 60;
var d = 100;
function setup() {
createCanvas(800, 600);
}
function draw() {
background(200);
ellipse(x, y, d, d); // Gauche
ellipse(x*3, y+100, d, d); // Milieu
ellipse(x*5, y-50, d/2, d/2); // Droite
}

Certains calculs existent sous une forme raccourcie :

x += 10; // est équivalent à x = x + 10
y −= 15; // est équivalent à y = y - 15

x++; // est équivalent à x = x + 1
y−−; // est équivalent à y = y − 1

Créer des animations interactives en utilisant la souris avec des variables intégrées à p5.js : mouseX & mouseY.

function setup() {
  createCanvas(780, 200);
  noStroke();
  fill(0,100)
}
function draw() {
 ellipse(mouseX, mouseY, 10,10);
}

Rappel : draw est exécuté 60 fois pas seconde.

Deux autres variables intégrées permettent de dessiner : pmouseX & pmouseY

function setup() {
createCanvas(780, 200);
strokeWeight(4);
stroke(255);
background(0)
}
function draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}

 Les boucles

Les boucles évitent les répétitions qui seraient fastidieuses à écrire.

function setup() {
createCanvas(800, 600);

}
function draw() {
background(200);
line(20, 40, 80, 560);
line(80, 40, 140, 560);
line(140, 40, 200, 560);
line(200, 40, 260, 560);
line(260, 40, 320, 560);
line(320, 40, 380, 560);
line(380, 40, 440, 560);
line(440, 40, 500, 560);
line(500, 40, 560, 560);
line(560, 40, 620, 560);
line(620, 40, 680, 560);
line(680, 40, 740, 560);
}

La même chose peut s’écrire grâce à la boucle for

function setup() {
createCanvas(800, 600);
}
function draw() {
background(200);
for (var i= 20; i<width-60; i += 60){
  line(i, 40, i + 60, 560);
  }
}

Ce schéma illustre le mécanisme mis en œuvre par la boucle for :

Les boucles for peuvent être emboîtées :

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

function draw() {
  background(255);
  for (var i=20; i<width; i+=20){
    for (var j=20; j<height; j+=20){
    ellipse(i, j, 20, 20);
    }
  }
}