Introduction

Dans ce tutoriel, vous apprendrez à créer une animation géométrique dynamique et colorée à l'aide de p5.js. Cette animation symbolise l'idée selon laquelle « le monde est rempli de gens fabuleux et incroyables qui font des choses merveilleuses ». Les formes se déplaceront de manière aléatoire sur la toile, changeant de couleur et créant un effet visuellement captivant.

Étape 1 : Configuration de votre environnement

1. Télécharger p5.js :

   • Accédez au site Web p5.js et téléchargez la dernière version de p5.js.
   • Vous pouvez également utiliser l'éditeur p5.js en ligne editor.p5js.org, qui vous permet d'écrire et d'exécuter votre code directement dans votre navigateur.

2. Créer un nouveau projet :

   • Si vous utilisez l'éditeur en ligne, créez un nouveau croquis en cliquant sur "Nouveau" dans le coin supérieur gauche.
   • Si vous codez localement, créez un nouveau fichier HTML et liez la bibliothèque p5.js.

Étape 2 : Rédaction de la structure de base

Commençons par configurer la structure de base de notre croquis p5.js. Cela inclut la définition des fonctions setup() et draw().

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

Explication:

createCanvas(windowWidth, windowHeight); : Ceci définit la taille du canevas pour qu'elle corresponde à la fenêtre de votre navigateur.
noStroke(); : Cela supprime la bordure des formes que nous allons créer.
background(30, 30, 60, 25); : Ceci définit la couleur d'arrière-plan sur un bleu foncé avec une certaine transparence, créant un effet de traînée pour les formes.

Étape 3 : Ajout de formes géométriques dynamiques

Maintenant, ajoutons le code pour créer des formes aléatoires avec différentes couleurs, positions et tailles.

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i 



Explication:

• Variables randomisées :

  • x et y déterminent la position de chaque forme sur la toile.
  • size contrôle la taille de chaque forme.
  • colorR, colorG, colorB génèrent des valeurs aléatoires pour les composants rouge, vert et bleu de la couleur de remplissage.
  • fill(colorR, colorG, colorB, 150); : Ceci définit la couleur de remplissage avec une légère transparence.

• Types de formes :

  • ellipse(x, y, size, size); : dessine un cercle ou une ellipse.
  • rect(x, y, size, size); : dessine un carré ou un rectangle.
  • triangle(x, y, x size, y, x size / 2, y - size); : dessine un triangle.

Étape 4 : Rendre l'animation réactive

Pour vous assurer que le canevas se redimensionne avec la fenêtre, ajoutez la fonction suivante :

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Étape 5 : Exécuter votre esquisse

• Si vous utilisez l'éditeur en ligne p5.js, appuyez simplement sur le bouton "Play" pour voir votre animation.
• Si vous codez localement, ouvrez votre fichier HTML dans un navigateur Web pour afficher l'animation.