Sketchs con p5.js

Como buen propósito de año nuevo, me he propuesto retomar mi blog, intentando publicar algo todas las semanas (espero que puede hacerlo durante todo el año). Y esta semana ya se por donde empezar.

Hace tiempo publique un post con un ejemplo de uso de Processing. Se trataba de una animación que generaba una ilusión óptica, algo relativamente sencillo, que ahora, al echar un vistazo en el tiempo he visto que ya no funciona.

El asunto es que me había propuesto arreglarlo, pero al mirar en la página del proyecto Processing he visto el proyecto p5.js y claro... que mejor que rehacerlo en JavaScript, el lenguaje de moda.

Primero echemos un vistazo a la ilusión óptica en sí, y luego, explicaré un poco por encima como funciona esto de p5.js y para que se puede utilizar. La ilusión óptica es simple, las líneas rojas son líneas rectas realmente, pero aparentemente se curvan...

El código responsable de lo anterior es el siguiente:

Lo primero es, ¿qué es esto y para qué sirve? Pues Processing en si es un lenguaje/entorno pensado para aprender a programar, o eso dicen, que está enfocado al desarrollo de arte visual y prototipado rápido.

p5.js es una adaptación a JavaScript de este entorno. Digo adaptación porque no es 100% igual a Processing. p5.js permite crear bosquejos rápidamente en un entorno web usando el elemento Canvas de HTML5. Al igual que Processing, p5.js activa la imaginación del programador/a y lo sitúa en una posición diferente... experimentar creando.

Para mi p5.js y processing es un entorno fantástico para aprender a programar, dado que ofrece un feedback inmediato de lo que estás haciendo, e invita literalmente continuar experimentando. Pero eso es solo una opinión obviamente.

Nuestro bosquejo p5.js empieza simplemente cargando la librería en nuestra página:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

Con esto ya tenemos cargado el entorno. Después, se habrá que implementar varias funciones clave:


Estas son las funciones setup y la función draw, que son funciones estructurales:

• setup: es una función que se ejecutará una sola vez y que se utiliza para inicializar el entorno. Dentro de esa función usamos funciones como "createCanvas" para crear el canvas donde se dibujará nuestro bosquejo.
• draw: es una función que se ejecutará hasta el infinito una y otra vez, salvo que nosotros le indiquemos que no. Esto se hace con la función "noLoop()", que hará que solo se ejecute una vez más la función draw (si se invoca desde fuera del método draw), o que termine el método draw y no vuelva a ejecutarse más (si se invoca desde dentro del método draw).

El método draw lo usaremos por tanto para ir dibujando. El método draw se invocará un número de veces cada segundo (como si fueran los fotogramas de una película), y esto se puede controlar con el método frameRate.

En el ejemplo anterior he quitado el "noLoop()" para dejar que el código se ejecute infinitamente. Imaginemos ahora que queremos detener la animación al hacer clic, y volver a reanudarla nuevamente al hacer clic otra vez. Para esto tendríamos que implementar un método manejador, que se ejecutará cuando el evento "clic" se produzca:


El método sería "mouseClicked". Pero todo este código tiene varios problemas, ¿qué ocurre si queremos poner varios bosquejos en una página? ¿podemos evitar que las variables se creen en el contexto global? La respuesta es sí, simplemente encapsulando el código dentro de una función a la que se pasará como parámetro una variable que será el sketch que estamos manipulando:


Fíjate que todas las funciones de p5.js ahora se invocan siguiendo la siguiente forma: "bosquejo.metodo"; esto permite diferenciar un bosquejo de otro. Para empezar con esto es suficiente. Si quieres seguir investigando consulta la página de referencia de funciones de p5.js, y, simplemente, experimenta todo lo que puedas.