Tutoriel sur les Boucles en p5.js

1. Introduction

Dans ce tutoriel, nous allons explorer l'utilisation des boucles en p5.js pour générer des motifs répétitifs. Les boucles sont des structures de contrôle qui permettent de répéter un bloc de code plusieurs fois. Nous utiliserons principalement les boucles for pour créer des motifs intéressants.

2. Configuration de l'environnement

Utilisez le même fichier HTML que dans le tutoriel précédent 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(200);
}

function draw() {
  // Ici nous allons dessiner des formes répétitives
}

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

4. Utilisation des boucles for

La boucle for est idéale pour répéter des actions un certain nombre de fois. Voici la syntaxe générale d'une boucle for :

for (initialisation; condition; incrément) {
  // Code à répéter
}

Explication :

Initialisation : Déclare et initialise une variable de contrôle de boucle.
Condition : Condition qui doit être vraie pour que la boucle continue de s'exécuter.
Incrément : Mise à jour de la variable de contrôle à chaque itération.

5. Dessin de motifs répétitifs

Exemple 1 : Grille de cercles

Exemple :

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

  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 avons défini un espacement (spacing) de 40 pixels.
La première boucle for parcourt les positions x du canvas, de spacing / 2 jusqu'à la largeur du canvas (width), en augmentant de spacing à chaque itération.
La deuxième boucle for parcourt les positions y du canvas, de spacing / 2 jusqu'à la hauteur du canvas (height), en augmentant de spacing à chaque itération.
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 rectangles avec des couleurs alternées

Exemple :

function setup() {
  createCanvas(400, 400);
  let spacing = 40; // Espacement entre les rectangles

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      if ((x + y) % 80 === 0) {
        fill(255, 0, 0); // Rouge
      } else {
        fill(0, 0, 255); // Bleu
      }
      rect(x, y, spacing, spacing); // Dessine un rectangle
    }
  }
}

Explication :

Nous avons défini un espacement (spacing) de 40 pixels.
La première boucle for parcourt les positions x du canvas, de 0 jusqu'à la largeur du canvas (width), en augmentant de spacing à chaque itération.
La deuxième boucle for parcourt les positions y du canvas, de 0 jusqu'à la hauteur du canvas (height), en augmentant de spacing à chaque itération.
La condition if ((x + y) % 80 === 0) permet d'alterner les couleurs entre rouge et bleu.
La fonction rect(x, y, spacing, spacing) dessine un rectangle à chaque position (x, y) avec une taille de spacing pixels.

6. Conclusion

Les boucles for sont un outil puissant pour générer des motifs répétitifs en p5.js. En expérimentant avec différents espacements, formes et couleurs, vous pouvez créer des motifs variés et intéressants. Essayez de modifier les exemples ci-dessus pour créer vos propres motifs uniques.

Retour