P5js – El Processing para la web

Introducción

P5js se presenta como «una biblioteca de JavaScript creada con el objeto original de Processing, hacer la programación accesible a artistas, diseñadores, educadores y principiantes, reinterpretándola a la web actual.»

Imagen 1. La página de p5js

Podemos pues entender p5js como el “Processing para la web”, y así vamos a explicarlo en este artículo de presentación que, por lo tanto, entiende que el lector está mínimamente familiarizado con Processing (si no es así, se recomienda leer este artículo antes de continuar).

Un poquito de historia digital: al principio estaba el applet.

Allá por el pleistoceno digital, concretamente en el año 2001 cuando empezó a rodar Processing, java para la web era una cosa tan normal como Flash o el plugin de Quick Time para ver vídeo (pausa nostálgica para que el lector de una cierta edad rememore viejos tiempos, mientras que el lector sin dicha edad busca en Google).

Processing apareció, sobre todo, como una manera de aprender a programar, pero también de compartir el código online. El “export sketch” generaba una página html con un pequeño cuadro correspondiente a la ventana de Processing, y un link al código fuente. Todo a punto para subir al servidor y compartirlo con el mundo (más nostalgia). En la trastienda, nuestro estimado IDE generaba un applet de java, que “solo” necesitaba que el usuario tuviera el plugin de java instalado en su navegador. Algo relativamente común entonces, pero absolutamente impensable hoy.

Imagen 2. Una de las primeras versiones de Processing. Fuente: https://twitter.com/REAS/status/995027421324689408

El problema fue que, bien pronto a partir de aquel punto, los applets en la web empezaron a perder peso, hasta ser primero marginales y luego virtualmente inexistentes. Flash aguantaba mucho mejor, pero también apuntaba a seguir a largo plazo el mismo camino, especialmente a partir de que Apple lo dejó de lado para sus sistemas iOS. ¿Y quién ocupaba su espacio? Pues HTML5 y JavaScript. Y aquí Processing se benefició, a diferencia de Flash, de ser un proyecto abierto, con lo que ha sido capaz de generar una gran comunidad a su alrededor no solo de usuarios sino también de desarrolladores (¡Viva el software libre!), con lo que enseguida aparecieron alternativas al applet de java.

…y se hizo el Processing JavaScript

Primero, apareció Processing.js, en 2008, como un modo de Processing. En primer lugar, debía instalarse, y luego, durante un tiempo, venía por defecto en Processing, y sólo hacía falta activarlo cambiando de Processing ‘Java’ a ‘JavaScript’. El resultado era que, en la misma interfaz y con el mismo código de Processing (con mínimas modificaciones a veces) se podía utilizar en el modo JavaScript del programa, y así publicar en la web. Era más complicado que “export sketch”, pero más eficiente, pues cualquier navegador decente ya podía en este momento interpretar HTML5, mientras que era muy poco realista esperar que alguien tuviera instalado java para web.

Imagen 3. Processing JavScript.

Y así, integrado a Processing, se mantuvo hasta que problemas de incompatibilidad lo hicieran desaparecer en la flamante versión 3 de Processing, que apareció en 2015. Pero para entonces ya existía un proyecto paralelo, pero tan cercano que se presentaba como “sister Project” en la página web de Processing.

Y en el tercer día: p5js

Y así llegamos a p5js. Una reinterpretación de Processing en JavaScript, independiente del programa madre. Mantiene la idea básica (setup + draw; simplicidad de entrada, etc.) pero se desmarca en la interfaz. La gran diferencia de p5js vs Processing.js es que ya no trabajamos en nuestro cómodo entorno con su play y stop, sino que debemos buscarnos la vida con un editor de código. Por suerte para el lector, aquí en Mosaic mismo hemos hablado ya de algunos: Los mejores Editores de Código.

Como curiosidad, p5 es una antigua abreviación de Processing (ver imagen 1) que, en su día, a los creadores de Processing no les gustaba demasiado. Sin ir más lejos, recuerdo un workshop en 2005 donde pedían no utilizar la abreviación, que uno siempre pensó que viene de que en francés ‘5’ es ‘cinq’, aunque en realidad la pronunciación que se ajusta a la abreviación es el ‘cinc’ del catalán (un día hablaremos de cómo se lee en catalán el nombre del estudio de animación digital más importante del mundo…)

Volviendo al tema, p5js es, pues, una librería que en principio se debe bajar para que uno se espabile con un editor de código. Esto es trivial para un experto, pero puede frenar a muchos usuarios noveles.

Por esto es tan buena noticia que p5js haya recuperado un proyecto que fue apareciendo y desapareciendo en varias versiones de Processing para la web en el pasado, el editor online aparecido hace muy pocos meses. Dicho editor permite que uno pueda ponerse a programar entrando sin más a la web, y así experimentar y ver incluso a tiempo real el resultado de nuestros esfuerzos de programación.

Imagen 4. El editor online de p5js

Esta herramienta nos permite pues, de una manera increíblemente sencilla, trabajar con código sin necesidad de instalar nada. Es un editor perfecto para hacer pruebas rápidas, o para docencia en talleres donde no queremos pedir a los asistentes ni que se bajen un programa pequeño y poco intrusivo como Processing.

Además, aunque Processing es perfecto para aprender a programar y nos puede ofrecer alguna duda en cuanto a su aplicación real, p5js es claramente un proyecto orientado a la web. Y no, la web no ha muerto como declararon en Wired en 2010 (¡no se lo creían ni ellos!). La web está viva como nunca. La web es internet.

A nivel de código, p5js es muy parecido a Processing, pero no tanto como lo era Processing.js. Como se ve en la imagen anterior (imagen 2), el archirepetido void setup / void draw de Processing cambia a function draw / function setup, pero el salto de uno a otro es relativamente sencillo si se tienen ganas de aprender. En programación hay varios lenguajes, igual que en el mundo se hablan diferentes lenguas. Unas se parecen mucho (por ejemplo las lenguas románicas: castellano, catalán, francés, italiano, portugués), y otras no tanto. Processing y p5js son casi dialectos o, como mucho, se parecen como dos lenguas románicas. Una vez somos expertos en uno, saltar al otro no solo es muy factible sino que puede resultar una experiencia de aprendizaje muy enriquecedora.

Recursos

Aunque p5js no es un monstruo como Processing en cuanto a recursos online, sí que tiene una cantidad más que decente de ellos. Algunos en castellano, como en su misma página web, pero mayoritariamente se localizan en inglés. Aquí os listamos algunos:

• Cómo empezar
  El tutorial inicial de la web de p5js está traducido al castellano. Hay otras traducciones.
• Transición desde Processing
  En un formato menos elaborado, pero este manual cuenta con muy buen contenido para los que ya han trabajado con Processing y quieren dar el paso a p5js.
• Ejemplos
  Traducción al castellano; es una magnífica colección para perderse y aprender hackeando.
• Hello p5js (en inglés)
  Es un tutorial excelente, no solo para arrancar sino para entender lo que se puede hacer con p5js.
• … y los vídeos de Shiffman. Con la “y” porque ya no hace falta buscar nada más. Daniel Shiffman tiene decenas (¿o centenares ya?) de vídeos en Vimeo y Youtube explicando, muy bien, desde lo más básico a lo más complejo de Processing, p5js y tantas otras cosas. Muy recomendable.

Por ejemplo, el canal Learning p5js.

Conclusión

Se podría decir que Processing y p5js son dos caras de una misma moneda. ¿Cuál queremos utilizar? Dependerá del momento, el contexto, y el objetivo final.

De entrada, ambos son proyectos muy válidos para ofrecer una entrada lo más suave posible al mundo del código. Por ejemplo, si es para un uso docente o en talleres, cualquiera sirve. Mientras uno ofrece un entorno más controlable, el otro ofrece el atractivo de que proporciona resultados inmediatos en la web.

Para nuestros proyectos, lo mismo, Processing es una opción perfecta si queremos hacer una aplicación para una instalación interactiva, para desarrollar una app, para una visualización en tiempo real, si queremos hacer análisis de imagen, etc. En cambio, si queremos desarrollar algo para la web, p5js es una opción mejor. Para finalizar el artículo lanzamos la siguiente recomendación: debemos tener ambos en nuestra caja de herramientas digital.

Cita recomendada: SOLER-ADILLON, Joan. P5js – El Processing para la web. Mosaic [en línea], noviembre 2018, no. 165. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n165.1841.