En 2022, je serai...

Par défaut, l'éditeur P5.js a nommé mon projet "Nostalgic budget". C'est marrant, mais pas très descriptif de mon projet. Je vais le renommer "En 2022, je serai..." en appuyant sur le petit crayon 🖉:

Toi aussi, renomme ton projet.

Ensuite, tu as peut-être noté qu'au-dessus du code, il y a la mention sketch.js

À ton avis, qu'est-ce que ça fait là?

Indice

À gauche de sketch.js, tu as un petite flèche >. Clique sur la flèche. Ton projet a plus d'un fichier!

Pour l'instant, nous n'allons pas toucher les fichiers index.html et style.css, mais sache qu'ils existent.

Le dernier élément à noter au bas est la Console. Elle est très utile pour corriger notre code. Nous en parlerons plus tard.

Dans la partie code, tu vois deux fonctions: setup() et draw(). Ce sont les parties les plus importantes de ton animation. Toutes les animations faites avec la librairie P5.js ont ces deux fonctions. D'ailleurs, plusieurs autres librairies d'animation ont des fonctions très similaires.

Il est SUPER MEGA IMPORTANT de savoir où commence la définition d'une fonction et où elle termine. La définition commence avec l'accolade ouvrante { et se termine avec l'accolade fermante }. Tout ce qui est entre les deux accolades fait partie de la fonction.

La fonction setup() commence donc à la ligne 1 et se termine à la ligne 3.

Où commence et se termine la fonction draw()?

Réponse

La dernière chose à savoir, c'est que la fonction setup() ne s'exécute qu'une seule fois, tandis que la fonction draw() s'exécute plusieurs fois par seconde. Nous en reparlerons.

Pour lancer notre programme, rien de plus facile: il faut cliquer sur le bouton "Play".

Note que notre canevas (l'espace Preview) est devenu gris pâle et a la forme d'un carré:

On va maintenant changer la taille du canevas et sa couleur. Pour la taille, il faut aller dans la fonction setup(). Tu vas y voir l'instruction suivante:

createCanvas(400, 400);

Ça veut dire "construis un canevas de largeur 400 pixels et de hauteur 400 pixels". Si tu veux changer la largeur à 600 pixels, tu dois écrire ceci: createCanvas(600, 400);

Lance à nouveau ton programme, et tada! notre canevas est maintenant un rectangle.

Pour la couleur, c'est dans la fonction draw(). Tu vas y voir l'instruction suivante:background(220);

220, c'est le nombre qui représente la teinte de gris que tu vois. Remplace ce nombre par un autre nombre. N'importe lequel.

Plus tu te rapproches de 0, plus on tend vers le... noir. Et pour le blanc?

À la place d'un nombre, essaie ceci: 'red'

DÉFI: Essaie de changer la couleur du canevas en bleu! Et bleu pâle?

Commençons par ajouter un seul mot sur notre canevas 💪🏽

Comment faire? Quelle instruction donner à l'ordinateur?

Malheureusement, ce n'est pas comme en Scratch où tous les blocs sont regroupés par couleur.

Mais, mais, mais... il existe une sorte de dictionnaire de toutes les instructions que comprend la librairie P5.js. Ce dictionnaire se trouve à la page https://p5js.org/reference/

En allant vers le bas de la page, tu verras une section Typography

Clique sur l'instruction text(). La page est pas mal longue... et en anglais! Malheureusement, presque tout est en anglais quand il s'agit de code. Alors il vaut mieux s'habituer tout de suite, quitte à utiliser un dictionnaire!

Les plages d'explications commencent toujours avec un exemple, ce qui est super utile pour comprendre comment fonctionne une instruction. Le premier exemple commence avec les lignes suivante:

textSize(32);
text('word', 10, 30);
            

On va les copier et les coller dans la fonction draw() de notre code. Tadam, le mot word apparaît sur notre canevas.

Indice

En n'ajoutant aucune ligne à ton code, mais en changeant quelques paramètres, peux-tu faire en sorte d'afficher le mot de ton choix (plutôt que 'word'), d'agrandir la police et... de déplacer le mot vers le centre du canevas?

Pour que notre animation fonctionne, il nous faut plusieurs adjectifs qui vont défiler en permanence jusqu'à ce qu'on clique quelque part sur le canevas.

En JavaScript, une liste de mots, ça s'écrit avec des crochets [ ]. Chaque item dans la liste est séparé par une virgule ,. Si tu veux une liste d'adjectifs, ça s'écrit comme ceci: ['téméraire', 'gentil', 'stylé']. Note qu'ici aussi, on utilise des apostrophes autour de chaque adjectif. C'est important!

Notre liste faite, il faut la stocker dans une variable pour que l'ordinateur s'en rappelle et qu'on puisse la réutiliser plusieurs fois dans nos instructions. Voici comment on stocke dans une variable en JavaScript:

const adjectives = ['téméraire', 'gentil', 'stylé'];

const ça veut dire constante (ou variable)

adjectives c'est le nom de notre variable (les pros écrivent leurs noms de variables en anglais)

le symbole égal= ça veut dire "stocke la valeur"

['téméraire', 'gentil', 'stylé'] c'est notre liste et...

le point-virgule ; c'est la fin de notre instruction!

Tu peux placer le code de ta variable juste avant l'instruction text(), dans la fonction draw()

Au lieu d'afficher "ouais" en permanence, je vais utiliser l'instruction random() pour que l'ordinateur choisisse un mot au hasard dans la liste des adjectifs que je viens de créer. Essaie ceci:

              function draw() {
                background('red');
                textSize(100);
                const adjectives = ['téméraire', 'gentil', 'stylé'];
                text(random(adjectives), 100, 200);
              }
            

Attention à tes yeux!!!

Nous voyons plusieurs adjectifs défiler hyper rapidement! Pourtant nous n'avons pas donné des milliers d'instructions à l'ordinateur pour qu'il le fasse.

👇🏽 Regarde ce qui se passe si je mets tout le code de la fonction draw() dans la fonction setup():

On ne voit qu'un adjectif!

Rappelle-toi ce qu'on disait avant! L'ordinateur n'exécute la fonction setup() qu'une seule fois tandis que la fonction draw() exécutée plusieurs fois par seconde. En général, c'est 60 fois par seconde! Super rapide!

On va remettre notre code dans la fonction draw() et on va diminuer la vitesse de défilement et réduisant le nombre de fois que l'ordinateur exécute la fonction draw() par seconde.

Il faut utiliser l'instruction frameRate() dans la fonction setup(). Si tu veux exécuter 5 fois la fonction draw() par seconde, par quoi devrais-tu remplacer les XXXX dans ce code?

function setup() {
  createCanvas(600, 400);
  frameRate(XXXX);
}
          

🎉 Félicitations d'être arrivé aussi loin!

Nous allons maintenant faire en sorte que le défilement des adjectifs cesse lorsqu'on clique quelque part sur l'écran.

Pour cela il faut créer une nouvelle fonction à la toute fin de notre code:

function mouseClicked() {
  noLoop();
}

👇🏽 Voilà le résultat final :

Le Rouge et le Noir, c'est pas mal, mais ce n'est peut-être pas ta combinaison de couleurs préférées. En passant, bravo si tu as reconnu la référence littéraire!

Choisir de belles couleurs harmonieuses, c'est tout un défi. Au Tic Tac Lab, on aime beaucoup le site coolors. Si tu cliques sur le bouton Start the generator!, on va te proposer au hasard une palette de couleurs qui vont bien ensemble:

Si la palette ne t'inspire pas, appuie sur la touche espace de ton clavier et une nouvelle palette te sera proposée. Tu peux répéter autant de fois que tu le souhaites.

La palette que je vois m'inspire et je vais prendre la couleur Inchworm pour mon texte et la couleur English violet pour mon arrière plan.

Au-dessus du nom de chaque couleur, il y a le code de la couleur, ou plus exactement, son code hexadécimal. Sais-tu d'où vient ce nom?

Indice

C'est le code hexadécimal de la couleur que tu vas utiliser dans ton projet. Pour ton arrière-plan, au lieu de:

background('red');

tu peux utiliser le code hexadécimal précédé d'un dièse (hashtag):

background('#44344f');

Pour changer la couleur du texte, on peut également utiliser le code hexadécimal avec la fonction fill().

Si tu cliques sur le lien de la fonction fill(), tu verras des exemples. Teste-le toi-même! Si tu n'y arrives pas, voici un petit indice...

Indice

Bien sûr, on parle de police au sens de type de calligraphie (font en anglais), pas au sens de forces de l'ordre! 👮‍♀️👮🏾

Pour changer de police, cela se fait en plusieurs étapes:

1. Trouver une police qui nous plaît
2. Utiliser la police dans notre code JavaScript

Première étape: trouver une police. Tu peux trouver des polices gratuites sur Google Fonts.

Dans Google Fonts, une fois que tu as trouvé une police qui te plaît, clique sur le bouton + Select this style:

Tu devrais voir apparaître une boîte comme ceci:

Copie le bout de code qui commence avec <link href="..."

Et colle-le dans le fichier index.html, juste en-dessous de la ligne où tu vois <head>:

Copie ensuite le bout de code qui commence avec font-family:

Et colle-le dans le fichier style.css en ajoutant p {}:

Dernière étape: le JavaScript! Dans le fichier sketch.js, rajoute la ligne suivante dans le code de la fonction setup():

            function setup() {
            createCanvas(400, 400);
            textFont("Syne Tactile");
          }
          

Bravo!!! Tu viens de coder ta première animation en JavaScript!

N'hésite pas à la partager en allant dans le menu File, tu verras un bouton Share:

Tu peux copier le lien "Present":

Et l'intégrer dans un post en ajoutant les hashtags #meetandcode et #tictaclab :

Tu as peut-être noté que le défilement des mots n'est pas parfaitement régulier. Parfois, on dirait que ça "bloque" sur un mot. Peux-tu deviner pourquoi?

Indice

Deux solutions sont envisageables:

1. On continue de choisir les mots aléatoirement, mais si le mot choisi est le même que le précédent, alors on en choisit un autre.
2. On fait défiler les mots dans l'ordre de notre liste et lorsqu'on arrive à la fin de la liste, on recommence au début.

Voici quelques pistes pour coder la deuxième solution. Premièrement, pour faire défiler les mots dans l'ordre de notre liste (array), on peut utiliser l'index des éléments de notre liste.

Au lieu de choisir un mot aléatoirement de notre liste, tu peux maintenant choisir le premier mot de notre liste (index 0) ainsi; text(adjectives[0], 100, 200);

Chouette, mais plus rien ne défile. On reste bloqué sur le premier mot. Pour avoir le second mot, il faudrait text(adjectives[1], 100, 200);

Or, si tu combines les deux lignes de code

              
                text(adjectives[0], 100, 200);
                text(adjectives[1], 100, 200);
              
            

le résultat n'est pas terrible:

Constat: on ne peut pas utiliser l'instruction text() deux fois dans la fonction draw()

Comme il faut que l'index change à chaque fois que la fonction draw() est exécutée, on va créer une variable index qu'on va incrémenter.

Observe ce code:

              
                let index = 0;
                text(adjectives[index], 100, 200);
                index++;
              
            

Sur la première ligne, on déclare notre variable index et on lui assigne la valeur 0. Sur la deuxième ligne, on utilise la valeur de la variable index pour accéder à l'élément 0 de la liste adjectives. Finalement, sur la troisième ligne, index++ veut dire qu'on ajoute 1 à la variable index et qu'on sauvegarde cette nouvelle valeur en mémoire.

C'est comme si on utilisait ce bloc en Scratch:

On lance notre code et... l'animation est toujours bloquée sur le premier mot de la liste (à l'index 0).

Pourtant si tu utilises l'instruction console.log(index); comme ceci, l'index semble bien passer à 1!

S'il ne passe jamais à 2, c'est qu'à chaque fois que la fonction draw() est exécutée (plusieurs fois par secondes), l'ordinateur repasse par l'instruction let index = 0;. Dans la mémoire de l'ordinateur, la variable index prend la valeur 0 puis 1 puis 0 puis 1 puis 0 puis 1 puis 0... Regarde:

Conclusion: on ne peut pas garder l'instruction let index = 0; dans la fonction draw() Cette instruction ne doit s'exécuter qu'une seule fois! À ton avis, où doit-on placer cette instruction dans notre code?

Indice

Nos trois premiers mots apparaissent, et puis plus rien! Si tu as gardé l'instruction console.log(index);, tu peux voir le message d'erreur suivant dans la console:

L'ordinateur se plaint à partir de l'index 3. Normal, il n'y a aucun mot qui correspond à l'index 3 dans ma liste, car ma liste ne comprend que 3 adjectifs! Le dernier index, c'est l'index 2.

Du coup, il faut empêcher l'ordinateur d'ajouter un à la variable index, si la variable a déjà la valeur du dernier index de la liste. Voici comment on écrit une condition en JavaScript:

              
                if (index == adjectives.length - 1) {
                  // INSTRUCTIONS À EXÉCUTER
                }
                else {
                  // D'AUTRES INSTRUCTIONS À EXÉCUTER
                }
              
            

En bon français, ce code veut dire "si (if) l'index est égal à (==) la longueur de la liste des adjectifs moins un (adjectives.length - 1), alors exécute ces instructions, sinon (else), exécute ces autres instructions".

À toi de trouver les bonnes instructions!!!

Nos mots défilent maintenant en ordre et de façon régulière!