The Beautiful Mind Series

Generative web based animation for the launch of a new fragrance series.

tbms1.png

After working on Escentric and Renegades, I have developed a workflow of sorts for building generative animations on the web. This includes the scaffolding to include configuration values, local development processes and build jobs to for development and production.

I have also built some expertise in Pixi.js (which was used again here), general concepts in WebGL & HTML canvas and an understanding of how to build high performance graphics on the web.

The Brief

I started from a few reference images to, and a slide deck outlining how the animation would fit in the larger website. The aesthetic was one of multiple overlapping shapes that in turn create new and interesting patterns. These patterns would also be used on the product packaging material.

Our task was to translate these static images to a generative animation and harness the power of code to further enhance the experience.

Approach

We decided to use a grid structure to provide a visual backbone. The final animation is built up from the fundamental shapes in the reference images, which happened to be an octagon and a square.

 One of the first code experiments in the project. The screenshot shows the grid and the two fundamental shapes that are centered at each grid point.

One of the first code experiments in the project. The screenshot shows the grid and the two fundamental shapes that are centered at each grid point.

The primary goal in the initial stages of the project was find a way to draw thousands of animating shapes, rendered well and with an acceptable performance. I experimented with image frames but that caused issues with poor line rendering. That approach was also limiting in the constraints that were imposed on the scale of the grid — small images meant that the grid could not be scaled up without exacerbating the rendering issues.

Pre-rendering to a Render Texture

The solution was to create the shapes programmatically. For this project, this was accomplished with a RenderTexture. Before the animation kicks off, I recreate each shapes are a variety of scales (from 1px to 256px) on a large RenderTexture, which looks something like this.

tbms3.jpg

Each segment of this large render texture is then used as a frame for an animated sprite (either a square or octagon). This approach significantly improved rendering quality and performance.

Determinism and randomness

We spent a lot of time experimenting with various parameters to find the right balance and feel for the animation. The first few prototypes were too structured or too random — resulting in the shapes being much more visible and nothing that really called out the user's attention.

In the final version, the ripples across each row follow the same pattern and the ripples themselves are more consistent. The squares (or diamonds) add interest to the canvas and are largely random in their behaviour of moving across the page. This results in busy and calm areas that move across the screen, capturing user interest and attention.

tbms4.png