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

Partie 4 : 

Dans cette activité, nous allons faire du "coloriage".

Pour chaque figure dessinée, il y a 2 choses à considérer :

• la couleur du contour
• la couleur de "remplissage"

Le contour sera géré par la fonction "stroke", le "remplissage" sera géré par la fonction "fill".

Ces 2 fonctions prennent en paramètre les 3 canaux rouge, vert, bleu.

À faire vous-même 4.1

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    stroke(255,0,0);
    fill(0,0,0);
    ellipse(200,200,50,50);
}
function draw(){

}
        

Vous pouvez vérifier que le contour du cercle est rouge et que "l'intérieur" du cercle est noir.

Comme vu précédemment, si les 3 canaux R,V,B sont identiques, il est possible de mettre un seul paramètre (mettre fill(0) à la place de fill(0,0,0).

La fonction "noStroke" permet de supprimer le contour, la fonction "noFill" permet de rendre l'intérieur d'une figure incolore (comme si on ne coloriait pas l'intérieur de la figure).

À faire vous-même 4.2

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    stroke(255,0,0);
    noFill();
    ellipse(200,200,50,50);
    noStroke();
    fill(0);
    rect(30,30,30,30);
}
function draw(){

}
        

Il est possible de jouer sur l'épaisseur du contour avec la fonction "strokeWeight" qui prend en paramètre l'épaisseur du trait en pixel.

À faire vous-même 4.3

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    strokeWeight(5);
    stroke(255,0,0);
    fill(0,0,0);
    ellipse(200,200,50,50);
}
function draw(){

}
        

Il est possible de modifier la transparence d'une figure en ajoutant un 4e paramètre à la fonction "fill". Plus ce paramètre sera grand et plus la figure sera opaque.

À faire vous-même 4.4

Saisissez et testez ce code

function setup(){
    createCanvas(400,400);
    background(240);
    noStroke();
    fill(0,255,0);
    rect(200,200,50,50);
    fill(255,0,0,200);
    ellipse(200,200,50,50);
}
function draw(){

}
        

À faire vous-même 4.5

Créez un programme permettant d'afficher 100 disques à l'écran. La taille de chaque disque devra être aléatoire (mais comprise entre 20 et 50). La couleur et la transparence de chaque disque devront aussi être aléatoires.

La fonction "floor" permet d'arrondir un nombre :

floor(4.6);
        

donnera 5

Partie 5 :

p5js propose 3 fonctions très importantes (mais relativement complexes à prendre en main) :

• la fonction "translate" qui permet de translater les axes de coordonnées.
• la fonction "rotate" qui permet de faire faire une rotation aux axes de coordonnées.
• la fonction "scale" qui permet de modifier l'échelle.

Il faut bien que vous compreniez que ces fonctions agissent sur le système de coordonnées et pas directement sur les dessins.

Commençons par la fonction "rotate" qui permet de "tourner" le système de coordonnées d'un certain angle. Cette fonction prend un seul paramètre : l'angle de rotation (en radian, la fonction "radians" permet de convertir les degrés en radian).

Au départ nous avons :

après avoir appliqué la fonction "rotate" :

rotate(α);
        

nous obtenons ceci :

À faire vous-même 5.1

Saisissez et testez ce code

function setup(){
    createCanvas(200,200);
    background(240);
    rotate(radians(20));
    rect(60,50,20,20);
}
function draw(){

}
        

sans le "rotate"

avec le "rotate"

À faire vous-même 5.2

Saisissez et testez ce code

function setup(){
    createCanvas(200,200);
    background(240);
    rect(60,50,20,20);
    rotate(radians(20));
}
function draw(){

}
        

Comme vous pouvez le constater, le "rotate" n'a aucune action sur un élément déjà dessiné au moment de son application.

À faire vous-même 5.3

Créez un programme permettant d'obtenir ceci :

La fonction "translate" permet de faire faire une translation au système de coordonnées :

avant

après un :

translate(dx,dy);
        

on obtient ceci

À faire vous-même 5.4

Saisissez et testez ce code

function setup(){
    createCanvas(200,200);
    background(240);
    translate(80,30);
    rect(60,50,20,20);
}
function draw(){

}
        

sans le "translate"

avec le translate

La fonction "scale" ne devrait pas vous poser de difficultés :

À faire vous-même 5.5

Saisissez et testez ce code

function setup(){
    createCanvas(200,200);
    background(240);
    scale(2);
    rect(60,50,20,20);
}
function draw(){

}
        

"scale" est l'équivalent d'un zoom (ou d'une loupe) si son argument est supérieur à un. Je vous laisse deviner l'effet d'un argument compris entre 0 et 1.

Il est possible de combiner "rotate", "translate" et "scale" (attention l'ordre d'application à son importance) :

À faire vous-même 5.6

Créez un programme permettant d'obtenir ceci : (le programme doit faire moins de 10 lignes).

La fonction "push" permet d'effectuer une "sauvegarde" de l'état du système de coordonnées au moment où cette fonction est exécutée. "pop" restaure cette sauvegarde

À faire vous-même 5.7

Saisissez et testez ce code

function setup(){
    createCanvas(200,200);
    background(240);
    translate(80,30);
    fill(255,0,0);
    rect(60,50,20,20);
    push();
    translate(0,50);
    fill(0,255,0);
    rect(60,50,20,20);
    pop();
    fill(0,0,255);
    rect(80,50,20,20);
}
function draw(){

}
        

Comme vous devez le constater le carré bleu n'a pas "bénéficié" de la même "translation vers le bas" que le carré vert. Le "pop" a en effet "annulé" cette "translation vers le bas" (toutes les transformations comprises entre un "push" et un "pop" sont annulées au moment du "pop").

Partie 6 :

Dans cette activité, nous allons commencer à nous intéresser aux animations.

Comme déjà évoqué précedement, la fonction "draw" est appelée à chaque image

Qu'est-ce que j'entends par "appelée à chaque image" ?

Quand vous jouez à un jeu sur votre ordinateur (et que votre ordinateur manque de "puissance"), il arrive parfois que l'affichage saccade (on parle de "lag"), pourquoi ?

Il faut savoir que "l'ordinateur" doit, plusieurs dizaines de fois par seconde (le nombre d'images affichées par seconde est souvent désigné par l'acronyme FPS (Frames per second)), afficher une nouvelle image à l'écran.

Cela demande beaucoup de calculs (complexes) au microprocesseur central (CPU).

Petite parenthèse : c'est d'ailleurs pour cela qu'aujourd'hui, cette tâche est très souvent laissée à un microprocesseur spécialisé dans ce genre de calcul : le GPU (Graphics Processing Unit, ce microprocesseur spécialisé se trouve sur la carte graphique de votre ordinateur). Quand ni le CPU, ni le GPU n'arrivent à afficher suffisamment d'images par seconde, votre jeu saccade.

En matière de programmation, il faut, une fois que la nouvelle image est prête à être à afficher (après par exemple avoir bougé de quelques pixels le personnage principal), envoyer l'ordre au CPU d'afficher cette nouvelle image (après avoir fait tous les calculs nécessaires).

On retrouve ici le principe du dessin animé : l'ordinateur affiche à l'écran une succession d'images fixes, si la fréquence d'affichage est assez importante (30 FPS pour que cela paraisse fluide), l'utilisateur aura l'illusion du mouvement.

p5js propose donc la fonction "draw", cette fonction "draw" sera appelée à chaque image.

À faire vous-même 6.1

Saisissez, analysez et testez ce code

var r;
var v;
function setup(){
    createCanvas(400,400);
    noStroke();
    fill(0);
    r=2;
    v=2;
}
function draw(){
  background(240);
  ellipse(200,200,2*r,2*r);
  if (r>200 || r<2){
    v=-v;
  }
  r=r+v;
}
        

Cette partie du code :

background(240);
ellipse(200,200,2*r,2*r);
if (r>200 || r<2){
    v=-v;
}
r=r+v;
        

se trouve dans la fonction "draw". Le code ci-dessus sera donc exécuté à chaque image.

Le "background(240)" permet d'effacer l'écran à chaque nouvelle image (juste avant de redessiner le disque avec le "ellipse(200,200,2*r,2*r);". Le principe est donc simple : à chaque image, on efface tout et on redessine.

N.B. Remarquez que les déclarations des variables r et v ("var r;" et "var v;") ont été faites en dehors de la fonction "setup". Si ces déclarations avaient été faites dans la fonction "setup" nous aurions alors eu des variables locales à la fonction "setup", r et v n'auraient donc pas pu être utilisées dans la fonction "draw".

Par défaut, p5js essaye de maintenir 60 FPS ("essaye" car si les éléments à afficher sont trop complexes, le nombre de FPS diminue).

La fonction "frameRate" permet d'imposer le nombre de FPS. Cette fonction prend un paramètre, le nombre de FPS désiré.

À faire vous-même 6.2

Ajouter un

frameRate(5);
        

dans la fonction "setup" du programme écrit dans le "À faire vous-même 6.1"

Comme vous pouvez le constater, l'animation est maintenant beaucoup moins fluide.

À faire vous-même 6.3

Créez un programme permettant d'avoir une balle rouge (créée avec la fonction "ellipse") qui traverse la fenêtre de gauche à droite (cliquez sur  pour relancer l'animation).

run

À faire vous-même 6.4

Repartez du code du "À faire vous-même 6.3". Désormais, la balle doit rebondir contre les bords de la fenêtre

À faire vous-même 6.5

Créez un programme permettant d'obtenir ceci :

Il est recommandé d'écrire une ou des fonctions afin de rendre le code plus clair.

À faire vous-même 6.6

En vous inspirant du programme créé dans le "À faire vous-même 6.4", écrivez un programme permettant à la balle de se déplacer en diagonal. La position de départ, la vitesse de départ ainsi que la direction de départ devront être aléatoires. Les rebonds sur les bords de la fenêtre devront rester réalistes.

run

À faire vous-même 6.7

Votre programme devra maintenant permettre à 2 balles (une rouge et une verte) de se déplacer (position de départ, vitesse de départ et direction de départ seront aléatoires pour les 2 balles). En cas de collision entre les 2 balles, l'animation s'arrette (utiliser la fonction noLoop() ).

run

• On pourra considérer qu'il y a collision si la distance entre les centres des balles est inférieure à une certaine valeur que vous devrez déterminer.
• Avec Processing, pour avoir la racine carrée de X, il suffit d'écrire sqrt(X). Pour avoir le carré de X, il suffit d'écrire sq(X).

Il est aussi possible d'utiliser les transformations ("translate", "rotate" et "scale") dans une animation.

À faire vous-même 6.8

Créez un programme permettant d'obtenir l'animation suivante :

À faire vous-même 6.9

Créez un programme permettant d'obtenir l'animation suivante :

À faire vous-même 6.10

Créez un programme permettant d'obtenir l'animation suivante :

Sources : http://www.ac-grenoble.fr/disciplines/informatiquelycee/ICN_sec.html
               https://creative-coding.decontextualize.com/making-games-with-p5-play/