-- If(){design}else{art} » 2014 » mai

Archives mai, 2014

Créer une animation GIF avec la librairie « gifAnimation »

Article publié le : jeudi 8 mai 2014. Rédigé par : Jean-no

La librairie gifAnimation permet d’exporter un fichier au format GIF animé directement depuis Processing. Elle n’a malheureusement pas encore été portée sous Processing 3 et ne fonctionne donc qu’avec les versions précédentes.

La première étape est de télécharger la librairie gifAnimation.
Depuis la version 2 de Processing, cette opération peut se réaliser de manière assez automatique, depuis le menu « Sketch ».
On commence par aller dans « Import Library… » puis « Add Library… ».

 

import_librairie

 

…ce qui fait apparaître la fenêtre du gestionnaire des librairies, le « Library manager », où figurent les nom des librairies installées et de celles qui sont disponibles.
Pour télécharger une librairie, on clique simplement sur le bouton « Install ». La suite se déroule automatiquement.
Bien évidemment, votre ordinateur doit être connecté à Internet pour que ce téléchargement fonctionne.

 

import_librairie2

 

Une fois installée, la librairie est immédiatement disponible.
L’étape suivante, dans notre programme, sera de déclarer la librairie, et de déclarer un objet GifMaker, que nous choisirons de nommer gifExport :

 

import gifAnimation.*;
GifMaker gifExport ;

 

Cet objet sera plus tard instancié dans la section setup :

 

gifExport = new GifMaker(this, "monjoligifanime.gif"); // on instancie l'objet et on indique le nom qu'aura le fichier
gifExport.setRepeat(0); // on déclare le nombre de répétitions de la boucle (0 : infini)        
gifExport.setTransparent(255,255,255); // on déclare la couleur de transparence (ici, du blanc)

 

Au cours de l’animation, chaque fois que nous désirerons enregistrer le contenu de notre fenêtre en tant que « frame » (photogramme) de notre animation, nous utiliserons les commandes setDelay() (pour définir la durée de l’image, en millisecondes), et addFrame(), pour enregistrer :

 

gifExport.setDelay(20);
gifExport.addFrame();

 

Enfin, lorsque toutes les images que nous souhaitons enregistrer l’auront été, nous pourrons arrêter l’animation et procéder à l’enregistrement :

 

gifExport.finish();  
noLoop();

 

Voici le programme complet, qui dessine un rectangle en train de grandir. Chaque étape est enregistrée, et lorsque le rectangle dépasse le format de notre fenêtre, l’animation s’interrompt et le gif animé est enregistré.

 

import gifAnimation.*;
GifMaker gifExport ;
float taille=0;

void setup() {
size(200,200); 
    gifExport = new GifMaker(this, "monjoligifanime.gif");
    gifExport.setRepeat(0);             
   gifExport.setTransparent(255,255,255);  
    noFill();
    strokeWeight(10);
    rectMode(CENTER);
}

void draw() {
    background(255);
    rect(width/2, height/2, taille, taille);
    taille+=2;
    taille*=1.2;
    
    gifExport.setDelay(20);
    gifExport.addFrame();
    if(taille>width){ 
    gifExport.finish();  
      noLoop();
    }
}

 

Une fois le Gif fabriqué, vous n’aurez plus qu’à aller le récupérer à l’intérieur de votre « Sketch folder », avec la commande « Sketch -> show sketch folder ».
Attention les yeux, voici le résultat :

 

monjoligifanime