P5js en ligne : https://alpha.editor.p5js.org/

Partie 1

p5.js (p5js.org) est une bibliothèque JavaScript qui reprend les concepts de l'excellentissime Processing (processing.org). p5.js va donc nous permettre de dessiner, de travailler sur des images, de travailler avec du texte, de faire des animations, de travailler sur des données...tout cela dans un navigateur web.

Avant d'entrer dans le vif du sujet, mettons en place notre environnement de travail :

Télécharger ici les fichiers du projet.

Celui-ci a la structure suivante : 

Vous décompresserez le fichier p5js.zip 

Vous utiliserez "Netbeans 8.2 -> Fichier -> ouvrir projet" et sélectionnerez le répertoire où vous l'avez décompressé.

Ensuite vous "Exécuterez le fichier" index.html (clic droit sur ce fichier) et vous devriez obtenir le résultat suivant :

La structure des fichiers index.html et script.js est la suivante :

Maintenant, vous n'aurez plus cas modifier le fichier js/script.js pour réaliser les activités demandées.

Partie 2

À faire vous même 2.1

"Copier-coller" le dossier "ex0" et renommez-le en "p5_a2_1". Vous allez travailler avec ce dossier "p5_a2_1". Dans la suite, vous devrez effectuer ce "copier-coller-renommer" pour chaque nouvel exemple sans que j'ai besoin de le préciser.

À l'aide d'un éditeur de texte, saisissez le code suivant dans le fichier "script.js"

script.js

function setup() {

}

function draw() {

}
        

Si vous testez cet exemple en cliquant sur le fichier "index.html", votre navigateur par défaut devrait se lancer, mais vous devriez obtenir une page blanche. Ceci est tout à fait normal, nous avons bien notre premier programme p5.js, mais celui-ci ne fait strictement rien.

Pourtant, la structure de base est déjà en place.

Nous avons 2 fonctions :

• la fonction "setup" qui sera exécutée une seule fois au "démarrage" du programme
• la fonction "draw" qui sera exécutée à chaque fois qu'une nouvelle image sera affichée par le navigateur

Pour l'instant, nous allons uniquement utiliser la fonction "setup". Nous reviendrons sur la fonction "draw" quand nous nous intéresserons aux animations.

La première instruction que nous allons voir, va nous permettre de créer une surface de dessin (canvas en anglais) :

createCanvas(300,200)
        

permet de créer une surface où nous allons pouvoir dessiner de 300 pixels de large et de 200 pixels de haut.

À faire vous-même 2.2

Saisissez et testez ce programme (en cliquant sur "index.html")

script.js

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

function draw() {

}
        

Comme vous pouvez le constater, cela ne change rien. En fait, la surface de dessin a bien été créée, mais comme sa couleur de fond est blanche...nous ne la voyons pas.

Nous allons modifier la couleur de fond pour la faire apparaitre (la gestion des couleurs sera vue un peu plus tard).

À faire vous-même 2.3

Saisissez et testez ce programme (en cliquant sur "index.html")

script.js

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

function draw() {

}
        

Comme vous pouvez le constater, la fenêtre de dessin est bien présente (encore une fois, nous reviendrons sur la fonction "background" et la gestion des couleurs un peu plus tard).

Afin de bien distinguer la surface de dessin du reste de la page, nous laisserons (au moins dans un premier temps) cette couleur de fond.

La fonction "point" va nous permettre de dessiner un point (pixel) sur l'écran

point(200,100)
        

Que représente le "(200,100)" dans "point (200,100)" ?

Tout simplement les coordonnées du point que nous voulons dessiner.

Qui dit coordonnées, dit axe x, axe y et origine O :

À faire vous-même 2.4

Saisissez et testez ce programme (en cliquant sur "index.html")

script.js

function setup() {
    createCanvas(800,600);
    background(240);
    point(400,300);
}

function draw() {

}
        

Observez bien, vous devriez voir un point apparaitre au milieu de la surface de dessin.

À faire vous-même 2.5

Modifiez les coordonnées du point créé dans le "À faire vous-même 2.4" comme bon vous semble, vérifiez le résultat.

À faire vous-même 2.6

En vous aidant d'une boucle, tracez un segment de droite. Vous devez obtenir ce résultat :

À faire vous-même 2.7

Tracez un segment de droite, vous devez obtenir ce résultat :

À faire vous-même 2.8

Tracez un segment de droite. Vous devez obtenir ce résultat :

À faire vous-même 2.9

Écrivez un programme permettant d'obtenir une "ligne en pointillée" comme ci-dessous :

Il est possible de modifier la couleur d'un point grâce à la fonction stroke

À faire vous-même 2.10

Saisissez, analysez et testez ce programme :

function setup() {
    createCanvas(800,600);
    background(240);
    stroke(255,0,0);
    point(400,300);
}

function draw() {

}
        

Comme vous pouvez le constater le point est toujours situé au centre de l'écran mais maintenant, il est de couleur rouge.

Que signifie le (255,0,0) du stroke ?

• Chaque pixel (chaque point) est constitué de 3 éléments (appelé aussi canal): un rouge, un vert et un bleu. C'est la somme de ces 3 couleurs qui permet d'obtenir un grand nombre de couleurs (synthèse additive)
• Classiquement, à chaque canal, on associe un nombre binaire codé sur 8 bits (soit donc 24 bits par pixel)
• Pour chaque pixel, on aura donc une valeur pour le rouge (comprise entre 0 et 255 puisque codé sur 8 bits), une valeur pour le vert (comprise entre 0 et 255) et une valeur pour le bleu (comprise entre 0 et 255). Quelques exemples : (0,0,0)=> noir ; (255,0,0)=> rouge ; (255,255,255)=> blanc ; (0,255,0)=> vert...

Toutes les combinaisons sont possibles, vous trouverez sur ce site un nuancier qui vous indiquera les valeurs des canaux Rouge, Vert et Bleu (RVB ou RGB en anglais).

À faire vous-même 2.11

Écrivez un programme permettant d'obtenir une "ligne bicolore" comme ci-dessous :

Vous devrez utiliser une boucle "for" et un "if/else".

À faire vous-même 2.12

Écrivez un programme permettant d'obtenir un drapeau tricolore comme ci-dessous :

Partie 3

Dans cette activité, nous allons découvrir d'autres fonctions qui vont nous permettre de dessiner différentes figures géométriques.

La fonction "line" permet de dessiner une ligne. Cette fonction prend 4 paramètres :

line(x1,y1,x2,y2);
        

avec :

• x1 coordonnée x du point de départ de la ligne
• y1 coordonnée y du point de départ de la ligne
• x2 coordonnée x du point d'arrivée de la ligne
• y2 coordonnée y du point d'arrivée de la ligne

À faire vous-même 3.1

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    line(200,0,200,400);
}
function draw(){

}
        

À faire vous-même 3.2

Codez un programme permettant d'obtenir ceci :

N.B. La fenêtre a pour dimension 200 par 200

À faire vous-même 3.3

Codez un programme permettant d'obtenir ceci :

N.B. La fenêtre a pour dimension 200 par 200

La fonction "ellipse" permet de dessiner des... ellipses. La fonction "ellipse" prend 4 paramètres.

ellipse(x,y,a,b);
        

avec :

(x,y) les coordonnées du centre de l'ellipse, a la "largeur horizontale" et b la "largeur verticale".

À faire vous-même 3.4

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    ellipse(200,200,100,50);
}
function draw(){

}
        

À faire vous-même 3.5

Codez un programme permettant d'obtenir un cercle au centre de la fenêtre.

La fonction "triangle", permet d'obtenir un... triangle. Cette fonction prend 6 paramètres :

triangle(x1,y1,x2,y2,x3,y3);
        

avec :

(x1,y1) les coordonnées du point 1, (x2,y2) les coordonnées du point 2 et (x3,y3) les coordonnées du point 3.

À faire vous-même 3.6

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    triangle(100,100,150,200,220,150);
}
function draw(){

}
        

À faire vous-même 3.7

Codez un programme permettant d'afficher un triangle rectangle. La position et la taille du triangle devront être aléatoires.

Pour obtenir un nombre aléatoire, il faut utiliser la fonction "random" :

random(20,50);
			

permet d'obtenir un aléatoire compris entre 20 et 50 (les 2 inclus).

var x=random(10,15);
			

La valeur contenue dans la variable x sera comprise entre 10 et 15

Pour afficher un quadrilatère, il faut utiliser la fonction "quad". Cette fonction prend 8 paramètres.

quad(x1,y1,x2,y2,x3,y3,x4,y4);
        

Ces 8 paramètres sont les coordonnées des 4 points.

À faire vous-même 3.8

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    quad(100,100,150,200,220,230,300,120);
}
function draw(){

}
        

La fonction "rect" permet de tracer des rectangles. Cette fonction prend 4 paramètres :

rect(x,y,a,b);
        

(x,y) les coordonnées du coin supérieur-gauche, a la "largeur horizontale" et b la "largeur verticale".

À faire vous-même 3.9

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    rect(200,200,100,60);
}
function draw(){

}
        

À faire vous-même 3.10

Codez un programme permettant d'afficher un carré de taille aléatoire. Le centre du carré devra se trouver au centre de la fenêtre

La fonction "arc" permet de dessiner un "morceau d'ellipse". La fonction arc prend 6 paramètres.

arc(x,y,a,b,angle_dep,angle_arr);
        

les 4 premiers paramètres sont les mêmes que pour la fonction "ellipse".

angle_dep correspond à "l'angle de départ" et angle_arr correspond à l'angle d'arrivée.

Attention, les angles doivent être donnés en radian, si vous désirez exprimer vos angles en degrés, il faudra utiliser la fonction "radians" :

angle_radian=radians(angle_degré);
        

Pour les angles, il faut considérer le sens horaire (et pas le sens anti-horaire comme le sens trigonométrique).

À faire vous-même 3.11

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    arc(200,200,100,50,radians(45),radians(270));
}
function draw(){

}
        

À faire vous-même 3.12

Codez un programme permettant d'afficher ceci :

La dernière fonction de dessin est beaucoup plus complexe à utiliser. La fonction "bezier" permet de dessiner une courbe de Bésier. Si le coeur vous en dit, vous en apprendrez plus sur les courbes de Bézier ici (je vous préviens, c'est très compliqué).

La fonction "bezier" prend 8 paramètres :

bezier(x1,y1,x2,y2,x3,y3,x4,y4);
        

(x1,y1) et (x4,y4) sont les coordonnées des points situés aux 2 extrémités de la courbe de Bézier. (x2,y2) et (x3,y3) sont les coordonnées des 2 points de contrôles.

À faire vous-même 3.13

Saisissez et

testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    bezier(100,100,250,50,220,230,250,120);
}
function draw(){

}
        

Si vous voulez essayez de comprendre le fonctionnement de cette fonction "bezier", le plus simple est de modifier les paramètres et observer le résultat après chaque modification.

Source : http://www.ac-grenoble.fr/disciplines/informatiquelycee/ICN_sec.html