Creative Coding: Group 6 Case Studies

Giulia Proserpio
Draw With Code — Case studies
4 min readOct 7, 2019

By Agnese Bartolucci, Giulia Proserpio, Lorenzo Sala, Barbara Vanoli

SQUARE

https://square.geex-arts.com

Square is a project developed in 2019 by Geex Arts, a Moscow based creative and web studio. The project is aimed to be a Soundcloud for designers, with simple rules that gives designers, and in particularly web designers, a chance to show themselves on popular places and get feedback.

An animated intro shows the functions of the website, and after it opens on a main page that follows the concept of the “square”. In fact users can move around with their cursor in this open “place” to find out the designers’ projects. At the same time there is a mini-game aimed to find some famous cartoon characters to entertain and explore every side of the square. Animations are widely used in different ways at every click and transition.

This can be considered a good example of creative coding in order to make more appealing and entertaining a website with a simple, but strong and clear, concept.

https://square.geex-arts.com

36Days of Type

https://36days.reflektor.digital

“36 days of type” is a Reflektor Digital’s project released in spring 2019; the creative agency asked all the members of its development team to create different representation of numbers and letters by using different coding techniques.

It’s possible to navigate into the website and have a look of the different numbers and letters, created mostly with the use of JavaScript and p5.js library.

This can be considered a perfect example of the use of creative coding for creative typography.

It’s also possible to notice various examples of letters created with codes seen during the “Creative Coding” course until now: letter A, letter D (similar to sine and cosine function), letter F (referred to the noise function code) letter O, letter S (similar to the code ‘momentum wheel’ by Kyle Phillips) and numbers such as 0, 4, 6, 7 and 8.

https://36days.reflektor.digital

ViiSUALiiZER

https://boniver.withspotify.com

ViiSUALiiZER it’s website which presents Bon Iver’s new album, “i,i”, in an original and unique way. Bon Iver is an american indie folk music group, and the website, realised in collaboration with Spotify, showed how the world was streaming the album through the music platform between 8th August and 27th September. The analytics were live during the project time, with real time infographics.

The particular feature of the website is that instead of being made of pixels, all the graphics are made of “i”; moving the mouse around you can interact with them, switching black and white.

The website shows first the number of streams of the songs for every day, but also shows words and illustrations related to the lyrics, everything drawn once again with “i”. It’s even possible to listen to the album’s songs during the visit.

https://boniver.withspotify.com

CURSOMIZER

https://cursomizer.com/mode

Cursomizer is a minimal website that lets the users create their cursor, choosing the shape, colour, size and effect.

When they finish to customize it, they can also test the cursor by adding the screenshot of a webpage to better visualize the different interactions of the cursor with it.

They can also save the link with all the information about their customized cursor. It is an interactive and intuitive website that can help designers find some inspiration for their next projects.

https://cursomizer.com/mode

--

--