Chrome Productions: Generative Motion Graphics

Following the launch of the new Chrome Productions branding & website project, the team at Fable&Co. looked to create further a series of striking brand assets, to be used for video backgrounds & additional motion assets to complement the existing static asset library. This took the form of a dynamic web application.

Read the full Chrome Productions case study here.

The approved design concept for Chrome Productions utilised a static monochrome liquid asset which has a metallic liquid quality. This asset would work well animated but would be impractical using traditional motion graphic software. That’s where the power of creative coding comes in, a powerful & effective approach to creating unique motion assets & interactive web pages by building custom tools to achieve specific results.

 

Looking at the existing Chrome asset we saw an opportunity to push it further by developing something more progressive. Starting with a series of experiments to turn the static asset into a dramatic moving liquid – continuously in motion, evolving over time in an endless generation of new forms.

After cropping the asset in order to fill the frame we wrote a program using P5.js which is a library for JavaScript allowing our team to manipulate the pixels of the image individually within the browser, without impacting performance.

As a reference point we looked at Roni Cantor’s programmed plotter drawings of waveforms using mathematical equations. Using this as inspiration for our very own program to see if it would be possible to take the assets from still to moving images by changing certain variables but using similar principles.

Roni Cantor. Programmed Plotter Drawings, 2020.

After several experiments we were able to create a program that takes a still asset as input & warps each frame of the image in such a manner that it produces a moving liquid effect in real-time without slowing down the browser – meaning it can be embedded on a webpage running continuously or easily exported as a video.

After applying this process, the result produced a fluid animation that adjusts to the screen size, which can be used in various ways. Producing video assets that can be used as backgrounds & patterns to complement the existing asset library.

Conclusion

In conclusion, we believe that bridging the gap between motion graphics & brand experiences is important in the future of branding, this allows us to bring in complementary elements which communicate the dynamic nature of a brand. Using a rigorous experimentation process and careful application of cutting-edge technology we can produce striking visual experiences to elevate brands in the digital realm.

Related Articles

FABLE & CHROME PRODUCTIONS: PROJECT SPOTLIGHT

BRANDED WEBSITE DESIGN

Full Portfolio