Try this experience here.

flow is an interactive experience where you can control a fluid simulation with your mouse or webcam. As you move around, the fluid particles get pushed around by your movement, revealing your own image as they pass by.

I’ve personally been a fan of fluid simulations, so I first wanted to explore Google’s LiquidFun library first. One observation that I noticed from the liquidfun demos, however, was that the particles seemed to always be controlled via means other than themselves: they were shot out of a spawner, or pushed around by rigid bodies. Because I wanted to have a more direct interaction with the particles themselves, I first chose to move them around with the mouse cursor.

The colors were chosen in an attempt to make the particles feel organic and natural: Instead of making the particles look like water, I wanted them to feel like fireflies in a night sky, or a flock of creatures moving around.

Although the mouse interaction felt fluid, I wanted to have an even closer connection between the player interaction and the experience. I then investigated optical flow libraries – algorithms that took color video as input and analyzed movement to produce a velocity map. I found a public library called oflow by GitHub user anvaka, and decided to integrate a webcam stream into the experience.

With the webcam stream, I feel the experience takes on a much different feel than the single color particles moved around with the mouse. When particles are pushed around, they now occlude and reveal different areas of the screen, creating a constantly evolving mirror.

Resources used:

Google liquidfun

oflow by anvaka

sketch.js by soulwire