Tutoriel 12 : Génération d'Art Fractal en p5.js

1. Introduction

Utiliser des algorithmes pour générer des formes fractales et des motifs répétitifs complexes.

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
}

Explication :

createCanvas(400, 400) : Crée un canvas de 400x400 pixels.
background(220) : Remplit le fond du canvas avec une couleur gris clair.

4. Génération de fractals

Nous allons explorer plusieurs exemples de fractals pour comprendre les concepts et les implémenter en p5.js.

Exemple 1 : Arbre de Pythagore

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
  stroke(0);
  translate(width / 2, height); // Déplace l'origine au bas du canvas
  drawBranch(100); // Dessine la première branche de longueur 100
}

function drawBranch(len) {
  line(0, 0, 0, -len); // Dessine une ligne de la position actuelle vers le haut
  translate(0, -len); // Déplace l'origine à la fin de la ligne
  if (len > 4) { // Condition de fin de récursion
    push(); // Sauvegarde l'état actuel de la transformation
    rotate(PI / 4); // Tourne de 45 degrés vers la droite
    drawBranch(len * 0.67); // Dessine la branche droite plus petite
    pop(); // Restaure l'état de la transformation
    push(); // Sauvegarde l'état actuel de la transformation
    rotate(-PI / 4); // Tourne de 45 degrés vers la gauche
    drawBranch(len * 0.67); // Dessine la branche gauche plus petite
    pop(); // Restaure l'état de la transformation
  }
}

Explication :

translate(width / 2, height) : Déplace l'origine du dessin au bas du canvas pour que l'arbre grandisse vers le haut.
drawBranch(len) : Fonction récursive qui dessine une branche de longueur len. Si la longueur est supérieure à 4 pixels, la fonction se rappelle elle-même pour dessiner deux branches supplémentaires plus petites (2/3 de la taille de la branche actuelle) à partir de l'extrémité de la branche actuelle.
push() et pop() : Sauvegardent et restaurent l'état actuel de la transformation (position et rotation), permettant de dessiner des branches sans affecter les autres.

Exemple 2 : Flocon de Koch

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
  stroke(0);
  let len = 300;
  let startX = width / 2 - len / 2;
  let startY = height / 2 + len / 2;
  drawKoch(startX, startY, len, 0, 4);
}

function drawKoch(x, y, len, angle, depth) {
  if (depth == 0) {
    let x1 = x + len * cos(angle);
    let y1 = y + len * sin(angle);
    line(x, y, x1, y1);
  } else {
    len /= 3.0;
    drawKoch(x, y, len, angle, depth - 1);
    x += len * cos(angle);
    y += len * sin(angle);

    drawKoch(x, y, len, angle - PI / 3, depth - 1);
    x += len * cos(angle - PI / 3);
    y += len * sin(angle - PI / 3);

    drawKoch(x, y, len, angle + PI / 3, depth - 1);
    x += len * cos(angle + PI / 3);
    y += len * sin(angle + PI / 3);

    drawKoch(x, y, len, angle, depth - 1);
  }
}

Explication :

drawKoch(x, y, len, angle, depth) : Fonction récursive qui dessine une courbe de Koch. Si la profondeur est zéro, une ligne droite est dessinée. Sinon, la fonction divise la longueur par trois et appelle récursivement elle-même pour dessiner quatre segments de courbe de Koch avec une profondeur réduite. Chaque segment est dessiné avec un angle différent pour créer les "dents" caractéristiques de la courbe de Koch.
cos(angle) et sin(angle) : Calculent les coordonnées x et y des points en fonction de l'angle et de la longueur.

5. Conclusion

Vous avez maintenant appris à générer des motifs fractals en p5.js. Expérimentez avec ces concepts pour créer des œuvres d'art fractales encore plus variées et complexes.

Retour