Tutoriel sur l'Utilisation des Couleurs en p5.js

1. Introduction

Dans ce tutoriel, nous allons explorer l'utilisation des couleurs en p5.js. Nous apprendrons à utiliser les fonctions fill(), stroke(), et background() pour ajouter de la couleur à nos sketchs. Nous verrons également comment créer des dégradés et utiliser des palettes de couleurs.

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. Création d'un canvas

Création d'un canvas

Exemple :

function setup() {
  createCanvas(400, 400);
  background(255); // Blanc
}

function draw() {
  // Ici nous allons dessiner des formes colorées
}

Explication : Ce code crée un canvas de 400x400 pixels et remplit le fond avec une couleur blanche.

4. Utilisation des couleurs de base

Exemple 1 : Couleur de remplissage et de contour

Exemple :

function setup() {
  createCanvas(400, 400);
  background(255); // Blanc

  fill(255, 0, 0); // Rouge
  stroke(0, 0, 255); // Bleu
  strokeWeight(4); // Épaisseur du contour

  rect(100, 100, 200, 200); // Dessine un rectangle rouge avec un contour bleu
}

Explication :

La fonction fill(r, g, b) définit la couleur de remplissage des formes. Ici, fill(255, 0, 0) définit une couleur rouge.
La fonction stroke(r, g, b) définit la couleur du contour des formes. Ici, stroke(0, 0, 255) définit une couleur bleue.
La fonction strokeWeight(weight) définit l'épaisseur du contour. Ici, strokeWeight(4) définit une épaisseur de 4 pixels.
La fonction rect(x, y, width, height) dessine un rectangle aux coordonnées (100, 100) avec une largeur et une hauteur de 200 pixels.

5. Création de dégradés

Exemple 2 : Dégradé linéaire horizontal

Exemple :

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

  for (let i = 0; i <= width; i++) {
    let inter = map(i, 0, width, 0, 1);
    let c = lerpColor(color(255, 0, 0), color(0, 0, 255), inter);
    stroke(c);
    line(i, 0, i, height);
  }
}

Explication :

La fonction map(value, start1, stop1, start2, stop2) mappe une valeur d'une plage à une autre. Ici, map(i, 0, width, 0, 1) convertit la position x en une valeur entre 0 et 1.
La fonction lerpColor(c1, c2, amt) interpole linéairement entre deux couleurs. Ici, lerpColor(color(255, 0, 0), color(0, 0, 255), inter) crée un dégradé du rouge au bleu.
La fonction stroke(c) définit la couleur du contour.
La fonction line(x1, y1, x2, y2) dessine une ligne. Ici, line(i, 0, i, height) dessine des lignes verticales de haut en bas du canvas.

6. Utilisation de palettes de couleurs

Exemple 3 : Utilisation d'une palette de couleurs

Exemple :

let palette = ['#ff6347', '#ffa500', '#ffff00', '#adff2f', '#40e0d0'];

function setup() {
  createCanvas(400, 400);
  noLoop(); // Arrête draw() après le premier appel

  let spacing = 80;
  for (let x = spacing / 2; x < width; x += spacing) {
    for (let y = spacing / 2; y < height; y += spacing) {
      let col = random(palette);
      fill(col);
      noStroke();
      ellipse(x, y, 60, 60);
    }
  }
}

Explication :

let palette = ['#ff6347', '#ffa500', '#ffff00', '#adff2f', '#40e0d0'] définit une palette de couleurs avec des codes hexadécimaux.
La fonction noLoop() empêche draw() d'être exécutée en boucle, ce qui est utile lorsque vous voulez dessiner quelque chose une seule fois.
La fonction random(array) renvoie un élément aléatoire d'un tableau. Ici, random(palette) choisit une couleur aléatoire dans la palette.
La fonction noStroke() désactive le contour des formes.
La fonction ellipse(x, y, width, height) dessine un cercle aux coordonnées (x, y) avec une largeur et une hauteur de 60 pixels.

7. Conclusion

Vous avez maintenant appris à utiliser les couleurs en p5.js, à créer des dégradés et à utiliser des palettes de couleurs. Expérimentez avec ces concepts pour ajouter plus de vie et de complexité à vos sketchs. Dans les prochains tutoriels, nous explorerons des techniques encore plus avancées pour créer des œuvres d'art génératif complexes.

Retour