Tutoriel sur l'Animation de Formes Simples en p5.js

1. Introduction

Dans ce tutoriel, nous allons explorer comment animer des formes simples en p5.js. L'animation permet de créer des œuvres d'art dynamiques et interactives. Nous verrons comment utiliser les fonctions de base pour déplacer, transformer et animer des formes.

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 animer des formes
}

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

4. Animation de formes simples

Exemple 1 : Mouvement horizontal d'un cercle

Exemple :

let x = 0;

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
}

function draw() {
  background(220); // Efface le dessin précédent
  ellipse(x, height / 2, 50, 50); // Dessine un cercle

  x += 2; // Incrémente la position x

  if (x > width) {
    x = 0; // Réinitialise la position x si elle dépasse la largeur du canvas
  }
}

Explication :

Nous déclarons une variable x pour suivre la position horizontale du cercle.
Dans la fonction draw(), nous effaçons le dessin précédent avec background(220).
Nous dessinons un cercle à la position (x, height / 2).
Nous incrémentons la position x de 2 pixels à chaque frame.
Si x dépasse la largeur du canvas, nous réinitialisons x à 0.

Exemple 2 : Mouvement vertical d'un rectangle

Exemple :

let y = 0;

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
}

function draw() {
  background(220); // Efface le dessin précédent
  rect(width / 2 - 25, y, 50, 50); // Dessine un rectangle

  y += 2; // Incrémente la position y

  if (y > height) {
    y = 0; // Réinitialise la position y si elle dépasse la hauteur du canvas
  }
}

Explication :

Nous déclarons une variable y pour suivre la position verticale du rectangle.
Dans la fonction draw(), nous effaçons le dessin précédent avec background(220).
Nous dessinons un rectangle à la position (width / 2 - 25, y).
Nous incrémentons la position y de 2 pixels à chaque frame.
Si y dépasse la hauteur du canvas, nous réinitialisons y à 0.

Exemple 3 : Rotation d'un carré

Exemple :

let angle = 0;

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
  rectMode(CENTER); // Dessine les rectangles depuis leur centre
}

function draw() {
  background(220); // Efface le dessin précédent
  translate(width / 2, height / 2); // Déplace l'origine au centre du canvas
  rotate(angle); // Applique une rotation

  rect(0, 0, 100, 100); // Dessine un carré au centre du canvas

  angle += 0.05; // Incrémente l'angle de rotation
}

Explication :

Nous déclarons une variable angle pour suivre l'angle de rotation du carré.
Dans la fonction draw(), nous effaçons le dessin précédent avec background(220).
Nous déplaçons l'origine du canvas au centre avec translate(width / 2, height / 2).
Nous appliquons une rotation avec rotate(angle).
Nous dessinons un carré au centre du canvas avec rect(0, 0, 100, 100).
Nous incrémentons l'angle de rotation de 0.05 radians à chaque frame.

5. Conclusion

Vous avez maintenant appris à animer des formes simples en p5.js. Vous savez comment créer des mouvements horizontaux, verticaux et des rotations. Expérimentez avec ces concepts pour créer des animations plus complexes et intéressantes.

Retour