109 lines
4.2 KiB
HTML
109 lines
4.2 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script src="./lib/p5.min.js"></script>
|
|
<script src="./lib/sketch.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="./lib/pandoc.css">
|
|
</head>
|
|
<body>
|
|
<h1> Mouvement d'une balle avec P5.js </h1>
|
|
|
|
<p>
|
|
<span id="c1"></span>
|
|
<span id="c2"></span>
|
|
<span id="c3"></span>
|
|
<span id="c4"></span>
|
|
<span id="c5"></span>
|
|
<span id="c6"></span>
|
|
</p>
|
|
|
|
<p>
|
|
Le but de ce TD est découvrir un nouveau langage: Javascript et d'explorer diverses façons de faire déplacer des objets.
|
|
<p>
|
|
|
|
<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">Documentations en français sur Javascript </a></p>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<h2><img height=30 src="assets/p5js.svg" id="logo_image" class="logo" /> </h2>
|
|
<p> C'est la librairie javascript qui va nous permettre de créer des animations dans une page html. </p>
|
|
|
|
<ul>
|
|
<li>Site internet de <a href="https://p5js.org/"> p5.js </a></li>
|
|
<li> Documentation des fonctions de cette librairie <a href="https://p5js.org/reference"> ici </a></li>
|
|
</ul>
|
|
|
|
<p>
|
|
Pour faire fonctionner p5.js il faut avoir au minimum les 3 fichiers suivant dans la même répertoire:
|
|
<ul>
|
|
<li> <a href="template/index.html">index.html</a> Le fichier html à ouvrir avec votre navigateur.</li>
|
|
<li> <a href="template/p5.js">j5.js</a> la library p5.js téléchargé depuis le officiel. </li>
|
|
<li> <a href="template/sketch.js">sketch.js</a> le code javascript pour faire l'animation. </li>
|
|
</ul>
|
|
Ces 3 fichiers se trouvent dans le dossier <a href="./template/">./template</a>.
|
|
<p>
|
|
|
|
<p>
|
|
Vous trouverez un <a href="exemple/index.html">exemple</a> dans le dossier <a href="exemple"> ./exemple </a>.
|
|
</p>
|
|
|
|
<h2> Mouvements à réaliser </h2>
|
|
<p>Les mouvements suivants sont a réaliser dans l'ordre que vous voulez. Copier le dossier <a href="template/">./template</a> en le renommant puis éditer le fichier <b> sketch.js</b> pour réaliser le mouvement voulu.</p>
|
|
|
|
<h3> Mouvement en ligne droite</h3>
|
|
<p>
|
|
<b> Difficulté: *</b> </br>
|
|
La balle se déplace en ligne droite.
|
|
</p>
|
|
<div id="cbase"></div>
|
|
|
|
|
|
<h3> Petit mouvements aléatoires</h3>
|
|
<p>
|
|
<b> Difficulté: **</b> </br>
|
|
La balle fait des petits mouvements comme si elle vibrait de façon aléatoire. </br>
|
|
P5.js met à disposition une fonction <b> random </b> pour générer un nombre aléatoire entre 0 et 1.
|
|
</p>
|
|
<div id="c2bis"></div>
|
|
|
|
<h3> Mouvement pacman </h3>
|
|
<p>
|
|
<b> Difficulté: **</b> </br>
|
|
La balle se déplace en ligne droite, quand elle atteint un bord elle réapparait sur le bord opposé. </br>
|
|
L'opérateur javascript modulo ou reste par la division euclidienne (%) est pratique pour ce genre de situation.
|
|
</p>
|
|
<div id="c1bis"></div>
|
|
|
|
<h3> Rebond aux bords</h3>
|
|
<p>
|
|
<b> Difficulté: **</b> </br>
|
|
La balle se déplace en ligne droite, quand elle atteint un bord elle rebondit.
|
|
</p>
|
|
<div id="c3bis"></div>
|
|
|
|
<h3> Mouvement fluide périodique</h3>
|
|
<p>
|
|
<b> Difficulté: ***</b> </br>
|
|
La balle a un mouvement périodique de bas en haut (pensez aux fonctions périodiques que vous connaissez).
|
|
</p>
|
|
<div id="c5bis"></div>
|
|
|
|
<h3> Mouvement en cercle</h3>
|
|
<p>
|
|
<b> Difficulté: ***</b> </br>
|
|
La balle décrit un cercle autour d'un point (pensez au cercle trigonométrique).
|
|
</p>
|
|
<div id="c4bis"></div>
|
|
|
|
<h3> Mouvement en cloche</h3>
|
|
<p>
|
|
<b> Difficulté: ****</b> </br>
|
|
La balle est lancée dans une direction avec une vitesse initial et est soumis à la gravitation pour retomber (pensez à vos cours de physique).
|
|
</p>
|
|
<div id="c6bis"></div>
|
|
|
|
</body>
|
|
</html>
|