Generative Art and Experimental Music
Using HTML5 Canvas, JavaScript, and the Web Audio API
One of my hobbies includes developing procedural methods for creating visual art and music. This sounds like a mouthful, but the basic concept is simple. Imagine a set of wind chimes. The sounds that are produced by wind chimes are determined by non-human forces. Although a human may help decide which chimes are used, nature takes care of the rest. As a result, the sounds produced by the chimes are somewhat unpredictable: They are quasi-random, they never repeat exactly, but they do exhibit a degree of coherence that allows the overall pattern to be differentiated from other sound sources. (Plus, they are fun to listen to.) In short, generative music is essentially music created from systems designed by people, but not played by people.
The demos below showcase some of my explorations into this area. Each demo takes a simple theme and attempts to create a generative/procedural system that controls both the soundscape you hear and the visual patterns you see. Many of the demos are also interactive in the sense that you can use a mouse to control certain elements of the scene.
Generative art. This is a static screen shot taken from the Aural Automata 4 demo (link below).
The visuals use the HTML5 Canvas element; the canvas is manipulated using JavaScript. The sounds are controlled using JavaScript + Web Audio API--an interface that essentially allows sound synthesis to take place in modern web browers (e.g., Safari, Firefox, Chrome). You don't need a special plugin to view/hear these demos.
The soundscapes are designed to be ambient in the sense popularized by Brian Eno: Music that can exist in the background or which can be listened to in a more concerted manner.
Aural Automata 1
Minimalist piece using treated piano notes. This has a Brian Eno/Harold Budd vibe to it.
Aural Automata 2
This soundscape uses 6 acoustic guitar samples and processes those in real time (Web Audio API) to create sleepy, spacious drones that continuously shift and morph across time.
Aural Automata 3 | Manually Creating Soundwaves
This experiment allows the user to draw, by hand, sound waves on the canvas. Those drawings are then converted to a wave form and rendered in audio.
Aural Automata 4 | Crystal
This soundscape uses a 3-second sample of my friend's voice and manipulates those samples to create an eerie atmosphere.
Aural Automata 5 | Generative Alien Landscape
This generative process is designed to simulate an alien landscape. The sound sources are all organic, but are manipulated to give them an other-worldly feel.
Aural Automata 6 | Disintegration
This generative process is designed to simulate the gradual decay of visual scenes and sounds using HTML canvas and Web Audio API.
Aural Automata 7 | Clouds
This is an attempt to simulate clouds and their movement using HTML canvas and JavaScript. The sounds are processed drones using the Web Audio API.
Aural Automata 9 | Zurich
Evolving and shifting images of a display in the Zurich international airport, combined with ambient soundscapes using the Web Audio API.
Aural Automata 10 | Bokeh
Image manipulation and phasing combined with ambient samples from echospace [detroit].
Aural Automata 11 | Starseed
An Anomalous Voice Phenomenon (AVP) (i.e., voices of "ghosts") processed in experimental, haunting ways in Web Audio API.
Aural Automata 12 | Call of the Void
A visual/audio experiment in which an image is manipulated dynamically (blurring, fazing) as a function of the volume of various sound ambient sources located on the canvas.