I first learned about Processing in high school, back when I was first learning to use Java and wanted to create visualizations of gravitational simulations. Processing struck me as a great abstraction to graphics programming; I didn't want to worry about matrices and buffers to the GPU (not that that knowledge isn't useful), but I wanted to work at a higher abstraction level, with particles and velocities and user interactivity.
Years later, I rediscovered Processing through P5JS, the JavaScript web-native adaptation of the Processing library. No longer was this accessible graphical programming interface bound to the Java runtime (which has portability, scaling, and iteration problems). Instead, in the web browser itself, I could edit the code and instantly see the result alongside; the iteration speed led to a rapid exploratory process of messing with particle systems, noise maps, and other mathematical concepts I found interesting.
Spawns a number of Point Attractors that attract particles towards them, based on the simulation parameters.
Each pixel of the simulation represents one particle.
The color of the particle is based on which attractor the particle is near as the simulation progresses.
Hosted using AWS Cloudfront and S3 and built with Next.js, React, Typescript and WebGLS (WebGPU Shading Language)
Click here for a full page version: WebGPU Chaos
Github Project: zappy-dev/webgpu-chaos: WebGPU Chaos Attractor Simulation
NOTE: There is a P5JS donation popup that appears in front of all sketches. Close the popup to interact with the sketch.
Click to spawn Particles. Particles move to the highest local point on a cycling Noise Map.
Drag to spawn Circles.
Circles grow while dragging nearby.
Circle color based on position.
Click to spawn Particles.
Particles trace a trail behind them.
Particles move to the closest highest point within a pentagonal search area.
Click to spawn Particles. Particle direction is influenced by an evolving noise field.
Particle color is based movement direction.
Click to spawn particles. Particles travel in noise vector direction
Draws a flailing tentacle monster around your pointer