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).
À 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.
À 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, ces 2 balles devront disparaitre.
- 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 :