(This is a post about our KickStarter project The Light by Moore’sCloud. We have only a few days to go! please back us on KickStarter )
When I was asked to create a candle animation for the Light, at first I was not sure what I was being asked to do. The “Light” is one of those ideas that is so radically different and new that it takes some time to really wrap your head around it. As always with any new visual project you must start with research and observation.
To replicate a candle, you must observe candles. And thus I began with a search for candle animations. By chance, a lovely animated gif arrived in my email attached to an invite. It was a ‘cinemagraph’. I could just zoom in and watch it loop over and over, or step through it frame by frame, but I have a different way of observing the way things move. I sliced out a fragment of the image and projected the frames sideways, as in a filmstrip. I thus arrived at the following image.
Image may be NSFW.
Clik here to view.
I then further abserved that there were different aspects of the flame with different properties. The base, the body, the tip, and the tilt. And so with some further analysis and filtering I produced this image which highlights the paths of these different properties.
Image may be NSFW.
Clik here to view.
The first candle animation was made by hand by immitating these observed patterns. I used an image editing program and traced out some lines. I drew a simple flame and modified it, frame for frame to express the patterns I had generated. This was the result:
Image may be NSFW.
Clik here to view.
I then shrunk it down to what I understood at the top were the dimensions of the light. At the time I understood I was animating on a 4×16 matrix of LEDS:
Image may be NSFW.
Clik here to view.
And then, the big moment, trying it out on hardware! On the early hardware prototype it looked like this:
You gotta love these little surprises. I did not realise that the LEDs were not arranged as a flat screen! I had to regroup and rethink what would look best on that configuration. But before I made much progress along that dimension, the new design for the light was revealed to be very close to what we had today; a cubical torus. I knew I was no longer dealing with a flat display. It’s a volume, and I knew I wanted to do something more special than just flick LEDs on or off. I wanted some form of antialiasing. So I decided to create a system to draw 3D points in a volume and antialias them. Thus, WuVoxels- based on the WuPixel algorithm I was already familiar with for 2D antialiasing.
The WuVoxel system decomposes the light into small cubes. The light has an unusual topology of LEDs that doesn’t fit neatly on a regular grid. Without a regular grid, trying to compute how much our WuVoxel overlaps on a physical voxel would be much more complex. I wracked my brain on this problem for a while, drawing diagram after diagram. I even built a 3D practical model. Finally it occured to me that if I rotate the whole thing 45 degrees, suddenly the topology does line up into a regular grid!
Image may be NSFW.
Clik here to view.
With this, I was able to very easily write a function to plot an antialiased point in this 3D voxel grid. But to write a candle animation using this system, I knew what I wanted. The previous animation I drew four times larger than the final projected image would be, hoping that the shrinking of the animation would lend a smoothness to it. Perfectionist that I am, I didn’t think it was smooth enough, so I resolved to write it as a procedural animation. I already had an understanding of how a candle could be parameterised, and the shape of the input functions very closely resembled the old classic algorithm, Perlin noise. But , how do you represent the image of a flame in such an unusually shaped display?
This occurred to me when I was in Sydney, the very night before I was required to write this program. I was at a restaurant, and noticed that the table candles they have hide the flame inside a tube of frosted glass. It seemed to me, that with this light, and its frosted interior, I could create the illusion that there was an actual flame inside its frosted interior, if I could replicate the appearance of the exterior. I took a video of this candle as reference.
and the next day I went to work. I set my WuVoxels to plot a glow around the outside of the light. The brightness of this glow would be governed by a perlin noise function that I tweaked to immitate the scale and pace of my table candle.
The interior of the light has 16 lights- I placed a single wuvoxel roughly in the center of this configuration, and parameterised it to imitate the flicker and tilt of a candle flame- a subtle effect which, if I didn’t know better, would fool even me into thinking there must be some kind of real flame governing these lights. Video does not do this justice, you have to see it in person to believe it.