En este artículo vamos a presentar la librería p5.js, que puede ser una excelente herramienta para practicar con Javascript de una manera divertida y muy visual. Explicaré brevemente en qué consiste esta librería y luego veremos de manera detallada y práctica cómo usarla para hacer algunos proyectos iniciales.

Qué es p5.js

p5.js es una librería de JavaScript para la creación de gráficos que son capaces de mostrar animaciones y reaccionar a las acciones del usuario de una manera interactiva. Con ella te resultará extremadamente fácil crear gráficos, animaciones e interacciones que luego podrías usar para presentar en cualquier página web.

Es una librería pensada sobre todo en artistas y diseñadores que les guste la programación y la experimentación con el código. O al revés, para programadores que les guste experimentar con el mundo del diseño y la animación, sacando partido a sus habilidades de codificación. También es ideal para aprender programación de una manera amena y divertida, muy visual y atractiva, donde eliminamos cualquier brecha inicial de setup y nos podemos centrar en el código.

Qué nos ofrece p5.js

Ok ya sabemos que es una librería basada en Javascript. ¿Pero qué ofrece de manera adicional a los desarrolladores?

Básicamente se trata de una biblioteca que permite diseñar por medio de funciones sencillas dentro del elemento <canvas> de HTML5. Permite hacer cosas tan simples como un círculo, una línea, o cualquier otra forma geométrica. Pero a partir de ahi puede llegar a cotas de sofisticación muy elevadas, permitiendo crear animaciones complejas, simulaciones físicas en 2D y 3D, visualizaciones de datos, o incluso juegos interactivos.

Para todo ello p5.js ofrece funciones muy intuitivas y un marco de desarrollo sencillo donde entra en juego un motor de animación y eventos para gestionar la interacción del usuario.

Además, p5.js no se limita al dibujo en 2D, sino que incluye también soporte para la tecnología WebGL, que nos permite usar la aceleración gráfica de la tarjeta de vídeo directamente en el navegador, dentro del elemento canvas. Con WebGL, p5.js puede renderizar gráficos en 3D, aplicar transformaciones espaciales (rotaciones, escalados, cámaras), y trabajar con luces y texturas, entre muchas otras utilidades. Esto abre la puerta a experiencias mucho más avanzadas de arte generativo que realmente son espectaculares.

Desde el sitio de p5.js se tiene acceso a la documentación de la librería y una cantidad de ejemplos impactantes que nos pueden dar una idea más completa de las virguerías que seríamos capaces de hacer con esta herramienta.

La versión web de Processing

p5.js es la adaptación de Processing en el mundo de la web. Processing es una herramienta basada en Java pensada para la expresión artística y el aprendizaje de la programación por medio de un enfoque visual y atractivo.

Processing es bastante popular en el ambiente educativo y la comunidad artística digital, sin embargo es un poco más complejo de usarlo, ya que se basa en un lenguaje más complejo de instalar y mantener como es Java. Es por ello que ya desde hace tiempo se ha portado a p5.js que es la alternativa web basada en Javascript.

Por tanto, tanto Processing como p5.js son herramientas hermanas y trabajar con una u otra es muy similar. Solo que con p5.js podemos usar el navegador y las tecnologías basadas en HTML5, por lo que es mucho más accesible para cualquier persona.

Hace tiempo en DesarrolloWeb.com publicamos un Manual de Processing.js donde se explica paso por paso el uso de esta librería con ejemplos, solo que está en una versión anterior. No obstante, el global de la tecnología y las funciones incorporadas en el lenguaje es bastante similar a la actualidad. Solo cambian algunos asuntos del setup que vamos a ver aquí.

Cómo comenzar con p5.js

La manera más sencilla de trabajar con la librería p5.js es entrar en el editor online que podemos acceder a través de la URL https://editor.p5js.org/

En este editor online encontrarás todo lo necesario para comenzar a escribir líneas de código en p5.js. Básicamente consiste en un espacio de trabajo dividido en dos paneles:

• En el panel de la izquierda escribimos el código
• En el panel de la derecha vemos una representación del resultado, que se actualiza automáticamente según cambiamos el código.

Este editor es fantástico porque te permite escribir tu código directamente sin instalar nada, con lo cual reduces toda la complejidad de iniciar un proyecto con Processing y simplemente necesitas concentrarte en programar.

Obviamente, también podrías desarrollar con p5.js en local y ejecutar tu proyecto en el navegador. Muchas personas prefieren hacerlo así, ya que les permite trabajar de una manera más natural y próxima a como realizarían cualquier proyecto en la web, sin embargo, si lo que queremos es centrarnos en experimentar con nuestro código, lo más cómodo es utilizar el editor online.

La estructura básica de un programa en p5js

En p5.js llamamos "sketch" a un programa que muestra un comportamiento, ya sea un simple dibujo, una animación o un sistema interactivo, usando las funcionalidades que nos aporta la librería.

Un sketch consta de varias funciones, con nombres específicos, donde tenemos que escribir el código que produzca el dibujo o animación interactiva. Dentro de las funciones que podríamos llegar a escribir debemos empezar por conocer las dos principales:

• setup(): es una función que se ejecuta una sola vez al inicio. Aquí configuras el lienzo y las variables iniciales que requiera tu programa.
• draw(): es una función que sirve para dibujar en el lienzo. Esta función se repite constantemente,, con una serie de llamadas que se ejecutan de manera muy rápida (unas 60 veces por segundo en casos normales). En esta función es donde colocamos el código para producir la animación o lo que queramos mostrar en pantalla.

Un ejemplo mínimo de sketch en p5js podría ser como este:

function setup() {
  createCanvas(400, 400); // Lienzo de 400x400 píxeles
}

function draw() {
  background(220); // Color de fondo
  fill('red'); // Color de relleno
  ellipse(200, 200, 150, 150); // Un círculo en el centro, que será rojo
}

En este ejemplo se mostrará un fondo de color grisáceo bastante claro y en el centro del lienzo aparecerá un círculo de 150 píxeles de diámetro, que se rellenará de color rojo.

Este ejemplo no producirá ninguna animación porque no existe ninguna variación entre cada una de las llamadas a la función draw(). Pero podríamos cambiarlo de una manera sencilla para conseguir un efecto animado:

let tamano = 0;

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

function draw() {
  background(220); 
  fill('red'); 
  ellipse(200, 200, tamano, tamano); 
  tamano++;
}

En este segundo ejemplo hemos definido una variable llamada tamano al principio del todo. A la hora de pintar el círculo la utilizamos. Además en cada iteración de la animación se incrementa en uno el valor de tamano. Con eso se consigue que cada vez que se vuelva a dibujar el lienzo el círculo vaya aumentando de tamaño, con lo que se produce una sencilla animación.

Dibujar formas básicas en p5js

Algo que podemos hacer muy fácilmente dentro de p5.js es dibujar formas básicas, usando funciones incorporadas por la librería. Algunas de las funciones más sencillas son estas:

• ellipse(x, y, ancho, alto): dibuja un círculo u óvalo.
• rect(x, y, ancho, alto): dibuja un rectángulo.
• line(x1, y1, x2, y2): traza una línea.
• triangle(x1, y1, x2, y2, x3, y3): dibuja un triángulo.

Veamos un ejemplo donde colocaremos varias formas:

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

function draw() {
  background(240);
  rect(50, 50, 100, 150);
  ellipse(300, 200, 220, 80);
  triangle(100, 300, 200, 350, 300, 250);
  line(0, 0, width, height);
}

En este ejemplo es interesante apreciar que hemos utilizado valores literales para cada una de las formas, excepto para la línea donde hemos usado dos variables creadas por la propia librería p5.js: width y height. Estas variables toman los valores de anchura y altura que hallamos asignado al lienzo, algo que hicimos en el método setup(), con la función createCanvas(400, 400).

El resultado de la ejecución del código anterior se puede ver en la siguiente imagen:

Hay otra cosa que puedes observar en la imagen anterior y es que la línea se coloca por encima de cualquier forma dibujada anteriormente. El motivo de esta posición es bastante intuitivo, ya que la llamada a line() se hace al final y por tanto es lo último que se dibuja en el lienzo.

Animación con variables

Ahora vamos a ver otro ejemplo de animación un poco más elaborado. Nuevamente, nos apoyamos en la función draw() que se repite en bucle. Así que para conseguir animaciones simplemente tenemos que usar variables que vayan cambiando a lo largo del tiempo.

En el siguiente ejemplo podríamos ver como una bola va rebotando por las paredes del lienzo. Para ello simplemente creamos una variable que nos permita llevar la progresión de un movimiento en el eje de las X y otra variable que nos permita implementar el movimiento en el eje de las Y. Además de dos variables para definir la velocidad del movimiento en cada uno de los ejes.

let x = 0;
let y = 100;
let speedX = 3;
let speedY = 2;

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(220);
  ellipse(x, y, 50, 50);
  x = x + speedX;
  y = y + speedY;

  if (x > width || x < 0) {
    speedX = speedX * -1; // cambia de dirección en el eje de las X
  }
  
  if (y > height || y < 0) {
    speedY = speedY * -1; // cambia de dirección en el eje de las Y
  }
}

Los dos condicionales que encontramos en la parte de abajo nos permiten cambiar la dirección en el eje de las X o el eje de las Y. Para ello simplemente pasamos de positivo a negativo, o viceversa, el valor de velocidad. Si lo piensas es una operación matemática muy simple.

Aplicar interactividad

Para conseguir efectos interactivos en p5.js tenemos simplemente que definir funciones que se ejecutan cuando se producen determinados eventos, como podría ser pulsaciones de teclas o clics del ratón.

Vamos a ver un ejemplo con la función mousePressed() que se ejecuta cuando haces clic en el lienzo. En ese caso simplemente queremos que la posición x e y se asigne al punto exacto donde has hecho clic.

En el ejemplo anterior prueba a colocar este simple código, que se ejecutará cada vez que el usuario hace clic en el lienzo.

function mousePressed() {
  x = mouseX;
  y = mouseY;
}

Simplemente lo que hacemos es asignar a la variable x el valor mouseX, que es una variable interna que crea p5js para indicar el punto exacto donde está el ratón en el eje de las X en ese instante. De manera análoga, a la variable y le asignamos mouseY, que es la posición del ratón en el eje de las Y.

Conclusión

Con lo poco que hemos aprendido en este artículo sobre p5.js hemos conseguido hacer animaciones sencillas pero bastante vistosas, incluso aplicado interactividad. Obviamente, esto solo es un minúsculo demo. Tienes una inmensa cantidad de posibilidades por explorar dentro de esta herramienta.

Como habrás podido imaginar, p5js es excelente para aprender programación de una manera divertida, con ejemplos visuales que nos motivarán a experimentar con el código. Es sin duda mucho más divertido que mostrar salida por consola de números o tablas de multiplicar, ejemplos típicos cuando practicas con tus primeros programas en Javascript.

Por supuesto, si tú ya sabes programación te puede ayudar a pasar un buen rato creando un proyecto artístico donde dejes escapar tu imaginación.