p5.js va vous permettre de vous initier à la programmation informatique et à la création multimédia pour le web. À partir d’instructions informatiques, vous allez pouvoir dessiner, réaliser des animations 3D…
Vous pouvez télécharger gratuitement l’éditeur de code sur le site p5.js Editor et trouver différents exemples et références ici

Pour pouvoir donner des instructions à l’ordinateur, nous allons utiliser un langage de programmation : ici le javaScript et un éditeur de code.
JavaScript :
Un éditeur de code est un logiciel qui permet d’éditer des fichiers texte, on peut l’utiliser pour programmer dans plusieurs langages (html, css, php, c++, etc.) ex: NodePad++, Sublim text…

1_ L’interface de l’Editeur de code

Appuyez sur le bouton Play pour jouer le programme dans la fenêtre du navigateur.

2_ Les instructions et les méthodes

p5.js propose un grand nombre de fonctionnalités prédéfinies appelées méthodes. Ces méthodes vous permettent de déterminer la taille de la fenêtre de visualisation, de changer la couleur, d’écrire un texte, etc. Ces méthodes ont chacune un nom spécifique. Pour les utiliser, il suffit de taper leur nom dans la fenêtre d’édition en respectant les majuscules et les minuscules et d’ajouter ensuite des parenthèses. Il sera parfois nécessaire de préciser certaines valeurs à l’intérieur de ces parenthèses (une couleur, une position, une taille, etc.).

Au départ, l’éditeur vous propose deux fonctions setup() et draw().
. La fonction setup() : permet de définir, de configurer notre espace de dessin.
. La fonction draw() : permet d’animer votre espace de dessin.

3_ Les coordonnées

Lorsque l’on travaille en 2 dimensions (2D), on utilise deux axes de coordonnées x et y avec le pixel comme unité.

4_ Quelques méthodes pour débuter

4_1 Propriétés de votre espace de dessin

createCanvas(largeur,hauteur);

Le canvas c’est votre espace de dessin, avec cette fonction createCanvas() vous pouvez changer la taille de votre canvas. Cette méthode prend deux paramètres : la largeur puis la hauteur en pixels.

  function setup() {
      // Détermine la taille de votre zone de travail
      createCanvas(800,600);
  }

background(valeur);

Méthode permettant de déterminer la couleur de fond de la fenêtre de visualisation.
Les valeurs vont de 0 à 255.
> une seule valeur = niveaux de gris.
> trois valeurs = couleur de Rouge + valeur de Vert + valeur de Bleu.

  function setup() {
      // Détermine la taille de votre zone de travail
      createCanvas(800,600);
      // le fond de la fenêtre de visualisation est noir
      background(0);
      // le fond de visualisation est rouge (R=255, V=0, B=0)
      background(255,0,0);
  }

Nous pouvons aussi ajouter une couche alpha, c’est à dire pouvoir donner une opacité/transparence à notre couleur avec une quatrième valeur : background(255,0,0,125);

4_2 Dessiner

point(x,y)

Un point correspond à un pixel sur notre espace de dessin.

line(x1,y1,x2,y2)

Pour dessiner le segment [AB], on utilise la méthode line(xA,yA,xB,yB) avec les coordonnées du point A(xA,yA) et les cordonnées du point B(xB,yB).

rect(x,y,largeur,hauteur)

Un rectangle se dessine à l’aide de la méthode rect(x,y,largeur,hauteur). Cette méthode attend 4 valeurs:
. la première paire de valeurs x et y correspond au coin supérieur gauche du rectangle.
. la seconde paire correspond à la largeur et la hauteur de notre triangle (ou de notre carré si largeur=hauteur).

ellipse(x,y,diamètre horizontal, diamètre vertical)

La méthode ellipse attend deux arguments x et y pour déterminer le centre de votre ellipse et deux autres pour déterminer la largeur de l’ellipse (diamètre sur l’axe horizontal) et la hauteur de l’ellipse (diamètre sur l’axe vertical).

4_3 Le texte

text("monTexte", positionX, positionY);

Méthode permettant de dessiner un texte aux coordonnées (x,y) dans la fenêtre de visualisation.

textSize(valeur);

Méthode permettant de déterminer la taille d’un texte en pixels.

4_4 Trait de contour et couleur de remplissage

strokeWeight(valeur pixel) Graisse d’un trait

La méthode strokeWeight() permet de définir la graisse d’un trait, exprimée en pixels. La valeur par défaut est 1.

fill() et stroke()

La méthode fill() correspond à la couleur de remplissage d’une forme et stroke() correspond à la couleur du trait de contour de la forme. Par défaut, la couleur de remplissage est le blanc fill(255), la couleur des contours est le noir stroke(0).

noFill() et noStroke()

On peut supprimer la couleur de contour et/ou la couleur de remplissage d’une forme avec ces deux méthodes.

4_5 Aléatoire

random(valeur);

Méthode permettant de générer aléatoirement un nombre (décimal) compris entre 0 et une ‘valeur’.

4_6 Interactivité avec la souris

mouseX, mouseY

Pour l’instant nous nous sommes seulement contenté d’afficher des formes. Nous allons essayer d’ajouter à notre programme une couche d’interactivité avec les méthodes mouseX et mouseY, qui permettent de récupérer respectivement la position horizontale et verticale de la souris. Mais pour que le script puisse répondre nous allons devoir utiliser la fonction draw() qui permet de récupérer des informations à chaque itération (le canevas s’actualise perpetuellement), car setup() n’affiche qu’une seule fois des images.

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

function draw(){
   //dessine des cercle avec le curseur
   ellipse(mouseX,mouseY,50,50); 
}

5_ Programmer : variables, boucles et conditions

5_1 Notion de variable

Dans un programme informatique, il est souvent nécessaire de stocker des valeurs (un nom, le résultat d’un calcul…), nous allons utiliser pour conserver ces valeurs des variables.
Une variable est une sorte de boîte repérée par le programme (l’ordinateur) à l’aide d’une adresse (nom). Pour avoir accès au contenu de cette variable (boîte), il suffit de la désigner par son adresse (nom).
Exemple : var maVariable = valeur

function setup() {
    createCanvas(800,800);
}
function draw(){
   // Création d'une variable r avec une valeur 
   // aléatoire comprise entre 10 et 50
   var r=random(10,50);
   // Dessine des cercle avec le rayon contenu 
   // dans la variable r
   ellipse(mouseX,mouseY,r,r); 
}

5_2 Structure itérative : boucle for()

Une boucle (ou itération) permet d’exécuter une série d’instructions plusieurs fois de suite.

function setup() {
    createCanvas(800,800);
    textSize(100);
    // Création d'une boucle
    for(var i=0; i<10; i=i+1){
        text("T",random(800),random(800));
    }

}

Dans cet exemple, l’instruction entre accolades est exécutée dix fois et le programme dessine donc dix lettres ‘T’ avec des coordonnées aléatoires.
. lors de la première exécution i prend la valeur 0 (var i=0);
. à chaque passage consécutif, sa valeur est augmenté de 1 (i=i+1);
. ceci temps que i est inférieur à 10 (i<10).

5_3 Structures conditionnelles : if() et else

if() permet de déterminer si une affirmation est vraie ou fausse (0/1, true/false), puis le cas échéant d’exécuter une suite d’instruction.

if(condition à vérifier){
// code à exécuter si la condition est vraie
}

Nous pouvons compléter le code avec l’expression else, qui proposera un code alternatif à exécuter si la condition n’est pas remplie.

if(condition à vérifier){
// code à exécuter si la condition est vraie
}else{
// Code à exécuter si la condition est fausse
}

Exemple :

function setup() {
   createCanvas(800,800);
}
function draw(){
   if(mouseX>width/2){
     fill(0);
     stroke(255);
   }else{
     fill(255);
     stroke(0);
   }
   ellipse(mouseX,mouseY,50,50); 
}

6_ Les Transformations : translation et rotation

Jusqu’à présent, nous avons dessiné des lettres dans la fenêtre visualisation, en nous repérant toujours par rapport au coin supérieur gauche de la fenêtre.

La lettre ‘A’ est dessinée aux coordonnées (100,100) par rapport au repère (0,0) en haut à gauche de la fenêtre de visualisation.

Il est possible dans Processing, de déplacer et de faire pivoter ce système de coordonnées.

6_1 Translation : translate(positionX,positionY);

Le changement de la position de l’origine se fait par la commande translate(). Nous pouvons nous déplacer sur l’axe x (« horizontalement ») et sur l’axe y (« verticalement ») et nous allons indiquer à translate() de « combien de pixels » nous souhaitons nous déplacer sur chacun des axes.

Nous déplaçons le repère (0,0) de 50px sur l’axe des x et de 50px sur l’axe des y. Cette fois, la lettre ‘A’ est toujours dessinée aux coordonnées (100,100), mais elle n’occupe plus la même position sur la fenêtre de visualisation.

6_2 Rotation : rotate(angle);

Nous allons maintenant appliquer une rotation sur les axes de notre repère. Grâce à la commande rotate(), les axes x et y peuvent changer d’orientation. rotate() prend en paramètre un nombre qui va représenter l’angle de rotation, c’est-à-dire de « combien » nos axes vont tourner par rapport à notre fenêtre. Des valeurs positives indiquent une rotation dans le sens des aiguilles d’une montre.

exemple : Nous allons dessiner une lettre ‘A’ avec un angle de rotation de PI/4 (45°).

6_3 Mémoriser et réinitialiser le système de repères

Les transformations s’accumulent au fur et à mesure de l’utilisation des méthodes translate() et rotate(). Nous allons voir à présent comment sauvegarder le système de repères à un moment donné et comment le restaurer ensuite.
La méthode push() permet de mémoriser le système de repères.
La méthode pop() permet de rétablir le système de repères tel qu’il a été mémorisé avec la méthode push().

7_ Applications

Ce dessin est obtenu par la répétition de cercles.

> Déplaçons l’origine de notre repère au centre de notre espace de dessin.

> L’origine de notre repère est au centre de notre espace de dessin.

> Dessinons un cercle dont le centre est une points aux coordonnées x=200, y=0, et de diamètre horizontal et vertical de 400.

> Avec du code :

 
...
// Couleur de l'arrière plan blanc
background(255);
// Dessin sans fond de remplissage
noFill();
// Déplacer l'origine du repère de coordonnées au centre 
// de notre espace de travail
translate(width/2,height/2);
 // Dessiner un cercle de centre (200,0) et de diamètre 400
ellipse(200,0,400,400);
// Rotation de (360°/100) soit (2*PI/100)
rotate(2*PI/100);

> Résultat de notre programme :

> Appliquons à présent une rotation de 45° (soit PI/4 en radians) dans le sens des aiguilles d’une montre.

> Attention notre espace de dessin lui n’a pas bougé, ce sont uniquement nos repères de coordonnées qui ont tournés de 45°. Voici ce que l’on voit dans notre fenêtre :

> Dessinons un nouveau cercle de centre (200,0) et de diamètre 200 :

> Il suffit de répéter plusieurs fois cette opération pour obtenir notre exemple de départ.
Mais cette démarche risque d’être un peu longue si nous devons écrire toutes les étapes…
Nous allons demander à l’ordinateur de se charger de cette tâche répétitive!
Utilisons pour ceci la boucle for :

 
...
// Couleur de l'arrière plan blanc
background(255);
// Dessin sans fond de remplissage
noFill();
// Déplacer l'origine du repère de coordonnées au centre 
// de notre espace de travail
translate(width/2,height/2);
// Utilisons une boucle for() pour répéter 100 fois le dessin 
// du cercle et la rotation
for(var i=0;i<100;i=i+1){
    // Dessiner un cercle de centre (200,0) et de diamètre 400
    ellipse(200,0,400,400);
    // Rotation de (360°/100) soit (2*PI/100)
    rotate(2*PI/100);
}

Voici le résultat de notre programme :

Remarquez qu’il est légèrement différent de l’exemple de départ, en effet j’ai modifié la taille du diamètre.

Pour faciliter nos manipulations, plaçons dans des variables certains paramètres de notre dessin :

 
// Création des variables
var x=200; // Position x du centre 
var d=400; // Diamètre du cercle
var n=100; // Nombre de répétition

function setup(){
    // Création de l'espace de dessin
    createCanvas(800,800);
    // Arrière plan blanc
    background(255);
    // Pas de couleur de remplissage
    noFill();
    // Déplacement de l'origine au centre de l'espace de dessin
    translate(width/2,height/2);
    // Utilisons une boucle for() pour répéter n fois le dessin du 
    // cercle et la rotation
    for(var i=0;i<n;i=i+1){
      // Dessiner un cercle de centre (x,0) et de diamètre d
      ellipse(x,0,d,d);
      // Rotation de (360°/n) soit (2*PI/n)
      rotate(2*PI/n);
    }
}

Vérifiez en executant le programme que le résultat est inchangé…

Vous pouvez à votre tour modifier les paramètres de votre dessin : position du centre du cercle, diamètres, nombre de rotation ainsi que l’angle de rotation, formes, couleurs…

Il est préférable avant toute modification, de réfléchir sur papier (doc papier joint), ensuite de vérifier à l’aide du programme que votre intuition était bonne. C’est vous qui devez maîtriser le programme et donc l’ordinateur, et non l’inverse…