Tag Archives: computer graphics

Binary Clock, Part 1



Binary clocks are a family of ubiquitous geek toys which display each digit of the time using binary notation. If you do a search for "binary clock" in Google, you will see a nearly infinite number of implementations. The reason I like the whole genre is that a binary clock is an electronic system that claims to exist for the purpose of conveying information when in fact it's all about finding an obtuse excuse to make something blink. The delight of it is that it's completely impractical to read but the geeks don't care: the coolness of the blinky lights joyfully trumps any need to be practical.

Speaking of geeks, I've been wanting to look into this whole Angular.js framework thingy all those overly bearded tech-hipsters are talking about (when they are not crafting their own cheese or riding fixed wheeled bikes), and so I'm using this blog post as an excuse to program simple apps that illustrate the process I am talking about using Angular.

Displaying numbers in binary

You can see below how to calculate the value a binary number. It's pretty straight forward: a particular place can only be 0 or 1 and once you increment above that, you loop back to 0, add one onto the digit to the left, and if THAT one is already 1, it also loops back to 0 and the behavior ripples leftward.

binary number {{get8()}} {{get4()}} {{get2()}} {{get1()}}
x x x x
place 8 4 2 1
= = = =
total {{8*get8()}} + {{4*get4()}} + {{2*get2()}} + {{1*get1()}} = {{count}}

Notice that the highest number we can represent a maximum of 16 values with 4 b(inary dig)its. 8 bits can represent 256, 10 bits, 1024, and so on...

Displaying the time in binary

The following table shows how to display the time in binary format, with each digit represented by a four bit binary representation arranged in a column. The current time is {{getTheTime() | date:'mediumTime'}}, which you can see displayed in 24 hour format in the bottom row.

{{d}}

From math to art

Not comfortable with numbers? Replace the 1's with teale and the 0's with burn sienna, on a background of deep emerald. Bam! Suddenly, you've become an artist, conjuring a playful visual dance of colors on an abstract rhythmic canvas. You're a fucking genius!

{{d}}

(Note that since the highest number for the hours is 23, the first column never has to go above 2 and we really only need the bottom two places to represent that number. Similarly, the value of minutes and seconds only goes to 59 so the third and fifth columns only to represent the value 5, which can be done with only 3 bits.)

What's next?

Stay tuned... Part 2 describes how to build your very own binary clock, using LED's, chips, electricity, obsession, and patience.

Exposure/gain calculator for all your inverse squared falloff needs

I get asked this approximately once every 6 months and I always forget which means I have to spend a bunch of time looking it up again. This kind of conversion usually comes up going back and forth between tweaking lights in the render and color correcting the individual outputs in the comp. I’ll jot the math down here so I know where to look for it next time. Oh, and since it’s about relentless play and hacking in general, maybe I’ll build some quick little javascript/HTML calculators, cuz I just like to party like that!

Converting from stops to a multiplier

This is useful when you want to use f-stops with a color correct node that multiplies your color values.
newGain = oldGain * pow(2,exposureChange)

Old Gain:
Exposure Change:
New Gain: 666

Converting from a multiplier to stops

This is useful when you have color corrects in the comp and want to bake them back into your render’s lights.
newExposure = oldExposure + log(gainChange,2)

Old Exposure:
Gain Change:
New Exposure: 666

Adjusting for distance

While we’re at it, you often need to move a light backwards or forwards while keeping the same light intensity on a subject. Assuming that “oldDistance” is your light’s current distance to subject and “newDistance” is the new distance to subject, you can use the following formula to figure out the new exposure required for the light to have the same intensity on your subject from the new position.

newExposure = oldExposure + log(pow(newDistance,2)/pow(oldDistance,2),2)

Old Exposure:
Old Distance:
New Distance:
New Exposure 666

Adjusting for light area

In some renderers the light intensity is not normalized to the area of the light itself, which means that your light becomes brighter as you scale it up. If you want the amount of light to remain similar as you scale it up or down, this is your formula:

areaRatio = (oldWidth * oldHeight)/(newWidth * newHeight)
newExposure = oldExposure + log(areaRatio, 2)

Old Exposure:
Old Width:
Old Height:
New Width:
New Height:
New Exposure 666


Submerged, a Lightscape Installation

I have a real soft spot for projects that blend virtual environments with real architectural spaces. In fact, before I even found a place in the VFX and animation industry, I had already had the opportunity to get involved in various stage design and themed entertainment projects that required this kind of creative inquiry. I’ve also always been excited by the use of image re-projections techniques in my VFX and animation work because I find they can sometimes offer an elegant and effective solution to problems which would otherwise be difficult or expensive to tackle through more traditional approaches.

A few months ago, when a painter friend approached me for help designing a lightscape installation for the opening of her exhibit, I jumped at the opportunity.  Corinne Chaix‘s exhibit is called “Submerged” and is at the PYO gallery downtown. Her work features underwater scenes, and she wanted to explore the idea of complementing their mood and reinforcing their theme by turning the gallery space itself into an underwater environment.

We visited the gallery and brainstormed on the most aesthetically interesting ways to set up the projection. I also surveyed the space which later allowed me to build an accurate digital version of the environment.

The next step was to create a digital version of the projector in this virtual environment which allowed us to visualize the way imagery projected out into the space.

Meanwhile Corinne compiled a set of stock footage clips that resonated with her and passed them on to me. I created a composite movie that blended various elements from these clips and formatted the resulting image to fit the contours of the gallery space.
The first clip conveyed a dark foreboding underwater feeling while the second captured the delicate crystal beauty of the water’s surface.

I combined the two, moving the water surface to the top of the frame in an echo of many of her paintings.
The last step was to take this composite, project it onto the walls and remap it to line up with the contours and orientation of the walls.
I used the open source VisualSFM package to extract the geometry from the photos, Maya for the 3D and Nuke for compositing.