2026-04-22 –, Zollhof
For over a decade, p5.js has helped learners to make algorithmic art on the web. p5.js is community-driven, prioritizes access and inclusion, and makes coding beginner-friendly by requiring as little prior knowledge as possible to get hands-on, while supporting continued learning.
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:
function noiseTexture() {
pixelInputs.begin();
pixelInputs.color.rgb *= noise(pixelInputs.texCoord * 5);
pixelInputs.end();
}
material = buildMaterialShader(noiseTexture);
shader(material);
sphere(50);
Writing shaders is possible without reference to vertex or fragment shaders, uniforms, attributes, GLSL data types, or GLSL itself. These concepts are intentionally introduced incrementally. Uniforms, for example, can be introduced when an effect needs additional information, but they are not required to get started.
We rely on community feedback to test assumptions and focus development efforts. This presentation introduces both the API design so far, the process to get there, and next steps for this beginner-friendly shader programming project.
Also see the related p5.strands Hybrid Hackathon.
Dave Pagurek is a Toronto graphics programmer working on video editing software at Butter and on the WebGL and WebGPU features of p5.js.
Luke Plowden is a GPU programmer, filmmaker and contributor to the WebGL and WebGPU modes in p5.js. He is based in London.
Perminder Singh is an Indian programmer with experience in GPU programming. He is an active contributor to OpenChemistry and a maintainer of p5.js, focusing especially on its WebGL stack and graphics features.
Kenneth Lim is an interaction designer and creative coder working with text and language in all its forms. He is based in London and is currently a senior lecturer at UAL Creative Computing Institute.
Kit Kuksenok is a Berlin-based artist, writer, and coder. They work at Processing Foundation as Engineering Manager and p5.js Project Lead.