Processing est à la fois un langage de programmation et un logiciel (plus précisément un environnement de programmation, ou IDE) permettant d'exécuter des programmes écrits en Processing.

Pour tous les systèmes d'exploitation, il faut télécharger les fichiers d'installation ici : https://processing.org/download

Un programme Processing s'appelle un sketch. Lorsqu'on ouvre un nouveau projet, on a ceci :

On viendra écrire le code dans le rectangle blanc en-dessous du titre. Pour lancer un programme, il faut cliquer sur le bouton Exécuter (la petite flèche en haut à gauche). En bas de la fenêtre, on a une console (le rectangle noir), utile pour afficher des informations et faire du debug.

Processing possède deux fonctions basiques qu'on retrouve dans quasiment tous les sketchs. Tout d'abord la fonction setup(), dans laquelle on va écrire les instructions devant être exécutées au démarrage du programme (on a souvent besoin d'initialiser des paramètres au démarrage). Ensuite la fonction draw() qui contient ce que le programme va faire tant qu'il tourne. Un programme Processing tourne à l'infini tant qu'il est ouvert, les instructions contenues dans la fonction draw() se répètent en boucle.

Processing est un langage à la syntaxe pointilleuse, attention à bien la respecter. Les deux fonctions de base doivent être écrites dans le sketch comme ceci :

void setup() {

}

void draw() {

}

Processing enregistre nos projets dans un dossier nommé Sketchbook. Pour les retrouver, il faut aller dans Fichier > Sketchbook.

On peut également trouver des exemples de projets dans Processing. Pour cela, il faut aller dans Fichier > Exemples. Une boîte de dialogue s'ouvre alors et on peut parcourir les exemples triés par catégories.

Comme nous venons de le voir, Processing fait tourner un programme en boucle, ce qui en fait un excellent outil de design génératif, en temps réel ou non (on peut aussi exporter ses projets). On peut dessiner toutes sortes de formes géométriques, travailler sur la couleur des pixels, importer des images ou des vidéos, faire de la 3D… le tout en appliquant des logiques de programmation et/ou des fonctions mathématiques afin d'apporter un côté interactif et évolutif au projet. Voici quelques captures d'écran d'exemples trouvés dans Processing ou de petits projets test :

Pour mettre en pratique, voyons comment on peut utiliser un input comme la souris pour générer des formes. Processing possède en effet deux variables intégrées mouseX et mouseY, qui permettent de récupérer la position de la souris sur les axes X et Y. On peut faire appel à ces variables pour dessiner quelque chose là où se trouve la souris. Le code sera le suivant :

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

void draw() {
  circle(mouseX, mouseY, 20);
}

La fonction size() détermine la taille de la fenêtre Processing en pixels. La fonction circle() dans draw() permet de dessiner des cercles à une position donnée. Les deux premiers arguments qu'elle prend sont les coordonnées X et Y où dessiner le cercle, le troisième argument est son diamètre. Voici la fenêtre Processing et le résultat :

On voit qu'à chaque frame, un circle a été dessiné là où la souris est passée.

Processing possède des fonctions bien plus complexes qui permettent notamment d'importer une image et de modifier ses pixels. Le code suivant permet d'importer une image, puis de modifier la luminosité de ses pixels en fonction de la position de la souris :

PImage img;

void setup() {
  size(800, 666);
  img = loadImage("mon_image.jpg");
}

void draw() {
  loadPixels();
  img.loadPixels();

  for (int x = 0; x < img.width; x++ ) {
    for (int y = 0; y < img.height; y++ ) {

      int loc = x + y*img.width;

      float r = red  (img.pixels[loc]);
      float g = green(img.pixels[loc]);
      float b = blue (img.pixels[loc]);
   
      float adjustBrightness = map(mouseX, 0, width, 0, 8); 
      r *= adjustBrightness;
      g *= adjustBrightness;
      b *= adjustBrightness;
   
      r = constrain(r, 0, 255); 
      g = constrain(g, 0, 255);
      b = constrain(b, 0, 255);

      color c = color(r, g, b);
      pixels[loc] = c;
    }
  }

  updatePixels();
}

Ce programme charge une image (avec loadImage()), puis il charge ses pixels et les parcourt dans la fonction draw(), et en fonction de la position de la souris à chaque frame, la luminosité des pixels est recalculée. Ci-dessous, voici le résultat. Quand la souris est à gauche de la fenêtre, les pixels sont assombris. Quand la souris va vers la droite, ils sont éclaircis.

Voici un exemple de programme qui permet de transformer une image en ASCII art :

char[] chars ={'^','-','*','¤','/','~','&','@','!','#','+'};
String loadPath = "mon_image.jpg";
PImage picture;
int devisions = 3; // pixels
PFont font;
float xDiv;
float yDiv;

void setup(){
  picture = loadImage(loadPath);
  size(1800,1300);
  font = loadFont("Monospaced-48.vlw"); 
  xDiv = picture.width/devisions;
  yDiv = picture.height/devisions;
  println(xDiv);
}

void draw(){
  background(255);
  textFont(font,devisions+3);
  for(int i = 0; i < height; i+= devisions){
    for(int j = 0; j < width; j+= devisions){
      float variation = random(5);
      color filler = picture.get((int(j)+int(variation)),(int(i)+int(variation)));
      fill(filler);
      textAlign(CENTER);
      //gets char depending on brightness
      float value = brightness(filler);
      char charac = chars[int(value/25.5)];
      text(charac,(j),(i));
    }
  }
}

void keyReleased() {  
  if(key=='s' || key=='S') saveFrame("asciiibot+_##.png");
}

Le sketch ouvre une image, charge une typographie monospace, puis il divise l'image en unités et en génère une copie en remplaçant les pixels de base par des caractères de la fonte monospace enfonction de la couleur de départ des pixels. Puis on a une fonction keyReleased() qui permet de sauvegarder l'image ASCII quand on va presser la touche S. Ci-dessous l'image de base et la version ASCII générée par le programme :

Si les fonctionnalités de base de Processing tournent plutôt autour du design génératif, on peut faire appel à des librairies pour étendre encore les possibilités. Par exemple si on veut travailler avec du son, de la vidéo ou toute autre application bien spécifique, il faut importer des librairies pour ça. Pour travailler avec une librairie, il faut tout d'abord l'installer. Pour cela il faut aller dans Sketch > Importer une librairie > Manage libraries…. On se retrouve alors avec une nouvelle fenêtre qui nous permet de chercher parmi les librairies existantes :

Une fois qu'on a sélectionné la librairie avec laquelle on veut travailler, il suffit de cliquer sur Install en bas à droite de la fenêtre pour lancer le téléchargement et l'installation. Quand la librairie est installée, il faut ensuite l'importer dans son sketch Processing. Pour cela, faire Sketch > Importer une librairie et choisir la librairie parmi notre liste de librairies installées. Elle s'importe alors automatiquement dans le sketch avec une ligne import ma_librairie; :

Ensuite on peut écrire son code tout en faisant appel aux fonctions de la librairie.

Documentation et exemples

• https://processing.org/reference
• https://processing.org/examples

Tutoriels

• https://processing.org/tutorials
• https://www.youtube.com/watch?v=Y6MsuAOAShs&list=PLsJom-jnI-g19b6rz3U2-ZUGIEe4TQHv_
• https://www.youtube.com/watch?v=UZoVBMgzULk&list=PLbLdd1fdNg5zPBMYYZLO2JVqMrBkK5Lux&index=3