Tutoriel sur la Génération de Motifs Complexes en p5.js

1. Introduction

Dans ce tutoriel, nous allons explorer comment générer des motifs complexes en utilisant des formes simples et des techniques de répétition en p5.js. Les motifs peuvent être créés en combinant des formes de base et en appliquant des transformations comme la translation, la rotation et l'échelle.

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(220); // Gris clair
}

function draw() {
  // Ici nous allons générer des motifs complexes
}

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

4. Génération de motifs complexes

Exemple 1 : Grille de cercles

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  let spacing = 40; // Espacement entre les cercles

  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 : Grille de cercles avec rotation (Révisé)

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  let spacing = 60; // Espacement entre les cercles

  for (let x = spacing / 2; x < width; x += spacing) {
    for (let y = spacing / 2; y < height; y += spacing) {
      push(); // Sauvegarde le contexte de dessin
      translate(x, y); // Déplace l'origine au centre du cercle
      let angle = atan2(y - height / 2, x - width / 2); // Calcule l'angle de rotation basé sur la position
      rotate(angle); // Applique une rotation
      ellipse(0, 0, 40, 20); // Dessine un ellipse allongée pour rendre l'effet plus visible
      pop(); // Restaure le contexte de dessin
    }
  }
}

Explication :

Nous utilisons push() et pop() pour sauvegarder et restaurer le contexte de dessin afin que les transformations n'affectent pas les autres formes.
La fonction translate(x, y) déplace l'origine au centre du cercle.
La fonction atan2(y, x) calcule l'angle de rotation basé sur la position (y, x).
La fonction rotate(angle) applique une rotation en fonction de cet angle.
La fonction ellipse(0, 0, 40, 20) dessine une ellipse allongée pour rendre l'effet de rotation plus visible.

Exemple 3 : Motif radial de rectangles

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  translate(width / 2, height / 2); // Déplace l'origine au centre du canvas

  let numRects = 20; // Nombre de rectangles
  let angleStep = TWO_PI / numRects; // Angle entre chaque rectangle

  for (let i = 0; i < numRects; i++) {
    push(); // Sauvegarde le contexte de dessin
    rotate(i * angleStep); // Applique une rotation
    rect(0, 0, 150, 10); // Dessine un rectangle
    pop(); // Restaure le contexte de dessin
  }
}

Explication :

Nous utilisons translate(width / 2, height / 2) pour déplacer l'origine au centre du canvas.
Nous définissons numRects pour le nombre de rectangles et angleStep pour l'angle entre chaque rectangle.
La boucle for parcourt chaque angle, applique une rotation et dessine un rectangle.

Exemple 4 : Motif de cercles concentriques (Révisé)

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  translate(width / 2, height / 2); // Déplace l'origine au centre du canvas

  let numCircles = 10; // Nombre de cercles
  let maxRadius = 150; // Rayon maximum

  for (let i = numCircles - 1; i >= 0; i--) { // Commence par le plus grand cercle
    let radius = (i / numCircles) * maxRadius;
    if (i % 2 == 0) {
      fill(255); // Blanc
    } else {
      fill(0); // Noir
    }
    ellipse(0, 0, radius * 2, radius * 2); // Dessine un cercle concentrique
  }
}

Explication :

La boucle for commence par le plus grand cercle (numCircles - 1) et descend jusqu'au plus petit (0).
Cela garantit que les cercles plus petits sont dessinés par-dessus les plus grands, ce qui permet de voir chaque cercle.
Nous alternons les couleurs entre noir et blanc pour un meilleur effet visuel.

5. Conclusion

Vous avez maintenant appris à générer des motifs complexes en utilisant des formes simples et des transformations en p5.js. Expérimentez avec ces concepts pour créer vos propres motifs uniques et intéressants.

Retour