Concept Realisation

CreativeLab worked closely with web developers, MTJ, to discover a way to bring the blob like shapes that were intrinsic to the original student concept to life online. They had to be interactive, playful, and reveal the image of student work behind behind in an intriguing and enticing manner.

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/


Holding blobs
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.
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: https://youtu.be/hDJ-qZfpweg

Monochrome blobs for the holding page: https://youtu.be/2GW8v6shmyA

Evolution of the blobs: https://youtu.be/3aeoSvh9hQ8