Une page du numéro d’octobre 1948 de la revue Popular Mechanics (quelque chose comme le Science & Vie américain) dégotée par BoingBoing Gadgets.
On trouvera de nombreuses références sur le « typewriting art » sur ce site.
Le Musée d’Art Moderne du Luxembourg (Mudam) change de direction, puisque Marie-Claude Beaud, qui préside à sa destinée depuis bien avant son inauguration1 cède la place à un nouveau directeur, Enrico Lunghi, jusqu’ici directeur artistique du Casino Luxembourg — qui fut longtemps l’unique lieu notable d’Art contemporain dans le grand-dûché.
Je connais bien ce musée puisque, avec Claude Closky, j’en ai réalisé le site internet pendant des années, participé à l’aventure héroïque de la revue en ligne Mudam, collaboré avec de nombreux artistes et même passé une semaine, avec Nathalie, dans le pavillon Luxembourgeois à la biennale de Venise.
Marie-Claude Beaud peut quitter Mudam avec le sentiment du devoir accompli car son musée est une véritable réussite, notamment par l’éclectisme et la qualité de ses acquisitions, mais aussi par la grande originalité de son approche curatoriale qui donne la part belle aux confrontations inattendues mais pacifiques et aux personnalités « transversales » — artistes-graphistes, graphistes-artistes, designers-artistes, auteurs de bande dessinée (discipline mixte et impure par essence), stylistes, architectes, etc. À l’image du bâtiment de Pei, qui est beau et lumineux à l’intérieur mais sans grand éclat lorsqu’on le voit de loin (certains lui ont trouvé des faux-airs de centre commercial), Mudam a une sorte de modestie qui cache une véritable générosité et qui nous envoie aux antipodes de certains des traits pénibles, pour ne pas dire puants, du petit monde de l’art contemporain. Si vous passez dans la ville de Luxembourg, c’est un musée à ne pas rater.
Juste avant de partir, donc, Marie-Claude Beaud innaugure deux expositions, Plaid houses, par Laure Tixier et Home, par Jochen Gerner, qui commencent l’une et l’autre jeudi prochain.
Je ne sais rien sur ces deux expositions, si ce n’est que j’admire beaucoup Jochen Gerner comme auteur de bande dessinée et que Laure Tixier est une bonne copine, qu’elle développe une oeuvre tout à fait originale, encore discrète, qui, ne craint pas le mélange des genres. On lui doit par exemple un manga dont les protagonistes sont des artistes célèbres.
Pour le plaisir, un texte léger, gentillement caustique et plutôt bien vu d’Umberto Eco qui défend que nous sommes dans une phase de régression technologique : En arrière toute ! (sur Écrans.fr).
On aurait pu ajouter, entre autres exemples dans le domaine informatique, les netbooks ces petits ordinateurs d’aujourd’hui dont les performances sont comparables à ceux d’il y a plusieurs années. Et ne parlons pas de la qualité des fichiers son et vidéo qui ont été popularisés par le web et qui sont d’une qualité plutôt « low-tech » comparés aux promesses technologiques d’hier. Le mp3, par exemple, est nettement moins bon que le cd audio.
Ainsi donc j’aurais élu Voyages-sncf.com mon site favori de l’année 2008 et je ne le savais pas ? Je l’aurais préféré (au hasard) à Tu mourras moins bête (mais tu mourras quand même), ou aux blogs d’Éric Chevillard et de Normand Baillargeon ? Et tout ça à mon insu ? Je dois admettre que je suis un peu surpris de mon choix1 .
Quand j’ai reçu cet e-mail que m’adresse une dénommée Rachel Picard, directrice générale du site sncf-voyages, j’ai bien ri et j’ai tout de suite pensé à Étienne, grand consommateur de trajets ferroviaires, qui a rédigé pour son blog moult billets indignés par la déliquescence de ce grand service public que fut la Société Nationale des Chemins de Fer français et par ce qui est sans doute sa plus laide verrue, à savoir le site scnf-voyages point com.
Ce qui est amusant c’est que tous les usagers de ce site semblent avoir reçu ce spam, à l’exception d’Étienne, justement. Une telle omission laisse supposer que ses articles rageurs ont été lus, il en est donc quitte pour une demi-victoire !
Ce site mal conçu et malotru2 qui affiche des publicités pendant qu’il prépare une réservation (au risque qu’une publicité flash mal fichue fasse planter le navigateur en plein milieu d’une commande), qui n’a plus de place dans le train pour les gens qui ont la carte « Famille nombreuse » mais qui brade, dans le même train, les premières classes pour les autres… Ce site est mon site préféré ?
Dans ma gare, on ne peut plus acheter de billets grandes lignes, c’est fini, le guichet a été fermé, il faut se rendre sur voyages-sncf, tenter de trouver, entre les publicités envahissantes et les sollicitations non-sollicitées (il est beau mon avion, voulez-vous mon hôtel,…), à quel endroit on peut commander son billet. Est-ce que c’est plus rapide et plus efficace qu’avec un minitel ? La seule chose que je trouve bien faite personnellement, c’est l’envoi des billets par la poste.
Je vous renvoie à l’analyse d’Étienne Mineur et aux comparaisons peu flatteuses qu’il fait avec les sites homologues d’autres pays.
Cependant, Mme Picard se trompe un peu, son site n’est pas le favori des internautes en 2008, c’est en réalité le «.Favor’i.» (marque déposée). Si j’ai bien compris, les «.Favor’i.» sont des médailles en chocolat que s’auto-distribuent les adhérents à la Fédération du e-commerce et de la vente à distance en prenant pour prétexte un échantillon représentatif d’internautes à qui une liste de sites web est soumise.
Ce que j’admire avec la communication — communication au sens le plus pouacre —, c’est ce culot, cet art de sublimer le minable, de s’en faire des décorations et de le fêter au champagne. C’est fascinant, c’est beau et terrible comme un scorpion qui se suicide, par un réflexe malheureux, en perçant sa tête avec son propre dard.
Je me comprends3 .
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.
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 SVG1 (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 :
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 :
Les programmes sont enregistrés dans les sous-dossiers application.windows, application.macosx et application.linux.
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 :
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 !
Avant-dernière leçon de cette initiation progressive, parlons à présent de la manipulation des textes. Ce que Processing propose en la matière est plutôt sommaire et nous en feront vite le tour.
Pour écrire du texte dans Processing, il faut commencer par choisir dans quelle police de caractère et dans quel corps on souhaite l’écrire, car notre logiciel ne sait pas manipuler le texte autrement.
La première étape est de « rastériser »1 la typographie que l’on veut utiliser, et pour ça, un peu comme avec les images que nous devions importer, nous devons demander à Processing de « créer » la typo, depuis le menu « tools ».
Le mot « créer » n’est pas un abus car Processing va fabriquer une police de caractères à son propre format (le format vlw) à partir de celle qui est chargée dans le système. Cette police sera une police « bitmap », c’est à dire non vectorielle, inadaptée aux changements d’échelle et aux déformations.
Lorsque l’on demande à « créer la police », une fenêtre apparaît et nous montre les typographies actuellement utilisées par le système. Il faut en sélectionner une et régler quelques options : le corps d’affichage, le lissage, l’étendue du nombre de caractères. Cette dernière option (all characters) doit toujours être cochée pour les systèmes non-anglophones. En effet, à défaut, des caractères aussi familiers que é, ç, à, è ou ù ne pourront être utilisés.
Lorsque la typographie a été « créée » par Processing, elle est enregistrée dans le sous-dossier « data » du dossier de l’animation (sous-dossier dont on peut vérifier le contenu avec la commande Sketch>Show sketch folder). Il faut « créer » autant de typographies que l’on en aura beson.
Une fois les typographies « créées », on les manipule de cette manière :
size(530,80); // réglage de la taille de la fenêtre fill(255); // La couleur de remplissage (et des textes) est le blanc background(0); // la fenêtre est "peinte" en noir PFont maTypo = loadFont("DejaVuSerif-64.vlw"); // choix de la typo textFont(maTypo, 64); // Définition de la taille de la typo text("Le dernier blog",12,58); // écriture d'un texte
Les trois premières commandes vous seront familières. On notera juste au passage que la commande fill(), qui sert à définir la couleur des remplissages de formes, est aussi la couleur qui sert à définir le remplissage des textes dessinés.
La ligne PFont maTypo = loadFont("DejaVuSerif-64.vlw"); sert à créer une variable de type PFont (Processing font) nommé maTypo (nom arbitraire, nous aurions aussi bien pu l’appeler « dejaVuTypo » ou « rhododendron« . Cette variable sert à charger la typographie créée précédemment, de cette manière : loadFont(nom_de_la_typo).
Dans la ligne suivante, nous réglons la taille d’affichage (ici,64) qui doit être affectée à la typo maTypo.
Pour finir, nous écrivons une chaine de caractères à la position (12,58) avec la commande text(), qui se rédige ainsi : text("chaine de caractères à écrire", x, y);Voici le résultat :
Si nous décidons de régler la taille des caractères sur une autre valeur que celle qui correspond à la police créee, le résultat n’est pas forcément bon. L’exemple qui suit est basé sur le même programme que le précédent, à ceci près que la taille de la police de caractères est 200. On voit nettement que l’agrandissement non-vectoriel de la typo ne flatte pas l’effet de lissage.
La commande utilisée pour régler la taille des lettres est textFont(maTypo, 200);
Notons qu’il serait possible d’utiliser une typo chargée à la volée, sans l’enregistrer, avec la commande createFont().
size(530,80);fill(255);background(128,0,0);
PFont maTypo = createFont("arial",60);
textFont(maTypo, 60);
text("Le dernier blog",0,54);
save("first_pfont3.png");
Ici j’utilise donc la typo « arial » en corps 60. Le nom donné (« arial ») est le nom sous lequel le système désigne la typo. Cette typographie est extrêmement répandue et je ne cours pas tellement le risque qu’elle soit absente du système. Pour connaître la liste des typos présentes sur le système, on utilise la méthode PFont.list(), qui renvoie une liste. En écrivant println (PFont.list());, je vois apparaître la liste complète des fontes du système dans la zone de texte de Processing.
J’ai rédigé un programme rapide qui parcourt toute la liste des typos disponibles et les utilises toutes.
Pour commencer, il stocke la liste dans un tableau de type String (chaîne de caractères) nommé listeDesTypos. C’est le sens de la première commande : String[] listeDesTypos = PFont.list();. Ensuite on règle la taille de la fenêtre et sa couleur. Puis, à l’aide d’une boucle itérative, nous parcourons la totalité des éléments de la liste. À chaque cycle de la boucle, on définit une variable décimale nommée taille (au hasard entre 10 et 80), et une couleur (avec un hasard limité). Puis, la typographie est créée et sélectionnée. Enfin, on écrit une chaîne de caractères à un endroit choisi au hasard sur l’écran. Cette chaîne de caractères est le nom de la typographie.
String[] listeDesTypos = PFont.list();
background(0);
size(530,530);
for(int a=0;a<listeDesTypos.length;a++){
float taille=random(10,80);
fill(random(30, 255),random(20,200), random(160));
PFont matypo = createFont(listeDesTypos[a], taille);
textFont(matypo);
text( listeDesTypos[a], random(-100,530),random(530));
}
Le résultat est le suivant :
Les commandes relatives à l’affichage des textes sont en assez petit nombre.
Nous avons vu
loadFont( nom_typo ); qui permet de charger une typo précédemment enregistréecreateFont( nom_typo, taille ); qui permet d’utiliser à la volée une typographie du systèmetextFont( nom_PFont, [taille] ); qui permet de sélectionner la typo en cours et éventuellement sa tailletext ( t, x, y ); qui permet d’afficher un texte t aux coordonnées (x,y). Le texte que l’on écrit doit être noté entre guillemets.textMode( ATTRIBUT ); permet de décider du mode d’affichage des textes. Il y a MODEL (mode par défaut), SCREEN (uniquement en 2D, d’un affichage plus rapide) et SHAPE (adapté à l’exportation vectorielle en pdf ou en openGL).textAlign ( ALIGNEMENT ); permet de régler l’alignement horizontal des textes. Celui-ci peut être LEFT, CENTER ou RIGHT (à gauche, centré, à droite). On peut ajouter un second paramètre pour déterminer l’alignement vertical, qui peut être TOP, BOTTOM, CENTER, BASELINE (haut, bas, centre, ligne de base). Par exemple : textAlign(CENTER,CENTER);textSize( taille ); permet de changer la taille d’affichage d’un texte.textWidth( chaine_de_caractères ); permet de connaître la largeur qu’une chaîne de caractères va occuper avant de la dessiner.textLeading( taille ); permet de régler l’espacement entre les lignes.textAscent() permet de connaître la distance qui sépare le haut du texte de sa ligne de base.textDescent() permet de connaître la distance qui sépare la « baseline » du bas du texte.
La troisième livraison de la revue trimestrielle Amusement arrive lundi dans les kiosques (les acharnés le trouveront dès à présent en primeur chez Colette).
Ce magazine « lifestyle » arty consacré à la culture interactive et au jeu vidéo entend traiter ses sujets de manière inattendue. Il a été fondé par Abdel Bounane et Jean-Baptiste Soufron et on y trouve des signatures très divers : artistes, designers, universitaires, journalistes1 ,… (et même, pour une double-page au sujet plutôt léger, votre serviteur). Dans ce troisième numéro, si je me fie à la couverture, il sera beaucoup question de Japon, de la ville de Casablanca, de Michael Moorcock, de Michel Gondry, du groupe Herman Düne, d’outside gaming, de Peter Molyneux (un des rares auteurs véritables dans le domaine du jeu vidéo),…
La génération qui est née avec le jeu vidéo et qui avait dix ans lorsque Space Invaders est sorti — ma génération, quoi —, commence à perdre ses cheveux. Nous n’avons toujours pas remisé nos consoles de jeu au grenier mais notre perspective a tout de même changé et c’est sans doute cela qu’exprime Amusement.
Tout en étant doté d’une identité inédite et singulière, Amusement s’inscrit dans une certaine tradition des magazines qui se penchent sur les cultures nées des technologies récentes (et notamment des technologie qui se rapportent aux loisirs, aux images et à l’interactivité) tout en regardant ailleurs, ou autour. Mode, cinéma, littérature, architecture, design… C’est la tradition de Wired, de >Interactif, de Dream, de Telesoft, d’Écrans ou encore de Voir, qui se sont voulus en leur temps les supports d’une « geekitude éclairée », à mille lieues du bête recopiage de comuniqués de presse des éditeurs de jeux ou des fabricants de matériel. Des journaux qu’on pouvait lire avec plaisir même sans avoir chez soi le moindre ustensile électronique.
La maquette, due à Alice Litscher (maquettiste pour Purple) est agréable et pertinente, elle s’adapte notamment à des contenus très divers allant de l’image pure aux longs textes. Si le format et l’épaisseur (près de 200 pages) rappellent Wired ou encore la presse féminine, le contenu est infiniment plus dense, car il n’y a quasiment pas de publicité2 , ce qui est un exploit si l’on considère le prix de vente, cinq euros.
Les principes de la souris datent du milieu des années 1960 mais nous pouvons fêter le quarantenaire de la première démonstration publique qu’en a faite son inventeur, Douglas C. Engelbart, le 9 décembre 1968. Menées à l’Institut de recherche de l’Université de Stanford et financées par la Nasa et par deux laboratoires militaires américains, Arpa et Radc, ces recherches sur l’interactivité homme-machine avaient commencé en 1962.
Comme on le voit sur la photographie, la souris d’Engelbart n’utilisait pas de boule, les roues qui captent le mouvement étaient en contact direct avec la table.
La conférence, qui mobilisait 17 chercheurs et annonçait rien moins que l’avènement de technologies destinées à étendre les capacités intellectuelles humaines, a duré une heure et demie. Engelbart y présentait son On-Line System (NLS) et montrait comme la souris permettait de manipuler et d’organiser des données complexes.
On peut voir la vidéo de l’évènement sur cette page commémorative de l’Université de Stanford.
Dans les années qui ont suivi, bon nombre de chercheurs de l’équipe d’Engelbart ont quitté ce dernier pour aller travailler au Xerox Palo Alto Research Center où a été amélioré le concept de la souris et où ont été mis au point les premier systèmes à interface graphique véritablement utilisables.
Les recherches d’Engelbart sont loin de se limiter à l’invention de la souris. Aujourd’hui, âgé de 83 ans, le chercheur a toujours bon pied bon oeil et pilote des recherches sur l’intelligence collective et sur la question de la co-évolution de l’humanité et des technologies.
Le projet n’est pas tout neuf, mais il me semble intéressant de le signaler. Pour ma part je le découvre tout juste.
Pure:dyne, lancé par l’équipe de goto10 est une distribution Linux particulièrement adaptée à la création artiste. Basé sur la distribution Debian, ce système d’exploitation embarque de nombreux outils libres de création tels que Processing, Pure Data, SuperCollider, Fluxus, IceCast, Cinelerra, Csound et bien d’autres. Il fonctionne en théorie sur tous les ordinateurs de type PC, ce qui inclut les Macintosh à processeur intel ou encore les netbooks Asus EEEpc. Optimisé pour le son et la vidéo en temps réel, Pure:dyne a par ailleurs l’avantage d’être bootable directement depuis un CD, un DVD ou même une clé USB, ce qui signifie que l’on peut l’utiliser sans pour autant l’installer sur son ordinateur, et même l’utiliser sur l’ordinateur des autres. Cette distribution peut donc constituer un moyen simple, facile, prêt à l’emploi, et (comme disent les vendeurs d’abonnements téléphoniques à vie), « sans engagement », pour s’initier aux systèmes d’exploitation Linux et aux outils « libres » de création artistique.
On peut en savoir plus ici et télécharger ce système d’exploitation sur cette page.
Après les variables, les boucles et les objets, décompressons un peu avec les images.
Processing est capable de charger un fichier graphique en mémoire et de le manipuler de diverses façons notamment en l’affichant, en obtenant la valeur colorée d’un point précis ou en dessinant sur cette image. Les principes sont simples mais il y a une étape à ne pas négliger, celle du chargement du fichier graphique dans le dossier de données externes de l’animation. Lorsque l’on enregistre une animation, celle-ci se place dans un dossier qui porte le même nom. Dans ce dossier se trouve parfois un sous-dossier nommé « data » où seront stockées toutes les ressources que l’utilisateur souhaite utiliser : images, sons, mais aussi typographies « rastérisées » (sujet qui ne nous occupera pas tout de suite). Deux méthodes permettent de manipuler un fichier graphique.
Soit on crée le sous-dossier « data » pour y placer le fichier en question, soit, plus facile, en passant par la commande Sketch>Add File. Lorsque l’on sélectionne un fichier avec cette seconde méthode, Processing crée une copie du fichier à ajouter et place celle-ci dans le dossier « data » de l’animation, dossier que le programme crée s’il n’existe pas.
Pour que tout se déroule bien, il faut respecter quelques règles très simples.
Lorsque l’on manipule une image en mémoire, Processing la stocke sous la forme d’une variable de type PImage. (qui signifie Processing Image). Voici un exemple typique de déclaration et de chargement d’une image :
PImage monImage = loadImage("paysage.png");
La première partie, PImage monImage sert à déclarer une donnée PImage nommée monImage. Dans le même mouvement, on remplit cette variable monImage avec la commande loadImage(). En écrivant loadImage(un nom de fichier), on demande à Processing de se rendre dans le sous-dossier « data » pour y chercher le fichier en question et pour le charger en mémoire. Nous pouvons ensuite utiliser cette image à notre guise et accéder à ses propriétés1 . Par exemple en écrivant print(monImage.width);, nous obtiendrons la largeur de l’image (sous réserve que celle-ci ait effectivement été chargée). Le fait de connaître la largeur et la hauteur d’une image peut nous permettre, par exemple, de caler la taille de la fenêtre de notre application sur le format de l’image, comme ceci : size(monImage.width, monImage.height);.
Faisons un premier essai de chargement et d’affichage d’une image. Mon image se nomme « image_quend.jpg » (pour l’anecdote, il s’agit d’une photographie de Quend-Plage en Baie-de-Somme). Je vais tout d’abord charger l’image en mémoire, régler la taille de la fenêtre d’affichage sur la taille de l’image, puis afficher cette image, ce qui me donnera précisément ce résultat :
// déclaration de l'image nommée img PImage img; void setup(){ // chargement du fichier externe image_quend.jpg dans img img = loadImage("image_quend.jpg"); // réglage de la taille de la fenêtre sur les dimensions de img size(img.width, img.height); // affichage de l'image img à partir du point (0,0). image(img,0,0); }
La dernière commande, image(), sert à afficher une image à un endroit précis de la scène selon cette syntaxe : image( nom_de_l'image, x, y); ou image( nom_de_l'image, x, y, largeur, hauteur);, où nom_de_l'image est le nom de la variable de type PImage dans laquelle a été chargée l’image ; x est l’abscisse du point supérieur gauche de l’image ; y est son ordonnée ; les valeurs facultatives largeur et hauteur permettent de régler la largeur et la hauteur à laquelle l’image est reproduite. Dans la variante qui suit, l’image est copiée quatre fois sur la scène à la moitié de sa largeur (img.width/2) et de sa hauteur (img.height/2) et à quatre coordonnées différentes : (0,0), (la moitié de la largeur, 0), (la moitié de la largeur, la moitié de la hauteur), (0, la poitié de la hauteur).
PImage img;
void setup(){
img = loadImage("image_quend.jpg");
size(img.width, img.height);
image(img,0,0,img.width/2,img.height/2);
image(img,img.width/2,0,img.width/2,img.height/2);
image(img,0,img.height/2,img.width/2,img.height/2);
image(img,img.width/2,img.height/2,img.width/2,img.height/2);
}
Et voici le résultat :
Ici le rapport entre hauteur et hauteur reste homothétique, mais il peut ne pas l’être.
Dans l’exemple qui suit, la fenêtre fait 100×100 pixels et l’image est déformée pour avoir une largeur de 100 pixels et une hauteur de 100 pixels :
PImage img;
void setup(){
img = loadImage("image_quend.jpg");
size(100,100);
image(img,0,0,100,100);
}
La manipulation d’images sous Processing permet aussi d’obtenir la valeur colorée d’un pixel d’une image. Pour ce faire, on utilise la commande get(x,y);, où x et y sont l’abscisse et l’ordonnée du point dont on veut connaître la valeur. Par exemple pour connaître la valeur colorée du point (30,40) de l’image img, il me suffit d’écrire :
color c = img.get(30,40);
Dans ce cas précis, la couleur obtenue est stockée dans une variable de type color nommée c. Je peux ensuite utiliser cette couleur comme nous l’avons vu dans de précédents chapitres, par exemple avec background(c); ou fill(c); ou encore stroke(c);. Je peux aussi décomposer la couleur en extrayant sa valeur dans les rouges, dans les verts ou dans les bleux (respectivement : red(c), green(c) et blue(c)) ou encore en vérifiant sa luminosité (brightness(c)), etc.
La fonction get(x,y) est donc symétrique à point(x,y), à cette différence près qu’avec la fonction get(), les coordonnées du point doivent impérativement être des nombres de type entier (sans virgule). On peut donc écrire get(10,10) mais pas get(10.5,10.9).
Si l’on ne spécifie pas l’image que l’on veut manipuler (par exemple si l’on écrit get(10,10) et non monImage.get(10,10), c’est toute la fenêtre de l’application qui est prise en compte.
Passons à un cas pratique. Dans le programme qui suit, nous allons vérifier la couleur d’un point précis de l’image tous les dix pixels. Puis nous allons vérifier la luminosité de ce point (sur une échelle de 0 à 255) et transformer celle-ci en une valeur allant de 0 à 10 par l’utilisation de la fameuse règle de trois2 .
Ensuite, un rectangle est dessiné sur la scène avec la couleur du point testé, à l’emplacement de ce point et avec une taille correspondant à la valeur de 1 à 10 qui a été calculée. La boucle itérative (for(int a=0;a<…) sert à parcourir successivement les points de l’image.
PImage monImage;
noStroke();smooth();
background(0);
monImage = loadImage("image_quend.jpg");
size(monImage.width,monImage.height);
for(int a=0;a<width;a+=10){
for(int b=0;b<height;b+=10){
color c=monImage.get(a,b);
fill(c);
float t=( brightness(c)/255.0)*10;
rect(a,b,t,t);
}
}
Voilà l’image qui résulte de ces calculs :
On peut imaginer de nombreuses manipulations avec la commande get() et les commandes de dessin (point(), rect(), ellipse(), etc.). On peut en fait facilement créer des filtres de traitement d’image comme le flou, le « virage » vers une couleur, l’ajout de bruit, etc.
Parmi les autres commandes à connaître, mentionnons copy() et blend().
Ces deux commandes sont en apparence assez similaires à la commande image() que nous avons vu au début de l’article mais elles permettent d’extraire une partie précise d’une image et de la copier à des coordonnées et dans une taille précise de l’image. La syntaxe de copy() est la suivante :
copy(monImage, x, y, largeur, hauteur, dx, dy, largeur_destination, hauteur_destination);
où x et y sont les coordonnées du point supérieur gauche de la portion d’image que l’on veut copier. Les dimensions de cette portion d’image sont largeur et hauteur. dx et dy sont les coordonnées auxquelles va être copiée l’image et largeur_destination et hauteur_destination sont la largeur et la hauteur du rectangle dans lequel va être copiée la portion d’image. Si le paramètre monImage est omis, la commande s’appliquera à la fenêtre de Processing.
Quand à la commande blend(), elle s’utilise comme suit :
blend(monImage, x, y, largeur, hauteur, dx, dy, largeur_destination, hauteur_destination, MODE);
Sa syntaxe et sont fonctionnement sont identiques à ceux de la commande précédente si ce n’est qu’un dernier paramètre est ajouté, le « mode ». Ce mode est un mode de superposition classique (identique à ce que propose Photoshop ou à ce que l’on appelle les « encres » dans Director par exemple) qui peut être ADD, SUBTRACT, DARKEST, LIGHTEST, BLEND, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE ou BURN (toujours écrit de cette manière, en majuscules).
Cette nouvelle image a été obtenue avec le programme suivant :
PImage monImage;
size(524,100); background(255,0,0);
monImage = loadImage("image_quend.jpg");
blend(monImage, 0, 0, 100, 100, 20, 10, 80, 80, BLEND);
blend(monImage, 0, 0, 100, 100, 120, 10, 80, 80, ADD);
blend(monImage, 0, 0, 100, 100, 220, 10, 80, 80, SUBTRACT);
blend(monImage, 0, 0, 100, 100, 320, 10, 80, 80, LIGHTEST);
blend(monImage, 0, 0, 100, 100, 420, 10, 80, 80, DARKEST);
Tout d’abord, le fond de la fenêtre est « peint » en rouge (background(255,0,0)) puis les 100×100 premiers pixels de notre image de départ sont copiés et rétrécis à la taille de 80×80 pixels. Ils sont appliqués sur notre fond rouge avec plusieurs modes : BLEND, ADD, SUBTRACT, LIGHTEST et DARKEST.
Il existe un moyen alternatif extrêmement performant pour manipuler les images en agissant directement sur la liste des pixels de l’image. Pour cela on utilise les fonctions loadPixels(), updatePixels() et le tableau d’entiers pixels[]. Nous ne verrons pas cela aujourd’hui.
Pour finir, signalons que l’on peut aussi charger et afficher dans Processing des images vectorielles3 au format SVG (facile à créer avec Illustrator par exemple) avec les commande loadShape() et shape(). Nous ne verrons pas cela aujourd’hui non plus.
loadImage() par requestImage(). [↩]