Tutoriel 11 : Manipulation des Pixels en p5.js

1. Introduction

Introduction à la manipulation des pixels pour créer des effets visuels intéressants.

2. Configuration de l'environnement

Utilisez le même fichier HTML que dans les tutoriels précédents pour configurer l'environnement :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>p5.js Tutorial</title>
  <!-- Inclusion de la bibliothèque p5.js -->
  <script src="p5.min.js"></script>
</head>
<body>
  <!-- Inclusion du fichier JavaScript contenant notre code p5.js -->
  <script src="sketch.js"></script>
</body>
</html>

Explication :

Ce code crée une structure de base pour une page web avec un fichier HTML.
La balise <script src="p5.min.js"></script> inclut la bibliothèque p5.js dans notre projet.
Le fichier sketch.js contiendra notre code p5.js.

3. Mise en place du canvas et des paramètres

a) Initialisation de la taille du canvas

Exemple :

function setup() {
  createCanvas(400, 400); // Crée un canvas de 400x400 pixels
  background(220); // Remplit le fond avec une couleur gris clair
  noLoop(); // Empêche draw() de boucler en continu
}

Explication :

createCanvas(400, 400) : Crée un canvas de 400x400 pixels.
background(220) : Remplit le fond du canvas avec une couleur gris clair.
noLoop() : Empêche la fonction draw() de boucler en continu, utile pour des manipulations de pixels statiques.

4. Accéder aux pixels du canvas

Nous allons utiliser les fonctions loadPixels() et updatePixels() pour accéder et manipuler les pixels du canvas.

Exemple 1 : Inversion des couleurs

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);

  // Dessin initial
  noStroke();
  for (let x = 0; x < width; x += 40) {
    for (let y = 0; y < height; y += 40) {
      fill(random(255), random(255), random(255));
      rect(x, y, 40, 40);
    }
  }

  // Inversion des couleurs
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i]; // Inverse la composante rouge
    pixels[i + 1] = 255 - pixels[i + 1]; // Inverse la composante verte
    pixels[i + 2] = 255 - pixels[i + 2]; // Inverse la composante bleue
  }
  updatePixels();
}

Explication :

Dessin initial : Crée un motif en dessinant des rectangles colorés aléatoirement sur le canvas.
Inversion des couleurs : Inverse les valeurs de chaque composante de couleur pour tous les pixels.

Exemple 2 : Effet de flou

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);

  // Dessin initial
  noStroke();
  for (let x = 0; x < width; x += 40) {
    for (let y = 0; y < height; y += 40) {
      fill(random(255), random(255), random(255));
      rect(x, y, 40, 40);
    }
  }

  // Effet de flou
  loadPixels();
  let pixelsCopy = pixels.slice(); // Crée une copie des pixels
  for (let x = 1; x < width - 1; x++) {
    for (let y = 1; y < height - 1; y++) {
      for (let k = 0; k < 3; k++) { // Pour chaque composante de couleur (rouge, vert, bleu)
        let index = (x + y * width) * 4 + k;
        pixels[index] = (
          pixelsCopy[index] +
          pixelsCopy[index - 4] +
          pixelsCopy[index + 4] +
          pixelsCopy[index - width * 4] +
          pixelsCopy[index + width * 4]
        ) / 5; // Moyenne des valeurs des pixels voisins
      }
    }
  }
  updatePixels();
}

Explication :

Dessin initial : Crée un motif en dessinant des rectangles colorés aléatoirement sur le canvas.
Effet de flou : Applique un effet de flou en moyennant les valeurs des pixels voisins pour chaque composante de couleur.

Exemple 3 : Conversion en niveaux de gris

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);

  // Dessin initial
  noStroke();
  for (let x = 0; x < width; x += 40) {
    for (let y = 0; y < height; y += 40) {
      fill(random(255), random(255), random(255));
      rect(x, y, 40, 40);
    }
  }

  // Conversion en niveaux de gris
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    let r = pixels[i];
    let g = pixels[i + 1];
    let b = pixels[i + 2];
    let gray = (r + g + b) / 3; // Calcule la valeur de gris
    pixels[i] = gray;
    pixels[i + 1] = gray;
    pixels[i + 2] = gray;
  }
  updatePixels();
}

Explication :

Dessin initial : Crée un motif en dessinant des rectangles colorés aléatoirement sur le canvas.
Conversion en niveaux de gris : Calcule la valeur de gris en moyennant les composantes rouge, verte et bleue, puis applique cette valeur à chaque composante de couleur.

5. Conclusion

Vous avez maintenant appris à manipuler les pixels en p5.js pour créer des effets visuels intéressants. Expérimentez avec ces concepts pour créer des œuvres d'art encore plus variées et complexes.

Retour