Documentation

Syntaxe & usage

variable ; fonction ; paramètre.

La structure d'un sketch

function setup() {
  // exécuté UNE FOIS au démarrage
  createCanvas(600, 600);
}

function draw() {
  // exécuté EN BOUCLE
  background(240);
  circle(300, 300, 100);
}

setup() sert à préparer : créer le canvas, charger des assets, définir des variables...

draw() sert à répéter : tout ce qui doit être redessiné, à chaque image, en boucle

Variables

Une variable stocke une valeur sous un nom, pour la réutiliser ou la faire changer.

let size = 50;        // on déclare et on assigne

size = 80;            // on change la valeur ; pas besoin de "let"
size = size + 10;     // on ajoute 10 à la valeur de size

Nommer

Le nom d'une variable est libre, mais il vous parle à vous. C'est une bonne pratique de l'écrire en anglais.

// valide
let speed = 4;
let circleCount = 12;
let shapeColor = 240;

// invalide
let 2speed = 4;    // ne peut pas commencer par un chiffre
let my speed = 4;  // pas d'espace

Le scope

Une variable existe à l'intérieur des accolades où elle a été déclarée, et nulle part ailleurs.

let x = 0;  // scope global ; existe partout, et PERSISTE

function setup() {
  createCanvas(600, 600);
  let cy = height/2;
}

function draw() {
  background(240);

  let r = 50;   // déclarée dans draw ; recréée à chaque frame

  circle(x, cy, r); // cause une erreur
  circle(x, 200, r);
  x = x + 2;    // la valeur de x augmente d'une frame à l'autre
}

Fonctions et paramètres

circle(300, 200, 80);
//     └─┬─┘ └┬┘ └┬┘
//       x    y  diamètre

background(240);      // un seul paramètre
noFill();             // aucun paramètre ; les parenthèses restent obligatoires

L'ordre des paramètres n'est pas modifiable et ne se devine pas toujours. Il est écrit dans la documentation de p5.js.

Ouvrez la page de rect() dans la référence. Trois sections :

→

La description

Le fonctionnement et l'utilisation de la fonction expliqués, avec des mots.

→

Les exemples

Souvent exécutables directement dans la page

→

La syntaxe

Les noms des paramètres, dans l'ordre. Certains sont optionnels.

→

La liste des paramètres/p>

Ce que chacun signifie, et lesquels sont optionnels.

On peut écrire sa propre fonction.

function fleur(x, y, size) {
  circle(x, y + size/2, size);
  circle(x - size / 2, y, size);
  circle(x, y - size/2, size);
  circle(x + size / 2, y, size);
}

function draw() {
  background(240);
  fleur(200, 200, 20);
  fleur(300, 300, 50);
}

Types et opérations

10nombre

6.7nombre décimal (point, pas virgule)

"hello"chaîne de caractères

true / falsebooléen ; vrai ou faux

10 + 3   // 13
10 - 3   // 7
10 * 3   // 30
10 / 3   // 3.333…
10 % 3   // 1  ; le reste de la division

Le modulo

Pour le modulo %, pensez à la monnaie du pain : si vous avez 7€ et qu'un objet coûte 3€, vous achetez 2 objets et il vous reste 1€ ; donc 7 % 3 = 1. C'est particulièrement utile en design génératif : frameCount % 60 donne un compteur qui repart à zéro toutes les 60 frames.

0 % 3  // 0
1 % 3  // 1
2 % 3  // 2
3 % 3  // 0   ← ça recommence
4 % 3  // 1

i % 2  // 0 ; permet de tester si un nombre est pair
i % 5  // 0 une fois sur cinq

Comparer

===est égal à (comparaison)

!==est différent de

> <plus grand que, plus petit que

>= <=plus grand ou égal, plus petit ou égal

&&et

||ou

On va les utiliser généralement en combinaison avec des instructions if(), if() else() etc...

let n = 10;

if (n === 10) {
  // code à éxécuter si n est strictement égal à 10
}

if (n > 5) {
  // code à éxécuter si n est strictement supérieur à 5
} else if (n <= 10) {
  // code à éxécuter si n est inférieur ou égal à 10
} else {
  // code à éxécuter si les deux autres tests ont échoués
}

let f = 5.1;

if (n === 10 && f > 5) {
  // code à éxécuter si les deux comparaisons sont vraie
  // donc si n === 10 ET f > 5
}

if (n === 10 || f > 5) {
  // code à éxécuter si au moins une des deux comparaisons est vraie
  // donc si n === 10 OU f > 5
}

// on peut aussi stocker le résultat d'un test
let test = n < 10; // test sera égal à true si n < 10, autrement test sera égal à false

Un seul = assigne la valeur. Trois === compare les deux valeurs.

let n = 10;
console.log(n);
if (n = 5) {
  console.log(n);
}
if (n === 10) {
  console.log("n est égal à 10");
}
noLoop();

Pièges fréquents

→

Accolade non refermée

L'erreur signalée peut se trouver à la ligne suivante ou à la toute fin du fichier.

→

Sensibilité à la casse

Circle() n'existe pas, c'est circle() qu'il faut utiliser. Même chose pour les fonctions et les variables

→

Variable utilisée hors scope

x is not defined. La variable n'existe pas encore, ou elle a été déclarée dans un autre bloc.

Lire une erreur

Une erreur dans l'éditeur en ligne p5.js

La console vous donne trois informations : le type d'erreur, le message, et le numéro de ligne. Le numéro de ligne indique où le programme a échoué, pas toujours où est la faute.

console.log(size);        // afficher une valeur
console.log('x :', x);   // avec un texte

L'indentation et la "proprété" visuelle de votre code est un allié précieux. L'éditeur intègre un outil pour le faire automatiquement.

formes →