Three Js
Leave a comment

Unique Flow – Synaesthetic motion / FIELD for the Toyota C-HR

final2

Created by FIELD, Unique Flow is an interactive experience celebrating the release of the much anticipated Toyota C-HR crossover. Realized as a visual abstraction of the car and interpretation of the concept of flow, the project highlights the model’s design and intention while exploring its style and movement.

FIELD were approached by WeAreSocial earlier this year with a brief to design and develop an interactive online artwork that would work across various platforms, including desktop and mobile. At the same time, the artwork would also need to be shown at the upcoming Geneva Motor Show, to mark the Toyota C-HR’s release. Beyond outputting a range of image sizes (from very small to very large), the artwork would also be required to yield outputs in different formats including posters and Lenticular prints. While this has not been the most technically challenging project for FIELD, it was design-wise, as creating a consistent experience across various media requires considerable savvy.

↑ Early sketches including colour options

From the start, FIELD were interested in creating combinatory minimal graphic compositions as a language for the artwork, borrowing much from De Stijl. Likewise, they worked towards cultivating a James Turrell-like digital space within which a ‘light runner’ would perform in fields of colour and sound. They also reference Patatap’s minimalism and interaction as a model for simple interactivity. Like Josh Nimoy’s Ball-Droppings, which you can play infinitely as it does not ‘end’, they tried to create an experience that you could engage for few seconds of a couple of minutes – the more a user plays, the more tricks they learn.

Riding a high from their recently completed installation Spectra, FIELDs first proposal to the client was a success. A combination of rendered images, created in Cinema4D and Photoshop, featured the Toyota C-HR’s form reconstructed using only base curves and a car designed to look like it’s always moving, flowing through an urban environment. A user would navigates the curves to eventually reveal the visual composition of the car – reconstituted in a new configuration – all depending on how they played. Also influenced by the work of Yugo Nakamura, they employed the Japanese idea of animism, where everything would be alive to some degree.

↑ Rendered images that capture both the car and the concept by FIELD.

The first proposal was a little complex in its appearance and behaviour, combining tunnels and multiple paths and FIELD eventually adopted a more graphic language, one that did not try to mimic the car but capture its formal essence. Inspired by its form and cruising style, the idea was to create a single space where sound and path were connected. Each space the user navigates would have different sounds which were designed to correspond to particular paths.

↑ Development process, from first path sketches to behaviour.

Using the 3D model of the car, FIELD extracted a total of 12 curves from the shape of the car, in addition to 2 they created themselves to provide a good spatial driving field, bringing the total to 14 paths the user could navigate. These curves were simplified in Cinema4D and each one was named after a feature of the car. A generative system was designed that combines environment, paths and colours; the user navigates one path until a key is pressed and they are then taken onto another, and the environment is reassembled and the sounds change corresponding to the new colour space. Without realising it, the user ‘builds’ the car shape and when they stop interacting, the camera zooms out and the shape they have been navigating is brought together.

↑ Splines extracted from the car model and simplified.

The environment includes a number of planes, those that are close to the paths and some further away. Within the centre of this universe, there are three levels of backgrounds, ranging from small to large. Over time as the user presses the key, the environment morphs from its original position to a new one.

↑ Left: Sketch showing one path blending into another. Right: The environment’s shifting planes.

Finally, the third element was the sound. Simon Pyke was commissioned, and charged with‘ shaping’ the sound of FIELD’s 14 splines. The moment they integrated Pyke’s contribution into the work, the sketches and visuals made complete sense – the sound shapes the experience.

sounddesign_field2

↑ L to R: Colour space, the path, environment, combined, shading and path cross-section to for the design of the sound.

Cinema4D was used as a way to define the visual style and extract the splines. With the software, many options are available to explore the visual style. Once the design was developed, and optimised, it was carried over to Three.Js. Since FIELD were extremely familiar with how WebGL works – and it’s limitations – this was kept in mind when working in Cinema4D, to define both the rendering styles and the animation. It was a back and forth process between contractors Mark Lundin and Damien Mortini, who developed Three.Js elements. FIELD designed the motion and visuals in Cinema4D, Damien worked on the paths and Mark crafted the environment. The final stage of development was used to refine the experience, adding small details and embellishments.

The final website is accessible in both desktop browser and mobile modes, and allows you to navigate the experience at your own pace by using the letters on the keyboard (desktop) and tapping on the screen for mobile. As the keys are pressed or screen tapped, the user flips between the pre-defined paths and the environments reassembles. Each path has a number of stylised appearances including duplication, thickness and shading and there are a maximum of eight lines per path. While the users navigate the environment, the screenshots are recorded in the background and combined into a video file that can be shared on social networks. Subtlety, if left idle, the experience switches to greyscale and waits for further input. Finally, everything is brought together with minimal branding by WeAreSocial, keeping the focus on the artwork while capturing the smooth cruising experience of the Toyota C-HR in motion.

↑ Development sketches: orientation and movement.

FIELD’s strategy for the project was to first focus on one image that would both capture the car and the concept. Whereas you’d normally expect the image for billboard to come last, FIELD chose to work in reverse order, first designing a hypothetical final image and then the process that generated it. Once the concept and visual language were established, it allowed FIELD to move away from it, by abstracting the experience.

For the upcoming Geneva Motor Show installation, the team is extending the experience by allowing users to interact with it via a Macbook Pro. Likewise, since they will be using a high-end machine for the installation, they are pushing some of the visual elements further to enrich the visuals and details. Considering the long history of representing cars using wind tunnel scenarios to capture flow and movement, FIELD have taken on a somewhat different approach to extract the essence of the Toyota C-HR and how it was designed (the flow of pencil on paper, and the strokes of calligraphy). There are numerous subtle references to what we already know about the experience of driving car, or how it has been visualised in the past; It’s a familiar space for many, but what makes this project special is the elegance of its execution, something we have grown to expect whenever FIELD is involved.

Try it yourself at uniqueflow.me

Project Page | FIELD | Toyota

Credits:
Creative Direction by Marcus Wendt / FIELD
Design by Paul Brenner, Dan Hoopert  / FIELD
Artwork Development by Mark Lundin, Damien Mortini
Site Development by We Are Social
Sound Design by Simon Pyke
Production by Valtteri Laihanen
Executive Production by Vera-Maria Glahn / FIELD
Commissioned by Toyota Motor Europe