This is a fun personal project I created to explore the capabilities of WebGPU. It's an attempt to recreate the classic MacOS "Drift" screensaver, but with a modern twist and some interactive goodies!
I wanted to dive deep into GPU-based compute shaders and see how they could be used for generative art. The result is a field of hundreds of thousands of strands, all simulated and rendered in real-time on the GPU inside your web browser.
You can check out a live demo here!
Simplex noise
Webcam
- GPU-Powered: Uses WebGPU compute and render pipelines for high-performance simulation.
- Interactive Modes:
- Simplex Noise: The classic.
- Webcam Flow: Uses your webcam to influence the field with optical flow. Wave your hands and see the strands react!
- Mouse Interaction: "Paint" forces onto the canvas with your mouse.
- Text & Clock: Make the strands flow around custom text or a real-time clock.
- Highly Customizable: Almost every parameter is tweakable through the UI panel, from colors and counts to physics properties.
- TypeScript
- WebGPU for GPU communication
- WGSL for the shaders