2017-2018/ISN/P5js/decouverte_p5js.html

109 lines
4.2 KiB
HTML
Raw Permalink Normal View History

<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>