³ÉÈËÂÛ̳

Good news! The has returned to the ³ÉÈËÂÛ̳ Homepage.

When we launched the we received feedback from a number of you who missed the clock, so we've turned it into a module allowing you to position the clock where you want it on the page (or shrink it or remove it altogether). It continues as before to show your computer's local time and date.

As part of moving the clock to its own module, it now makes use of upcoming HTML standards. Flash is no longer a necessity as the module uses to draw and animate the clock face. This means users of newer browsers (and iPhones) will see the clock ticking on the page even if they don't have Flash. Of course, if you're using an older browser the Flash version will continue to load as usual.

If you're interested in how our Canvas code works, here's a snippet showing how to draw the clock face:

drawDisplay: function(pos){
    this.context.clearRect(0,0,49,49); // clear canvas
    this.context.save(); // save state before translation
    this.context.translate(24.5, 24.5); // move 0,0 to center
    this.context.strokeStyle = "#fff";
    for (var i = 0; i<12 ; i++){ // draw numerals
        var lineWidth = 1.2+(i*0.1), rotation = 30*(i+1),
            startX1 = -0.5 - lineWidth/2,
            startX2 = 0.5 + lineWidth/2,
            startY = -26, endY = -18;
        this.drawLine(lineWidth, rotation, startX1, startY, startX1, endY);
        this.drawLine(lineWidth, rotation, startX2, startY, startX2, endY);
    }
    this.drawCircle(2, 0, 0, 5, 0, Math.PI*2, true); // draw centre circle
    this.drawLine(3, pos.hrsPos, 0, -6, 0, -17); // draw hour hand
    this.drawLine(2, pos.minPos, 0, -6, 0, -24); //draw minute hand
    this.drawLine(1, pos.secPos, 0, -6, 0, -26); //draw second hand
    this.drawLine(1, pos.secPos, 0, 5, 0, 10);	
    this.context.restore(); // go back to the state before translation
    this.drawnPos = pos;
}

The display is then redrawn every second to move the hands to the current time using Glow Animations.

The clock has come a long way since it first appeared in our and continues to live on in new technologies.