Du tableau à l'animation

Nous avons commencé à apprendre des instructions pour répéter plusieurs fois un traitement (''for'' avec ''range'') et pour faire des choix (ifelifelse). Nous allons maintenant voir comment interagir avec l'utilisateur à l'aide de la souris ou du clavier. Lors de cette séance nous allons découvrir comment passer d'oeuvre statiques à des oeuvres dynamiques et interactives. Pour cela, nous allons faire un petit détour par les techniques de bases du monde de l'animation et du cinéma !

Comment fonctionne une animation ?

Comme vous le savez sûrement, lorsque les frères Lumière ont inventé le Cinématographe, ils ont utilisé une technique consistant à tromper notre système de perception: en effet, si l'on présente rapidement une série d'images à notre rétine, cette dernière n'arrivera plus à les distinguer à partir d'une certaine vitesse (environ 26 images par seconde). Ainsi, pour créer un film de 10 secondes, les frères Lumière devaient créer 10*26 = 260 images ! La technique est similaire pour les films d'animation si ce n'est que l'on réalise 26 dessins plutôt que 26 photos.

Vous avez peut-être déjà joué aussi avec un flip book: un petit livre constitué d'images légèrement différentes les unes des autres et que l'on balaye d'un doigt pour faire défiler rapidement les pages et voir une animation apparaître. La vidéo ci-dessous illustre cela:

23-flipbook-animation-swimming.jpg

Si vous avez un peu de temps à la maison, découpez l'image donnée en illustration ci-dessus et assemblez les images pour créer votre propre flip book :) Ce petit travail manuel illustre exactement pourquoi il peut-être plus que pratique de programmer les différentes images plutôt qu'avoir à les dessiner manuellement … sans parler du fait qu'il est un peu difficile de gérer l'interaction avec l'utilisateur avec ce type d'approche: tous les utilisateurs voient la même animation !

Comment fonctionne une animation dans processing ?

Suivant le même principe que les frères Lumière, en processing pour pouvoir réaliser une animation, il faut expliquer à la machine comment construire chaque image, puis les afficher rapidement les unes à la suite des autres. Pour l'instant, tout notre code se trouve dans la fonction setup. En anglais, Setup est un verbe qui signifie installer, mettre en place. Cette fonction sert donc à définir ce qui doit être réalisé au début de l'exécution du programme. Généralement, on définit dans setup la taille de notre tableau, la couleur de fond et la couleur du pinceau …

Pour construire l'animation en processing, il suffit de définir une nouvelle fonction appelée draw qui sera automatiquement appelée toutes les 26ème de secondes. Ainsi, à chaque fois que draw sera appelée nous pourrons changer (ou pas) le dessin que l'on souhaite afficher et cela produira notre animation.

Voici à quoi ressembleront dorénavant nos programmes processing:

  from processing import *
   
  def setup():
    # réglages initiaux
    # taille du tableau
    # couleurs ...
    
  def draw(): 
    # image à afficher maintenant
    # cette fonction est appelée automatiquement toutes les 26ème de seconde !
  
  run() # et surtout n'oublions pas cela sinon rien ne démarre :)

L'exemple ci-dessous illustre le fonctionnement d'une animation simple en affichant au hasard (on dit parfois aléatoirement) des cercles n'importe où dans le tableau avec des couleurs elles aussi tirées aléatoirement. Pour cela, on utilise une nouvelle fonction randint(n) qui permet de générer au hasard un nombre compris entre 0 et n. Ainsi, si l'on appelle plusieurs fois randint(6), cela nous retournera différentes valeurs comprises entre 0 et 6.

Que se passe-t-il si vous augmentez ou diminuez le nombre en paramètre de frameRate dans la fonction setup ?

Œuvre 4 : Pointillisme et jeux de couleurs

Pour cette nouvelle oeuvre, nous allons mettre en oeuvre (sans jeu de mot :)) ce que nous venons de voir sur la création d'animation dans processsing. On va donc réaliser une oeuvre pointilliste utilisant un peu d'aléatoire pour obtenir un tableau qui se crée “tout seul”. Le principe de cette oeuvre consiste à découper le tableau en 3 zones, comme l'illustre la figure ci-dessous. Ensuite, on tirera aléatoirement un rayon et on supprimera une des composantes RGB en fonction de la zone du tableau où l'on se trouve.

Dit autrement, on commencera par tirer aléatoirement des coordonnées (x,y) pour le centre de notre disque, si l'on est dans la première zone, on tire un rayon entre 5 et 20 et on supprime la composante rouge, si l'on est dans la deuxième zone, on tire un rayon entre 15 et 30 et on supprime la composante verte, et finalement, dans la troisième et dernière zone, on fixe le rayon à 30 et on supprime la composante bleue.

L'oeuvre après quelques minutes … Appuyez sur Run pour lancer l'animation de création de l'oeuvre ! Visualisation des trois zones du tableau

A vous de jouer en complétant le squelette de programme donné ci-dessous :)

Petite synthèse :)

Nous avons vu que pour passer d'une image fixe, que nous créions au sein de setup jusqu'ici, à une animation, il faut se transformer en Walt Disney ou Hayao Miyazaki (mieux ;)) et aborder une animation comme une succession rapide d'images. Ainsi, nos programmes s'organisent maintenant autour de deux éléments principaux:

  1. setup qui permet de définir la taille de la toile, les différentes couleurs et autres informations d'initialisation,
  2. draw qui est appelée régulièrement automatiquement et qui peut mettre à jour notre toile en effectuant de nouveaux dessins.

Ainsi, pour construire une animation, il nous faut réfléchir aux différentes images la constituant et à la manière de les créer/programmer. Évidemment, il faut un peu de pratique et d'entraînement pour s'approprier tout cela, mais il est déjà possible de bien s'amuser et de créer de jolies choses si l'on a bien compris le rôle de setup et draw !

Expérimentez ces nouveaux pouvoirs de création en réalisant ce que vous souhaitez dans l’œuvre libre ci-dessous: