Le dernier blog

Processing, seizième et dernier cours

Dernier article consacré à Processing pour l’instant, ou plutôt, c’est le dernier sur ce blog, tout cela prendra une autre forme, peut-être plus adaptée, dans quelques semaines. N’hésitez pas à me faire part de vos observations ou de vos questions en commentaire à ces articles, c’est ce qui me permettra de les améliorer et c’est ce qui justifie ce mode de publications.
On peut consulter les seize articles depuis cette page.

Nous avons vu comment dessiner des choses sur l’écran et comment réaliser des animations, interactives ou pas. Nous n’avons en revanche pas abordé le son, la 3D, l’image vectorielle, les déformations d’image, les polygones ou les opération de réseau car le but était avant tout de faire le tour des grands principes de Processing. Mais au chapitre des grands principes, il reste une inconnue : comment exploite-t-on ses programmes ?

Lorsque l’on sauvegarde un programme réalisé avec Processing, celui-ci s’enregistre sur le disque sous la forme d’un fichier dont l’extension est .pde (pour processing development environnement). Ce genre de fichier est en fait un bête fichier texte, que l’on peut ouvrir avec le bloc-notes de Windows ou n’importe quel autre éditeur de texte brut. Ce fichier source peut être transmis à toute personne qui dispose de Processing, qu’elle soit sur Macintosh, sous Windows ou sous Linux. Mais pour les autres ? Plusieurs solutions s’offrent à nous. Notamment l’application indépendante, l’applet Java ou les fichiers image ou vidéo.

L’applet Java

Une applet Java est un fichier lisible dans un navigateur web équipé du plug-in Java.
Selon des statistiques publiées par Adobe en septembre 2008, le plug-in Java est assez répandu puisqu’il touche 82% des internautes, ce qui en fait le second plug-in le plus courant sur le web après Adobe flash, loin devant Adove Shockwave (58%), Real Player (47%) ou encore le lecteur d’images et d’animations vectorielles SVG¹ (7%).

Notez pour l’anecdote que le schéma statistique présenté ci-dessus a été réalisé avec Processing (cliquez sur ce lien pour voir le code source).
Pour créer une applet Java, rien de plus facile, il suffit de sélectionner la commande « File -> Export » et Processing se chargera du reste.

Lorsque l’exportation est faite, Processing ouvre le dossier qui contient le produit de cette exportation. Ce dossier, nommé applet, est un sous-dossier du dossier qui contient notre programme. On y trouve cinq fichiers différents :

• index.html : il s’agit d’une page web qui contient l’applet. On peut l’ouvrir avec un éditeur de texte ou avec un logiciel tel que DreamWeaver pour modifier sa mise en page. Par défaut, cette page contient l’applet mais aussi un petit texte signalant que celle-ci a été rédigée avec Processing, et puis deux liens, l’un vers www.processing.org et l’autre vers le code-source de l’applet.
• loading.gif : il s’agit du logo de Processing tel qu’il s’affiche sur la page web pendant la durée du chargement de l’animation, en attendant qu’elle puisse s’exécuter.
• nom_du_fichier.jar : c’est l’applet Java proprement dite, composée d’un certain nombre de fichiers regroupés sous forme d’une archive zip (et que l’on peut ouvrir avec un utilitaire de décompactage si l’on souhaite en voir le contenu).
• nom_du_fichier.java : c’est la source Java qui a servi à compiler le programme.
• nom_du_fichier.pde : c’est la source du programme Processing.

L’application indépendante

Ce que l’on réalise avec Processing peut être lu comme une application exécutable indépendante (c’est à dire ne réclamant pas que l’utilisateur dispose d’un quelconque logiciel supplémentaire), et cela se passe là aussi de de la manière la plus simple possible. Il suffit en effet de sélectionner la commande « File -> Export application ».

Une boite de dialogue nous propose alors de choisir quelles plate-formes nous souhaitons cibler (Windows et/ou MacOS et/ou Linux) et nous propose de cocher ou de décocher deux options :

• le Full-Screen (plein écran), qui permet donc de créer une application qui occupe la totalité de l’écran.
• la présence ou non d’un bouton « stop » permettant à l’utilisateur de quitter le programme.

Les programmes sont enregistrés dans les sous-dossiers application.windows, application.macosx et application.linux.

Le fichier « statique »

Avec Processing on peut créer des fichiers non-actifs, tels que des images bitmap ou des vidéos.
Le plus simple est l’exportation au format bitmap. La commande est simplissime :

save("monfichier.jpg");

… et cela suffit, au moment où le programme atteint la commande save(), il créera un fichier au format jpeg nommé « monfichier.jpg ». Ce fichier sera stocké dans le même dossier que celui de notre script au format « pde ». Nous pouvons utiliser quatre formats d’image différents : le tif, le jpeg, le png et le tga. Personnellement j’utilise généralement le format png qui s’adapte bien à toutes les situations, n’altère pas les images mais les compresse au mieux.
L’exemple qui suit permet de n’enregistrer l’écran sous forme d’image qu’à un moment précis, en l’occurence le moment où la touche ‘s’ du clavier est enfoncée (mais ça aurait pu être une autre touche ou un autre évènement, par exemple avec la souris).

void keyReleased(){
  if (key=='s'){ save("monfichier.jpg"); }
}

Plutôt simple, non ? Il existe une seconde commande nommée saveFrame() qui permet d’enregistrer l’image de la fenêtre du programme mais avec un numéro d’ordre. C’est pratique pour être récupéré par la suite dans un logiciel de montage vidéo ou dans le logiciel Flash. On peut utiliser la commande seule, et les fichiers seront enregistrés au format tif, avec des noms tels que screen-0000.tif, screen-0001.tif, screen-0002.tif, screen-0003.tif et ainsi de suite. Mais il est aussi possible de décider du format et de la structure du nom des fichiers ainsi : saveFrame("filename-####.ext"), où filename sera remplacé par un nom quelconque (par exemple « photogramme ») et ext par l’extension. Dans le cas suivant nous obtiendrons une suite d’images dont les noms seront donc photogramme-0001.png, photogramme-0002.png, photogramme-0003.png, etc.
Ici par exemple, un point est dessiné au hasard sur l’écran à chaque cycle et l’image en est sauvegardée :

void draw(){
  point(random(100),random(100));
  saveFrame("photogramme-####.png");
}

On peut aussi enregistrer du texte avec la commande saveStrings("nom_du_fichier", chaîne_de_caractères), qui permet d’écrire un fichier en une seule fois, et les commande createWriter("nom_du_fichier") puis printWriter() qui permettent d’écrire dans un fichier texte de manière incrémentielle (ce qui peut servir par exemple pour ajouter chaque minute une coordonnée ou quelque chose de ce genre à l’intérieur d’un unique fichier). Notons qu’il existe des fonctions réciproques pour lire des fichiers textuels.

Les données autres que les images bitmap et les fichiers textuels imposent de recourir à des « librairies », c’est à dire à des modules dédiés à des usages spécifiques mais qui ne sont pas disponibles dans Processing sans avoir été explicitement réclamés. Chaque librairie a son propre fonctionnement, son lot de commandes et de propriétés. Certaines sont fournies avec Processing et peuvent être incluses à des animations avec la commande « Sketch -> import library », d’autres doivent être téléchargées séparément et ajoutées à un dossier nommé « librairies » et placé dans le dossier de travail.
Toutes doivent en tout cas être déclarées avec la commande import nom_de_la_librairie.sous_modules où « sous_modules » est souvent remplacé par une astérisque (*) qui signifie que l’on souhaite tous les importer.

Voici un exemple simple d’utilisation d’une librairie native de Processing, la librairie pdf, qui permet d’enregistrer son dessin au format pdf. On remarque que la commande size, qui décrit l’espace d’affichage, est agrémentée de deux paramètres : PDF et un nom de fichier pdf. La mention PDF signifie tout simplement que ce n’est pas vers l’écran que devront être affichées les images, et le nom de fichier est le nom du fichier à créer et dans lequel doit être enregistré le dessin.

import processing.pdf.*;

void setup() {
  smooth();
  size(500, 800, PDF, "essaivectoriel.pdf");
  noFill();strokeWeight(0.3);
}

void draw() {
  for(int a=0;a<width/20;a++){
    for(int b=0;b<height/20;b++){
     float n = random(1,20);
      ellipse(10+a*20, 10+b*20, n, n);
    }
  }
  print("Dessin terminé, image enregistrée.");
  exit();
}

Une fois le dessin (des ellipses de taille irrégulière dessinées à 20 pixels d’intervalle) terminé, le programme écrit un message qui signifie que l’opération est achevée. Ce n’est pas obligatoire, mais bien pratique si l’on considère qu’aucune fenêtre d’affichage ne s’est ouverte. Enfin, la commande exit() permet d’abandonner le programme après son exécution.
L’enregistrement des pdf permet par ailleurs de créer des documents de plusieurs pages.

Parmi les autres librairies existantes, signalons :

• La librairie OpenGL, qui permet d’exporter des fichiers vectoriels en trois dimensions.
• La librairie dxf, qui permet de créer des fichiers vectoriels 3D Autocad
• La librairie video, qui permet d’enregistrer de la vidéo au format Quicktime
• La librairie Network, qui permet d’envoyer et de recevoir des données sur le réseau
• La librairie Serial, qui permet d’envoyer et de recevoir des informations sur le port série de l’ordinateur (utile pour piloter un panneau lumineux par exemple)
• Minim, qui permet de manipuler du son

• gifAnimation, pour exporter au format gif animé
• proSVG, qui permet d’exporter au format d’images vectorielles SVG
• SimplePostScript, pour exporter au format vectoriel Postscript
• … et de nombreuses autres, permettant d’écrire des données XML, de manipuler divers formats de fichiers graphiques, etc.

Les librairies mentionnées permettent de produire des fichiers avec Processing mais il existe bien d’autres librairies qui permettent d’étendre les capacités du logiciel de bien d’autres manières : importation, communication avec des caméras, des joysticks, filtres d’images, détection de formes, etc.
On peut consulter la liste de ces librairies sur la page qui leur est dédiée dans la documentation de Processing.

Voilà, nous en avons fini avec cette introduction à Processing !

1. Le format SVG (Scalable Vector Graphics) est assez répandu dans le domaine du dessin vectoriel mais on sait rarement qu’il dispose de fonctions interactives assez évoluées qui en font un modeste (et gratuit) concurrent de Flash… Malheureusement, le plug-in SVG est développé par Adobe qui ne l’a plus mis à jour depuis son rachat de Macromedia et de Flash [↩]