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. 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  

Hello World! Processing

Article publié le : Samedi 2 mars 2013. Rédigé par : Jean-no
Un documentaire très complet sur le « creative coding » avec Processing. On y voit des artistes et des créateurs importants du domaine, et leurs réalisations, mais aussi des images d’archives de Charles et Ray Eames ou encore des extraits d’interviews de John Whitney. Hello World! Processing from Ultra_Lab on Vimeo.

Faire la liste des fichiers d’un dossier

Article publié le : Samedi 16 février 2013. Rédigé par : Jean-no
Le programme qui suit permet de faire la liste des fichiers qui se trouvent dans un dossier sélectionné par l’utilisateur. Cette version est réservée à Processing 2.0 et plus pour deux raisons : - la librairie « File » n’est plus chargée par défaut, il faut donc l’importer au début du programme. File est une librairie complète d’accès aux fichiers. - la fonction selectFolder() ne s’utilise plus sans arguments, il faut désormais spécifier un texte à afficher et le nom de la fonction qui est appelée pour traiter le résultat.
// version pour processing 2.07

import java.io.File; // librairie java permettant de manipuler l'objet File dans processing 2 et +
String[] ListeFichiers; // la liste des fichiers
String[] types = {".jpg", ".jpeg", ".png"}; // les types de fichiers qui seront listés

void setup(){
size(800, 600);
}

void draw(){
// fonction à créer lorsque l'on veut utiliser les touches du clavier
}

void keyReleased(){
if(key=='o'){
// Si on clique sur la touche 'o', processing ouvre une boite de dialogue
// pour sélectionner un dossier
// puis le transmet à la fonction nommée "ObtiensLeContenuDuDossier"
selectFolder("choisissez un dossier", "ObtiensLeContenuDuDossier");
}
}

void ObtiensLeContenuDuDossier(File f){
// fonction qui traite
File[] ff = f.listFiles();
ListeFichiers = new String[0];
for(File fff:ff){
String n = fff.getAbsolutePath();
boolean isok = false;
for(String type:types){
// on vérifier que le fichier appartient à un type autorisé
String[] m = match(n, type+"\\Z");
if(m != null){
isok=true;break;
}
}
if(isok){
ListeFichiers = (String[]) append (ListeFichiers, n);
}
}
println(ListeFichiers);
}
Ici, le programme se déclenche lorsque l’on appuie sur la touche « o ». La liste « ListeFichiers » est alors remplie avec tous les chemins absolus vers les fichiers qui ont les terminaisons choisies (ici : jpg, jpeg et png). Le résultat est ensuite montré à l’aide de la commande println. Ce programme ne fonctionne pas en mode Javascript.

Parcourir simplement les éléments d’un tableau

Article publié le : Mercredi 19 décembre 2012. Rédigé par : Jean-no
Le principe n’est pas très bien documenté, mais Processing permet d’effectuer une itération (boucle) pour parcourir un a un les éléments d’un tableau (ou liste). La méthode est très simple : on emploie la formule for (type élément : tableau){ … }type est le type de la variable, où élément sera le nom donné à chaque élément du tableau et où tableau est le tableau d’éléments en question. Dans l’exemple qui suit, nous créons un tableau de type « entier » nommé chiffres (au pluriel) qui contient les éléments : 1, 12, 14, 32 et 80.
int[] chiffres = {1,12,14,32,80};
Dans les lignes qui suivent, nous parcourons un à un les éléments de ce tableau, qui prennent chaque fois le nom chiffre (au singulier), et nous les affichons dans la zone de dialogue de Processing, à l’aide de la commande « println() ».
for(int chiffre : chiffres){
println(chiffre);
}
Cette méthode est un peu plus facile à comprendre et à manipuler que celle-ci :
for(int a=0;a<chiffres.length;a++){
int chiffre = chiffres[a];
println(chiffre);
}

Savoir si plusieurs touches sont pressées simultanément

Article publié le : Dimanche 1 juillet 2012. Rédigé par : Jean-no
Pour les besoins d’un jeu, par exemple, on peut avoir besoin de tester si plusieurs touches du clavier sont pressées en même temps, mais Processing ne le permet pas directement et ses variables key (caractère de la touche enfoncée) et keyCode (code numérique de la touche enfoncée) ne conservent qu’une seule référence, la dernière. L’astuce qui suit consiste à créer un tableau booléen (une énumération de valeurs qui sont soit true soit false) dont les valeurs sont changées à chaque keyPressed() et keyReleased(), c’est à dire lorsque l’on appuie sur une touche et lorsqu’on lâche une touche. Ce tableau a une longueur de 128 éléments, ce qui doit suffire à traiter tous les cas puisque le codage de caractères ASCII contient 128 caractères. Pour vérifier si un caractère est enfoncé, on utilise la fonction « verifieClavier(n) » où n sera soit un caractère (‘a’, ‘z’), soit un code (10 pour la touche Return, 32 pour la touche espace, etc.). La fonction renverra true ou false, selon le cas.

boolean[] touches=new boolean[128];

void draw(){
background(0);
text(" a : "+verifieClavier('a')+"\n b : "+verifieClavier('b')+"\n return : "+verifieClavier(10)+"\n espace : "+verifieClavier(32), 10, 10);
}

void keyPressed(){
touches[keyCode]=true;
}

void keyReleased(){
touches[keyCode]=false;
}

boolean verifieClavier(char c){
int cc = int(c);
if(cc>96 && cc<123)cc-=32;
return touches[cc];
}

boolean verifieClavier(int c){
return touches[c];
}

On peut imaginer beaucoup de variantes à ces fonctions. On remarquera qu’il existe deux verifieClavier(),  l’un pour traiter les chiffres (ex. : verifieClavier(32) pour savoir si la touche « espace » est enfoncée) et l’autre pour traiter les caractères (verifieClavier(‘a’)). La seconde version fait une petite conversion afin qu’il n’y ait pas de différence entre minuscules et majuscules : A et a sont traitées comme une seule et même lettre.

En route vers Processing 2.0

Article publié le : Samedi 15 octobre 2011. Rédigé par : Jean-no
Une version alpha de Processing 2.0 est sortie le mois dernier, la version finale devrait être publiée d’ici peu de temps. Parmi les nouveautés, on note : - la disparition de la distinction entre les rendus P3D et OPENGL, qui seront remplacés par OPENGL2, plus performante. - la vidéo n’utilisera plus Quicktime mais GSVideo - l’accès aux objets XML sera un peu différent - il sera possible de dessiner des rectangles arrondis Mais l’évènement le plus spectaculaire, c’est la possibilité de choisir entre trois modes : Standard, Android et Javascript, afin de cibler ces trois plate-formes différentes. La version 1.5.1 de Processing permet déjà d’utiliser Android.

Présentation du livre dans le cadre de Futur en Seine

Article publié le : Samedi 18 juin 2011. Rédigé par : Jean-no
Dans le cadre du festival Futur en Seine, l’ouvrage Processing : le code informatique comme outil de création et le logiciel Mobilizing seront présentés par leurs auteurs respectifs à l’École Nationale Supérieure des Arts Décoratifs le mercredi 22 juin à partir de 17h30. Plus d’informations ici : futur-en-seine.fr

Pour utiliser plusieurs programmes successivement

Article publié le : Samedi 18 juin 2011. Rédigé par : Jean-no
Suite à la demande d’un lecteur, voici une méthode très simple pour passer d’un programme à un autre. En réalité, il n’y a qu’une seule animation, mais notre fonction « draw() » s’exécute différemment selon l’état de la variable sketchEnCours. Si cette variable a la valeur 1, c’est le programme draw_1() qui est exécuté, et si c’est elle a la valeur 2, c’est le programme draw_2() qui le sera. On passe du mode 1 au mode 2 en appuyant sur les touches « 1″ et « 2″.
int sketchEnCours = 1;
void setup(){
size(500,500);
background(0);
}

void draw(){
if(sketchEnCours==1){
draw_1();
}
if(sketchEnCours==2){
draw_2();
}
}

void draw_1(){
stroke(255);  float an=random(TWO_PI);float r=random(200); 
line(width/2, height/2, width/2+cos(an)*r, height/2+sin(an)*r);
}

void draw_2(){
stroke(0);  rect(random(width),random(height),10,10);
}

void keyPressed(){
if(key=='1'){    background(0);    sketchEnCours=1;  }
if(key=='2'){    background(255);    sketchEnCours=2;}
}
Si les différentes sous-animations sont complexes, réclament des variables spécifiques, etc., on gagnera à traiter tout cela en programmation objet.

Rencontre à la bibliothèque universitaire du Havre

Article publié le : Samedi 26 février 2011. Rédigé par : Jean-no
Le jeudi 24 mars à 19h30, Jean-Michel Géridan et Jean-Noël Lafargue présenteront le livre Processing, le code informatique comme outil de création, au cours d’une rencontre publique qui se tiendra à la bibliothèque universitaire centrale du Havre.

Fichiers d’exemples à télécharger

Article publié le : Mercredi 9 février 2011. Rédigé par : Jean-Michel
Télécharger les fichiers d’exemples (7.8Mo).