Teaching GPU programming in p5.js: now with compute shaders

Computer graphics education has evolved significantly, but it can still be challenging for students to learn GPU programming. The Graphics Processing Unit (GPU) is now a versatile platform for parallel programming, but there is a steep learning curve due to the vast amount of background knowledge required. Traditional methods involve teaching fundamental concepts such as rendering triangles in Vulkan, which requires thousands of lines of code.

To address this issue, professors are adopting scaffolded learning techniques, which provide a template that hides unnecessary details for beginners. Students can then incrementally remove the scaffolding as they progress.

The p5.js library, which is popular for both artists and computer science educators, aims to make GPU programming more accessible. By offering scaffolding, p5.js allows students with prior p5.js experience to transition into GPU programming with relative ease. The library's shader system, called p5.strands, is designed to provide a gradual learning curve.

For instance, creating custom filters in p5.strands is relatively straightforward, involving functions, arrays, and object properties. The library also supports animations by utilizing p5.js time functions.

For those familiar with traditional shader programming, p5.strands introduces a new concept of uniforms, which can be set using slider values. Shaders can also be applied to individual vertices, enabling more complex visualizations. While p5.strands doesn't replace traditional engineering-oriented systems, it aims to be a productive and intuitive tool for learning GPU programming, even for beginners.