Lee Martin
Netmaker
Coheed and Cambria

The Keywork Clock

2012-08-01

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 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!

Helpful?
Buy Me A Coffee