Arm Clock

Seven-segment displays have long been used in digital clocks as they are a natural fit for LCD and LED technologies. There are even electro-mechanical displays for larger applications. However, for some reason I wondered if there was an alternative to flipping each segment in a binary fashion.

The ten digits are typically rendered in the following fashion:

If we want to produce these shapes using articulated arms (with each black segment being a "bone" and each grey dot being a "joint") we quickly see two constraints:

1. There must be at least seven bones.
2. The "root" of any arm must be located at one of the three right-hand pivot points.

If we further limit ourselves to the minimum number of bones (seven) it becomes apparent that we need at least two arms: try to manipulate a single seven-bone arm to make the "8" digit without breaking it.

I chose to use two arms: one rooted in the top-right corner with four bones (red), the other rooted at the middle-right pivot with three bones (blue):

By manipulating the angles between the bones, these two arms can fold themselves into any of the shapes making up the ten digits above:

If we wish to physically build this arrangement, there are two main problems to overcome:

1. Bone are sometimes coincident (the joints fold back on themselves 180 degrees)
2. The joint motors (or linkages) have to somehow fit in the arm bones

But these are merely robotics issues.

So we can theoretically create the shapes of digits to form a clock. But can we create some feasible transitions to animate it? If we assume a twenty-four hour clock, it turns out there are thirteen transitions we need to concern ourselves with:

1. "0" → "1"
2. "1" → "2"
3. "2" → "3"
4. "3" → "4"
5. "4" → "5"
6. "5" → "6"
7. "6" → "7"
8. "7" → "8"
9. "8" → "9"
10. "9" → "0"
11. "2" → "0" (e.g. "23:59:59" to "00:00:00")
12. "3" → "0" (e.g. "23:59:59" to "00:00:00")
13. "5" → "0" (e.g. "23:59:59" to "00:00:00")

By manually fettling the angles of the arm joints, I came up with a fairly pleasing series of transitions that don't flail the arms too much, clattering them into adjacent digits.

The resulting web page uses CSS transitions to animate an inline SVG. Both the CSS rules and SVG elements are created programmatically in a fairly concise JavaScript script.