Realising the 2020 degree show for Ravensbourne University London

Realising the blobs concept for Ravensbourne 2020

Read the article on the 2020 Ravensbourne University London website:

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:

Unknown block type "video", please specify a serializer for it in the `serializers.types` prop

Holding blobs

Unknown block type "video", please specify a serializer for it in the `serializers.types` prop

We turned on these vector curves (in blue) to demonstrate how the balls joined up while working with the designers, this helped communicate the effect and allowed us to develop in tandem, examples in the images above.

Unknown block type "video", please specify a serializer for it in the `serializers.types` prop

On the website the blobs reveal an image through masking, they also reveal white text. Click on this image to see a video of the different effects in action.

View video of the blobs and their development at the links below:

Blobs with outlines turned on:

Monochrome blobs for the holding page:

Evolution of the blobs: