Arts numériques

Base du script : une image

Pour démarrer ce script, il nous faut une image. Nous prendrons une image d’une taille suffisante pour être affichée en taille réelle dans la fenêtre du script.
Dans notre cas l’image fait 900 sur 556 pixels.
Pour utiliser cette image dans le script, il déplacer l’image dans la fenêtre du script. Cette opération dupliquera l’image dans le dossier du script Processing, pas de souci concernant l’original donc.

Créer le script

Nous allons donc créer une structure minimale pour charger l’image.
Tout chargement de fichier externe commence par la création d’un variable du bon type. Ici, nous créons une variable de type PImage, faite pour contenir une image.

PImage im;

void setup(){
  size(900,566);
  im=loadImage("Will_eisner_1941.jpg");
}

void draw(){
  image(im,0,0);
}

Nous définissons ensuite la taille de l’animation au même format que l’image.
Enfin, nous chargeons l’image dans l’espace de la variable avec la fonction loadImage(). Attention au "i" majuscule.
Pour tester que tout s’est bien passé, nous affichons l’image avec la fonction image().

Parcourir en grille une surface

Pour parcourir une surface de manière régulière, nous allons employer une double boucle. L’une parcourt la surface horizontalement, l’autre verticalement.

for(int x=9; x<width;x+=9){
    for(int y=9; y<height;y+=9){
      ellipse(x,y,6,6);
    }
  }

Ce code parcourt la surface avec des espaces de 9 pixels entre chaque point, ce qui fera une centaine de points horizontalement, et a peu près 56 verticalement.

Analyser la couleur d’un pixel

Maintenant, il nous faut analyser la couleur du pixel au coordonnées x,y. Pour ça on emploiera la fonction get(). il existe une méthode plus rapide documentée dans les fonctions vidéo de Processing, mais pour l’analyse d’une image, get() suffit.

color c=im.get(x,y);

Pour récupérer la couleur aux coordonnées dans l’image, on utilise la fonction get associée àcette image.

Cette couleur est en fait codée sur 32 bits. Mais il faut juste àce stade savoir que cette information est utilisable par la fonction fill() ou stroke().
Voici àquoi ressemble le script àce stade.

PImage im;

void setup(){
  size(900,566);
  im=loadImage("Will_eisner_1941.jpg");
  noStroke();
}

void draw(){
  background(255);
  for(int x=9; x<width;x+=9){
    for(int y=9; y<height;y+=9){
      color c=im.get(x,y);
      fill(c);
      ellipse(x,y,6,6);
    }
  }
}

Il donne ceci.

Récupérer des valeurs numériques
Il est possible àpartir d’ici de récupérer les valeurs en chiffre des pixels parcourus. C’est une couleur en RVB. La valeur du rouge, du vert et du bleu, qui vont de 0 à255, peuvent être récupérée avec les fonctions red(), green() et blue().
La valeur en niveau de gris peut être récupérée avec la fonction brightness().
Ces valeurs doivent être récupérées dans une variable de type float.

PImage im;

void setup(){
  size(900,566);
  im=loadImage("Will_eisner_1941.jpg");
  noStroke();
  fill(0);
}

void draw(){
  background(255);
  for(int x=9; x<width;x+=9){
    for(int y=9; y<height;y+=9){
      color c=im.get(x,y);
      float g=brightness(c);
      float diametre=map(g,0,255,10,0);
      ellipse(x,y,diametre, diametre);
    }
  }
  saveFrame("image.jpg");
  noLoop();
}

Ce code convertir la valeur en niveau de gris (un chiffre entre 0 et 255) en un diamètre de cercle noir grâce àla fonction map.
Il donne ceci :

Ce chiffre peut être utilisé de toutes sortes de manières. Dans ce dernier exemple, il est transformé en un angle de ligne.

PImage im;

void setup(){
  size(900,566);
  im=loadImage("Will_eisner_1941.jpg");
  noStroke();
  stroke(0);
}

void draw(){
  background(255);
  for(int x=9; x<width;x+=9){
    for(int y=9; y<height;y+=9){
      color c=im.get(x,y);
      float g=brightness(c);
      float diametre=map(g,0,255,0,PI);
      line(x,y,x+sin(diametre)*9,y+cos(diametre)*9);
    }
  }
  saveFrame("image.jpg");
  noLoop();
}

Ce qui donne ceci :