Tutoriel sur les Algorithmes de Dessin Aléatoire en p5.js

1. Introduction

Dans ce tutoriel, nous allons explorer comment utiliser des algorithmes de dessin aléatoire en p5.js. L'aléatoire peut ajouter une dimension de surprise et de variabilité à vos créations artistiques, rendant chaque exécution unique.

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 utiliser des algorithmes de dessin aléatoire
}

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

4. Dessin aléatoire

Exemple 1 : Points aléatoires

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  noLoop(); // Dessine une seule fois
}

function draw() {
  for (let i = 0; i < 1000; i++) {
    let x = random(width);
    let y = random(height);
    point(x, y);
  }
}

Explication :

La fonction random(max) renvoie une valeur aléatoire entre 0 et max.
Nous utilisons une boucle for pour dessiner 1000 points à des positions aléatoires sur le canvas.

Exemple 2 : Cercles de tailles et de positions aléatoires

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  noLoop(); // Dessine une seule fois
}

function draw() {
  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(10, 50);
    ellipse(x, y, r, r);
  }
}

Explication :

Nous utilisons random(min, max) pour générer des tailles de cercle aléatoires entre min et max.
Une boucle for dessine 100 cercles avec des positions et des tailles aléatoires.

Exemple 3 : Couleurs aléatoires

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  noLoop(); // Dessine une seule fois
}

function draw() {
  for (let i = 0; i < 50; i++) {
    let x = random(width);
    let y = random(height);
    let w = random(20, 100);
    let h = random(20, 100);
    let col = color(random(255), random(255), random(255));
    fill(col);
    rect(x, y, w, h);
  }
}

Explication :

Nous utilisons color(r, g, b) avec des valeurs aléatoires pour générer des couleurs de remplissage aléatoires.
Une boucle for dessine 50 rectangles avec des positions, des tailles et des couleurs aléatoires.

Exemple 4 : Motifs aléatoires avec rotation

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  noLoop(); // Dessine une seule fois
}

function draw() {
  for (let i = 0; i < 100; i++) {
    push();
    let x = random(width);
    let y = random(height);
    let r = random(10, 50);
    let angle = random(TWO_PI);
    translate(x, y);
    rotate(angle);
    rect(0, 0, r, r);
    pop();
  }
}

Explication :

Nous utilisons push() et pop() pour sauvegarder et restaurer le contexte de dessin.
La fonction rotate(angle) applique une rotation avec un angle aléatoire.
Une boucle for dessine 100 rectangles avec des positions, des tailles et des rotations aléatoires.

5. Conclusion

Vous avez maintenant appris à utiliser des algorithmes de dessin aléatoire en p5.js. Vous savez comment générer des positions, des tailles, des couleurs et des rotations aléatoires pour créer des œuvres d'art uniques. Expérimentez avec ces concepts pour explorer davantage les possibilités de l'aléatoire dans vos créations.

Retour