1NSI : Introduction à p5.js⚓︎
Il n'est pas nécessaire d'installer quoi que ce soit, car il existe un éditeur p5.js en ligne : https://editor.p5js.org/
- La Documentation Générale
est ici : https://p5js.org/
- La Documentation de Référence
est ici : https://p5js.org/reference/
Les fonctions setup()
et draw()
⚓︎
- La fonction
setup()
inititalise le document/canevas : cette fonction n'est exécutée qu'une seule fois - La fonction
draw()
s'exécute régulièrement, et permet d'animer le document: cette fonction est exécutée périodiquement (selon un certain framerate), à l'infini, jusqu'à ce qu'elle soit arrêtée (bouton carré)
Canevas & Fonds d'Écran⚓︎
function setup() {
// cette fonction n'est exécutée qu'une seule fois
createCanvas(400, 400);
background(50);
}
function draw() {
// cette fonction boucle à l'infini, jusqu'à ce qu'elle soit arrêtée (bouton carré)
}
où
createCanvas(Largeur, Longueur)
crée un canevas/ canvas
(sorte de tableau sur lequel on peut écrire et animer des objets)
background(couleur)
définit cettecouleur
comme couleur de fond, où la syntaxe est à choisir parmi :background(r,g,b)
oùr
,g
,b
sont les composantes RGB - Rouge, Vert, Bleu de la couleur, chacune d'enttre elles étant un nombre compris entre \(0\) et \(255\).background(c)
signifiebackground (c,c,c)
donc un dégradé de grisbackground("#ABCDEF")
où"#ABCDEF"
désigne une couleur HTML en Hexadécimal
Une Première Animation⚓︎
let x = 0;
function setup() {
createCanvas(400, 400);
background(50);
}
function draw() {
ellipse(x, 200, 20, 20);
x = x + 5;
}
Personnaliser l'animation
1°) Augmenter/Diminuer l'incrémentation (de \(1\) à ..)
2°) Faire rebondir la "balle" lorsqu'elle est arrivée sur le bord droit
3°) Faire rebondir la "balle" lorsqu'elle est arrivée sur le bord gauche
4°) On souhaite déplacer la balle autrement qu'horizontalement.
On fixe pour cela deux variables let dx=+2;
et let dy=+3;
.
Déplacer la balle en répétant ce déplacement initial.
5°) Faire rebondir la balle comme en vrai, càd de sorte que son futur sens de déplacement après le rebond soit symétrique par rapport à la perpendiculaire au bord.
6°) Créer une fonction nbAlea(a,b)
qui renvoie un nombre entier aléatoire entre a
et b
. On pourra utiliser les deux fonctions natives suivantes en javascript:
Math.floor(x)
qui renvoie la partie entière du nombre (réel)x
-
Math.random()
qui renvoie un nombre aléatoire (réel) entre0
et1
7°) Créer une fonctioninitDeplacement(vitesse)
qui initialise de manière aléatoire de sorte que: -
la variable aléatoire
dx
est comprise entre-vitesse
et+vitesse
dy
est calculée par :- son
signe
(+1
ou-1
) est calculé aléatoirement, de manière équiprobable - sa valeur (absolue)
dy
est calculée par la formule:dy = signe*Math.sqrt(vitesse**2-(dx)**2)
8°) La balle devrait être initialisée avec un sens de parcours initial aléatoire. Puis rebondir sur les murs
- son
Une deuxième Animation avec la Souris : mouseX
& mouseY
⚓︎
function setup() {
createCanvas(400, 400);
background(50);
}
function draw() {
ellipse(mouseX, mouseY, 20, 20);
}
Survoler le canevas ci-dessous avec la souris, en la déplaçant à l'intérieur du canevas
Raquette de Pong
- Créer une raquette de Pong rectangulaire, blanche, de taille 15px en largeur, sur 70px en hauteur
- Animer la raquette de sorte que celle-ci suive le mouvement de la souris (sur une même verticale: par ex. à droite du canevas)
- Ajouter une balle qui se déplace aléatoirement
- Programmer la détection de la balle sur la raquette
- Faire rebondir la balle dans ce cas
Répère Informatique⚓︎
- Le point de coordonnées \((0,0)\) se trouve en haut à gauche
- L'axe des
x
est orienté de gauche à droite - L'axe des
y
est orienté de haut en bas
Références & Notes⚓︎
Références⚓︎
Wiki⚓︎
- https://github.com/processing/p5.js/wiki/p5.js-overview
MOOCs & Channels YouTube⚓︎
- Channel YouTube de The Coding Train
- Le MOOC Kadenze de UCLA (Univ Californie): p5 pour les Arts Visuels
:po: