Week 01 – Introduction
P5 Strands
Stretch Goals
Many students in Creative Coding have never programmed before. Most are not familiar with P5.js. Very few have the comprehensive Computer Science education.
In this blog post I'll detail my plan to make the most out of this class for the next 3-4 weeks: what I plan to learn, how, and why.
Creative limits of tech
I ran into CPU bottlenecks in my very first creative coding works.
My first piece "digital/refraction" calculates the color of each pixel in a video feed depending on the size of a text buffer. The size of the buffer increases with each word in the performance, so over time the buffer grows closer to the size of the canvas and calculations come to a halt. "Calculating the color of each pixel" is the type of work that shaders do, so I knew as early as March 2025 that the type of work I was interested in making may require me to learn how to program shaders.
"Here, still" was inspired by the chaos of impatience in the face of silence. Particle interactions are the crux of the work, and the piece suffered greatly from having to limit the number of particles to 10,000. So my second piece, made for the August 2025 HTTPoetics workshop by SFPC, let me know that I would benefit from learning GPGPU shader techniques.
I tried to teach myself fragment shader programming during my Winter 1 batch at Recurse Center by following The Book of Shaders. I learned the basics of graphics pipelines, GLSL, and the type of "shader art" people like to make for websites like ShaderToy. At RC, I got to demo a buddy protoype for ShaderTwist which is what I called my JS library designed to make it easy for me to make fragment shader sketches that I could control through MIDI.
The foray into shaders was fascinating, but I can't say it has been of any use in my art practice. Understanding this stuff is hard. Mastering it is much, much harder. So of course, I want to try my hand at learning it again, and most importantly, incorporating it into my practice.
Learning goals and style
When Ellen, my professor, reached out for me to detail my goals for the class, I listed a few considerations:
- I don't want my expertise and confidence in class to be distracting or deflating for my peers.
- I want to observe and learn from Ellen's teaching style and stay abreast of what the class is learning.
- I need more experience sharing and talking about code.
- I enjoy being inspired by classmates' work.
- I want to learn something relevant to what we're learning in class.
I also made some notes about my learning style:
- I love exposure to "artsy" techniques used by creative technologists. One example is the ample use of layered opacity for mixing color.
- I learn a lot by struggling through imitation. (Patricio Gonzalez's takes advantage of this pedagogical approach with his Pixel Spirit Deck)
Enter p5.strands
Is there an easier way to take advantage of shaders without the pain, trials, and tribulations of GLSL? The folks at Processing Foundation are trying to make it so with the upcoming 2.0 version of their popular creative coding library p5.js.
Kit Kuksenok from the Processing Foundation puts it perfectly:
How can a beginner-friendly shader programming API address the challenges that learners face? The parallel computation model of GPUs differs from the sequential model of CPUs, and is shaped by historical development of graphics APIs under fast-changing hardware constraints. Programming shaders relies on knowledge about graphics pipelines, target platforms, and sometimes historical quirks.
We set out to design a shader creative coding experience for scaffolded learning. We present p5.strands, which allows getting started with shaders using the familiar syntactic and conceptual vocabulary of p5.js sketches. It can be used in p5.js v2 sketches, and works by transpiling JavaScript to GLSL.
A p5.strands shader does not explicitly specify a full rendering pipeline. Instead, it describes modifications to a default shader. A shader author is not required to understand how every shape is positioned on the screen, or how all lighting is calculated. The code below shows a shader adding a per-pixel noise texture
P5.strands covers everything I would want to get out of the Creative Coding course. It addresses my interest in filter and fragment shaders as well as the general computing GPU programming paradigm that I would need to learn to incorporate particle simulation, and I would still be learning within the P5 ecosystem.
Learning Plan
Week 1
On the left there's Self Portrait which was pre-work before class began. On the right Self Portrait v2, which builds on the first iteration, making it responsive to the window size (it doesn't look good when embedded, do click through the previous link). It's also my first exploration of shaders using P5.strands.
My goal was simple: what's the smallest step I can take to use p5.strands while still engaging with the self-portrait homework? I wrote a rainbowFilter shader that colors the light areas of a sketch, where the red and green values correspond to a pixel's x and y coordinates, respectively, and the blue value oscillates over time.
For aesthetic purposes I also used P5's built in BLUR filter as well as a displaceColors filter from a tutorial in the P5 reference pages.
Finally, I recorded a video where I cover most of what I wrote in this blog post: