• Calculer la couleur moyenne d'une image (editeur P5)

Un exemple de base

Ci-dessous un exemple d'une façon relativement simple d'accéder à la liste des pixels (des valeurs de couleurs de chaque pixel) d'une image. A vous d'imaginer ce que vous verez de ces données. Vous n'êtes pas obligé.e.s de travailler dans la balise canvas.

let img;

function preload() {
  // Chargez votre image ici (modifiez le chemin d'accès bien évidemment..)
  img = loadImage('assets/monimage.png');
}

function setup() {
  createCanvas(img.width, img.height);
  noLoop();
}

function draw() {
  background(255);

  // On réduit la taille de l'image si nécessaire
  img.resize(50, 0); 

  // On charge les pixels de l'image
  img.loadPixels();

  // On passe sur chaque pixel
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      // On récupère la couleur du pixel
      let col = img.get(x, y);
      console.log(col);

      // On trace un rectangle, par exemple, pour chaque pixel
      noStroke();
     
      if(col[0] < 100) {
        fill(255, 0, 0);
      } else {
        fill(col);
      }
      rect(x * 10, y * 10, 10, 10); // On agrandit un peu les pixels
    }
  }
}

Version HTML

A vous d'en faire une version pure HTML/CSS à partir de ceci.

let monImg;

function preload() {
    monImg = loadImage("assets/monimage.png");
}

function setup() {
    createCanvas(monImg.width, monImg.height);
    background(220);
    let mesPixels = monImg.loadPixels();
    console.log(mesPixels);
    
    for (let i = 0; i < monImg.width; i++) {
        for (let j = 0; j < monImg.height; j++) {
            let index = (i + j * monImg.width) * 4;
            let r = monImg.pixels[index];
            let g = monImg.pixels[index + 1];
            let b = monImg.pixels[index + 2];
            let a = monImg.pixels[index + 3]; 
            let c = color(r, g, b, a);
            fill(c);
            noStroke();
            rect(i, j, 1, 1);
        }
    }
}

Récupérer les données avec Processing

Pour certaines tâches complexes, il peut être utile de préparer ses données avec un langage autre que javascript. Dans ce cas-ci nous utilisons Processing (Java) pour générer un fichier json que nous utiliserons ensuite dans le navigateur. Nous lui épargnons donc la lourde tâche de l'analyse et de la liste des pixels de notre image.

Une première étape pour prendre pied et tester..

PImage img;

void setup() {
  size(640, 360); // You need to define a size for the window
  img = loadImage("monimage.png");
  img.loadPixels();
  println(img.pixels.length);

  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      color col = img.get(x, y);
      String msg = red(col) + ", " + green(col) + ", " + blue(col);
      println(msg);
    }
  }
}

SI tout va bien, on poursuit en exportant nos données au format json.

PImage img;

void setup() {
  img = loadImage("monimage.png");
  img.loadPixels();

  JSONObject json = new JSONObject();
  JSONArray pixelsArray = new JSONArray();

  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      color col = img.get(x, y);
      JSONObject pixelData = new JSONObject();

      pixelData.setInt("x", x);
      pixelData.setInt("y", y);
      pixelData.setInt("r", int(red(col)));
      pixelData.setInt("g", int(green(col)));
      pixelData.setInt("b", int(blue(col)));

      pixelsArray.append(pixelData);
    }
  }

  json.setJSONArray("pixels", pixelsArray);
  saveJSONObject(json, "pixels.json");
  exit();
}

Intégration dans P5.js

let pixelData;

function preload() {
  pixelData = loadJSON("pixels.json");
}

function setup() {
  createCanvas(640, 360);
  noLoop();
}

function draw() {
  background(255);

  let pixels = pixelData.pixels;
  for (let i = 0; i < pixels.length; i++) {
    let p = pixels[i];
    fill(p.r, p.g, p.b);
    noStroke();
    rect(p.x, p.y, 1, 1);
  }
}

L'équivalent au format CSV, qui utilise la fonction createWriter de Processing, qui nous permet de créer et d'écrire dans un fichier (csv, txt, etc..).

PImage img;
PrintWriter output;

void setup() {
  img = loadImage("monimage.png");
  img.loadPixels();
  
  output = createWriter("pixels.csv");

  // En-tête du CSV
  output.println("x,y,r,g,b");

  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      color col = img.get(x, y);
      // Écriture des données de chaque pixel
      output.println(x + "," + y + "," + int(red(col)) + "," + int(green(col)) + "," + int(blue(col)));
    }
  }

  output.flush(); // Assurez-vous que toutes les données sont écrites
  output.close(); // Ferme le fichier
  exit();
}

Intégration dans P5.js

let table;

function preload() {
  table = loadTable("pixels.csv", "header");
}

function setup() {
  createCanvas(640, 360);
  noLoop();

  for (let r = 0; r < table.getRowCount(); r++) {
    let row = table.getRow(r);
    let x = row.getNum("x");
    let y = row.getNum("y");
    let red = row.getNum("r");
    let green = row.getNum("g");
    let blue = row.getNum("b");
    
    fill(red, green, blue);
    noStroke();
    rect(x, y, 1, 1);
  }
}