Sujet libre : réaliser un décor animé

1ère étape : juste un élément qui avance

On crée un décor fixe (ciel, herbe), puis insérer un élément mobile (un arbre en position x).

Pr_arbre1

Plus concrètement, le dessin de l’arbre se fait dans une méthode séparée  void arbre(int x, int y) { ... }  et dans la méthode draw() on fait dessiner un arbre pour x=100 et y = height-50  en mettant l’instruction  arbre(100, height-50); (lire le cours  Animation > Utiliser des méthodes > inventées  par vous    void  monLogo(int x, int y) { ... } )

Ensuite, on fait « bouger » l’arbre en introduisant une variable x (qui augmente progressivement) et en faisant dessiner arbre(x,height-50);  au lieu de  arbre(100,height-50); de plus, il faudra penser à « nettoyer l’écran » avant de faire le dessin (sinon on dessine par dessus l’arbre précédant ! ).

Répartition initiale des tâches

élève A : Ecrire la méthode qui dessine un arbre en position x (rectangle, ellipse, …).
élève B : Ecrire la méthode draw() qui fait avancer un point horizontalement à l’écran (c’est à dire une variable x qui augmente et dessiner le point(x,300)  et penser à nettoyer l’écran avant le dessin). Puis une fois que le point a traversé toute la largeur, on recommence au début …

2e étape : rajouter d’autres éléments

Rajouter d’autres éléments qui passent devant ou derrière les uns les autres, à des positions plus ou moins aléatoires … ou déclenchés par des clics/touches …

Pr_arbre2

Augmenter le niveau

piste verte
  • séquences d’instructions
  • boucles simples : for et while
  • instructions conditionnelles : if
piste bleu
  • variables et opérateurs arithmétiques simples : + * /
  • chaînes de caractères
  • fonction aléatoire  random
  • imbrication de boucles et d’instructions conditionnelles : for et if
piste rouge
  • boucles imbriquées (double boucle)
  • opérateur modulo  %
  • fonctions mathématiques :  cos, sin, round
  • opérateurs booléens : &&  ||  !  ==
  • création de fonctions simples
piste noire
  • création de fonctions complexes
  • tableaux, listes
  • fonctions récursives

Exigences pour l’évaluation

Envoi par mail

Le groupe enverra par mail :

  • le code du programme en prenant soin de colorier la partie apportée par chaque membre du groupe. De plus, le code doit être parfaitement indenté (Processing le fait : Ctrl + T).
  • un tableau résumant la répartition des tâches effectuées par chacun, comme le tableau suivant :
Tableau de la répartition des tâches :
élève A élève B
dessine un arbre en position fixe animation : faire avancer l’arbre
faire avancer 2 arbres en décalé dessin de la vache avec les yeux qui tournent

Conseils

  • mettre des commentaires dans le code (pour expliquer les parties complexes).
  • utiliser des noms de variables intelligents (c’est à dire explicites) pour faciliter la compréhension du code.
  • inventer des méthodes (ex : une méthode pour chaque personnage ou élément du décor).
  • utiliser des boucles, des tests, …
  • si plusieurs parties sont des « copier-coller » alors il faut les coder autrement : créer une méthode ou une boucle …
  • utiliser des fonctions  :  random() , cos(), sin(), radians(), …
  • les chargements d’images en mémoire loadImage() ne doivent être fait qu’une fois, c’est pour cette raison qu’ils doivent être dans setup() et surtout pas dans draw()  .

Image/musique libres de droit

Vous pouvez utiliser des images du net, à la seule condition qu’elles soient libres de droit :
Google Images > taper les mots clés (et valider) > Outils de recherches > Droit d’usage > Réutlisation autorisée.

Goggle_image

Facultatif : copier/coller avec la coloration syntaxique

Ce n’est pas immédiat et le résultat n’est pas sensationnel. Néanmoins, si vous êtes motivé :

  1. installer un autre éditeur Notepad++ [ c’est le logiciel qu’on utilisera pour notre prochain mini-projet « site web » ], choisir la version 32 bits installer  https://notepad-plus-plus.org/download
    NB : La version 64bits est incompatible avec le plugin qu’on va utiliser (car ce plugin n’existe qu’en 32bits).
  2. Ouvrir Notepad++ et copier/coller votre code Processing dans Notepad++.
  3. Dans le menu : Langage > J > Javascript  (il n’y a pas le langage Processing … malheureusement)
  4. Ensuite, pour copier la coloration syntaxique :
    • menu Edition > Traitement des espacements > Transformer les tabulations en espace
    • menu Compléments > NppExport > Copy HTML to clipboard      et   coller dans votre traitement de texte (Word, OpenOffice …).

Facultatif : enregistrer l’animation dans un fichier GIF

Ensuite, si vous désirez enregistrer le résultat dans un fichier GIF animé, il faut enregistrer quelques images puis utiliser le logiciel GIMP pour créer l’image animée.

Pour enregistrer des frames avec Processing on utilise l’instruction   saveFrame();  , les images sont créées dans le dossier du programme (juste à côté du sketch). Cependant, pour éviter d’obtenir trop d’images, il faut mieux n’enregistrer qu’une frame sur 50 :   if (x % 50 == 0) saveFrame();

Ensuite, ouvrir GIMP, glisser la 1ère image (généralement  screen-0001.tif) puis glisser la 2ème image, … ainsi les calques se créent et s’empilent les uns sur les autres.

Ensuite dans GIMP, on enregistre l’animation : File > Export As > remplir le nom : animation.gif et Exporter.

gimp_anime