Tutoriel 9 : Création d'un Motif 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
  let step = 20; // Taille de chaque cellule de la grille

  for (let x = 0; x < width; x += step) {
    for (let y = 0; y < height; y += step) {
      drawLine(x, y, step, step);
    }
  }
}

function drawLine(x, y, width, height) {
  let leftToRight = random() >= 0.5;

  if (leftToRight) {
    line(x, y, x + width, y + height);
  } else {
    line(x + width, y, x, y + height);
  }
}

Explication : Ce code crée un canvas carré et remplit chaque cellule avec une ligne diagonale aléatoire.

4. Dessin aléatoire

Exemple 1 : Changer la taille et la couleur des lignes

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  let step = 20;

  strokeWeight(2); // Épaisseur de la ligne
  stroke(0); // Couleur de la ligne (noir)

  for (let x = 0; x < width; x += step) {
    for (let y = 0; y < height; y += step) {
      drawLine(x, y, step, step);
    }
  }
}

function drawLine(x, y, width, height) {
  let leftToRight = random() >= 0.5;

  if (leftToRight) {
    line(x, y, x + width, y + height);
  } else {
    line(x + width, y, x, y + height);
  }
}

Explication :

strokeWeight(2) : Définit l'épaisseur des lignes à 2 pixels.
stroke(0) : Définit la couleur des lignes à noir.

Exemple 2 : Ajouter des couleurs aléatoires

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  let step = 20;

  for (let x = 0; x < width; x += step) {
    for (let y = 0; y < height; y += step) {
      stroke(random(255), random(255), random(255)); // Couleur aléatoire
      drawLine(x, y, step, step);
    }
  }
}

function drawLine(x, y, width, height) {
  let leftToRight = random() >= 0.5;

  if (leftToRight) {
    line(x, y, x + width, y + height);
  } else {
    line(x + width, y, x, y + height);
  }
}

Explication :

stroke(random(255), random(255), random(255)) : Définit une couleur de ligne aléatoire en utilisant des valeurs aléatoires pour les composantes rouge, vert et bleu.

Exemple 3 : Animer les lignes

Exemple :

function setup() {
  createCanvas(400, 400);
  frameRate(10); // Nombre de frames par seconde
}

function draw() {
  background(220); // Gris clair
  let step = 20;

  for (let x = 0; x < width; x += step) {
    for (let y = 0; y < height; y += step) {
      stroke(random(255), random(255), random(255)); // Couleur aléatoire
      drawLine(x, y, step, step);
    }
  }
}

function drawLine(x, y, width, height) {
  let leftToRight = random() >= 0.5;

  if (leftToRight) {
    line(x, y, x + width, y + height);
  } else {
    line(x + width, y, x, y + height);
  }
}

Explication :

frameRate(10) : Définit la fréquence d'images à 10 frames par seconde, ce qui rendra l'animation plus fluide.
background(220) : Efface le dessin précédent en remplissant le fond avec une couleur gris clair à chaque frame, pour que les nouvelles lignes ne soient pas dessinées par-dessus les anciennes.

5. Conclusion

Ce tutoriel vous a montré comment reproduire un motif aléatoire de lignes diagonales en p5.js et comment aller plus loin avec des personnalisations et des animations. Expérimentez avec ces concepts pour créer des œuvres d'art encore plus variées et intéressantes.

Retour