Licence Informatique 2017-2018
II2D



TP 02 : Mouvement des particules

Objectifs :

Les calculs du mouvement seront de la responsabilités de Engine : on travaillera donc principalement dans cette classe.

1  Vitesse

Pour cette partie, on se contente de générer un mouvement uniquement à partir d’une vitesse pour chaque particule qui sera constante lors de l’animation.

Question 1.

  1. Ajoutez un attribut vitesse (c’est un Vector) à la classe Particule. Mettez par défaut une valeur relativement faible (par exemple (20,40), i.e. 20 pixels par seconde en x et 40 pixels par seconde en y).
  2. Faire une méthode dans Engine qui est appelée depuis Engine.updateData, pour parcourir toutes les particules en calculant leur nouvelle position selon leur vitesse. Pour rappel (cf cours) : x_new=x_old+v_new*deltaTimedeltaTime est le pas de temps considéré entre chaque appel de updateData. Pour l’instant la vitesse est considérée constante, v_new n’est donc pas à calculer. Il faut intégrer les méthodes nécessaires à la classe Vector pour ces calculs (ici add pour additionner et mul pour multiplier par un nombre).

Testez

Question 2. Enrichissez GeneratorBox pour donner une vitesse initiale aléatoire à la naissance (même principe que pour la position aléatoire). Testez alors plusieurs possibilités (initialisation du générateur dans le main comme pour le tp précédent). Essayez par exemple d’obtenir un effet similaire à (i.e. vitesse aléatoire dans n’importe quelle direction à partir d’un point) :

2  Force

On génère à présent le mouvement à partir des forces.

Question 3.

  1. Ajoutez un attribut force (c’est un Vector) pour la classe Particule. Dans Engine ajoutez une méthode pour calculer la force de gravité pour chaque particule (sans oublier de l’appeler depuis updateData : cette force est certes constante, mais on pourra s’autoriser par la suite à faire des forces qui évoluent au cours du temps).
  2. Dans la méthode où vous calculez la nouvelle position (questions précédentes) : ajoutez le calcul de la nouvelle vitesse de la particule à partir des forces (cf cours; remarque : on peut considérer une masse de 1 pour les particules).

Testez

Question 4. Réalisez une scène de votre choix en initialisant des générateurs et en exploitant les différents paramètres de ces générateurs (faire une fonction scene_tp2 dans ii2d_main.js par exemple).

3  Mini-interaction

On propose de faire, de façon la plus directe possible, un générateur qui se positionne sur le curseur de la souris quand on click dans le canvas.

Question 5. Il faut tout d’abord répondre à l’événement du click de la souris sur le canvas. Dans le main :

canvas.addEventListener('mousedown',handleMouseDown,false);

Dans la fonction handleMouseDown, il faut récupérer les coordonnées pixels de la souris (on passe sur les détails techniques pour récupérer ces coordonnées relativement au canvas, et non à la fenêtre du navigateur) :

function handleMouseDown(event) { // get the mouse relative to canvas mouseX = event.layerX-canvas.offsetLeft; mouseY = (event.layerY-canvas.offsetTop)-1.0; // A compléter }

Il reste à affecter les positions min et max d’un générateur avec ces coordonnées souris (faites-le avec le premier générateur en pré-supposant qu’il existe). Testez

Question 6. Améliorez pour que le générateur suive la souris lors d’un click+glisser (il faut répondre en plus au message 'mousemove' et tester que le bouton de la souris est maintenu). Testez.


Ce document a été traduit de LATEX par HEVEA