# The Keywork Clock

It’s been __less than two weeks__ since I resurrected myself as a freelancer, and I’ve been busy building faders, re-envisioning old apps, taking __some__ calls, and writing a library of proposals. One of the first projects I signed on to help with was **the** hyping and announcing of Coheed and Cambria’s new __double__ album, The Afterman.

The timeline on this was **aggressive** so I tried to keep things simple by focusing on accessibility. And what better way to do that than utilizing a __Kid of Heaven’s Fence__ [1] most exciting moment __and__ biggest fear:

The Countdown

According to the band’s manager, these fans have had a few run-ins with countdowns over the years. Hell, some of their countdowns lead to **more** countdowns… After sketching out a few **boring** __standard__ “00:00:00” countdown clocks, I decided if I was going to take this on, I needed to give this __diabolical__ marketing technique a fresh new look.

## The Key…. work

I found inspiration in Coheed and Cambria’s “Keywork” [2] band logo, and jotted down the random thought: “Keywork == Clock.” The logo itself is made up of several circles __or stars__ [3] which could be repurposed to represent some unit of time. I chose the following clock layout:

- Bottom Right == Seconds
- Top == Minutes
- Bottom Left == Hours
- Center == Days

**Sizing and Positioning The Stars**

I’m a sucker for circular interfaces so instead of using “hands” to identify the time, I decided to utilize a simple __stroked__ circle whose prominent color represented that current __remaining__ moment in time. But first, I needed to figure out the relative sizing of these circles and their x / y position.

I __lazily__ started in Illustrator to map the shapes out, but realized this was going to be much easier to grasp as pure math. So I dove right into some __basic__ Trig and drew the main shapes out onto an HTML5 `canvas`

element. I settled on the small circles being ½ the size of the large ones and used circular positioning to figure out the radians to position them properly.

For example, here’s how I found the position of the small bottom circle:

```
// 0 degrees because it falls at the bottom
DEGREES = 0
// Convert degrees into radians
RADIANS = Math.PI / 180 * DEGREES
// Given the CENTER and DISTANCE from the center, calculate the x, y
x = CENTER + Math.sin(RADIANS) + DISTANCE
y = CENTER + Math.cos(RADIANS) + DISTANCE
```

**Tracing the Stars**

Given a percentage of a particular unit of time, I needed to trace an `arc`

around the corresponding circle. So, I made note of all the basic time percentages I would be using:

- SECONDS / 60
- MINUTES / 60
- HOURS / 24
- DAYS / 4 (which is when the countdown started)

For example, 30 out of 60 seconds would be represented by a 50% arc over the circle.

I then realized I **didn’t** need to __layer the arc on top__ of an existing circle, but rather **finish** drawing the arc in the base stroke color. In other words, all I needed was a **single** circle where the time portion of the arc was a certain color and the remainder was another.

With the percentage of time, x / y coordindates, and star size, I finally had all the variables I needed to properly trace out the timed circles.

```
// Percentage of time, 0.5
SECONDS = 30 / 60
// Converted into radians
RADIANS = Math.PI / 180 * 360 * SECONDS
// Draw the timed arc
keywork.strokeStyle = TIMED_COLOR
keywork.beginPath()
keywork.arc(X, Y, SIZE, 0, RADIANS, false)
keywork.stroke()
// Draw the remaining arc
keywork.strokeStyle = BASE_COLOR
keywork.beginPath()
keywork.arc(X, Y, SIZE, RADIANS, 2 * Math.PI, false)
keywork.stroke()
```

**The Countdown**

With all the __math__ in place, I did a quick search for a jQuery powered countdown plugin and found the **perfect** solution appropriately called jquery.countdown by Edson Hilios. This plugin allowed me to set up a dead simple method for redrawing the canvas on each tick:

```
// Countdown to the specified date, ticks as "e" for every second
$("#keywork").countdown(new Date(2012, 6, 31, 9, 00, 00), function(e) {
// switch through each type of time unit and store accordingly
switch (e.type) {
case "seconds":
// Store e.value as the currently remaining seconds
break;
}
// Clear the canvas
keywork.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
// Redraw the keywork
}
```

**Tick, Tick, Tick…**

The __ticking__ and looped audio were effortlessly added by using Scott Schill’s excellent SoundManager2 Javascript library.

```
// Create the sound object
soundManager.createSound({
id: "tick",
url: "tick.mp3",
autoLoad: true,
volume: 75
});
// And then play it when needed
soundManager.play("tick")
```

I almost __didn’t__ add the ticking because it’s slightly off from the BPM of the loop track which well… just fucks with your mind after a while, but alas, I’m just pure **evil**.

## You know what? Fork It.

I uploaded a basic example of the Keywork’s code base to my Github. As you can see it’s built in basic JavaScript, CSS, and HTML but I do use a few compiled languages during development.

Push it, pull it, and most definitely: **fork it**.

## Thanks

**Special thanks** to the Coheed and Cambria and Reddit communities for making our launch as big as possible and following along with my programming journey. Hope to see you again soon!

Heaven’s Fence [1] is the name of the universe where The Amory Wars takes place. It consists of seventy-eight planets, seven stars known as the Stars Of Sirius [3], and a beam of light connecting them all known as the Keywork. [2]