Kais's blog: January 2012

In this tutorial I will show you how to create a simple clock and animate it.

This tutorial is split in three steps:

Step 1: Create the clock's background.
Step 2: Initialize the current clock time.
Step 3: Animate the clock.

Hint: This tutorial assumes that you have a certain knowledge of HTML5 and JavaScript.

We begin this tutorial by creating the background of this clock.

The following html start code helps you initialize the canvas tag and its context that you require for your animation.

<!DOCTYPE html>

<head>

<title>Simple Clock Animation</title>

var canvas; // the clock canvas

var ctx; // canvas’s context

// clock settings

var centerX = 0;

var centerY = 0;

var radius = 150;

function init() {

canvas = document.getElementById("clock");

ctx = canvas.getContext("2d");

centerX = canvas.width / 2;

centerY = canvas.height / 2;

drawClock();

}

</script>

</head>

Your browser does not support HTML5</canvas>

</body>

</html>

Step 1: will consist of drawing the clock. This is given by the function drawClock().

function drawClock() {

drawClockBackground();

}

The function drawClockBackground() inside the drawClock() function will draw the background of the clock. It will create small lines around the center (centerX, centerY) of the clock which is also the center of the canvas.

We start creating the lines from the right to the left, and using the function drawArcAtPosition() located below. Also, we will highlight the main lines.

At final, a small circle is added at the center of the clock (see function drawLittleCircle()).

Hint: You can also use a predefined image (if you like) instead of drawing the background of the clock yourself.

function drawClockBackground() {

var correction = 1/300;

var shift_unit = 1/170;

var shift_factor = 1/30;

var angle_initial_position = 2;

var angle_current_position_begin = 0;

var angle_current_position_end = 0;

var repeat = 60;

var lineWidth = 10;

for (var i=0; i < repeat; i+=1) {

angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;

angle_current_position_end = angle_current_position_begin + shift_unit;

if (i % 5 == 0) lineWidth = 20;

else lineWidth = 10;

drawArcAtPosition(centerX, centerY, radius,
angle_current_position_begin*Math.PI,
angle_current_position_end*Math.PI, false, lineWidth);

}

drawLittleCircle(centerX, centerY);

}

function drawArcAtPosition(centerX, centerY, radius,
start_angle, end_angle, counterclockwise, lineWidth) {

ctx.beginPath();

ctx.arc(centerX, centerY, radius, start_angle, end_angle, counterclockwise);

ctx.lineWidth = lineWidth;

ctx.strokeStyle = "black";

ctx.stroke();

ctx.closePath();

}

function drawLittleCircle(centerX, centerY) {

drawArcAtPosition(centerX, centerY, 4, 0*Math.PI, 2*Math.PI, false, 4);

}

Afterward, we create the Hands for seconds, minutes, and hours. The below figure show the hand for the seconds.

// draw Hand for seconds

function drawSecondsHand() {

endX = centerX + radius*Math.sin(seconds*Math.PI / 30);

endY = centerY - radius*Math.cos(seconds*Math.PI / 30);

drawHand(centerX, centerY, endX, endY);

}

function drawHand(beginX, beginY, endX, endY) {

ctx.beginPath();

ctx.moveTo(beginX, beginY);

ctx.lineTo(endX, endY);

ctx.stroke();

ctx.closePath();

}

The same principle is applied for minutes and hours. The hands will be a little bit smaller than that of the seconds-Hand. The minutes-Hand will move depending on the seconds-Hand, and the hours-Hand will move depending on the minutes-Hand. The moving of the Hands will be constant and smooth.

// draw Hand for minutes

function drawMinutesHand() {

var rotationUnit = minutes + seconds / 60;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.8*radius;

endX = centerX + handLength*Math.sin(rotation);
endY = centerY - handLength*Math.cos(rotation);
drawHand(centerX, centerY, endX, endY);

}

// draw Hand for hours

function drawHoursHand() {

var rotationUnit = 5*hours + minutes / 12;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.4*radius;

endX = centerX + handLength*Math.sin(rotation);
endY = centerY - handLength*Math.cos(rotation);
drawHand(centerX, centerY, endX, endY);

}

The function drawClock() will be adequately updated as follow, where we add the Hands for the clock.

function drawClock() {

drawClockBackground();

drawSecondsHand();

drawMinutesHand();

drawHoursHand();

}

Step 2: will consists of animating the Hands. However, before we start we have to get the current time of the system. Thus, we create 4 additional system variables as follows:

// time settings

var date;

var hours;

var minutes;

var seconds;

And, we create a function called initTime(), where we initialize the data object and pass to our variables the current time of our system and clock.

// get the system time

function initTime() {

date = new Date();

hours = date.getHours() % 12;

minutes = date.getMinutes();

seconds = date.getSeconds();

}

Now, add the initTime() function before the drawClock() function in the init() function. This is because the Hands will be drawn according to the system current time.

function init() {

…

initTime();

drawClock();

}

Step 3: will consist now of animating the Hands(seconds, minutes, and hours) of the clock.

We are going now to create an animate clock function called animateClock() as follows:

// animate clock

function animateClock() {

clearCanvas();

refreshTime();

drawClock();

}

Inside this function we have three functions named: clearCanvas(), refreshTime(), and drawClock().

The first function will clear the canvas for the animation. The second function is going to refresh the current elapsed time, and the final function, which we have already seen, is going to redraw the clock with its Hands according to the refreshed time.

// clear canvas

function clearCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

// refresh time after 1 seconde

function refreshTime() {

seconds += 1;

if (Math.floor((seconds / 60)) != 0) { minutes += 1; seconds %= 60; }

if (Math.floor((minutes / 60)) != 0) { hours += 1; minutes %= 60; }

}

// draw or redraw Clock after time refresh

function drawClock() {

drawClockBackground();

drawSecondsHand();

drawMinutesHand();

drawHoursHand();

}

In order to animate the clock we are going now to add the setInterval(..) function inside the init() function which will animate the clock every second. Of course, the function that will be called every second is the animateClock() function.

function init() {

canvas = document.getElementById("clock");

ctx = canvas.getContext("2d");

centerX = canvas.width / 2;

centerY = canvas.height / 2;

initTime();

drawClock();

setInterval("animateClock()", 1000);

}

The full clock's code can be viewed below:

<!DOCTYPE html>

<head>

<title>Simple Clock Animation</title>

var canvas; // the clock canvas

var ctx; // canvas's context

// clock settings

var centerX = 0;

var centerY = 0;

var radius = 150;

// time settings

var date;

var hours;

var minutes;

var seconds;

function init() {

canvas = document.getElementById("clock");

ctx = canvas.getContext("2d");

centerX = canvas.width / 2;

centerY = canvas.height / 2;

initTime();

drawClock();

setInterval("animateClock()", 1000);

}

// get the system time

function initTime() {

date = new Date();

hours = date.getHours() % 12;

minutes = date.getMinutes();

seconds = date.getSeconds();

}

// animate clock

function animateClock() {

clearCanvas();

refreshTime();

drawClock();

}

// clear canvas

function clearCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

// refresh time after 1 seconde

function refreshTime() {

seconds += 1;

if (Math.floor((seconds / 60)) != 0) { minutes += 1; seconds %= 60; }

if (Math.floor((minutes / 60)) != 0) { hours += 1; minutes %= 60; }

}

// draw or redraw Clock after time refresh

function drawClock() {

drawClockBackground();

drawSecondsHand();

drawMinutesHand();

drawHoursHand();

}

function drawHand(beginX, beginY, endX, endY) {

ctx.beginPath();

ctx.moveTo(beginX, beginY);

ctx.lineTo(endX, endY);

ctx.stroke();

ctx.closePath();

}

// draw Hand for seconds

function drawSecondsHand() {

endX = centerX + radius*Math.sin(seconds*Math.PI / 30);

endY = centerY - radius*Math.cos(seconds*Math.PI / 30);

drawHand(centerX, centerY, endX, endY);

}

// draw Hand for minutes
function drawMinutesHand() {
var rotationUnit = minutes + seconds / 60;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.8*radius;

endX = centerX + handLength*Math.sin(rotation);
endY = centerY - handLength*Math.cos(rotation);
drawHand(centerX, centerY, endX, endY);
}

// draw Hand for hours
function drawHoursHand() {
var rotationUnit = 5 * hours + minutes / 12;
var rotationFactor = Math.PI / 30;
var rotation = rotationUnit*rotationFactor;
var handLength = 0.4*radius;

endX = centerX + handLength*Math.sin(rotation);
endY = centerY - handLength*Math.cos(rotation);
drawHand(centerX, centerY, endX, endY);
}

function drawClockBackground() {

var correction = 1/300;

var shift_unit = 1/170;

var shift_factor = 1/30;

var angle_initial_position = 2;

var angle_current_position_begin = 0;

var angle_current_position_end = 0;

var repeat = 60;

var lineWidth = 10;

for (var i=0; i < repeat; i+=1) {

angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;

angle_current_position_end = angle_current_position_begin + shift_unit;

if (i % 5 == 0) lineWidth = 20;

else lineWidth = 10;

drawArcAtPosition(centerX, centerY, radius,
angle_current_position_begin*Math.PI,
angle_current_position_end*Math.PI, false, lineWidth);

}

drawLittleCircle(centerX, centerY);

}

function drawArcAtPosition(centerX, centerY, radius, start_angle,
end_angle, counterclockwise, lineWidth) {

ctx.beginPath();

ctx.arc(centerX, centerY, radius, start_angle, end_angle, counterclockwise);

ctx.lineWidth = lineWidth;

ctx.strokeStyle = "black";

ctx.stroke();

ctx.closePath();

}

function drawLittleCircle(centerX, centerY) {

drawArcAtPosition(centerX, centerY, 4, 0*Math.PI, 2*Math.PI, false, 4);

}

</script>

</head>

Your browser does not support HTML5</canvas>

</body>

</html>

Here is my favorite selection of all best sites that can help you get started with HTML5 and beyond.

The WHATWG (does not really help you, only for professionals!)
Learn HTML5 in 5 minutes
The Best HTML5 Presentations To Help You Get Started

Introduction to HTML 5 from Brad Neuberg (Google)

HTML5 Canvas Tutorials: Excellent site to help you understanding the HTML5-canvas-Tag.
Safari Developer Library: See HTML5 canvas and learn how to program a game.
Create a game with HTML5: Only for French readers.
Another tutorial about HTML5-canvas.
How to make a simple HTML5-canvas game?
Example of bouncing balls in HTML5-canvas.

See below what you can do with HTML5+Javascript:

Excellent HTML5 audio player from SPEAKKER (click here for the demo)

HTML5 audio player from SPEAKKER

In future posts I will also give you some initiations and tutorials about HTML5 in combination with CSS and Javascript.

Hint 1: You can actually debug your HTML5 code by using Inspect Element in your browser (Chrome, Safari, etc.).
Hint 2: Use an adequate application to write your code like Microsoft Expression Web. I don't suggest you to use Notepad if you have Windows. Anyway, you can use it as a start if you want, but it will be difficult for you because there is no colorized code in it.

Kais's blog

Pages

Tuesday, January 31, 2012

Advanced Clock Animation with HTML5

Tuesday, January 17, 2012

Tutorial: Simple Clock Animation with HTML5

Tuesday, January 10, 2012

Change your IP-address to an UK one

Friday, January 6, 2012

My best sites selection to help you learn HTML5