Tutoriel sur les Principes de Base de l'Art Génératif en p5.js

1. Introduction

Dans ce tutoriel, nous allons explorer les principes de base de l'art génératif en utilisant p5.js. L'art génératif utilise des algorithmes pour créer des œuvres d'art. En utilisant des techniques de programmation, nous pouvons générer des motifs et des formes complexes qui seraient difficiles à réaliser manuellement.

2. Configuration de l'environnement

  1. Utilisez le même fichier HTML que dans les tutoriels précédents pour configurer l'environnement : 
    2. <!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(220); // Gris clair
}

function draw() {
  // Ici nous allons générer de l'art
}

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

4. Concepts de base de l'art génératif

Exemple 1 : Motifs répétitifs

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair

  let spacing = 40; // Espacement entre les formes

  for (let x = spacing / 2; x < width; x += spacing) {
    for (let y = spacing / 2; y < height; y += spacing) {
      ellipse(x, y, 30, 30); // Dessine un cercle
    }
  }
}

Explication :

  • Nous utilisons deux boucles for imbriquées pour parcourir les positions x et y du canvas.
  • La fonction ellipse(x, y, 30, 30) dessine un cercle à chaque position (x, y) avec un diamètre de 30 pixels.

Exemple 2 : Utilisation de la randomisation

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair

  let spacing = 40;

  for (let x = spacing / 2; x < width; x += spacing) {
    for (let y = spacing / 2; y < height; y += spacing) {
      let r = random(10, 30); // Taille aléatoire
      ellipse(x, y, r, r); // Dessine un cercle avec une taille aléatoire
    }
  }
}

Explication :

  • La fonction random(min, max) renvoie une valeur aléatoire entre min et max.
  • Nous utilisons cette valeur aléatoire pour définir la taille des cercles, créant ainsi un motif plus varié.

Exemple 3 : Algorithmes mathématiques

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair

  translate(width / 2, height / 2); // Déplace l'origine au centre du canvas

  let points = 100;
  let radius = 150;

  beginShape();
  for (let i = 0; i < points; i++) {
    let angle = map(i, 0, points, 0, TWO_PI);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    vertex(x, y);
  }
  endShape(CLOSE);
}

Explication :

  • La fonction translate(x, y) déplace l'origine du canvas à la position (x, y). Ici, nous déplaçons l'origine au centre du canvas.
  • La fonction beginShape() commence une forme définie par les sommets (vertex()).
  • La fonction endShape(CLOSE) termine la forme en fermant le contour.
  • La fonction cos(angle) et sin(angle) sont utilisées pour calculer les coordonnées x et y des points sur un cercle, créant ainsi une forme circulaire.

5. Conclusion

Vous avez maintenant appris les concepts de base de l'art génératif en p5.js. Vous savez comment créer des motifs répétitifs, utiliser la randomisation et appliquer des algorithmes mathématiques pour générer des œuvres d'art. Expérimentez avec ces concepts pour créer vos propres œuvres d'art uniques.

Retour