Kinetic Light Sculpture #1

Kinetic Light Sculpture #1 is an exploration of light, sound, and movement, a music video in code. It envisions a near future in which our surroundings are animate, reacting to stimuli and correspondingly arousing, with its magical elegance, new feelings of excitement and wonder in us, the participants.

Implementation Details

This is the first creative coding project I undertook using Three.js, a high-level Javascript library for WebGL. It was directly inspired by WHITEvoid's module system for Philip's LivingSculpture family of Lumiblade OLED lights. But at its core it represents a combination of my strongest interests: light installations, music visualization, minimalism, and cinematography.

This piece utilizes Three.js's experimental WebGLDeferredRenderer class to perform deferred rendering. This rendering method primarily allows one to mimic Philip's Lumiblade OLEDs with area lights, which are currently unavailable in the official version of Three.js. However, it also allows for the use of a large number of dynamic lights; for example, this scene utilizes fourteen area lights and one hemisphere light.

Moving the camera around the scene in a pleasing, cinematic fashion was probably the most difficult aspect of this project, but the excellent Tween.js library was incredibly useful for smoothly interpolating along the paths that I defined. To translate the camera around the scene I spent a lot of time experimenting with both Euler and quaternion rotations until finally settling with Euler, largely because it appears that spherical linear interpolation using quaternions is limited to great circles around a sphere, making it impossible to retain full control over the camera's path. The camera's orientation, on the other hand, is set with quaternions since these rotations are much smoother than Euler and the "great circle" issue is not a problem in this realm.

SoundManager2.js performs all audio playback (here streaming from SoundCloud) and the audio is analyzed using logic from Lodewijk Bogaards's Hobovis music visualizer.

Watch the demo, and view the source on Github. Note: This piece requires a good graphics card. My desktop Nvidia GeForce GTX 670 can maintain 60fps at a resolution of 2560x1440, but the Nvidia GeForce GT 650M inside my Fall 2012 Macbook Pro only achieves a maximum of about 30fps while in Retina resolution with the browser sized to one half of the screen (i.e., 720x450). Thus, if using a Retina display either resize your browser to half the screen size or adjust your resolution to its lowest setting.

  1. Kinetic Light Sculpture #1

  2. Blue Marble

  3. Chicago

  4. One Clock

  5. Lexon e8 Watchband