Dessiner un visage souriant avec p5.js

Dans cet article, nous allons explorer comment utiliser la bibliothèque p5.js pour créer un dessin simple mais charmant : un visage souriant. p5.js est une bibliothèque JavaScript qui facilite la création de graphiques et d'animations interactifs. Il est idéal pour les artistes, designers et développeurs qui souhaitent créer des projets visuels basés sur du code.

Qu'est-ce que p5.js ?

p5.js est une bibliothèque visant à rendre accessible le monde de la programmation visuelle. Il offre un ensemble de fonctions qui vous permettent de dessiner des formes, de créer des animations et d'interagir avec l'utilisateur de manière simple. Bien qu'il soit écrit en JavaScript, les utilisateurs n'ont pas besoin d'être experts dans ce langage pour commencer à créer des visuels accrocheurs.

Structure de base d'un croquis dans p5.js

Une esquisse dans p5.js a deux fonctions principales :

1. setup() : exécuté une fois au début. C'est ici que nous initialisons le canevas, définissons les couleurs et préparons tous les éléments nécessaires.
2. draw() : s'exécute en boucle, image par image. Ici nous plaçons les instructions que nous voulons répéter en continu (comme une animation). Dans notre cas, nous n'avons pas besoin d'animation, nous la laisserons donc vide.

Le projet : un visage souriant

Le but est de dessiner un visage souriant en utilisant des formes simples : un grand cercle pour le visage, deux cercles plus petits pour les yeux et un arc pour la bouche.

Étape 1 : Créer le canevas

La première chose que nous faisons est de définir la taille du canevas. Dans ce cas, nous utiliserons une taille de 400x400 pixels et définirons un fond noir.

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

Étape 2 : Dessinez le visage

Le visage est simplement un grand cercle. Pour dessiner un cercle dans p5.js, nous utilisons la fonction ellipse(), qui nécessite les coordonnées de son centre, ainsi que sa largeur et sa hauteur. Dans notre cas, nous dessinerons le cercle au centre de la toile, d'un diamètre de 200 pixels.

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

Étape 3 : Dessinez les yeux

Les yeux sont deux petits cercles blancs. Nous pouvons utiliser la même fonction ellipse(), mais cette fois nous leur donnons un remplissage blanc et les plaçons légèrement vers le haut et sur les côtés du centre du visage.

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

Étape 4 : Dessinez le sourire

Enfin, pour le sourire nous utilisons la fonction arc(). Cette fonction permet de dessiner un arc elliptique qui, dans ce cas, ressemble à un sourire. Nous ajustons les coordonnées pour que la courbe soit centrée et ressemble à une bouche.

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

Le code complet :

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

Conclusion

Cet exemple simple montre comment, avec quelques lignes de code, nous pouvons créer des graphiques attrayants à l'aide de p5.js. Bien que ce projet soit basique, les principes utilisés ici peuvent être adaptés pour créer des visuels beaucoup plus complexes et détaillés. Si vous souhaitez expérimenter davantage, vous pouvez essayer de redimensionner les éléments, d'ajouter de la couleur ou même de créer une animation dans draw().

Allez-y, créez votre propre version de ce visage souriant et explorez ce que p5.js a à offrir !