Arts numériques

Le design gÃ©nÃ©ratif, une introduction

Stéphane Noel — 2013-05-05T21:27:45Z

Le design gÃ©nÃ©ratif est un concept Ã la mode. Une tentative de dÃ©finition ici.

Le processus de crÃ©ation standard consiste Ã dÃ©marrer sur une intention (ou concept, ou idÃ©e, ou envie, peu importe le terme) et sur cette base produire une crÃ©ation Ã l'aide de la main et d'un outil, qui peut Ãªtre un crayon aussi bien qu'un outil logiciel comme Photoshop ou Illustrator, d'ailleurs.

On peut complÃ©ter ce schÃ©ma par une boucle de rÃ©troaction. En effet, lorsqu'on est Ã l'intÃ©rieur d'un processus crÃ©atif, on Ã©value le rÃ©sultat obtenu et selon qu'il corresponde ou pas aux attentes, ou donne de nouvelles idÃ©es, on revient Ã la main pour amÃ©liorer le processus de crÃ©ation, pour obtenir d'autres rÃ©sultats.
On obtient ce schÃ©ma :

Avec le design gÃ©nÃ©ratif, le but est de fabriquer une machine (gÃ©nÃ©ralement un logiciel) destinÃ©e Ã gÃ©nÃ©rer des formes et dont on dÃ©termine le comportement, plutÃ´t que de dessiner directement. Le dÃ©veloppement passe par une phase plutÃ´t abstraite dans laquelle on dÃ©termine un ensemble de procÃ©dures, qu'on appelle algorithme, puis le codage de cet algorithme dans un environnement spÃ©cifique (javascript, java, python, c++, etc.). Le rÃ©sultat obtenu peut Ãªtre Ã©valuÃ© par l'auteur avant de modifier soit les algorithmes, soit le code et les paramÃ¨tres. C'est la machinerie, gÃ©nÃ©ralement du code, qui produit le rÃ©sultat, et pas la main dans ce cas.

Pourquoi tant de complexitÃ© ?

On pourrait se demander quel est lâ€™intÃ©rÃªt de passer par un media aussi complexe que le code pour obtenir au final quelque chose que l'on peut obtenir par des moyens plus directs comme la main associÃ©e au crayon ou Ã un instrument de musique, etc.

MÃ©thodologiquement, le design gÃ©nÃ©ratif correspond au dÃ©sir toujours plus grande de maitrise du processus crÃ©atif. Produire un mÃªme dessin ou objet avec des variantes de taille, d'outil, de couleur, de support est une demande de longue date de l'industrie, mais aussi des artistes. L'informatique a rÃ©pondu Ã cette attente en modifiant le travail des artistes, en dÃ©portant une partie de leur travail d'exÃ©cution vers l'algorithmie, c'est Ã dire la capacitÃ© Ã dÃ©couper un processus en une sÃ©rie d'action dites "non ambiguÃ« s", et par lÃ -mÃªme rÃ©pÃ©tables. Ce n'est donc pas une prÃ©occupation isolÃ©e ni spÃ©cifique au champ artistique.

Cette mÃ©diation donne potentiellement plusieurs gains :
– La profusion : en gÃ©nÃ©rant 100 graphiques sur base d'un mÃªme procÃ©dÃ©, on peut ensuite choisir le ou les meilleurs rÃ©sultats. Le "Ad generator" de Alexis Lloyd (2006) produisait une multitude d'association texte/image. Une partie est sans intÃ©rÃªt, mais d'autres sont exploitables.

– L'exhaustivitÃ© : un procÃ©dÃ©, exploitÃ© par un ordinateur travaillant sans relÃ¢che, peut passer en revue, systÃ©matiquement, toutes les possibilitÃ©s combinatoires qui s'offre Ã lui. Sol Lewitt, avec son "Variations Of Incomplete Open Cubes" dessine ainsi toutes les combinatoires possibles et diffÃ©rentes de 3 Ã 8 arÃªtes.

– La complexitÃ© : parce qu'ils sont produits par des machines qui ignorent le sommeil, les dessins gÃ©nÃ©ratifs peuvent Ãªtre vertigineux de complexitÃ© : milliers de lignes sinueuses, espaces tridimensionnels aux fins dÃ©gradÃ©s colorÃ©s, espaces infinis. Une map de Minecraft est sans fin, crÃ©Ã©e Ã la demande, alternant dÃ©serts, forÃªts tropicales et campagnes verdoyantes toujours diffÃ©rentes.

Roman Verostko, Green cloud, 2011

– La prÃ©cision : lÃ oÃ¹ la main tremble, le mÃ©lange de couleur peut manquer d'uniformitÃ©, l'ordinateur, l'imprimante, la dÃ©coupeuse, peuvent lisser la production et permettre de jour des formes combinÃ©es avec la rigueur du scientifique.
– La rapiditÃ© : sur base de code, on peut tester un procÃ©dÃ© avec une vitesse qui dÃ©passe ce que la main peut rÃ©aliser. L'ordinateur devient extension non seulement dans l'espace, mais aussi dans le temps.
– Le temps rÃ©el : la capacitÃ© d'un code Ã rÃ©agit Ã des interactions en temps rÃ©el permet d'intÃ©grer une dimension de performance dans l'action du dessin. Jackson Pollock a utilisÃ© des rÃ¨gles simple qui lui permettait de s'immerger totalement dans le geste de peindre, dans sa temporalitÃ© mÃªme.

Il s'agit donc de crÃ©er un outil, de la paramÃ©trer, de la regarder produire et de la corriger au besoin. Une fois l'outil produit, il peut Ãªtre paramÃ©trÃ© pour produire des rÃ©sultats lÃ©gÃ¨rement ou complÃ¨tement diffÃ©rents.

Un peu plus d'info

– Le site "generative design" qui contient un grand nombre d'expÃ©rimentation en Processing tÃ©lÃ©chargeable. Le site est traduit en franÃ§ais.
– Une sÃ©rie de rÃ©fÃ©rence sur le site de Olivier Evrard, professeur Ã LiÃ¨ge
– Le site Openprocessing, contenant des milliers de codes pour Processing utilisables

Translate, rotate et pushMatrix() en 2 dimensions

Stéphane Noel — 2013-03-10T22:02:23Z

Les commandes translate() et rotate() permettent de dÃ©placer le point d'origine d'une animation. Ces commandes affectent tous les dessins qui vont suivre. pushMatrix() va nous permettre d'isoler ces opÃ©rations, comme on le verra.

Translate

Pour notre test, nous allons charger un fichier SVG, plutÃ´t qu'une image. Le SVG est un format vectoriel Ã la norme ouverte, un concurrent open source au format illustrator, lisible nativement.

PShape m16; void setup() { size(600, 600); m16=loadShape("m16.svg"); } void draw() { background(255); shape(m16, 0, 0); }

L'image s'affiche dans le coin supÃ©rieur gauche, sans surprise.
Pour notre exemple, nous voulons faire tourner ce flingue comme l'aiguille d'une horloge. Pour cela, nous allons dÃ©placer le point 0,0 de notre animation au centre de l'animation. Pour Ã§a, utilisons la commande translate().

PShape m16; void setup() { size(600, 600); m16=loadShape("m16.svg"); } void draw() { background(255); translate(width/2, height/2); shape(m16, 0, 0); }

Magnifique. VoilÃ notre m16 au centre de l'image. Tout ce qui sera dessinÃ© aprÃ¨s la fonction translate() le sera Ã partir de ces nouvelles coordonnÃ©es.

Rotate

Maintenant que le flingue est au centre, nous allons le faire tourner sur base de la fonction rotate(), couplÃ©e Ã la fonction second(), qui donne un chiffre de 0 Ã 59.

PShape m16; void setup() { size(400, 400); m16=loadShape("m16.svg"); } void draw() { background(255); translate(width/2, height/2); float angle=map(second(),0,59,0,TWO_PI); rotate(angle); shape(m16, 0, 0); }

Rotate() fait tourner la surface de l'animation exactement comme si on tournait une feuille de papier pour dessiner une ligne plus confortablement avec un crayon. L'argument dans les parenthÃ¨ses est exprimÃ©e en radiants, un chiffre entre 0 et deux fois la valeur de PI (environ 6,28).

Le problÃ¨me, c'est que tout ce qui sera dessinÃ© ensuite gardera les mÃªmes coordonnÃ©es 0,0...

PShape m16; void setup() { size(400, 400); m16=loadShape("m16.svg"); } void draw() { background(255); translate(width/2, height/2); float angle=map(second(),0,59,0,TWO_PI); rotate(angle); shape(m16, 0, 0); line(0,30,200,30); }

Ã‡a peut Ãªtre compliquÃ©, du coup, de dessiner une autre forme au point 0,0 d'origine. Heureusement, les fonctions pushMatrix() et popMatrix() sont lÃ pour aider.

pushMatrix() et popMatrix()

pushMatrix() crÃ©e une parenthÃ¨se, retenant l'endroit ou se trouve le point d'origine avant qu'on l'appelle. On peut ensuite opÃ©rer toutes les fonctions translate() et rotate() nÃ©cessaire.
popMatrix() ferme cette parenthÃ¨se, et revient au point d'origine avant l'appel de pushMatrix().

PShape m16; void setup() { size(400, 400); m16=loadShape("m16.svg"); } void draw() { background(255); pushMatrix(); translate(width/2, height/2); float angle=map(second(),0,59,0,TWO_PI); rotate(angle); shape(m16, 0, 0); popMatrix(); line(0,30,200,30); }

VoilÃ . Ces mÃ©thodes sont trÃ¨s utiles pour dessiner diffÃ©rents objets, Ã diffÃ©rents endroits d'une animation, sans se soucier des coordonnÃ©es. Translate() se charge de dÃ©placer le point d'Ã©criture, dessiner, puis revenir Ã zÃ©ro.

Fichiers : lister les fichiers contenus dans un dossier

Stéphane Noel — 2012-12-11T15:16:57Z

Pour charger 10 images, 10 sons, ou dix fichiers quelconques, on peut passer par une liste que l'on Ã©crit en tÃªte de fichier. Mais Ã§a peut Ãªtre fastidieux. Voici une classe permettant de lister les fichiers (en choisissant le type de fichier) contenu dans un dossier provenant du dossier du sketch.

Le code de la classe

// list_directory(nom du dossier, extension a filtrer separÃ©s par des |); // renvoie un array de string class list_directory { String extension; String[] fichiers; String dossier; int nb_items; //constructeur list_directory(String dossier, String extension){ this.dossier=dossier; this.extension=extension; fichiers = listFileNames(sketchPath + "/" + dossier, extension); nb_items=fichiers.length; println(fichiers.length + "elements"); } // listage le contenu d'un dossier en ne prenant que les extensions fournies ------------------------- String[] listFileNames(String dir, String extension) { File file = new File(dir); if (file.isDirectory()) { String names[] = file.list(); // procedure d'elimination des fichiers non concernÃ©s String[] names_ok= {}; for(int i=0; i

`Utiliser la classe`


La classe s'utilise de maniÃ¨re traditionnelle : on crÃ©e un objet et on appelle le constructeur. On doit spÃ©cifier le nom du dossier (Ã partir de la racine du dossier du sketch) et les extensions dÃ©sirÃ©es, sÃ©parÃ©es par des pipes ( | ). On obtient une liste directement utilisable dans une boucle.
import java.io.File; // necessaire seulement depuis la version 2b07 ! String dossier_source="database"; // nom du dossier list_directory liste; void setup(){ size(600,600); liste = new list_directory(dossier_source, "jpg|png|gif"); } void draw(){ background(0); for (int i=0;i



Lire un fichier xml
Stéphane Noel — 2012-03-28T13:44:39Z
Ce code de lecture permet de lire un fichier xml Ã©crit par le code contenu dans l'article "CrÃ©er un fichier xml".
		Voir l'article "crÃ©er un xml"
Ce code gÃ©nÃ¨re une structure comme ceci
   73 71 69 70 71 71
Des images stockÃ©es pixel par pixel dans un tag appelÃ© "Bytes" lui-mÃªme Ã l'intÃ©rieur d'un tag appelÃ© "EcranMatrix". On accÃ¨de aux donnÃ©es comme suit.
// Lecteur de fichier xml XMLElement xml; int numframes; int compteur=0; float ratiox; float ratioy; boolean play=true; void setup() { size(640, 400); // calcul de la taille des pixels ratiox=width/44.0; ratioy=height/28.0; // vitesse de lecture : 15 fames par secondes frameRate(15); xml = new XMLElement(this, "test.xml"); numframes=xml.getChildCount(); noStroke(); } void draw() { // recuperer le contenu du tag "EcranMatrix" XMLElement kid=xml.getChild(compteur); // recuperer le contenu du tag "Bytes" XMLElement bytes=kid.getChild(0); // maintenant, recuperer les pixels dans les tags "int" // et afficher la grille de 44 * 28 for (int y=0;y<28;y++) { for (int x =0; x<44;x++) { XMLElement lepixel = bytes.getChild((y*44)+x); String contenu = lepixel.getContent(); fill(int(contenu)); rect(x*ratiox, y*ratioy, ratiox, ratioy); } } // en boucle compteur++; if (compteur >= numframes) { compteur=0; } } // arreter ou relancer avec la barre d'espacement void keyPressed() { if (key==' ') { if (play==false) { play=true; loop(); } else { play=false; noLoop(); } } }


Parcourir la surface de l'animation en grille
Stéphane Noel — 2012-02-05T22:55:42Z

		On peut parcourir la surface de l'animation pour y crÃ©er des Ã©lÃ©ments Ã intervalles rÃ©guliers, une grille donc. Deux boucles imbriquÃ©es y suffit.
		Une variable "division" dÃ©finit le nombre de division dans la page. On calcule la largeur et hauteur de la grille Ã partir de la taille de la fenÃªtre et du nombre de division.
Ensuite, une premiÃ¨re boucle va parcourir l'axe vertical de l'animation, une deuxiÃ¨me va parcourir l'axe horizontal.
Ce script crÃ©e une ligne diagonale de haut en bas ou de bas en haut, en fonction d'un tirage au sort.
La fonction "noLoop()" permet d'arreter le script aprÃ¨s un dessin, et de le relancer lorsqu'on appuie sur une touche.
Le code :
int division=20; float largeur; float hauteur; void setup(){ size(800,800); largeur=width/division; hauteur=height/division; } void draw(){ background(255); for(int y=0;y 5){ line(x,y,x+largeur,y+hauteur); } else { line(x,y+hauteur,x+hauteur,y); } } } noLoop(); } void keyPressed(){ loop(); }


CrÃ©er un fichier xml
Stéphane Noel — 2011-12-06T14:13:04Z
Ce script permet, Ã partir de la webcam, de gÃ©nÃ©rer un fichier xml. Une classe a Ã©tÃ© crÃ©Ã©e pour l'occasion. Elle peut crÃ©er un fichier xml et d'Ã©crire des Ã©lÃ©ments Ã partir de l'analyse d'une image.
Ce script a Ã©tÃ© produit pour une structure de xml bien prÃ©cise. Pour l'Ã©criture d'une autre structure il faudra modifier la classe...
		La classe xml_writer
Voici la classe
voici le code: // classe xml_writer // crÃ©e un fichier xml // methode : // .initialise("nom_du_fichier") // ouvre l'Ã©criture // .ajouteFrame(image) // ajoute un frame Ã partir d'une image croppÃ©e au besoin // .ajouteFrame(array) // ajoute un array de nombre // .stoppe() // ferme le fichier (indispensable) class xml_writer { String nomdufichier; int nb_images; PImage frame; boolean start; PrintWriter output; xml_writer(String tnom) { nomdufichier=tnom; start=false; } void initialise() { if (start==false) { output = createWriter(nomdufichier); output.println(""); output.println(""); start=true; nb_images=0; println("fichier crÃ©Ã©"); } } void stoppe() { if (start==true) { output.flush(); // Writes the remaining data to the file output.println(""); output.close(); // Finishes the file println("fichier fermÃ©"); } } void ajouteFrame(int[] f) { println("ajout d'un frame depuis un array"); if (start==true) { if (f.length > (44*28)-1) { output.println(" "); output.println(" "); for (int i=0;i< 44*28;i++) { output.println(""+ f[i] +""); } output.println(" "); output.println(" "+nb_images+""); output.println(" "); nb_images++; } } } void ajouteFrame(PImage tframe) { println("ajout d'un frame depuis une image"); float ratio=44*1.0/28*1.0; // ratio de l'image float imaratio = tframe.width*1.0 / tframe.height*1.0; if (imaratio < ratio) { tframe.resize(44, 0); } else { tframe.resize(0, 28); } tframe.save("images/img_"+ nb_images +".tif"); PImage finali=tframe.get(0, 0, 44, 28); if (start==true) { finali.loadPixels(); output.println(" "); output.println(" "); for (int i=0;i< 44*28;i++) { int pixelColor = finali.pixels[i]; // Faster method of calculating r, g, b than red(), green(), blue() int r = (pixelColor >> 16) & 0xff; int g = (pixelColor >> 8) & 0xff; int b = pixelColor & 0xff; float luminance = 0.3*r + 0.59*g + 0.11*b; output.println(" "+ int(luminance) +""); } output.println(" "); output.println(" "+nb_images+""); output.println(" "); nb_images++; } else { println("ecriture impossible, fichier non ouvert"); } } }
Un exemple d'utilisation cette classe
Ce code envoie l'image de l'Ã©cran vers la classe, qui se charge de la rÃ©duire puis la coder dans le xml. Une image est aussi sauvÃ©e dans le dossier du script.
import processing.video.*; Capture video; xml_writer lefichier; void setup(){ size(640,480); video = new Capture(this, 640, 480, 15); lefichier = new xml_writer("test.xml"); lefichier.initialise(); background(255); } void draw(){ set(0, 0, video); } public void keyPressed() { switch (key) { case ' ': lefichier.ajouteFrame(get()); break; case 'x': lefichier.stoppe(); exit(); break; } } public void captureEvent(Capture c) { c.read(); }
Une variante : exporter les images d'un film
Ici, on capture une image tous les 15eme de secondes et on les exporte. Pas d'action manuelle, le script se lance, fait son job et quitte.
Attention, la librairie video est assez difficile sur les fichiers Ã afficher. Certaines vidÃ©os se lisent mal, crashent parfois. Tester diffÃ©rents types de compression. Je n'ai jamais rÃ©ussi a Ãªtre certain d'un format...
import processing.video.*; Movie myMovie; xml_writer lefichier; void setup() { size(640, 480, P2D); background(0); frameRate(15); // Ne pas oublier de placer la vidÃ©o dans le dossier du script // et de modifier la ligne ci-dessous myMovie = new Movie(this, "station.mov"); myMovie.play(); lefichier = new xml_writer("movie.xml"); lefichier.initialise(); } void movieEvent(Movie myMovie) { myMovie.read(); } void draw() { image(myMovie, 0,0,width,height); if (myMovie.duration() == myMovie.time()) { lefichier.stoppe(); exit(); } else { lefichier.ajouteFrame(myMovie.get()); } } void keyPressed() { // appuyer sur n'importe quelle touche quitte proprement lefichier.stoppe(); exit(); }


Ecrire et parser un fichier simple
Stéphane Noel — 2011-11-23T10:52:07Z

		Le parsing peut Ãªtre dÃ©fini en informatique comme l'opÃ©ration d'extraire une information structurÃ©e d'un flux de donnÃ©es. Un ensemble de caractÃ¨res informatiques d'un cÃ´tÃ©, une information utilisable de l'autre, et au milieu analyse et extraction.
		Garder une partie des informations produites par un logiciel est un problÃ¨me intÃ©ressant en informatique. Pouvoir utiliser ces informations, soit pour restituer fidÃ¨lement le processus qui les a crÃ©Ã©, soit pour les transformer en autre chose, est un autre problÃ¨me intÃ©ressant.
Cet article s'attache Ã montrer un systÃ¨me simple d'Ã©criture de donnÃ©es dans un fichier texte, et un autre systÃ¨me de lecture et utilisation de ces mÃªmes donnÃ©es.
1) Ã©crire des donnÃ©es avec printWriter
Printwriter est une classe permettant de gÃ©nÃ©rer des fichiers texte simples. On trouvera sur la page de rÃ©fÃ©rence sur le site de Processing un exemple, que nous allons modifier lÃ©gÃ¨rement pour le rendre plus riche en information.
PrintWriter output; void setup() {
size(600,400);
frameRate(24); // on calibre une vitesse d'exÃ©cution // Create a new file in the sketch directory output = createWriter("positions.txt"); background(255);
} void draw() { point(mouseX, mouseY); output.println(mouseX + " " + mouseY); // ici on a lÃ©gÃ¨rement modifiÃ©
} void keyPressed() { output.flush(); // Writes the remaining data to the file output.close(); // Finishes the file exit(); // Stops the program
}
Dans le setup(), j'ai ajoutÃ© un frameRate(24), calibrant la vitesse du script Ã la vitesse de 24 frames par seconde, une taille et un background Ã l'animation. Dans le draw(), j'ai juste modifiÃ© la ligne commenÃ§ant par "output" pour Ã©crire en plus de la coordonnÃ©e en X de la souris, celle en Y.
Ce code produit un fichier texte dÃ¨s le lancement du script, et ne s'arrÃªte que lorsque l'on appuie sur n'importe quelle touche du clavier. Entre les deux, les coordonnÃ©es de la souris sont Ã©crite Ã la vitesse du script, soit 24 fois par seconde.
Ce script crÃ©e un fichier du nom de "positions.txt" dans le dossier du sketch, et Ã©crit Ã chaque draw() une ligne (avec un retour Ã la ligne) contenant mouseX, un espace, et mouseY. Appuyer sur une touche termine le fichier. Cette opÃ©ration est importante : un fichier ouvert mais pas fermÃ© ne sera pas valide. Il ne pourra pas Ãªtre ouvert plus tard.
En laissant tourner ce script pendant quelques dizaines de secondes et en oubliant pas de fermer, on obtient un fichier texte trÃ¨s lÃ©ger, contenant des donnÃ©es numÃ©riques de ce type :
2 350
2 350
6 345
14 339
24 334
32 331
38 328
46 326
50 323
60 317
Deux chiffres sÃ©parÃ©s par un espace, les coordonnÃ©es de la souris durant l'exÃ©cution du script.
La richesse des arts numÃ©riques rÃ©side notamment dans la diversitÃ© des sources de donnÃ©es : souris, camÃ©ra, clavier, micro, flux du net, fichier de tableur, etc.
2) Lire le fichier texte avec loadStrings()
Nous allons maintenant crÃ©er un autre sketch, capable de lire notre fichier positions.txt et d'utiliser ses donnÃ©es.
On prendra bien soin de placer le fichier positions.txt dans le dossier du script !
String[] infos;
int compteur=0; void setup(){ size(600,400); frameRate(24); infos=loadStrings("positions.txt"); println("le fichier contient " + infos.length + " lignes"); background(255);
} void draw(){ String i[] = split(infos[compteur]," "); int posx=int(i[0]); int posy=int(i[1]); ellipse(posx,posy,20,20); compteur++; if(compteur > infos.length-1){ saveFrame("resultat.jpg"); noLoop(); } } void keyPressed(){ compteur=0; background(255); loop();
}

Le code charge le fichier "positions.txt" avec la fonction loadStrings() qui a la particularitÃ© de renvoyer un array de Strings, une liste de texte. LoadStrings() sÃ©pare le fichier texte sur base des retour Ã la ligne, ce qui est parfait pour nous : chaque ligne contient les coordonnÃ©es de la souris enregistrÃ©e en temps rÃ©el.
ProblÃ¨me : les deux coordonnÃ©es de la souris sont considÃ©rÃ©es par Processing comme du texte (String) et pas deux donnÃ©es numÃ©rique (int). Il faut donc :

– sÃ©parer les deux informations. C'est la fonction split qui s'en charge. Elle a besoin de savoir ce qui sÃ©pare les informations dans le texte. Dans notre cas, c'est un espace, donc on spÃ©cifie de couper la ligne en autant de morceaux que split trouve sÃ©parÃ© par des espaces (voir la page sur split()) :
String i[] = split(infos[compteur]," ")
On doit ensuite transformer ces deux informations, car elle sont actuellement considÃ©rÃ©es par Processing comme du texte (String) et pas comme des chiffres (int). La fonction int() se charge de cette transformation.
Enfin, on utilise les donnÃ©es pour Ã©crire un cercle. Lorsque toutes les lignes sont lues, le sketch se met en pause, et est relancÃ© si on appuie sur une touche.
Nettoyer les donnÃ©es
Lors du lancement du script, j'ai mis un temps Ã placer le curseur convenablement pour Ã©crire le mot "hello". J'ai perdu du temps, et la souris a briÃ¨vement traversÃ© le bord de l'Ã©cran, laissant trois points perdus dans l'espace. Je peux nettoyer ces erreurs directement dans le fichier "positions.txt". Je l'ouvre et repÃ¨re dans le dÃ©but du fichier les points perdus, ainsi que le moment d'arrÃªt avant le dÃ©but du dessin lui-mÃªme : la souris est en 0 0 au dÃ©but du script, puis deux coordonnÃ©es sont Ã©crites, plus la troisiÃ¨me coordonnÃ©e se rÃ©pÃ¨te un grand nombre de fois.
0 0
0 0
0 0
0 0
0 0
0 0
572 45
560 29
545 13
545 13
545 13
545 13
545 13
Je supprime manuellement ces donnÃ©es parasites et le dessin dÃ©marre directement au lancement du script, tout propre.

Modifier l'interprÃ©tation des donnÃ©es
La richesse de l'art numÃ©rique rÃ©side notamment dans la maniÃ¨re dont on peut rÃ©interprÃ©ter des donnÃ©es. On peut maintenant jouer avec les donnÃ©es contenues dans le fichier :

– lire les donnÃ©es Ã l'envers, de la fin du fichier vers son dÃ©but

– dessiner des lignes entre les point pour faire un dessin continu

– dessiner en dÃ©formant l'Ã©chelle et les proportions

– dessiner Ã l'envers dans l'espace de l'animation

– gÃ©nÃ©rer un son ou une couleur ou une vitesse de lecture d'une vidÃ©o

– dessiner un parcours sur un plan gÃ©ographique

– ...

– 








Parser d'autres types de donnÃ©es
Il est Ã©videmment possible d'analyser d'autres types de donnÃ©es, comme les villes et leur localisation, ou encore la population d'un pays.

Les codes postaux et gÃ©olocalisation des villes belges

DiffÃ©rentes statistiques de population en Belgique


PDF : faire un livre Ã partir de la camera
Stéphane Noel — 2011-10-27T09:54:42Z
Ce script fabrique un pdf. Sur chaque page, 9 d'images capturÃ©es Ã intervalle rÃ©gulier (une seconde). On appuie sur une touche pour lancer la crÃ©ation du pdf, on appuie sur une touche pour la stopper Ã la fin de la prochaine feuille.
		Ce script peut Ã©videmment Ãªtre amÃ©nagÃ© :

– le nombre d'images par page peut Ãªtre adaptÃ©

– l'intervalle peut Ãªtre rÃ©glÃ©

– les marges peuvent Ãªtre adaptÃ©es

Ces variables sont en dÃ©but de script.
Les images sont collÃ©es les unes aux autres, mais une petite variable supplÃ©mentaire devrait permettre de les sÃ©parer sur la largeur et la hauteur.
Une police - Aller light - est utilisÃ©e. Elle peut Ãªtre remplacÃ©e par une autre ou tÃ©lÃ©chargÃ©e gratuitement (suivre le lien dans le script).
Le code :
import processing.video.*; import processing.pdf.*; // appuyer sur une touche pour commencer // appuyer pour stopper // le script quitte alors en fin de page // variable du script int nb_ima=3; // nombre d'images Ã placer en largeur int marges=40; // pixels Ã gauche, droite et haut et bas Ã respecter int ledelai=1000; // delai entre chaque image PGraphicsPDF pdf; PFont myFont; Capture video; boolean stop=false; boolean start=false; float px, py; float largeur_ima, hauteur_ima; void setup() { size(594, 594); //String[] fontList = PFont.list(); //println(fontList); video = new Capture(this, 320, 240, 24); pdf = (PGraphicsPDF)beginRecord(PDF, "video_book.pdf"); // titre du pdf beginRecord(pdf); largeur_ima=(width-(2*marges))/nb_ima; hauteur_ima=(largeur_ima/4)*3; px=marges; py=marges; background(255); myFont = createFont("Aller-Light", 24); // police gratuite : http://www.fontsquirrel.com/fonts/Aller textFont(myFont, 10); fill(0); } void draw() { if (start==true) { // appuyer sur une touche pour commencer delay(ledelai); // attente entre chaque image image(video, px, py, largeur_ima, hauteur_ima); px=px+largeur_ima; if (px>(width-marges)-10) { py+=hauteur_ima; px=marges; if (py > (height-marges-10)) { // ajoute la date String texte = day() +"/"+month()+"/"+year()+", "+hour()+":"+minute()+":"+second(); text(texte, marges, (height-marges)+15); // si on a demandÃ© l'arret, cloturer ici if (stop==true) { finit(); } else { pdf.nextPage(); px=marges; py=marges; background(255); } } } } } public void captureEvent(Capture c) { c.read(); } void keyReleased() { if (start==false) { start=true; } else if (stop==false) { stop=true; } } void finit() { endRecord(); exit(); // Quit }


Dessiner avec curveVertex
Stéphane Noel — 2011-10-13T10:15:33Z
curveVertex permet de dessiner des courbes vectorielles. Il existe d'autres mÃ©thodes en Processing pour utiliser les vecteurs, mais curveVertex est la mÃ©thode la plus simple, du moment que l'on a compris sa logique.
		La fonction est documentÃ©e sur le site de processing, ici. Elle contient, dans les parenthÃ¨ses, deux ou trois informations : les coordonnÃ©es en x,y et Ã©ventuellement z.
curveVertex(10,30);
Pour crÃ©er une forme vectorielle avec curveVertex, on commencera et finira par la dÃ©claration beginShape()
beginShape(); // ici le dessin endShape();
Attention, la majuscule sur Shape est importante.
A partir de lÃ on va dÃ©clarer une sÃ©rie de points qui vont servir de point de relai pour le dessin vectoriel. On ne doit pas, avec curveVertex, dÃ©clarer de poignÃ©e comme dans une courbe de BÃ©zier standard. Les poignÃ©es, pour rappel, sont des points qui influent sur la trajectoire du tracÃ©. Chaque trait possÃ¨de une poignÃ©e Ã son point de dÃ©part et d'arrivÃ©e.

CurveVertex gÃ¨re lui-mÃªme les poignÃ©es, sauf la premiÃ¨re et la derniÃ¨re du tracÃ©. C'est important a retenir : la premiÃ¨re et la derniÃ¨re commande curveVertex() d'un tracÃ© sont des poignÃ©es et pas des points du dessin. En consÃ©quence, un simple trait sera dÃ©fini par 4 commandes : 
– la premiÃ¨re contient les coordonnÃ©es x et y de la poignÃ©e de dÃ©part

– la deuxiÃ¨me contient les coordonnÃ©es x et y du premier point

– la troisiÃ¨me contient les coordonnÃ©es x et y du deuxiÃ¨me point

– la quatriÃ¨me contient les coordonnÃ©es x et y de la poignÃ©e de fin de tracÃ©.

Ces quatre commandes dessinent dont une ligne droite, car les poignÃ©es ont les mÃªmes coordonnÃ©es que les deux points du dessin. Si nous modifions les coordonnÃ©es des deux poignÃ©es, nous allons dessiner une ligne unique composÃ©e de deux points, mais cette fois ce sera un arc.

Tous les points ajoutÃ©s dans le tracÃ© avec curveVertex() crÃ©eront des points supplÃ©mentaires, avec des poignÃ©es "automatiques" guidant les courbes, ce qui suffit la plupart du temps.

Fermer une forme
Si on veut fermer une forme de maniÃ¨re fluide, il faudra jouer avec les poignÃ©es de maniÃ¨re rÃ©flÃ©chie.

– Le premier et le dernier point sont identiques, on aura donc 5 points pour une forme dessinÃ©e en 4 points comme ce losange arrondi.

– la premiÃ¨re poignÃ©e a les mÃªmes coordonnÃ©es que l'avant dernier point.

– la derniÃ¨re poignÃ©e a les mÃªmes coordonnÃ©es que le deuxiÃ¨me point.



PDF : 40 pages avec des lignes alÃ©atoires
Stéphane Noel — 2010-10-23T22:37:00Z
Un script complet pour gÃ©nÃ©rer un livre de 40 pages avec couverture avant et arriÃ¨re. Le script lui-mÃªme gÃ©nÃ¨re des lignes avec un dÃ©placement alÃ©atoire. DÃ¨s que la ligne touche le bord de la zone dÃ©finie pour le dessin, une nouvelle page est crÃ©Ã©e et un nouveau dessin dÃ©marre. Une fois les 40 pages crÃ©Ã©e, le script s'arrÃªte.
		Le code a des variables paramÃ©trables en tÃªte du script, pour dÃ©terminer l'amplitude des lignes, le nombre de pages, les marges du dessin, l'auteur du livre...

Chaque dessin est accompagnÃ© d'une numÃ©rotation de page, du dÃ©compte du nombre de lignes et du temps d'exÃ©cution du dessin.
//
// Livre aleatoire - octobre 2010
//
import processing.pdf.*;
PGraphicsPDF pdf; PFont myFont; // parametres du dessin, changer pour affiner
int nbpages=40; // nombre de pages
int marge=100; // marges Ã respecter
int deplacement=8; // dÃ©placement maximum entre deux iterations
String auteur="StÃ©phane Noel"; // variable du script
float posx,posy,p_posx,p_posy;
int compteur=1;
int nbsquare=0;
int startmillis=0; void setup() { size(594, 594); //String[] fontList = PFont.list(); //println(fontList); myFont = createFont("Aller-Light", 24); // police gratuite : http://www.fontsquirrel.com/fonts/Aller textFont(myFont,24); pdf = (PGraphicsPDF)beginRecord(PDF, "randomlinesbook.pdf"); // titre du pdf beginRecord(pdf); background(255); positionnebloc(); // nouvelle position de dÃ©part du dessin commencelivre(); // appelle la fonction qui cree la couverture fill(255); stroke(10); numerotation();
} void draw() { fill(255); line(posx,posy,p_posx,p_posy); p_posx=posx; p_posy=posy; nbsquare++; posx+=random(-deplacement,deplacement); posy+=random(-deplacement,deplacement); if(posx > width-marge || posx < marge || posy > height-marge || posy < marge) { // si la ligne sort de la zone fill(0); affichenbsquare(); afficher le nombre de lignes et le temps d'execution compteur++; fill(255); pdf.nextPage(); if(compteur < nbpages) { background(255); positionnebloc(); // nouvelle position de dÃ©part du dessin nbsquare=0; numerotation(); } else { // si le nombre de page est atteint finitlivre(); // genere la couverture arriere endRecord(); exit(); // Quitte } }
} void positionnebloc() { p_posx=posx=random(width*0.45,width*0.55); p_posy=posy=random(height*0.45,width*0.55);
} void numerotation() { float ty=height-(marge/2); textFont(myFont,8); fill(0); textAlign(LEFT); text("Page " + compteur,marge,ty);
} void affichenbsquare() { // calcule le temps de rÃ©alisation int duree=millis()-startmillis; float ty=height-(marge/2); textFont(myFont,8); fill(0); textAlign(RIGHT); text(duree/1000+ " secondes, " + nbsquare + " formes",width-marge,ty); startmillis=millis();
} void commencelivre() { // cree la couverture fill(0); textAlign(CENTER); textFont(myFont,30); text("The random line book",width/2,(height/2)-30); textFont(myFont,18); text(auteur,width/2,(height/2)+30); pdf.nextPage(); pdf.nextPage(); background(255);
} void finitlivre() { pdf.nextPage(); // une page blanche fill(0); // cree une page avec la date de crÃ©ation textAlign(LEFT); String texte="\nCe livre a Ã©tÃ© entiÃ¨rement gÃ©nÃ©rÃ© par un script.\n\nChacun de ses dessins part de la zone centrale de la page, et est composÃ© de traits d'une longueur de " + (deplacement*25.1)/72 +" millimÃ¨tres maximum dans n'importe quelle direction, Ã partir du trait prÃ©cÃ©dent." +" Chaque dessin s'arrete lorsque le bord de la zone de dessin est touchÃ©.\n\n" +"Ce livre est composÃ© de "+ nbpages +" pages. Il a Ã©tÃ© gÃ©nÃ©rÃ© le "+day() +"/"+month()+"/"+year()+" Ã "+hour()+":"+minute()+"."; textFont(myFont,12); text(texte,marge,marge+12,width-(marge*2),height-(marge*2)); textFont(myFont,10); text(auteur,marge,height-(marge+12));
} void keyPressed() { // pour interrompre n'importe quand (garde-fou) affichenbsquare(); pdf.nextPage(); pdf.nextPage(); finitlivre(); endRecord(); exit(); // Quit
}