p5.js Shaders

¿Qué haces ahora?

Casey: Soy un estudiante de NYU ITP que está interesado en gráficos computacionales y espacios interactivos, físicos y digitales.

Louise: Soy una estudiante de NYU ITP que está interesada en gráficos computacionales y espacios interactivos basados en tecnologías de sensores.

¿Cómo empezaste con p5.js?

Casey: Comencé a aprender p5.js en 2018 en mi primer semestre en ITP, aunque había estado incursionando en Processing desde 2012. Mi amigo Pedro me introdujo a Processing cuando estudiaba diseño gráfico, y me impresionó. La idea de crear mis propias herramientas para crear gráficos y arte interactivo despertó mi interés, pero una vez que lo intenté, me enganché. El primer proyecto que puedo recordar fue un ojo que te seguía por la pantalla, y se ponía triste cuando lo dejabas solo.

Louise: Inicialmente aprendí p5.js para hacer que un sitio web que ya estaba creando para que fuera más divertido. Soy una programadora de C#, así que este fue un buen segway a JavaScript para mí.

¿Cómo usaste p5.js en este proyecto?

Casey: Estuve posponiendo los sombreadores de aprendizaje durante mucho tiempo, y también tenía curiosidad por saber si podría usarlos en p5.js. Luego escuché acerca de una subvención para proyectos de código abierto, narración de historias y recursos de aprendizaje en ITP llamada xStory. Como no encontraba mucho en la documentación de p5.js + shader, decidí descubrir cómo se implementan en p5.js y crear un recurso para que otros aprendan. Cuando le conté a Louise sobre el proyecto, ella estaba inmediatamente entusiasmada por aprender y enseñar sombreadores en p5.js. Ella ha sido excelente al asegurarse de que el proyecto sea un recurso de aprendizaje y no solo una colección de ejemplos.

¿Cuál es tu función favorita de p5.js?

Casey: ¿Shiffman cuenta como una función? También me encanta tener la capacidad de compartir mis programas en la web para que las personas no tengan que instalar un software especial o venir a Nueva York para ver mi trabajo.

Louise: Mi función favorita es push() y pop() para la transformación del sistema de coordenadas para hacer imágenes generativas.

¿Enfrentó algún desafío al trabajar en este proyecto? Si es así, ¿cómo los superaste?

Casey: El comienzo del proyecto (descubrir cómo funcionan las cosas) fue que contactamos a personas increíbles, les hicimos preguntas y les pedimos permiso para usar sus ejemplos en nuestro proyecto. GitHub repo de Adam Ferriss realmente nos dio las bases para comprender cómo funcionan los shaders en p5.js y proporcionó un marco de ejemplos accesibles para que podamos crear proyectos. Para algunos problemas específicos relacionados con p5.js que teníamos, nos comunicamos con Kate Hollenbach y Stalgia Grigg (quienes trabajaron en la implementación de WebGL en p5.js), y fueron muy útiles.

Louise: La curva de aprendizaje fue bastante empinada para implementar shaders en p5. Afortunadamente, hubo algunos ejemplos muy bien documentados en GitHub por Adam Ferriss. Nuestro objetivo era hacerlo de manera que un principiante pueda entender cómo implementarlo, por lo que fue tanto un desafío técnico como un desafío en la enseñanza del código a extraños y principiantes. Aquí nos inspiramos en la forma en que está escrito el libro de openFrameworks. Creemos en un enfoque divertido de "oye, no es difícil y tú también puedes hacerlo".

¿Qué es algo cool que deberíamos explorar?

¡Visiten xStory GitHub para explorar los increíbles proyectos de subvenciones de nuestros compañeros!

¿En dónde se puede aprender más sobre ti?

Casey: cargocollective.com/kcconch, @kcconch (GitHub)

Louise: louiselessel.com, @louiselessel (GitHub)