Creative Coding: Group 7 Case Studies
by Teresa Cremonesi, Elena Andrea Febres Media, Cristina Pita da Veiga Palomino, Filippo Ferrari
Case 01: Nike React Runner
Nike Reactor is an experimental website created by the digital agency ‘DPDK’ in Netherlands to sponsor the new Nike shoes called “Nike React”.
This experimental campaign enables some particular creations: from soft as pillows to light as flamingos, the user can select what his run on Nike React feels like. Choosing between different materials, objects, ways of running and colors the user can build a unique running figure that suits his style. When the customization is done, the runner can be saved and shared within a gallery. The personalization can be done also using mobile phones and discovering a new option: if the user want to try out different combo’s he can just shake to shuffle and select the best assets.
The figures are created and animated with 3D assets and WebGL. While CSS Custom Properties are used to achieve a theme based colored interface that allowed to switch the color of all buttons, logo and text very easy. All animations of HTML elements are driven by the GSAP (GreenSock Animation Platform).
This website is very interesting because is a perfect mix between 3D and flat animations.
Case 02: Generative Design and Creative Coding
The Prelude №1 in C Major is the most famous of Johann Sebastian Bach’s movements and it is one the most influential musical text in history. The Prelude is 35 phrases long and it is particular because it is a composition without melody. Its structure, indeed, is built with monophonic progression, almost near to mathematical in construction. Harmonically speaking, the piece continues with different harmonic variations and a lot of pitch changes. This is why its deceptive simplicity and inherent beauty lends itself to be appreciated and rediscovered in this series of interactive, audio-visual explorations.
Patrik Huebner uses the “data-set” that is the Prelude №1 in C Major — a sequence of 545 consecutive notes — as the basis to illuminate its patterns, structure and time. The monophonic, evenly spaced and mathematically structured notes are a beautiful start to dive right into visualizing the Prelude.
The project highlights two different characteristics: structure and timing. Structure is visually given by the use of a grid made with 4 difference styles. The height of the rectangles, circles or triangles in the sketch is defined by the pitch of the note: the bigger the shape, the lower the note. The notes are then arranged in a grid of 16 notes each as this reflects the basic progression of the Prelude. The sketch shows the matching relations a selected note to help explore patterns and repetitive structures. In the second case, the timing is highlighted by a set of chronologic representations explores: the passage of time can be mapped to visual systems while carving out the very essence and character of the music it represents. Huebner wants us to notice how recognizable shapes and patterns start to appear in the circular shapes and how they are coherently bound together by the individual beat-progression of 16 notes each (highlighted by the circles and bars marked in red). Is also noticeable how the tonality of the piece changes and how this is visually reflected by the larger circles/bars that are mapped to individual notes: the bigger the representation of the shape, the lower the note/octave.
Case 03: Phantom Islands — A Sonic Atlas
Over the years, marines, travelers and conquerers have discovered and painted different island along the world in maps. Sometimes this archipelagos were invented, others had change the name, but their existence has never been ultimately verified. This places has inspire legends, fantasies, and counterfactual histories.
Phantom Islands is an interactive map with the soundtrack of all these islands. On the map you can see the places that has been discovered in maritime travels and colonial expansion.
The interactive interprets and presents the imaginations of the islands in the form of an interactive map which charts the sounds. You can zoom it and change the island to discover the difference between them, in the Cruise Mode there is an “audio tour” of all of them.
In the cartography you can see the first appearance in a map, the last one and the story of it. The project has been develop for the exhibition Fourth Worlds: Imaginary Ethnography in Music and Sound. The project has been created with the Support of Jeu de Paume and DICRéAM, CNC.
The creator of the concept, sound and text is Andrew Pekler; the design and development is from Flavio Gortana and the research and text is done by Kiwi Menrath.
Case 04: Blacknegative
Blacknegative is a French video production company that works with several companies to create promotional videos. The company is composed of motion designers, photographers, web developers, and sound designers; all these people combined are able to create beautiful videos and tell fascinating stories. Between their clients, we can find Bose, Ralph Lauren, Citroen, and Adidas.
The website is a portfolio of the company, but it has an interesting way to show their works; the user does not navigate scrolling through the pages, but dragging left and right, and every page has something interactive. For example, the “interactive design” page shows squares of a bigger image with a mouseover feature and when the mouse is clicked the full image is shown. In another page then, there are different concentric circles that follow the mouse position and the smallest one is highlighted only when all the circles are aligned; then when the mouse is clicked the video starts playing. In the Citroen page, there is a sentence that changes and becomes the logo of Citroen when a block is dragged from left to right. Then a deconstructed car appears and some parts of it are moving with the mouse position. In the end, the menu is working also with the mouse position but it is not very user-friendly. The different sections are navigated moving left and right the mouse in a bar at the bottom of the page; the user expects to click on one section and access it but doing this the menu closes.
This is an interesting way to create a portfolio because the user experience is not common but it is easy to understand, the only part that is more difficult to understand is the menu.
