Random Walk con P5.js

Después de la genial charla "Con Canvas y a lo loco" por parte de Carmen Ansio a la que pude asistir en el pasado Bilbostack, me entraron ganas de probar esa librería tan chula de la que me había estado hablando: P5.js.

¿Y qué es P5.js?

Es una librería basada en Processing, y destinada a hacer el código accesible a artistas, estudiantes, principiantes, etc, tal y como anuncia en su propia web. Una de sus muchas funcionalidades es la capacidad de trabajar con objetos Canvas, tal y como veremos en el ejemplo.

¿Qué es un Random Walk?

Un "random walk" o "camino aleatorio", es un trazado elaborado a partir de pasos aleatorios. Existen incluso obras de arte elaboradas a partir de estos trazados. En el caso de mi ejemplo, aproveché las capacidades para generar puntos de cualquier color sobre un lienzo de la librería P5, para generar mi random walk, que funciona de la siguiente forma:

  1. Se genera un número aleatorio (en este caso entre 3 y 24), definiendo el número de puntos del mismo color y en la misma dirección que contendrá el trazo.
  2. Se definen 8 direcciones posibles: (Norte, Noreste, Este, Sureste, Sur, Suroeste, Oeste, Noreste).
  3. A la hora de cambiar el color, se tiene en cuenta el inicial para generar variaciones aleatorias a partir de él.
  4. En caso de que se detecte un color muy claro, el fondo del lienzo pasa a ser negro.

Embedded content: https://codepen.io/jmlweb/full/wyKxxq/