I created a new visualisation for my homepage rotation.
Here’s a demo:
It’s just a basic flow field simulation with particles tracing their paths along the space. I used the p5.js framework. It reacts to mouse movements!
I did a few optimisations to make it smoother, but in the end I had to lower the framerate and tried to make the low frame rate look intentional. Optimisation was important especially for mobile devices.
Some of the optimisations include:
- Using sprites / textures instead of the vector / shape drawing APIs. This was the biggest speedup. This meant I had to predraw the particle (a small dot) on a transparent texture, and use that texture at runtime instead.
- Sharing the same sprites across particles. This was also big one. I think this is called ‘instancing’.
- Having more particles per particle. The actual sprite is a big transparent square that contains many dots. This ‘dot spray’ sprite is stamped for each actual simulated particle. This means we can reduce the amount of simulated particles, or CPU workload, without sacrificing apparent particle density. To hide the effect, the stamped square can be resized dynamically based on the speed variance.
- Using multiple sprites per state. For example, a sprite for each level of opacity. I’m not really sure about this but p5 or something seemed to slow down when having dynamic alpha per particle as opposed to pre-rendered alphas. Maybe something to do with premultiplied alpha?
- Dynamically adjust the amount of simulated particles based on runtime performance. As the simulated particles decrease, the amount of stamped dots per particle increase to compensate. There is a target apparent dot density regardless of performance.
I think moving the whole particle simulation to the GPU would be the real move, but I didn’t want to bother with shaders and WebGL device compatibility for the moment. Maybe later as a learning project. Or maybe I’ll just port this to PixiJS.
The flow field is generated by Perlin noise, and particles are accelerated according to the field, with the usual position, velocity, and friction dampening basic physics simulation.
This is now part of my home page intro section’s selection of visualizations.