Mouvement d'une balle avec P5.js

Le but de ce TD est découvrir un nouveau langage: Javascript et d'explorer diverses façons de faire déplacer des objets.

Documentations en français sur Javascript

De manière générale, quand vous faites une recherche sur javascript ajouter le mot clé ES6 (ou supérieur). Ce sont les spécifications pour écrire correctement du javascript.

C'est la librairie javascript qui va nous permettre de créer des animations dans une page html.

Pour faire fonctionner p5.js il faut avoir au minimum les 3 fichiers suivant dans la même répertoire:

Ces 3 fichiers se trouvent dans le dossier ./template.

Vous trouverez un exemple dans le dossier ./exemple .

Mouvements à réaliser

Les mouvements suivants sont a réaliser dans l'ordre que vous voulez. Copier le dossier ./template en le renommant puis éditer le fichier sketch.js pour réaliser le mouvement voulu.

Mouvement en ligne droite

Difficulté: *
La balle se déplace en ligne droite.

Petit mouvements aléatoires

Difficulté: **
La balle fait des petits mouvements comme si elle vibrait de façon aléatoire.
P5.js met à disposition une fonction random pour générer un nombre aléatoire entre 0 et 1.

Mouvement pacman

Difficulté: **
La balle se déplace en ligne droite, quand elle atteint un bord elle réapparait sur le bord opposé.
L'opérateur javascript modulo ou reste par la division euclidienne (%) est pratique pour ce genre de situation.

Rebond aux bords

Difficulté: **
La balle se déplace en ligne droite, quand elle atteint un bord elle rebondit.

Mouvement fluide périodique

Difficulté: ***
La balle a un mouvement périodique de bas en haut (pensez aux fonctions périodiques que vous connaissez).

Mouvement en cercle

Difficulté: ***
La balle décrit un cercle autour d'un point (pensez au cercle trigonométrique).

Mouvement en cloche

Difficulté: ****
La balle est lancée dans une direction avec une vitesse initial et est soumis à la gravitation pour retomber (pensez à vos cours de physique).