TP No6

Animation

Nous allons dans ce TP apprendre à animer un dessin. Nous commencerons par un code affichant successivement 23 images de poisson. Ces 23 images seront stockées dans un tableau d'images. 

int i = 0;
PImage[] imgs;

void setup() {
    size(400, 400);
    imgs = new PImage[23];
    for (i=1; i<24; i++) {
      imgs[i-1]= loadImage("fish00"+(i<10?"0":"")+i+".png");
    }

    // remet le compteur a 0
    i=0;
    frameRate(20);
}

void draw() {
    background(0, 0, 128);
    image(imgs[i%23], 0, 0); // normal
    i++; // incremente le compteur
}
Quatre poissons animés de différentes façons.


← Nous utilisons l'opérateur %(modulo) afin d'afficher un numéro d'image toujours compris entre 0 et 22. Quand i vaut 23, i%23 vaut 0, quand i vaut 24, i%23 vaut 1 et ainsi de suite.
Questions 1:
  1. Ajoutez un appel à println(...) pour afficher un message quand le poisson termine un tour
  2. Changez la position en x du dessin du poisson pour que ce dernier ne soit plus scotché à gauche mais avance vers la droite (donc en fonction de i !)
  3. Combien de tours le poisson fait-il avant de disparaitre ?
  4. Multipliez sa vitesse de deplacement pour ne lui permettre que 2ou3 tours avant sa disparition. Remettez sa vitesse en x à zero.
Questions 2:
  1. Ajoutez un deuxième poisson animé à droite du premier
  2. Modifiez l'indice du tableau pour que ce poisson soit deux fois plus rapide que le premier
  3. Modifiez l'indice du tableau pour que ce poisson soit deux fois plus lent que le premier (attention 3/2 = 1,5 et il n'y a pas d'indice 1,5)
  4. Créez un troisième poisson qui tourne à l'envers ... en ne touchant que l'indice encore une fois !
  5. Terminez le travail en affichant un quatrième poisson qui tourne alternativement dans un sens puis dans l'autre (DIFFICILE car il convient d'utiliser la fonction abs(...)).
Résultats Attendus
screenshot
Questions subsidiaires:
  1. Repartez du poisson unique et rajouter un modulo(%) pour que le poisson tourne en avançant de droite à gauche comme dans un aquarium.
  2. Decoupez l'animation en 4 phases (1/2 tour, avance, autre 1/2 tour, retour) avec un if ... else if ... else if ... else ...
  3. Affectez une position aleatoire continue en y avec la fonction noise()

Paramétrage de l'animation

Nous n'utiliserons plus par la suite de vitesse de raffraichissement constant. Nous definirons int v=20; en global puis nous appelerons frameRate(v) chaque fois que nous aurons modifié la vitesse souhaitée v. Nous enleverons les trois derniers poissons pour ne parametrer que la vitesse du premier poisson.

Questions :
  1. Ajoutez une fonction mouseClicked() qui mette la vitesse à 1 img/sec
  2. Dans la fonction draw() , si v<20 incrementez v (et redonnez l'ordre frameRate(v))! Quel comportement cela ajoute t-il ?
  3. Faites accélerer puis decelerer le(s) poisson(s)
  4. Modifiez la couleur de fond de l'aquarium pour que le bleu change alternativement du bleu foncé au bleu clair.