I had the idea to build this “Fluid Dreams” concept when I came across a beautiful jellyfish-like visualisation created using only mathematics and Javascript and no graphical assets like .svg or .png!

This experiment takes that further by reimagining webcam interaction through pure mathematical visualisation. Unlike traditional computer games that rely on pre-rendered graphics, every visual element here—from the shimmering bubbles to their explosive animations—is generated and rendered in real-time using parametric equations and sine waves. The bubbles' organic movement and “popping” effects are achieved only through mathematical functions and code, creating smooth, natural-looking shapes.

With Claude as my tutor, I created this little game using computer vision and a 24x24 precision grid. It translates physical movement into digital interaction, allowing players to pop these procedurally generated bubbles with nothing but their gestures. Built with p5.js, this experiment demonstrates how complex, beautiful graphics can emerge from simple mathematical principles.

Check out the demo below, or get the whole experience here. Remember to give it access to your webcam and then simply move your arms to pop the bubbles on the screen. It’s fun, and a great way to get in some cardio!