Week 02

Comprehension

There's a P5.strands version of the Game of Life simulation by @davepagurek on the P5 releases github page.

My self-assigned task was to comment the code as an exercise to understand how p5.strands can be used in the new WebGPU mode for general purpose GPU ("GPGPU") programming.

Reproduction

This sketch is a reproduction of the CC Week 1 homework to draw concentric circles, but with p5.Strand a filter shader instead of plain p5.js. I was able to render a single circle by myself, but then referenced a shader-learn.com GLSL resource to realize concentric rings.

Decomposition

The image above is a still from a talk by Kit Kuksenok where they demonstrate a Game of Life p5.strands sketch that also incorporates a circle element that allows the user to interact with the Game of Life cells using a mouse.

The purpose of this task is to practice problem decomposition.

• Goals
  • Render Game of Life using p5.Strands compute shaders
  • Render a circle of a specified radius around the current mouse coordinates, where the circle corresponds to "living" cells within the Game
• Steps
  • Start from a copy of the Game of Life sketch described in the Comprehension section above.
  • Inside the simulate function
    • Map mouse coordinates to simulation world coordinates
    • Calculate distance from current index in world coordinate to mapped mouse position
    • If distance within a range (stroke weight) of a radius, set nextOutput to 1 (living).

Practice

In this sketch, I implemented the steps from the Decomposition section above.