APTopMenuHtml

Randomly Swirling Liquid

The challenge - create a groovy looking liquid animation (in javascript) for a mad piece of Azrock-esque machinery for the website.

The idea - to look like a continuously, randomly swirling liquid, full of bubbles for extra flair (bubbles that can come from a hovering mouse too for extra interactability!)

The solution - use two large transparency-gradiented circular png images to move within a rectangle - one lighter than the background color, the other darker. If they are big enough in comparison to the boundary rectangle, they should never look like individual circles, just dark and light patches. Random but smooth movement is the tricky bit: My starting point was to have the 'element' (eventually to be the png graphic, but just a small solid div block for experiment purposes) oscillate horizontally between the walls of the bounding rectangle, and a separate vertical oscillation between the top and bottom. To create the javascript animation we start with a 'tick' function that is called several times each second, and inside this function the element is given fresh co-ordinates being the Cosine of an 'Angle' value which increases linearly with each tick. As you will all remember from your study of oscillations during physics class, the Cosine will give a smooth movement, fastest in the middle and slowest towards the edges. Combining two oscillations - one vertical one horizontal can give a circular movement, but if the rectangle is not a square, and/or the oscillating frequencies are slightly different, the combined movement should always be smooth and curved, but not circular and rarely repeating (therefore appearing random - see below for example).

That's not too bad, but seemed a bit constant and predictable to me. The liquid should really have a dynamic movement (ie - sometimes large slow curves, other times fast tight ones), but whilst still maintaining the natural smoothness of movement. Natural smoothness basically means only vary a parameter using a Cosine or Sine function, so I tried adding a separate Cosine oscillator which just oscillates the 'amplitude' of the original oscillators. Again - ensuring a slightly different frequency assures that the minimum amplitude is not always at the same point in the main oscillation, giving more seemingly random movement. In all, having four oscillators, one for horizontal position, one for the amplitude of the horizontal position, one for vertical position, and one for the amplitude of the vertical position, all with slightly differing frequencies, should produce movement that, in practice, will never repeat itself. And that's it - smooth but dynamic and random movement (see below).

All that's needed now is to create a single coloured background and two divs - one with the light 'blob' and one with the dark 'blob', each of which are controlled by one of the above movement functions (but each with slightly different frequencies to ensure rare repetition), and then add a carefully highlighted 'glass' cylinder graphic over the rectangle to look like a glass container for the liquid.

Oh - what about the bubbles? Well they're pretty simple - just a transparent bubble graphic with lots of instances in varying sizes moving forever upwards through the rectangle. Did you know that the smaller the bubble, the slower it travels upwards through liquid? I didn't, but it's true, so I added that rule to 'keep it real'! Check it out live here.