Tutoriel d'Introduction à p5.js

1. Introduction

Bienvenue dans ce tutoriel d'introduction à p5.js ! Nous allons apprendre à configurer un environnement p5.js et créer notre premier sketch en utilisant les formes de base. p5.js est une bibliothèque JavaScript qui facilite le dessin et l'animation sur le web. Elle est idéale pour les débutants en programmation créative.

2. Configuration de l'environnement

  1. Rendez-vous sur le site officiel de p5.js : p5js.org.
  2. Téléchargez la bibliothèque p5.js en cliquant sur "Download".
  3. Décompressez le fichier téléchargé et ouvrez le dossier.
  4. Créez un nouveau fichier HTML et ajoutez le code suivant pour inclure p5.js : 
    5. <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>p5.js Tutorial</title>
  <script src="p5.min.js"></script>
</head>
<body>
  <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.
  5. Créez un fichier sketch.js dans le même dossier et ajoutez-y le code suivant : 
    6. function setup() {
  createCanvas(400, 400);
  background(200);
}

function draw() {
  // Ici nous allons dessiner des formes de base
}

    Explication :

    • La fonction setup() {} est appelée une seule fois au début du programme. Elle est utilisée pour définir les propriétés initiales.
    • La fonction createCanvas(400, 400) crée une zone de dessin de 400 pixels de large et 400 pixels de haut.
    • La fonction background(200) remplit le fond de la zone de dessin avec une couleur grise (valeur entre 0 et 255).
    • La fonction draw() {} est appelée en boucle après setup(). C'est ici que nous dessinerons nos formes.

3. Création d'un canvas

Création d'un canvas

Exemple :

function setup() {
  createCanvas(400, 400); // Crée un canvas de 400x400 pixels
  background(200); // Remplit le fond avec une couleur grise
}

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

4. Dessin de formes de base

Rectangle

Exemple :

function draw() {
  rect(50, 50, 150, 100); // Dessine un rectangle à la position (50,50) avec une largeur de 150 et une hauteur de 100
}

Explication : La fonction rect(x, y, width, height) dessine un rectangle aux coordonnées (x, y) avec la largeur width et la hauteur height.

Ellipse

Exemple :

function draw() {
  ellipse(200, 200, 100, 100); // Dessine un cercle à la position (200,200) avec un diamètre de 100
}

Explication : La fonction ellipse(x, y, width, height) dessine une ellipse (ou un cercle si la largeur et la hauteur sont égales) aux coordonnées (x, y) avec la largeur width et la hauteur height.

Ligne

Exemple :

function draw() {
  line(300, 50, 350, 150); // Dessine une ligne entre les points (300,50) et (350,150)
}

Explication : La fonction line(x1, y1, x2, y2) dessine une ligne entre les points (x1, y1) et (x2, y2).

5. Utilisation des couleurs

Transparence

Exemple :

function draw() {
  fill(0, 255, 0, 127); // Définit la couleur de remplissage à vert avec une transparence de 50%
  ellipse(200, 200, 100, 100); // Dessine un cercle vert semi-transparent
}

Explication : La fonction fill(r, g, b, a) définit la couleur de remplissage des formes, où r, g, b sont les valeurs de couleur (rouge, vert, bleu) et a est la transparence.

6. Conclusion

Vous avez maintenant une bonne introduction à p5.js. Vous savez comment configurer votre environnement, créer un canvas et dessiner des formes de base avec des couleurs. Expérimentez avec ces concepts pour vous familiariser davantage avec p5.js. Dans les prochains tutoriels, nous approfondirons ces concepts et explorerons des techniques plus avancées.

Retour