Web Audio Visualization Projects

KAIST CTP431 Fall, 2015, Prof. Juhan Nam

FINAL PROJECT : DUSK AND DAWN

INTRODUCTION

My attempt in the final project is to bring together all the things I have learned in this semester in CTP431. What the class covered includes audio-visualization, pitch tracking, audio effects using web audio API, FM synthesis, and many more. Therefore, my goal in ‘DUSK and DAWN’ is to bring together audio-visualization, audio effects, and FM synthesis to create an interactive audio web page.

The concept idea comes from a picture “Il-wol-oh-bong-do(일월오봉도)”, meaning “The sun, moon, and five peaks.” It was used as a picture on a folding screen that used to stand behind the king’s throne in Josun Dynasty. It is a controversial picture, having the sun and the moon on a same landscape, which brings up mysterical character and awe.

‘DUSK and DAWN’ has two scenes, the DUSK and the DAWN, having the sun and the moon repsectively, and some mountain peaks. Each scene includes a pre-composed musical loop by myself using an FM synthesizer. The scenes also include unique geometric groups (yet undefined…) that act as an interactive controllers to various parameters, usually of multiple audio effects.

My inspiration mostly came from this amazing web-audio project by Keith Kenniff and Luke Twyman (thanks!), called YUME. My attempt was to create an extremely primitive version of this project. It was definitely worth trying.

TECHNOLOGY

The project uses

Three.js - for its graphics
Tone.js - for its sounds

ALL source codes besides the libraries (min.js files) are 100% written by myself.

HOW TO USE

When you enter the page, the music will automatically start playing. The default page is the DAWN page, and to move to DUSK page, press the right arrow(->) key. To return to DAWN page, press the left arrow(<-) key.

The floating objects in the sky are the controllers. Click and drag with your mouse pointer to hear the effects! They are mapped with their x- and y-coordinates to different parameters. Also, the parameters differ from scene to scene.

Those parameters include :

pad LP filter cutoff frequency
noise LP filter cutoff frequency
delay feedback amount
convolution(reverb) wet value
melody volume
melody FM modulation index
LFO freqency

IMPLEMENTATION DETAILS

SOUNDS

The sounds of each scenes are generated by 5 FM synthesizers from Tone.FMSynth Node, and a noise generator. The DAWN scene includes an extra drum synthesizer. Three FM synthesizers tuned for backup harmony are connected to a biquad filter together, which is then connected to a convolver for reverb effect. The convolver is connected to the meter object chained with volume node acting as gain, and then the meter is connected to Tone.Master, an equivalent of context.destination in web audio API. One FM synthesizer allocated for bass notes is connected directly to the volume meter and then to Tone.Master. The remaining one FM synthesizer allocated for melody is connected to feedback delay, convolver, a biquad filter dedicated only for the melody, and the to Tone.Master. Lastly, the noise generator has its own biquad filter and connected to Tone.Master. The details of parameters differ from scenes to give different feelings.

Once each audio nodes are connected properly, the music is generated in a loopwise fashion by Tone.Transport.setInterval() function. The bass and harmony section loops through seven chords. The melody repeats itself randomly through a set of notes, preventing banality. The DAWN scene is in a major scale, and the DUSK scene is in a minor scale with equivalent key.

GRAPHICS

All graphic elements are Three.js objects and are rendered by a WebGL renderer. The PerspectiveCamera picturing the scene is positioned at (-5, 0, 100), looking at (0, 0, 0). The Sun (or the moon in DUSK) acts as a audiovisualizer. The outer circle’s radius is mapped to the loudness calibrated by meter node. The controllers are groups of objects acting as if they were one object.

REFERENCES

http://tonejs.org/docs/
http://dinahmoelabs.com/plink
http://outputchannel.com/
http://threejs.org/
http://www.smartjava.org/content/all-109-examples-my-book-threejs-threejs-version-r63
(book) Electronic Music and Sound Design - A. Cipriani, M. Giri
Julius Orion Smith III homepage - https://ccrma.stanford.edu/~jos/
Introduction to Computer Music - Nick Collins

FIRST PROJECT - CHOCOLATE CHIP VISUALIZER

Chocolate Chip Visualizer is a cute audio visualizer of the shape of a chocolate chip muffin or cookie or cupcake or whatever it may look like. I agree that it does look creepy, like a breeding bacteria viewed through a microscope.

Each circle blobs correspond to a frequency, scaled into linear scale. From center to edge, the frequency increases. The blob’s radius represent the loudness of corresponding frequency.

The blobs are placed around the edge of 8 concentric circles. They are evenly spaced and then randomly offsetted by small amount along the circumference. The number of blobs placed on each circles are determined by fibonacci recursion, starting from third circle. The first and second are deliberately chosen for the sake of design.

Black blobs are the dark chocolate chips. There are even white chocolate chips every now and then!

Better looks on larger screen.