TXT RAIN. MOVE #1 Flashcards
Qu’est-ce que la variable LISTE dans le code ?let LISTE = ['Pluie', 'Texte', 'Souris', 'Déplacement'];
Réponse : LISTE est un tableau qui contient quatre chaînes de caractères : ‘Pluie’, ‘Texte’, ‘Souris’, ‘Déplacement’.
Qu’est-ce que la fonction setup() fait dans ce code ?
~~~
function setup() {
createCanvas(windowWidth, windowHeight);
textSize(32);
textAlign(CENTER);
}
~~~
La fonction setup() est une fonction intégrée de p5.js qui est exécutée une fois au début du programme. Ici, elle crée un canevas de la taille de la fenêtre, définit la taille du texte à 32 et aligne le texte au centre.
https://p5js.org/reference/#/p5/setup
https://p5js.org/examples/structure-setup-and-draw.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Qu’est-ce que la fonction draw() fait dans ce code ?
function draw() {
background(220);
for (let i = 0; i < motsEnCours.length; i++) {
let mot = motsEnCours[i];
mot.y += mot.speed;
text(mot.motActuel, mot.x, mot.y);
// Arrête le mot lorsqu'il atteint le bas de l'écran
if (mot.y > height) {
motsEnCours.splice(i, 1); // Supprime le mot de la liste
i--; // Décrémente l'indice pour compenser la suppression
}
}
}
La fonction draw() est une fonction intégrée de p5.js qui est exécutée en boucle après setup(). Ici, elle définit l’arrière-plan, parcourt le tableau motsEnCours, met à jour la position y de chaque mot en fonction de sa vitesse, affiche le mot à sa position actuelle, et supprime le mot du tableau s’il dépasse la hauteur de la fenêtre.
https://p5js.org/reference/#/p5/draw
https://p5js.org/examples/structure-setup-and-draw.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Que fait la fonction mouseMoved() dans ce code ?
function mouseMoved() {
let x = mouseX;
let y = mouseY;
let motActuel = random(LISTE);
let speed = random(2, 5);
motsEnCours.push({ motActuel, x, y, speed });
}
La fonction mouseMoved() est une fonction intégrée de p5.js qui est appelée chaque fois que la souris est déplacée. Dans ce code, elle récupère la position actuelle de la souris, sélectionne un mot au hasard dans la liste LISTE, définit une vitesse aléatoire entre 2 et 5, puis ajoute ces informations dans le tableau motsEnCours.
https://p5js.org/reference/#/p5/mouseMoved
https://p5js.org/examples/input-mouse-2d.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Que fait la méthode push() dans ce code ?
motsEnCours.push({ motActuel, x, y, speed });
Réponse : La méthode push() est une méthode intégrée de JavaScript qui ajoute un ou plusieurs éléments à la fin d’un tableau. Ici, elle ajoute un nouvel objet contenant le mot actuel, la position x et y de la souris, et la vitesse à la fin du tableau motsEnCours.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push
https://p5js.org/examples/data-array-objects.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Que fait la fonction random() dans ce code ?
let motActuel = random(LISTE); let speed = random(2, 5);
La fonction random() est une fonction intégrée de p5.js qui renvoie un nombre aléatoire. Ici, elle est utilisée pour sélectionner un mot aléatoire de la liste LISTE et pour définir une vitesse aléatoire entre 2 et 5.
https://p5js.org/reference/#/p5/random
https://p5js.org/examples/math-random.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Que fait la méthode splice() dans ce code ?
if (mot.y > height) {
motsEnCours.splice(i, 1); // Supprime le mot de la liste
i--; // Décrémente l'indice pour compenser la suppression
}
La méthode splice() est une méthode intégrée de JavaScript qui modifie le contenu d’un tableau en supprimant, remplaçant ou ajoutant des éléments. Ici, elle est utilisée pour supprimer le mot actuel du tableau motsEnCours lorsque le mot dépasse la hauteur de la fenêtre.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/splice
https://p5js.org/examples/data-array-2d.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Que fait l’opérateur += dans ce code ?
mot.y += mot.speed;
L’opérateur += est un opérateur d’affectation de JavaScript qui ajoute la valeur de droite à la valeur de gauche et affecte le résultat à la variable de gauche. Ici, il est utilisé pour augmenter la valeur de mot.y par la valeur de mot.speed.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation
https://p5js.org/examples/motion-moving-on-curves.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Que fait la fonction text() dans ce code ?
text(mot.motActuel, mot.x, mot.y);
La fonction text() est une fonction intégrée de p5.js qui dessine du texte à l’écran. Ici, elle est utilisée pour afficher le mot actuel à la position x et y du mot.
https://p5js.org/reference/#/p5/text
https://p5js.org/examples/typography-letters.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Que fait l’opérateur – dans ce code ?
` i–; `
L’opérateur – est un opérateur de décrémentation de JavaScript qui diminue la valeur de la variable de 1. Ici, il est utilisé pour décrémenter l’indice i pour compenser la suppression d’un mot du tableau motsEnCours.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques
https://p5js.org/examples/interaction-rollover.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Qu’est-ce que la fonction random() en p5.js et comment est-elle utilisée dans le code ?
let motActuel = random(LISTE);
La fonction random() est une fonction intégrée dans p5.js qui renvoie un nombre aléatoire. Dans le contexte du code, elle est utilisée pour sélectionner un élément aléatoire de la liste LISTE.
https://p5js.org/reference/#/p5/random
https://p5js.org/examples/math-random-chords.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Qu’est-ce que la fonction push() en JavaScript et comment est-elle utilisée dans le code ?
motsEnCours.push({ motActuel, x, y, speed });
Réponse à la question : La fonction push() est une méthode intégrée dans JavaScript qui ajoute un ou plusieurs éléments à la fin d’un tableau et renvoie la nouvelle longueur du tableau. Dans le contexte du code, elle est utilisée pour ajouter un nouvel objet contenant motActuel, x, y, et speed à la fin du tableau motsEnCours.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
https://p5js.org/examples/arrays-array.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Qu’est-ce que la fonction splice() en JavaScript et comment est-elle utilisée dans le code ?
motsEnCours.splice(i, 1);
La fonction splice() est une méthode intégrée dans JavaScript qui change le contenu d’un tableau en supprimant, remplaçant ou ajoutant des éléments. Dans le contexte du code, elle est utilisée pour supprimer l’élément à l’indice i du tableau motsEnCours.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
https://p5js.org/examples/arrays-array.html
https://editor.p5js.org/brunrhb/sketches/R7eS2bic-
Qu’est-ce que la fonction mouseMoved() en p5.js et comment est-elle utilisée dans le code ?
function mouseMoved() {
let x = mouseX;
let y = mouseY;
let motActuel = random(LISTE);
let speed = random(2, 5);
motsEnCours.push({ motActuel, x, y, speed });
}
La fonction mouseMoved() est une fonction intégrée dans p5.js qui est appelée chaque fois que la souris est déplacée. Dans le contexte du code, elle est utilisée pour créer un nouvel objet contenant motActuel, x, y, et speed chaque fois que la souris est déplacée, et pour ajouter cet objet à la fin du tableau motsEnCours.
https://p5js.org/reference/#/p5/mouseMoved
https://p5js.org/examples/input-mouse-2d.html
https://editor.p5js.org/
Qu’est-ce que mouseX et mouseY en p5.js et comment sont-ils utilisés dans le code ?
let x = mouseX; let y = mouseY;
mouseX et mouseY sont des variables intégrées dans p5.js qui stockent respectivement les coordonnées x et y du curseur par rapport
