p5.js Shaders

What are you up to?

Casey: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces, physical and digital.

Louise: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces based on sensor technologies.

How did you get started with p5.js?

Casey: I started learning p5.js in 2018 in my first semester at ITP, though I had been dabbling inProcessing since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone.

Louise: I initially learned p5.js to make a website I was creating more playful. I’m a C# programmer, so this was a good segway into JavaScript for me.

How did you use p5.js in this project?

Casey: I was putting off learning shaders for a long time, and I was also curious if I could use them in p5.js. Then I heard about a grant for open source, storytelling, and learning resource projects at ITP calledxStory. Since I wasn't finding much in the way of p5.js + shader documentation, I decided to figure out how they're implemented in p5.js and create a resource for others to learn. When I told Louise about the project, she was immediately excited about learning and teaching shaders in p5.js. She's been great about making sure the project is a learning resource and not just a collection of examples.

What's your favorite p5.js feature?

Casey: Does Shiffman count as a feature? I also love having the ability to share my programs on the web so that people don't have to install special software or come to NYC to see my work.

Louise: My favorite feature is push() and pop() for transformation of the coordinate system to make generative visuals.

Did you face any challenges working on this project? If so, how did you overcome them?

Casey: The beginning of the project (figuring out how things work) was us reaching out to amazing people, asking questions, and asking for permission to use their examples in our project.Adam Ferriss' GitHub repo really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to Kate Hollenbach and Stalgia Grigg (who worked on the WebGL implementation in p5.js), and they were super helpful.

Louise: The learning curve was pretty steep for getting shaders into p5. Luckily, there were some very well-documented examples on GitHub by Adam Ferriss. Our aim was to do so in a way that a complete beginner can understand how to implement it, so it was as much a technical challenge as it was a challenge in teaching code to strangers and beginners. Here we drew inspiration from the way theopenFrameworks book is written. A fun "hey, it’s not hard and you can do it too" approach is what we believe in.

What's a cool thing we should check out?

Check out the xStory GitHub to explore our peers' amazing grant projects!

Where can people learn more about you?

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

Louise: louiselessel.com, @louiselessel (GitHub)