Arts numériques

Assembler un texte Ã partir de 3 sources diffÃ©rentes

Stéphane Noel — 2021-03-19T11:03:56Z

Un script simple pour assembler des portions de texte provenant de 3 sources diffÃ©rentes.

Ce code utilise les StringList, qui permettent une manipulation plus facile des Strings que les simples variables tableaux : la fonction shuffle() permet un mÃ©lange des Strings, et remove() permet de supprimer la String dÃ©jÃ utilisÃ©e.

Ã‡a donne ceci en terme de code :

String petit="lion_en_societe.txt"; String moyen="loup_chien.txt"; String grand="mouche_lion.txt"; // la stringlist de textes rÃ©cupÃ©rÃ©s StringList mix; //Les 3 textes sous forme de stringlist aussi StringList t1; StringList t2; StringList t3; void setup() { size(600, 800); } void draw() { // on recharge les textes Ã chaque tour, sinon la liste se vide au fur et Ã mesure // remplir la premiÃ¨re stringlist t1=new StringList(); t1 = remplit(t1, petit); // remplir la deuxiÃ¨me stringlist t2=new StringList(); t2 = remplit(t2, moyen); // remplir la troisiÃ¨me stringlist t3=new StringList(); t3 = remplit(t3, grand); background(255); fill(0); // initaliser la stringlist mix = new StringList(); for (int i=0; i<2; i++) { mix.append(portion(t1)); //appel de fonction } for (int i=0; i<3; i++) { mix.append(portion(t2)); //appel de fonction } for (int i=0; i<5; i++) { mix.append(portion(t3)); //appel de fonction } mix.shuffle(); // mettre Ã§a dans un array traditionnel String[] textes = mix.array(); // transformer l'array en une seule string String resultat = join(textes, "\n"); textSize(10); text(resultat, 20, 20, width-40, height); // saveFrame(); noLoop(); } String portion(StringList lequel) { String retour=""; int phasard=int(random(lequel.size())); retour=lequel.get(phasard); // enlever l'Ã©lÃ©ment utilisÃ© de la StringList lequel.remove(phasard); println("la stringlist fait maintenant "+lequel.size()); return retour; } // remplit les stringlists avec les textes StringList remplit(StringList s, String t) { String[] t_complet=loadStrings(t); for (int i=0; i



Une image comme ensemble de particules
Stéphane Noel — 2021-03-15T10:49:44Z

		Un script permettant de reposser les pixels avec la souris et sauver un pdf.
		Le code prend un portrait de Flaubert, remplacez l'image par la vÃ´tre.
// detruire un dessin import processing.pdf.*; boolean saveOneFrame = false; String image_source="flaubert.jpg"; ArrayList pix; PImage im; float nbx=120.0; float nby=120.0; int zone_influence=15; boolean show_stroke=false; void setup() { im=loadImage(image_source); size(634,800); pix=new ArrayList(); for (float px=0;px



Dessiner avec vertex()
Stéphane Noel — 2020-04-20T15:13:20Z

		On peut dessiner des formes avec line() et ellipse(), rect(), etc.

Mais il existe d'autres mÃ©thodes de dessin, notamment vertex() et curveVertex(), qui permettent de dessiner des formes complexes sur base de lignes ou de courbes.
		beginShape(), Vertex() et endShape()
La fonction Vertex() s'utilise Ã l'intÃ©rieur de deux fonctions : beginShape() et endShape(), qui servent Ã dÃ©limiter le dessin.
 beginShape(); vertex(20,20); vertex(780,20); endShape(); }
vertex() dÃ©finit un point dans l'espace avec deux arguments en x et y (dans le cas d'un espace 2D). Parce qu'elles sont Ã©crites entre beginShape() et endShape(), les diffÃ©rents vertex() sont reliÃ©s entre eux. On peut relier autant de points que l'on veut.
On peut aussi fermer la forme de maniÃ¨re automatique en rajoutant un argument dans endShape(), comme ceci :
 beginShape(); vertex(20,20); vertex(780,20); vertex(750,750); vertex(20,780); endShape(CLOSE);

Avec un peu de random, Ã§a donnerait Ã§a :
 fill(255,0,0); beginShape(); for(int i=0;i<40;i++){ vertex(random(20,width-20), random(20,height-20)); } endShape(CLOSE);

ou encore :
 fill(0); noStroke(); for (int x=15; x




Chargement d'un fichier texte
Stéphane Noel — 2020-04-20T14:05:49Z

		Processing peut charger un texte trÃ¨s simplement. Mais il faut juste Ãªtre au fait de ce qu'est un array, en franÃ§ais "variable tableau".
		Quel type de fichier charger ? 
La fonction loadStrings() de Processing permet de charger un texte Ã partir d'un fichier .txt. C'est la forme la plus basique d'un fichier texte : pas d'indication de police, pas d'image, pas de mise en page, de gras, d'italique, rien que des caractÃ¨res de texte, des retours Ã la ligne. 

Ne tentez pas de charger un fichier .rtf ou pire encore, un .doc ou un .pdf car ce sont des format de fichier plus complexes, qui contiennent du texte mais aussi des tas d'informations qui concernent la mise en page, les typos, des images, etc. 

On peut exporter un fichier txt Ã partir de word, de textEdit, d'openOffice et des autres logiciels de traitement de texte assez facilement.
LoadStrings() et sa variable tableau
Pour charger un texte, on Ã©crira ceci :
String[] montexte=loadStrings("KarlMarx.txt");
Cette ligne de code va stocker dans la variable montexte le contenu du fichier KarlMarx.txt. Vous l'avez remarquÃ©, il y a deux crochet aprÃ¨s le type de variable String[]. Ã‡a signifie Ã Processing que la variable montexte est un tableau.
Une variable tableau (array en anglais) est une variable qui contient non pas un seul Ã©lÃ©ment mais une liste d'Ã©lÃ©ments. On peut l'Ã©crire comme Ã§a :
String[] fruits={ "pomme","poire","ananas" };
Ensuite, on peut atteindre chacun des Ã©lÃ©ments de cette liste individuellement : le premier Ã©lÃ©ment de la liste est l'Ã©lÃ©ment 0, qu'on peut atteindre comme ceci :
text(fruits[0],100,100); // pomme text(fruits[1],100,150); // poire text(fruits[2],100,200); // ananas
C'est lÃ que les brackets (c'est leur nom) trouvent leur raison d'Ãªtre : il permettent d'accÃ©der Ã chacun des Ã©lÃ©ments de la liste en spÃ©cifiant leur place dans celle-ci.
Dans le cas de notre fichier texte, chaque Ã©lÃ©ments de la variable montexte est une ligne de texte, c'est-Ã -dire tout ce qui est sÃ©parÃ© par un retour Ã la ligne.
Du coup, on peut savoir combien de lignes se trouvent dans le fichier en utilisant la propriÃ©tÃ© length comme ceci :
String[] montexte=loadStrings("KarlMarx.txt"); println("nombre de lignes : "+montexte.length);
Dans mon cas, on obtient dans la console (en bas dans la fenetre de Processing) : "nombre de lignes : 5970".
Du coup, on peut demander le contenu de la premiÃ¨re ligne comme ceci :
String[] montexte=loadStrings("KarlMarx.txt"); text(montexte[0],10,30); // afficher la premiÃ¨re ligne
Afficher ligne par ligne
A partir de lÃ , on peut on peut faire un script pour afficher ligne par ligne le contenu du fichier .txt
String[] montexte; int compteur=0; void setup() { size(800, 600); montexte=loadStrings("KarlMarx.txt"); fill(0); } void draw() { background(255); text(montexte[compteur], 10, 30,700,500); // afficher la premiÃ¨re ligne compteur++; // ajouter 1 Ã compteur if(compteur >= montexte.length){ // si on arrive Ã la fin compteur=0; // recommencer au dÃ©but } noLoop(); } void keyPressed(){ loop(); }
Assembler toutes les lignes en un seul grand texte
Dans certains cas, on veut pouvoir disposer d'un seul grand texte, pour l'analyser plus facilement ou pour le sÃ©parer en phrase (c'est Ã dire quelque chose qui se termine par un point, un point d'interrogation, etc.). 

Dans ce cas, on va utiliser une fonction qui s'appelle join.

Join est une fonction qui reÃ§oit une variable tableau de texte et les rassemble en un seul contenu de type String. Voici un exemple :
String texte_complet; void setup() { size(800, 600); String[] montexte=loadStrings("KarlMarx.txt"); texte_complet=join(montexte,", "); fill(0); } void draw() { background(255); text(texte_complet, 10, 30,700,500); // afficher la premiÃ¨re ligne noLoop(); }
DÃ©couper le texte en plusieurs morceaux
Une fois le texte rassemblÃ©, on peut le traiter avec diffÃ©rentes fonctions. Je vous renvoie Ã un tutoriel sur ce site qui parle spÃ©cifique de Ã§a.


Parcourir une phrase lettre par lettre
Stéphane Noel — 2020-04-19T16:59:56Z

		Processing peut Ã©videmment utiliser du texte comme un ensemble de donnÃ©es. On peut par exemple parcourir une phrase lettre par lettre.
		Une phrase est une liste de lettres

On stocke une phrase dans Processing dans une variable de type "String".
String maphrase="Ceci est une phrase";
On peut afficher cette phrase avec la fonction text() :
text(maphrase, 10,10);
Mais on peut aussi accÃ©der Ã chacun des caractÃ¨res de cette String, avec charAt() par exemple :
text(maphrase.charAt(0),10,10);
Cette ligne de code affichera le caractÃ¨re nÂ°0 de la phrase, c'est-Ã -dire "C".
On peut cdonc faire un script simple pour afficher caractÃ¨re par caractÃ¨re cette phrase :
PFont mapolice; int marges=30; String maphrase="Ceci est un texte martyr"; int compteur=0; void setup(){ size(600,600); mapolice=createFont("Montserrat-bold",20); textFont(mapolice,240); textAlign(CENTER,CENTER); } void draw(){ background(255); fill(0); text(maphrase.charAt(compteur),width/2,height/2); compteur++; if(compteur >= maphrase.length()){ compteur=0; } noLoop(); } void keyPressed(){ loop(); }
Une fonction pour faire une grille de lettres
Ce script comporte une fonction "grille_caracteres()" Ã qui on donne une phrase, un nombre de caractÃ¨re dans la grille et une taille de caractÃ¨re. De lÃ , il affiche cette phrase en grille. Lorsque tout les caractÃ¨res de la phrase ont Ã©tÃ© affichÃ©, le code revient au premiÃ¨re caractÃ¨re de la phrase.
PFont mapolice; int marges=30; void setup(){ size(800,600); mapolice=createFont("Montserrat-bold",20); textFont(mapolice,24); } void draw(){ background(255); fill(0); // dans les parenthÃ¨ses : // texte, nombre de lettre par ligne et colonne, taille du caractÃ¨re grille_caracteres("Ceci est un texte martyr",60,10); } void grille_caracteres(String texte,int nb, int taille){ int compteur=0; textSize(taille); textAlign(CENTER,CENTER); // calcul de l'espacement float saut_x=(width-marges*2)/nb; float saut_y=(height-marges*2)/nb; // dessiner la grille avec un double boucle for(float y=marges;y<=height-marges;y+=saut_y){ for(float x=marges;x<=width-marges;x+=saut_x){ text(texte.charAt(compteur),x,y); compteur++; if(compteur >= texte.length()){ compteur=0; } } } }
Aller plus loin
Allez faire un tour dans Processing sur la documentation de String, et sur ce site sur la partie "Traitement du texte", qui contient un paquet de script avec lesquels chipoter.


Lire une vidÃ©o, image par image
Stéphane Noel — 2020-04-19T15:41:54Z

		Processing peut lire des vidÃ©os ! PlutÃ´t que la lire simplement, il peut la parcourir et en extraire des images. Quelques dÃ©mos de code cool pour voir Ã§a.
		Quels fichiers vidÃ©o lire ?
Processing peut lire les conteneurs mov et mp4 mais aussi anarchiquement d'autres fichiers, les avi ou les mkv par exemple, mais certains fichiers ne passent pas, c'est une question de conteneur et de codec, parfois c'est un mystÃ¨re. Un copier/coller d'un bout d'article Ã©crit ailleurs sur ce site :
Codecs
Un codec est un dispositif de compression/dÃ©compression, c'est Ã dire une suite d'opÃ©ration permettant, Ã partir d'un fichier numÃ©rique, d'en faire une version compressÃ©e, c'est Ã dire plus lÃ©gÃ¨re, c'est Ã dire stockÃ©e sur moins d'espace mÃ©moire. le MPG2 par exemple, est employÃ© pour faire circuler les images vidÃ©os par satellite. 
A partir de ce fichier compressÃ©, le codec permet, Ã travers d'algorithmes de dÃ©compression, de retrouver la version originale du fichier.
Il existe des codecs sans perte (un fichier zippÃ© puis dÃ©zippÃ© sera identique Ã l'original) ou avec perte (une image compressÃ© en jpeg ou en mp3 on perdu dans l'opÃ©ration une partie de la qualitÃ© du fichier original). On dit dans le deuxiÃ¨me cas que la compression est destructive.
Un rappel sur la diffÃ©rence entre conteneur et codec
Il faut bien rappeler que les formats AVI, MKV, MOV et MP4 ne sont pas des "formats video" mais des conteneurs. A l'intÃ©rieur, on va trouver diffÃ©rentes codecs et mÃªme d'autres choses. Dans un MKV par exemple on trouvera plusieurs fichiers audio et des fichiers de sous-titres. Ceci permet de choisir sa langue et ses sous-titres sans devoir changer de fichier, via le menu du lecteur.
On regardera donc quels sont les codecs employÃ©s pour compresser les flux vidÃ©o et audio. Voici les codecs plus relevants actuellement :

– H.264 est un format sous licence, on le trouve dans le format mp4, mv4 ou Flv.

– Theora est un format libre, que l'on retrouve dans le format ogg.

– VP8, achetÃ© par google puis versÃ© dans le domaine public. On le trouve dans le format webm.
En son, on trouvera le MP3, le AAC et Vorbis.
l'industrie se met rarement d'accord sur un standard, car les ingÃ©nieurs n'aiment pas partager leur trouvailles avec leurs concurrents ni se sentir tenus de respecter des rÃ¨gles de productions partagÃ©es pendant leurs recherches. Les firmes qui les commercialisent veulent aussi, la plupart du temps, les intÃ©grer dans un ecosystÃ¨me d'applications dont ils ont par ailleurs la licence (comme le format AAC de Apple, inclus dans le conteneur MP4, utilisÃ© par Itunes). Enfin, les solutions propriÃ©taires obligent les clients (nous) Ã acquÃ©rir licences, matÃ©riels et logiciels : plus de supports, plus d'outils, plus de contenus. Ce ne sont pas les lecteurs BÃ©tamax et V2000 qui me contrediront.
Un exemple de base
La librairie vidÃ©o de Processing ne doit pas Ãªtre tÃ©lÃ©chargÃ©e : elle est prÃ©sente dans la version de base de Processing. Elle est accompagnÃ©e de quelques exemples, vous pourrez voir qu'elle peut aussi rÃ©cupÃ©rer des images d'une webcam, et vous trouverez des exemples dans le module Processing sur ce site.
Dans les exemples officiels de Processing, celui-ci :

https://processing.org/reference/libraries/video/Movie_available_.html
import processing.video.*; Movie myMovie; void setup() { size(200, 200); frameRate(30); myMovie = new Movie(this, "totoro.mov"); myMovie.loop(); } void draw() { if (myMovie.available()) { myMovie.read(); } image(myMovie, 0, 0); }
Ce code suppose qu'une vidÃ©o du nom de totoro.mov (de type mov, hein, il ne faut surtout pas renommer l'extension d'un fichier avi en mov par exemple, Ã§a ne marche pas !).

Ce fichier doit Ãªtre placÃ© dans le dossier "data" du script. Pour faire Ã§a, il suffit de jeter le fichier sur la fenÃªtre du script et il sera copiÃ© dans le bon dossier.
La premiÃ¨re chose qui est faite par ce script est de charger la librairie vidÃ©o et dÃ©clarer un objet :
import processing.video.*; Movie myMovie;
La premiÃ¨re ligne charge un gros paquet de code qui permet la suite du script, c'est le code de la classe video. C'est donc Ã©videmment important de ne pas l'oublier.
Ensuite on crÃ©e un objet de type vidÃ©o en lui donnant un nom, comme pour n'importe quelle variable, ici "myMovie".
Puis, dans le setup(), on va faire "dÃ©marrer" l'objet :
myMovie = new Movie(this, "totoro.mov"); myMovie.loop();
Remarquez que c'est Ã cet endroit que l'on donne Ã l'objet l'adresse du fichier vidÃ©o, ici "totoro.mov". La ligne suivant est facultative, elle met en lecture en boucle la vidÃ©o.
Dans le draw(), on va trouver le code suivant :
if (myMovie.available()) { myMovie.read(); } image(myMovie, 0, 0); }
mymovie.read() est une fonction qui comme son nom l'indique, lit une image de la vidÃ©o en temps rÃ©el. Pour Ã©viter des erreurs de calcul, ce code est mis dans un "if" qui vÃ©rifie qu'une image est disponible Ã la lecture, ce qui Ã©vite que la fonction read() ne renvoie une image noire parce que le code est occupÃ© Ã charger et que l'image n'est pas encore disponible entre deux frames.
Ce code n'est qu'une des maniÃ¨re d'avoir accÃ¨s Ã une vidÃ©o, il en existe des variantes qui n'utilise pas avalaible().
Remplir une grille d'images vidÃ©o
Pour donner un exemple, voici un code qui remplit une surface d'images vidÃ©o en temps rÃ©el :
import processing.video.*; Movie myMovie; int marges=50; int x=marges; int y=marges; // la vidÃ©o a une taille de 720 X 405 pixels // je vais afficher des vignettes 10 X plus petites int taille_x=72; int taille_y=40; void setup() { size(1000,800); background(255); frameRate(10); // 10 images secondes au max myMovie = new Movie(this, "zephetach_niki_paris.mp4"); myMovie.loop(); } void draw() { if (myMovie.available()) { myMovie.read(); image(myMovie, x, y, taille_x, taille_y); x+=taille_x; // si on dÃ©passe Ã droite, aller Ã la ligne suivante if(x+taille_x > width-marges){ y+=taille_y; x=marges; if(y+taille_y > height-marges){ saveFrame(); // effacer et commencer une nouvelle image background(255); x=marges; y=marges; } } } }
 Ce qui donne ceci :


D'autres scripts vidÃ©o sur ce site
Allez voir la partie "Traitement vidÃ©o" de ce site.


Exemple 6 : tramer du texte avec PGraphics
Stéphane Noel — 2020-03-29T14:26:01Z

		Le tutoriel prÃ©cÃ©dent utilisait PGraphics. On va s'intÃ©resser un peu plus Ã ce jeu de fonctions, qui permettent de crÃ©er des images avec du code, sans fichier prÃ©existant.
		PImage et PGraphics

PImage, on l'a vu, permet de charger une image depuis un fichier. On crÃ©e un espace dans la mÃ©moire vive, puis on y charge le contenu d'une image depuis le disque dur ou le rÃ©seau.
PGraphics est un objet diffÃ©rent. Il permet de crÃ©er une image vide qu'on va ensuite pourvoir remplir d'Ã©lÃ©ments graphiques : lignes, points, rectangles, mais aussi des images ou du texte.
Un premier exemple :
void setup(){ size(600,400); } void draw(){ background(255); // crÃ©er l'Ã©lÃ©ment PGraphics uneimage=createGraphics(500,300); uneimage.beginDraw(); // dÃ©marrer les modifications uneimage.background(255,255,0); uneimage.line(0,0,500,500); uneimage.endDraw(); // fin des modifications // afficher l'image image(uneimage,50,50); // sauver l'image uneimage.save("truc.jpg"); }
Ce code donne ceci :


Comme on le voit sur cet exemple, on crÃ©e une variable d'un type particulier "PGraphics", et on doit spÃ©cifier lors de sa crÃ©ation sa taille en pixels. Ici, 500 sur 300 pixels.

Pour modifier l'image, il faut d'abord l'ouvrir Ã l'Ã©dition par la commande beginDraw(). Chaque vois que je m'adresse Ã l'image, je spÃ©cifie d'abord son nom, et je lui associe la commande choisie.

AprÃ¨s avoir ouvert l'image Ã l'Ã©dition, je lui place un fond jaune, puis j'y dessine une ligne avant de refermer le fichier avec endDraw().

On peut placer toutes les commandes graphiques dÃ©jÃ vues par ce moyen : ellipse, fill, stroke, etc.

Il ne faut pas oublier de refermer le fichier, sans quoi on ne peut pas afficher l'image.
Ecrire dans PGraphics
Ecrire dans PGraphics suit la mÃªme logique : on va charger une police dans le script, la choisir et Ã©crire un texte comme ceci :
PFont mapolice1; void setup() { size(600, 400); mapolice1=createFont("Montserrat-Bold", 20); } void draw() { background(255); // crÃ©er l'Ã©lÃ©ment PGraphics uneimage=createGraphics(500, 300); uneimage.beginDraw(); // dÃ©marrer les modifications uneimage.fill(0); uneimage.textFont(mapolice1, 110); uneimage.text("Waow",20,150); uneimage.endDraw(); // fin des modifications // afficher l'image image(uneimage, 50, 50); // sauver l'image uneimage.save("truc.jpg"); }
Passez le texte-image dans la fonction de tramage
Une fois que ce texte est devenu une image, il peut Ãªtre manipulÃ© comme n'importe quelle image. Dans notre cas, on peut tramer cette image avec la fonction image_sample() prÃ©sentÃ©e dans le tutoriel prÃ©cÃ©dent, lÃ©gÃ¨rement modifiÃ©e pour l'occasion.
Le script complet :
PFont mapolice1; void setup() { size(700, 400); mapolice1=createFont("Montserrat-Bold", 20); } void draw() { background(255); // crÃ©er l'Ã©lÃ©ment PGraphics uneimage=createGraphics(600, 180); uneimage.beginDraw(); // dÃ©marrer les modifications uneimage.background(255); // un fond blanc, nÃ©cessaire uneimage.fill(0); uneimage.textAlign(CENTER,CENTER); uneimage.textFont(mapolice1, 170); uneimage.text("Waow",300,70); uneimage.endDraw(); // fin des modifications tramer_image(uneimage, 20, 20, 8,8); image(uneimage,20,200); // sauver l'image saveFrame("test-###.jpg"); noLoop(); } void tramer_image(PImage sample, int x, int y,int pixx, int pixy) { pushMatrix(); translate(x, y); // dessiner la grille avec un double boucle for (float gx=0; gx


Une variante avec un filtre sur l'image
En utilisant la fonction filter(), on peut modifier l'image, comme ici la flouter.
 // flouter uneimage.filter(BLUR, 6); tramer_image(uneimage, 20, 20, 8,8);



Exemple 5 : combiner deux fonctions pour tramer des images
Stéphane Noel — 2020-03-29T12:57:56Z

		Ce script reprend le script prÃ©cÃ©dent et l'associe avec un script de tramage de l'image. Sur cette base, des expÃ©rimentations peuvent Ãªtre faites tout en gardant le contrÃ´le sur le rÃ©sultat.
		Une fonction dans une fonction
La fonction Ã©crite dans le script prÃ©cÃ©dent permettait de prÃ©lever une portion d'image Ã une taille choisie. Nous allons la combiner Ã un script de tramage, ce qui permettra de crÃ©er des patterns et des mise en pages plus intÃ©ressantes.
L'idÃ©e du script est de :

– prÃ©lever une portion d'image d'une taille choisie

– l'analyser pour en faire une version plus grossiÃ¨re

– afficher cette trame Ã un endroit choisi
Il y a donc 7 arguments Ã envoyer Ã la fonction :

– le nom de l'image

– la coordonnÃ©e oÃ¹ afficher le rÃ©sultat sur l'axe horizontal

– la coordonnÃ©e oÃ¹ afficher le rÃ©sultat sur l'axe vertical

– la largeur de la portion en pixels

– la hauteur de la portion en pixels

Plus :

– la taille des samples en largeur

– la taille des samples en hauteur

Ã‡a commence Ã faire beaucoup, mais Ã§a vaut le coup
Voici cette fonction (qui s'ajoute donc Ã celle dÃ©jÃ Ã©crite dans le tutoriel prÃ©cÃ©dent) :
// image sample place une grille downsamplÃ©e void image_sample(String source, int x, int y, int largeur, int hauteur,int pixx, int pixy) { noStroke(); // retirer le filet au cas oÃ¹ // la fonction get_sample renvoie un recadrage de l'image dans le format demandÃ© PImage sample=get_sample(source, largeur, hauteur); pushMatrix(); translate(x, y); // dessiner la grille avec un double boucle for (float gx=0; gx<=sample.width; gx+=pixx) { for (float gy=0; gy<=sample.height; gy+=pixy) { color c=sample.get(int(gx), int(gy)); // faire quelque chose avec la couleur ici fill(c); rect(gx,gy,pixx,pixy); } } popMatrix(); }
Cette fonction utilise pushMatrix, popMatrix() et translate(), trois fonctions liÃ©es, que je ne dÃ©cris pas maintenant.
AprÃ¨s avoir crÃ©Ã© l'image recardÃ©e avec la fonction get_sample(), l'image est analysÃ©e avec une double boucle et dans ce prermier exemple, on obtient une image tramÃ©e grossiÃ¨rement :

On dispose de tous les arguments de la fonction pour fabriquer des images diffÃ©rentes : position dans l'espace, taille de la trame, etc.
      
     
     
     
     
 
 
Modifier le coeur de la fonction
Mais on peut aussi modifier des parties de la fonction, et la partie centrale de celle-ci est l'intÃ©rieur de la double boucle.

On peut ainsi remplacer
 fill(c); rect(gx,gy,pixx,pixy); 
par :
 stroke(c); strokeWeight(1); line(gx,gy+pixy/2,gx+pixx,gy+pixy/2);
et obtenir ceci


ou encore
 stroke(c); strokeWeight(1); line(gx,gy+pixy/2,gx+pixx,gy+pixy/2); line(gx+pixx/2,gy,gx+pixx/2,gy+pixy);
ou encore
fill(c); ellipse(gx+pixx/2,gy+pixy/2,pixx*0.8,pixy*0.8);
Assembler les codes
En combinant le code de base, le choix de la portion, de la position et de la trame, on peut gÃ©nÃ©rer des couvertures intÃ©ressantes :
      
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
 
 


Exemple 4 : Une image au format choisi Ã l'endroit choisi
Stéphane Noel — 2020-03-29T12:09:30Z

		Dans ce tutoriel nous allons crÃ©er une fonction qui dÃ©coupe une portion d'image Ã une taille choisie. Ceci permettra de combiner un appel de fonction avec un retour de fonction, une nouvelle notion.
		Une fonction avec un "retour de fonction"
Un article concernant les fonctions dÃ©taillait les raisons pour lesquelles on les emploie, comment les Ã©crire et les appeler. 

Une fonction est un ensemble d'instructions rassemblÃ©es sous un mÃªme nom, que l'on peut appeler en lui envoyant des arguments, c'est Ã dire des informations spÃ©cifiques que la fonction peut utiliser. Mais une fonction peut aussi, une fois son travail terminÃ©, renvoyer quelque chose : un chiffre, une chaine de caractÃ¨re ou mÃªme une image.

La mÃ©taphore utilisÃ©e Ã plusieurs reprises est celle du majordome Ã qui on demande un cafÃ©. La fonction contient la sÃ©rie d'instructions permettant de faire le cafÃ©, et le cafÃ© est Ã©videmment rapportÃ© Ã la fin de la procÃ©dure. Le cafÃ© est dans ce cas le retour de fonction.

C'est lÃ que le "void" qui prÃ©cÃ¨de les fonctions prend son sens. 

Si nous crÃ©ons une fonction pour ranger une chambre :
void ranger_chambre(){ move("livres","Ã©tagÃ¨re"); move("linge sale","bac Ã linge"); aspirateur(); }
La fonction, une fois appelÃ©e, permet de ranger une chambre, mais ne renvoie rien. Une fois le travail fait, ben il est fait. L'appel se fait comme ceci :
ranger_chambre();
Mais dans le cas du majordome, on veut Ã la fin de la sÃ©quence recevoir le cafÃ©. Le code sera plutÃ´t :
cafÃ© prepare_un_cafe(int nb_sucres){ chauffer_eau(); mettre_cafÃ©_dans_filtre(); verser_eau_bouillante(); verser_cafe_dans_tasse(); // ajouter le bon nombre de sucres ajouter_sucre(nb_sucres); return cafÃ©; }
Le nom de la fonction commence dans ce cas nom pas par void mais par cafÃ©, qui annonce que la fonction renvoie, quand elle est exÃ©cutÃ©e, un Ã©lÃ©ment de type cafÃ©. 

Et en effet, la derniÃ¨re ligne de la fonction "return cafÃ©" renvoie vers l'endroit oÃ¹ la fonction a Ã©tÃ© appelÃ©e le cafÃ©.
La fonction s'appelle comme ceci :
cafÃ© moncafÃ©=prepare_un_cafe(0);
La variable moncafÃ©, de type cafÃ©, sera "remplie" d'un cafÃ© sans sucre aprÃ¨s l'appel de la fonction...
Du concret avec une fonction "get_sample()"
VoilÃ enfin cette fonction. Elle requiert 3 arguments :

– le nom de l'image (juste son nom, la fonction charge l'image)

– la largeur de l'image finale en pixels

– la hauteur de l'image finale en pixels
// crÃ©er une image qui exploite le maximum de la surface du cadre demandÃ© PImage get_sample(String source, int largeur, int hauteur) { PImage im=loadImage(source); // creer une image au format dÃ©finitif PGraphics pg=createGraphics(largeur, hauteur); // Calculer le ratio largeur/hauteur du cadre et de l'image float ratio_cadre=(largeur*1.0)/(hauteur*1.0); float ratio_image=(im.width*1.0)/(im.height*1.0); // crÃ©e une image temporaire en remplissant le cadre demandÃ© pg.beginDraw(); pg.background(255); if (ratio_cadre < ratio_image) { println("cadre plus Ã©troit que l'image"); float nl=hauteur*ratio_image; float px=random(-nl+largeur, 0); pg.image(im, px, 0, nl, hauteur); } else { println("cadre plus large que l'image"); float nh=width/ratio_image; float py=random(-nh+hauteur, 0); pg.image(im, 0, py, largeur, nh); } pg.endDraw(); return pg; // renvoyer l'image produite }
Cette fonction utilise la fonction PGraphics, qui permet de crÃ©er une image dans la mÃ©moire de l'ordinateur. Un outil puissant pour crÃ©er des images Ã partir de rien et dessiner dedans, mais qu'on utilise ici de maniÃ¨re minimale.

On crÃ©e une image vide au format demandÃ©, et on y place l'image envoyÃ©e par l'utilisateur en exploitant le maximum de celle-ci. Elle a dÃ©jÃ fait l'objet d'un tutoriel ici sous une forme lÃ©gÃ¨rement diffÃ©rente.

Il y a deux cas de figure : si on adapte l'image Ã la plus petite des deux dimensions de l'image, l'image va dÃ©passer en largeur ou en hauteur :



Le script compare donc les deux tailles, celle de l'image et du recadrage demandÃ©, pour savoir comment disposer les deux. Il est une des multiples faÃ§ons de rÃ©soudre ce problÃ¨me.
Une fois la nouvelle image crÃ©e avec PGraphics remplie avec l'image de l'utilisateur au bon format, elle est renvoyÃ©e par la fonction, qui doit rÃ©cupÃ©rer cette image comme ceci :
PImage monimage=get_sample("nyan-cat-1280x720.jpg", 400,580); image(monimage,10,10);
AssociÃ© Ã notre script de base de couverture, Ã§a peut donner Ã§a :



Mais cette fonction peut servir de base Ã d'autres scripts, et Ã§a c'est l'objet du tutoriel qui suit !


Exporter une vidÃ©o avec Processing, Video export et ffmpeg
Stéphane Noel — 2020-03-28T16:23:46Z

		L'exportation d'une vidÃ©o requiert l'installtion d'une librairie et de ffmpeg, une librairie open source puissante et utile (au moins pour ce script)
		Installer ffmpeg
Pour des raisons de facilitÃ©, nous utiliserons homebrew, un utilitaire en ligne de commande, pour installer.

1) se rendre sur le site de Homebrew et copier la ligne de commande se trouvant dans le haut de la page

2) la coller dans le terminal et appuyer "return". Homebrew s'installe sur votre ordinateur.

3) Une fois Homebrew installÃ©, tapez la commande "brew install ffmpeg" dans le terminal. Cette fois ffmpeg s'installe.
Se rÃ©fÃ©rer Ã la documentation de ffmpeg pour plus d'infos
Une fois cette opÃ©ration rÃ©alisÃ©e, on peut commencer Ã Ã©crire notre script.
Installer la librairie pour Processing "VidÃ©o export"
Allez dans sketch/importer une librairie/Ajouter une librairie, tapez "video" dans le moteur de recherche et sÃ©lectionnez "Video export" dans la liste.
Un script d'essai
Pour tester la chose, un script de base :
import com.hamoid.*; VideoExport videoExport; int FPS = 30; int duree=60; // durÃ©e en frame void setup() { size(768, 576); noStroke(); frameRate(FPS); videoExport = new VideoExport(this, "monexport.mp4"); videoExport.setFrameRate(FPS); videoExport.startMovie(); } void draw() { background(255); fill(random(255), 0, 0); textSize(30); text("WAOW", width/2, height/2 ); videoExport.saveFrame(); // stopper aprÃ¨s le bon nombre de frames if (frameCount > duree) { videoExport.endMovie(); exit(); } }
Ce qui donne ceci :
   
Un test avec l'ajout d'un son (et son analyse)
Voici un second test avec la librairie sound pour le chargement d'un son et son analyse en temps rÃ©el :
import processing.sound.*; import com.hamoid.*; VideoExport videoExport; int FPS = 30; SoundFile sample; Amplitude rms; float x,y; void setup() { size(768, 576); x=random(width); y=random(height); // copier/coller depuis l'exemple "PeakAMplitude" de la librairie "Sound" sample = new SoundFile(this, "14 Prelude No. 14.mp3"); sample.play(); rms = new Amplitude(this); rms.input(sample); frameRate(FPS); videoExport = new VideoExport(this, "monexport.mp4"); videoExport.setFrameRate(FPS); // associer le son videoExport.setAudioFileName("14 Prelude No. 14.mp3"); videoExport.startMovie(); textAlign(CENTER, CENTER); background(255); } void draw() { // rms.analyze() renvoie un chiffre entre 0 et 1 // l'utiliser pour l'angle, la vitesse, la couleur float vitesse=rms.analyze()*100; stroke(map(rms.analyze(),0,0.6,255,0)); // noise plutÃ´t que random float angle=map(rms.analyze(),0,0.8,0,TWO_PI); float next_x=x+(sin(angle)*vitesse); float next_y=y+(cos(angle)*vitesse); line(x,y,next_x,next_y); x=next_x; y=next_y; if(x > width){ x-=width; } if(x < 0){x+=width; } if(y > height){ y-=height; } if(y < 0){ y+=height; } videoExport.saveFrame(); // arreter Ã la fin du morceau if (!sample.isPlaying()) { videoExport.endMovie(); exit(); } }
Ce qui donne ceci :