Creative Coding 2019/2020: Group 7 Case Studies

by Lucia Mazzanti, Gianluca Locatelli, Luca Bernardi, Emanuele Coppo

Case #1: VOID II: Pandora

by Luca Bernardi

VOID II: Pandora title screen.

VOID II: Pandora is an experimental website created by Hi-ReS!, a London based design and digital marketing company. The aim is to explore the concept of interacting with and perceiving art through the web.

The website was built using WebGL and Web audio technologies and by using popular libraries like: three.js, howler.js, GSAP and Coffee Collider.

The Digital Skin room interactive experience.

The user journeys through “rooms” in which he can interact with the background, each structured and animated according to its room theme.

But what I find peculiar is that through his journey the user hears a themed soundtrack for each room he is in and interacting with the background not only means having a visual feedback but also one for sound. Exploring the website and playing with it by hearing and seeing is for sure an engaging and immersive experience.

Case #2: Orano Innovations Website

by Gianluca Locatelli

Starting screen.

Here is an interesting case of creative coding applied to visual information: a digital experience created by Studio Immersive Garden for Orano, a French multinational company operating in the nuclear energy field. The aim of the website is to show the innovative solutions developed by Orano to guarantee the safety of their collaborators during nuclear interventions.

Four scenarios: Protect, Validate, Training, Investigate.

The user can learn about Orano’s products through an immersive experience that offers four operational scenarios and the corresponding products, with information about equipment, operations and locations. The user can also interact with the 3D models of the products and enjoy a small game at the end of each section to better understand the scenario. The 3D environment was created in WebGL with Three.js and the assets were built on Blender.

“Validate” Scenario.

Case #3: Lusion

by Lucia Mazzanti

Home screen.

Lusion is a small digital studio focused on real-time animations and this is its first official studio website. With it they wanted to blow people’s minds to differentiate themselves from the competition. So, in order to emotionally engage their audience with their studio’s identity, they build epic, real-time, interactive experiences.

To do that, they used things like 3D models, interactive cloth simulation using Houdini FX and they also experimented with video assets. It took them more than one year to complete the website but at the end we can say they went beyond all expectations.

Case #4: Twenty One Pilots — Banditø Experience

by Emanuele Coppo

Starting screen.

The Banditø Experience is an immersive website, created by the digital agency Resn, for the American musical duo Twenty One Pilots. It is connected to the concept and the fictional world behind the band’s latest album, Trench. It’s a musical experience, with five differents scenarios that follow the structure of the song “Bandito”.

First section: escaping from the city of “Dema”.

The user has control over the camera and can interact with the landscape, trying to collect five hidden symbols. Upon finding them, the user gathers “secret” documents that explain the meaning of each. The experience is different for everyone: there are multiple paths connected to each other by a series of “portals” and the user can choose whether to cross them or not.

In the fourth section, the user can shape the ground by clicking on it.

This breathtaking result was achieved with 3D models, lighting effects and depth-of-field simulation, thanks to powerful libraries such as WebGL, Three.js and GSAP Animation.

--

--