Dibujando una Cara Sonriente con p5.js

En este artículo, exploraremos cómo utilizar la biblioteca p5.js para crear un simple pero encantador dibujo: una cara sonriente. p5.js es una biblioteca de JavaScript que facilita la creación de gráficos y animaciones interactivas. Es ideal para artistas, diseñadores y desarrolladores que desean crear proyectos visuales basados en código.

¿Qué es p5.js?

p5.js es una biblioteca orientada a hacer accesible el mundo de la programación visual. Ofrece un conjunto de funciones que permiten dibujar formas, crear animaciones, e interactuar con el usuario de manera sencilla. Aunque está escrita en JavaScript, los usuarios no necesitan ser expertos en este lenguaje para empezar a crear visuales llamativos.

Estructura básica de un sketch en p5.js

Un sketch en p5.js tiene dos funciones principales:

setup(): Se ejecuta una vez al principio. Aquí es donde inicializamos el lienzo, configuramos colores, y preparamos cualquier elemento necesario.
draw(): Se ejecuta en bucle, cuadro por cuadro. Aquí colocamos las instrucciones que queremos que se repitan continuamente (como una animación). En nuestro caso, no requerimos una animación, así que lo dejaremos vacío.

El proyecto: una cara sonriente

El objetivo es dibujar una cara sonriente utilizando formas simples: un círculo grande para la cara, dos círculos más pequeños para los ojos, y un arco para la boca.

Paso 1: Crear el lienzo

Lo primero que hacemos es definir el tamaño del lienzo. En este caso, usaremos un tamaño de 400x400 píxeles y estableceremos un fondo negro.

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

Paso 2: Dibujar la cara

La cara es simplemente un gran círculo. Para dibujar un círculo en p5.js, usamos la función ellipse(), que requiere las coordenadas de su centro, y su ancho y alto. En nuestro caso, dibujaremos el círculo en el centro del lienzo, con un diámetro de 200 píxeles.

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

Paso 3: Dibujar los ojos

Los ojos son dos pequeños círculos blancos. Podemos usar la misma función ellipse(), pero esta vez les damos un relleno blanco y los colocamos ligeramente hacia arriba y a los lados del centro de la cara.

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

Paso 4: Dibujar la sonrisa

Finalmente, para la sonrisa usamos la función arc(). Esta función permite dibujar un arco elíptico que, en este caso, se parece a una sonrisa. Ajustamos las coordenadas para que la curva esté centrada y se vea como una boca.

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

El código completo:

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
}

Conclusión

Este sencillo ejemplo muestra cómo, con unas pocas líneas de código, podemos crear gráficos atractivos utilizando p5.js. Aunque este proyecto es básico, los principios que se utilizan aquí pueden escalarse para crear visuales mucho más complejos y detallados. Si deseas experimentar más, puedes intentar cambiar el tamaño de los elementos, agregar color o incluso hacer una animación en el draw().

¡Anímate a crear tu propia versión de esta cara sonriente y explorar lo que p5.js tiene para ofrecer!