¿Qué es p5.js?

Taller de p5.js: ¿qué es p5.js?

p5.js es una biblioteca de JavaScript para la programación creativa, que busca hacer que programar sea accesible e inclusivo para artistas, diseñadores, educadores, principiantes y cualquier otra persona. Es gratuito y de código abierto bajo la ideología de que el software y las herramientas para aprenderlo deben ser accesibles para todos.

Usando la metáfora de sketch (boceto o bosquejo), p5.js tiene un conjunto completo de funcionalidades para dibujar. Sin embargo, no estás limitado solo a dibujar en tu lienzo. Podés tomar toda la página del navegador como tu sketch, incluyendo los objetos HTML5 para texto, entrada, video, cámara web y sonido.

p5.js sirve para escribir software que produce imágenes, animaciones e interacciones. La motivación es escribir una línea de código y que un círculo aparezca en la pantalla. Añadiendo unas pocas líneas de código, ahora el círculo sigue al mouse. Otra línea de código, y el círculo cambia de color cuando presionas el mouse. A esto se le llama realizar un sketch con código. Escribís una línea, luego añadís otra, luego otra, y así. El resultado es un programa creado parte por parte.

p5.js está inspirado y guiado por otro proyecto, que empezó hace alrededor de 15 años. En el año 2001, Casey Reas y Ben Fry empezaron a trabajar en una nueva plataforma para hacer más fácil la programación de gráficas interactivas; la nombraron Processing. Ellos estaban frustrados con lo difícil que era escribir este tipo de software con los lenguajes que normalmente usaban (C++ y Java) y fueron inspirados por lo simple que era escribir programas interesantes con los lenguajes de su niñez (Logo y BASIC). Su mayor influencia fue Design by Numbers (DBN), un lenguaje que ellos en ese tiempo estaban manteniendo y enseñando (y que fue creado por su tutor de investigación, John Maeda). Con Processing, Ben y Casey estaban buscando una mejor manera para probar sus ideas fácilmente y en código, en vez de solamente conversar sobre ellas o pasar demasiado tiempo programándolas en C++. Su otro objetivo fue construir un lenguaje para enseñar programación a estudiantes de diseño y de arte y ofrecerle a estudiantes más avanzados una manera más fácil de trabajar con gráficas. Esta combinación es una desviación positiva de la manera en que usualmente se enseña programación. Los nuevos usuarios comienzan concentrándose en gráficos e interacción en vez de estructuras de datos y resultados en forma de texto en la consola. A través de los años, Processing se ha transformado en una gran comunidad. Es usado en salas de clases a lo largo del mundo, en planes de estudios de artes, humanidades y ciencias de la computación y de forma profesional. p5.js nace con el objetivo original de Processing, hacer que programar sea accesible para artistas, diseñadores, educadores y principiantes, y luego lo reinterpreta para la web actual usando JavaScript y HTML. El desarrollo de p5.js ha sido como reunir mundos distintos. Para facilitar la transición a la web de los usuarios de la comunidad existente de Processing, se siguieron la sintaxis y las convenciones de Processing tanto como fue posible. Sin embargo, p5.js está construido en JavaScript, mientras que Processing está construido en un lenguaje llamado Java. Estos dos lenguajes tienen distintos patrones y funciones, así que en ocasiones hay un alejamiento de la sintaxis ya familiar de Processing. También fue importante que p5.js pudiera ser integrado sin problemas a las existentes características, herramientas y estructuras de la web, para así atraer a usuarios familiarizados con la web, pero sin experiencia en programación creativa. Sintetizar todos estos factores fue un desafío, pero el objetivo de unir estas estructuras proporcionó un camino claro a seguir en el desarrollo de p5.js. Una primera versión beta fue lanzada en agosto del 2014. Desde ese entonces, ha sido usado e integrado a programas de estudios en todo el mundo.

Algunos Ejemplos

https://www.openprocessing.org/sketch/748916

https://www.openprocessing.org/sketch/486307

https://www.openprocessing.org/sketch/392202

https://www.openprocessing.org/sketch/760858

https://www.openprocessing.org/sketch/148870

https://www.openprocessing.org/sketch/897940

https://www.openprocessing.org/sketch/908804

https://www.openprocessing.org/sketch/566877

http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_2_3_02

http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_2_6_03

https://editor.p5js.org/generative-design/sketches/P_3_1_3_04

http://www.generative-gestaltung.de/2/sketches/?01_P/P_4_1_2_01

https://editor.p5js.org/generative-design/sketches/P_4_3_3_01

http://www.generative-gestaltung.de/2/sketches/?02_M/M_1_5_02