Creative Coding: Group 14 Case Studies

dradradra
Draw With Code — Case studies
5 min readOct 9, 2018

Scan Sequencer

I found this app by GitHub user jeonghopark on the website experiments.withgoogle.com.

The aim of the application is to generate an audio signal of a certain tone when a change of colour in certain pixels is detected.

When we launch the application, we are presented with a black background on which a box is placed, centred to the window on both axes. The left 20% of the box displays cropped images from the webcam, whereas the remainder of the box is filled with horizontal lines. Each second line is black, the ones in between are going to be our “keys”, so to speak, and their colour is the average colour of the leftmost pixels of the line. An oscillating line, a string if we wish, runs vertically through the box and is centred to the horizontal lines on the x-axis. Each time the leftmost pixels of the horizontal lines change value, an ellipse, with the same height as the horizontal lines, is generated at the left end of the line and starts moving horizontally to the right. When the generated ellipse crosses the vertical line, this starts oscillating and a tone is produced.

The application is based on p5.js and tone.js libraries, is hosted on GitHub and presents no User Interface as the user interacts with the application through the webcam.

What made me choose this web app over others, is its simplicity. The code is not too complex, but the interaction is what makes this application great in my opinion. The user will interact with the application, willing or not. It takes less than a second to understand what’s happening in front of you, and you can start using it straight away. Another element of interest is that the interaction, happening over the webcam, is not a physical interaction with keyboard and mouse, but is a kind of interaction that just implies moving your hand in front of the screen, which requires no previous knowledge about the application, which makes it the most natural way to interact with it.

jeonghopark.github.io/scanseqjs/

Roger Water

Roger Water is a web app that generates terrain procedurally while letting the user navigate it and interact with it.

The scenary is generated and animated in real time as the traveler explores it, using audio signal as the input value for the generating code. Players can travel that landscape from desktop, mobile or a VR viewer. Users can fly freely in this everchanging generative open world, accelerate, launch objects and creatures, follow them, or just stay and contemplate it.

experiments.withgoogle.com/roger-water

Move Mirror

Move Mirror lets you explore pictures in a fun new way. You turn on your webcam and move around, and the computer pulls up pictures of poses that match yours in real-time.

Move Mirror combines your real image with 80,000 pictures from all over the world. The focus is on the incredible possibility that data gives us and on how many photos already exist, enough to replicate all possible poses that you can imagine.

experiments.withgoogle.com/collection/ai/move-mirror/view

Space Type Generator

SPACE TYPE GENERATOR by the freelance designer Kiel D. Mutschelknaus is a series of tools that allows users to create forms out of type. Coded in Processing and using a variable type called Lofi Mono, each generator is based on a simple shape (cylinder, torus, plane, sphere, etc) that offers the user a range of parameters to tweak. These variables can be linked to sine/cos waves to create undulating animation loops.

The first generator is the v.cylinder version. Adjustable parameters in this iteration range from type size to radius length to lateral and longitudinal waves. The type is also live and can be edited in a live environment.

SPACE TYPE GENERATOR _v.cylinder has led to various additional iterations based on a cylinder

SPACE TYPE GENERATOR _v.cylinder.perlin
_v.cylinder.perlin applies a random noise field to the radius of the cylinder. The scale, speed, and amplitude of the noise can be finessed on the x and y axis to create a variety of organic forms.

SPACE TYPE GENERATOR _v.cylinder.vortex
Rather than have type stacked like rings, the vortex version allows type to spiral continuously around a central point. The string of type can be pushed in and pulled out as it wraps around the cylinder, creating a cone shape. Waves can be applied to the path of the string as well.

--

--