Intégration de p5.js avec Vite

Ce chapitre détaille la procédure pour démarrer un projet en utilisant Vite et intégrer la bibliothèque p5.js, facilitant la création d'éléments graphiques interactifs dans une application web. Vite assure une expérience de développement optimisée, tandis que p5.js ouvre un champ de possibilités pour le dessin, l'animation et l'interaction visuelle.

Initialisation avec Vite#

Création du projet#

Pour initier, lancez la commande suivante dans un terminal :

npm create vite@latest

Suivez les instructions pour sélectionner un modèle de projet et nommer votre projet. Optez pour un projet JavaScript simple pour ce tutoriel.

Ajout de p5.js#

Dirigez-vous dans le dossier de votre projet et installez p5.js :

npm i p5

Cela intègre p5.js à votre projet, vous permettant d'exploiter ses fonctionnalités pour des créations graphiques.

Configuration du Projet#

Nettoyage initial#

Avant de coder, éliminez les fichiers superflus (counter.js et javascript.svg) pour clarifier l'espace de travail.

Mise à jour de main.js#

Adaptez le contenu de main.js comme suit :

import "./style.css";
import p5 from "p5";

new p5(p => {
  p.setup = () => {
    p.createCanvas(800, 800);
    p.background(0);
  };

  p.draw = () => {
    p.fill(255);
    p.ellipse(p.mouseX, p.mouseY, 50, 50);
  };
}, document.querySelector("#app"));

Ce code initialise un canevas via p5.js et y dessine un cercle blanc suivant le curseur de la souris.

Réinitialisation de style.css#

Videz style.css pour prévenir tout conflit de styles. Ce fichier pourra être utilisé ultérieurement pour personnaliser les styles de votre projet.

Visualisation du projet#

Pour observer le résultat, activez le serveur de développement :

npm run dev

Rendez-vous à l'adresse indiquée dans votre navigateur pour visualiser le canevas p5.js en action, illustré par un cercle blanc suivant le mouvement de la souris sur un fond noir.

Vous avez maintenant intégré avec succès p5.js dans un projet Vite, ouvrant la voie à la création de visuels interactifs enrichissants pour vos applications web.