Creative Coding: Group 1 Case Studies

Davide Perucchini
Draw With Code — Case studies
4 min readOct 15, 2019

By Niccolò Abate, Alvise Aspesi, Elisa Carbone, Davide Perucchini

George and Jonathan

http://www.georgeandjonathan.com/#1

George and Jonathan is a website made to visualize their own electronic music EP George and Jonathan III, released in 2014.

The music is shown as notes on an invisible music sheet placed in the z-axis of the dimension in which we are placed in. You can interact with these notes by moving in the 3D space using your mouse or, in some songs, change between the default cameras. If you want you can change, pause and skip some parts of the songs.

The graphics are in tone of their music, so 90’s reminiscent. The colors are really flashy and the models look like old videogames.

The 3D models are shown and coded using the WebGL renderer with Three.js, a famous JavaScript framework for displaying 3D content.

http://www.georgeandjonathan.com/#1

YUME

http://unseen-music.com/yume/

The interactions of the site are made by Whitevinyl, who is a freelance creative designer and developer based in Brighton, UK. He mainly projects interactive music sites, procedural generation and data visualisation. This is his site: http://whitevinyldesign.com/#p1

In particular, with the YUME project he decided to do an interactive web experience to promote the new album “Yume” composed by Helios. This floating rocks are the music controller. With them you can decide what sound add or remove from the music in background. Every decision also change the background illustrations that are going to move rhythmically with the music. The site is also divided in different scenes/levels each one characterised by a different music and illustration.

The technology used behind this code is JavaScript, in particular JQuery, Canvas Render, Pixel Palette, Three.js, Tween.js.

http://unseen-music.com/yume/

Over The Hills

http://www.overthetinyhills.com

Over the Hills is a project made by the ultranoir agency in collaboration with the French artist McBess, which aims to present the new EP of Dead Pirates: “Over the Hills”.

The website takes its name from the group’s EP, and it invites the user to discover the music through an innovative experience that combines music, graphics and creative coding.

The website leads the user in an immersive world represented through McBess’s illustrations; during his journey the user is guided by some instructions that suggest which features he should try.

The user can listen to the music and interact with the website through a gramophone, which has some hidden features that let the user play with the hidden keyboard, fall in the equalizer vortex or change the artwork show.

Over the Hills is created using open-source libraries, such as Three.js, which permits access to the API using simplified Javascript code.

http://www.overthetinyhills.com

Patatap

https://www.patatap.com

Patatap is a sound project developed by Jono Brandel and Lullatone. The goal is to present visual music to a wide audience. Indeed pressing any key on your keyboard you are able to generate melodies charged with moving shapes. There is a wide range of possibilities between different color palettes and sounds.

Patatap invites creators of all ages to engage the mind and senses in a different type of creation process. This kind of generation process is linked to synesthesia because the stimulation of one sensory input leads to automatic experiences in another. Hearing smells or seeing sounds are examples of possible synesthesia.

The technology used behind this code is JavaScript, in particular JQuery, Tween.js and Two.js

https://www.patatap.com

--

--