Tutoriel p5.js : Créez un robot animé réactif à la voix pour débutants

JavaScript est le langage incontournable du web. Pour les débutants, surtout les enfants, sa syntaxe peut sembler complexe, et configurer un environnement de développement représente souvent un obstacle majeur. Et si vous pouviez créer des animations captivantes avec JavaScript sans aucune installation ? Découvrez p5.js, une bibliothèque créative inspirée de Processing.

Dans ce tutoriel détaillé, apprenez à programmer une tête de robot animée qui réagit à votre voix grâce à des concepts de base simples et accessibles.

Qu'est-ce que p5.js ?

Créée par l'artiste Lauren Lee McCarthy basée à Los Angeles, p5.js est une bibliothèque JavaScript qui étend Processing pour l'art et l'expression créative. Avec des outils intuitifs, des tutoriels clairs et une documentation exhaustive, elle est idéale pour les apprenants.

Que ce soit pour des animations, de la musique générative, des jeux simples ou même la connexion à du matériel externe, p5.js excelle dans la créativité visuelle et interactive.

L'éditeur p5.js

Accédez à l'éditeur en ligne p5.js directement dans votre navigateur. Deux étapes optionnelles pour optimiser votre expérience :

1. Créez un compte gratuit (via Google ou GitHub) pour sauvegarder vos sketches.

2. Personnalisez le thème sombre et la taille du texte via l'icône engrenage en haut à droite.

L'éditeur intègre un éditeur de code, une console et une zone de rendu. Deux fonctions sont préconfigurées : setup() et draw().

Les bases de p5.js

Toute esquisse p5.js repose sur setup(), exécutée une seule fois au démarrage, et draw(), appelée à chaque image (60 fois par seconde).

function setup() {
  createCanvas(500, 500);
}

setup() initialise le canevas (toile de 500x500 pixels ici). Utilisez-la pour les configurations uniques.

function draw() {
  background(220);
}

draw() gère les mises à jour continues, comme un loop() Arduino. Cliquez sur le bouton ▶️ pour lancer.

Résultat : un fond gris sur 500x500 pixels.

Créer une forme

Ajoutez une ellipse dans draw() :

function draw() {
  background(220);
  ellipse(250, 250, 50);
}

ellipse(x, y, largeur, hauteur) : (250,250) centre le cercle, 50 pixels de diamètre.

Ajouter du style

Noircissez le fond : background(0); (0=noir, 255=blanc).

Pour les couleurs RVB, déclarez des variables globales :

let r, g, b;

Dans setup() :

r = 255;
g = 0;
b = 0;

Dans draw(), avant l'ellipse :

fill(r, g, b);
ellipse(250, 250, 50);

Changer de couleur au clic

Ajoutez :

function mousePressed() {
  r = random(256);
  g = random(256);
  b = random(256);
}

random(256) génère une valeur aléatoire [0-255]. Cliquez pour voir les changements !

Configurer le contrôle vocal

Utilisez la bibliothèque p5.sound (incluse). Déclarez :

let mic;

Dans setup() :

mic = new p5.AudioIn();
mic.start();

Autorisez l'accès micro au premier lancement.

Réagir au volume

Dans draw() :

function draw() {
  let micLevel = mic.getLevel();
  background(0);
  fill(r, g, b);
  ellipse(250, 250, 50 + micLevel * 2000);
}

mic.getLevel() retourne l'amplitude audio [0-1]. Ajustez le multiplicateur pour la sensibilité.

Note : Vérifiez les paramètres micro si inactif.

Construire le robot

Créez les yeux :

ellipse(150, 150, 50 + micLevel * 2000);
ellipse(350, 150, 100 + micLevel * 2000);

Les dents (rectangles) :

rect(0, 500, 100, -100 - micLevel * 5000);
rect(400, 500, 100, -100 - micLevel * 5000);
rect(100, 500, 100, -100 - micLevel * 3000);
rect(300, 500, 100, -100 - micLevel * 3000);
rect(200, 500, 100, -100 - micLevel * 1000);

Finition

Pupilles blanches :

fill(255);
ellipse(150, 150, 20 + micLevel * 1000);
ellipse(345, 150, 30 + micLevel * 1000);

Contours : Dans setup(), strokeWeight(5);

Vérifiez le code complet dans l'éditeur si besoin.

Et ensuite ?

Ce tutoriel introductif démontre la puissance de p5.js pour la créativité. Explorez plus : art génératif, interactivité avancée. Développez votre pensée programmatique et maîtrisez JavaScript !