Modifier une image pixel par pixel

Une autre méthode pour modifier une image pixel par pixel

Cette méthode est basé sur l'utilisation d'un tableau à une seule dimension contenant les codes RVBa de tous les pixels d'une image.
Pour utiliser cette méthode, il est préférable de maitriser les tableaux en JavaScript : voir le cours.

L’image photo.jpg a pour taille 400 x 400 soit 160 000 pixels. Chaque pixel contient une couleur codée en RVB + canal alpha (transparence).

On peut accéder à ces pixels avec la fonction loadPixels() . Cette fonction place dans un tableau les informations pour le canal rouge, le canal vert, le canal bleu et pour le canal alpha des pixels de l’image.

Pour une image de 400 x 400, ce tableau comportera 400 x 400 x 4 = 640 000 éléments.

Une fois le tableau créé avec la fonction loadPixels(), il aura pour nom pixels[].

Pour récupérer les informations concernant le pixel de coordonnées (0,0), il faudra écrire :

• pixels[0] pour avoir la valeur du canal rouge ;
• pixels[1] pour avoir la valeur du canal vert ;
• pixels[2] pour avoir la valeur du canal bleu ;
• pixels[3] pour avoir la valeur du canal alpha.

Pour récupérer les informations concernant le pixel de coordonnées (1,0), il faudra écrire :

• pixels[4] pour avoir la valeur du canal rouge ;
• pixels[5] pour avoir la valeur du canal vert ;
• pixels[6] pour avoir la valeur du canal bleu ;
• pixels[7] pour avoir la valeur du canal alpha.

Pour récupérer les informations concernant le pixel de coordonnées (x,y), la formule suivante index = (x+y*width)*4 permet de calculer la valeur de l'index puis il faudra écrire :

• pixels[index] pour avoir la valeur du canal rouge ;
• pixels[index + 1] pour avoir la valeur du canal vert ;
• pixels[index + 2] pour avoir la valeur du canal bleu ;
• pixels[index + 3] pour avoir la valeur du canal alpha.

Le schéma ci-dessous, peut aider à comprendre la formule pour calculer la valeur de la variable index.

• l'indice de chaque case du schéma ci-dessus est donné par la relation : x + y * width ;
• dans chaque case il y a 4 informations (R, V, B, alpha) donc on multiplie par 4, soit index = (x+y*width)*4 .
  

Exemple : pour accéder au pixel de coordonnée (1,1), il faudra écrire : pixels[401 x 4] soit pixels[1604].

• pixels[1604] contient la valeur du canal rouge ;
• pixels[1604 + 1] contient la valeur du canal vert ;
• pixels[1604 + 2] contient la valeur du canal bleu ;
• pixels[1604 + 3] contient la valeur du canal alpha.

Un exemple de sketch permettant de modifier une image en niveau de gris en utilisant un tableau de pixels :

var img;
 
function preload() {
  img = loadImage("photo.jpg");
}
 
function setup() {
 
  var largeur = img.width;   // largeur de l'image
  var hauteur = img.height;  // hauteur de l'image
  createCanvas(largeur * 2, hauteur); // créer un canvas pour placer 2 images côte à côte
  image(img, 0, 0);   // afficher l'image
  img.loadPixels();   // création du tableau pixels[ ]
 
  for (var x = 0; x < largeur; x = x + 1) {      // deux boucles pour parcourir l'ensemble
    for (var y = 0; y < hauteur; y = y + 1) {   // des pixels constituant l'image
 
      var index = (x + y * largeur) * 4;  
 
      var R = img.pixels[index];     // R prend la valeur du rouge
      var V = img.pixels[index + 1];   // V prend la valeur du vert
      var B = img.pixels[index + 2];    // B prend la valeur du bleu
 
      var gris = R * 0.3 + V * 0.59 + B * 0.11;   // calcul de la valeur du gris
 
      img.pixels[index] = gris;     // definir la nouvelle couleur du pixel (x,y)
      img.pixels[index + 1] = gris;  
      img.pixels[index + 2] = gris;  
    }
  }
  img.updatePixels();   // mettre à jour les pixels modifiés
  image(img, 400, 0);  // afficher l'image en niveau de gris
}