Beginner-Friendly Shader Programming in p5.js v2—talk
Hosted By
Labels
Abstract
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.
Hackathon
Also see the related p5.strands Hybrid Hackathon.