Working alongside CreativeLab’s in house design team MTJ explored different methods for producing the blobs, working together to experiment with how they needed to move and behave until they found an approach that gave the blobs the right feel.

How the blobs work

To create the effect involves a number of steps: Firstly a random number of circles are generated, they each get a random size and orbit around a position on the screen at random speeds and radii from the orbit point. All of these parameters are within carefully crafted values. Some balls are moons and others planets, planets move around the centre and the moons around the planets. All of the balls are then influenced by the mouse position (or tap on a mobile) and this introduces a third dimension so that when moving the mouse the balls move in parallax, or a simulated third dimension, some appearing to be nearer than others.

To join the balls together a metaball technique was employed to join up the balls into a greater smoothed blob. The principle is that depending on how close the balls get they either join up with smooth curves, or appear as distinct balls, a bit like two drops of water joining up.

MTJ see this kind of process as a great learning opportunity, both for themselves and for you. They couldn’t have produced this kind of work without the support and generosity of various open-source communities, so felt that it’s really important to share the code they’ve created and have shared some simplified versions so that students and other coders can play too. These can be seen, used and shared at the links below:

https://amcc.github.io/paperjs-metablobs/

https://amcc.github.io/paperjs-metablobs-text/