Clocks have become digitalised in recent times and we find fewer clocks from the past, such as pendulum based analogue clocks. This project deals with the simulation of such an analogue clock interface using JavaScript and HTML 5 based Canvas element. HTML 5 Canvas element is a special feature supported by web browsers that support Canvas plug-in along with JavaScript plug-in. The basic concept of Canvas element is that, one can easily draw the graphical rendition and display images by defining the area on the webpage.
Canvas element is supported by current versions of Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror and Opera. However, older versions of Internet Explorer, including version 8, do not support Canvas.
Software program
The program apc.htm is coded in JavaScript and uses Canvas element to display the analogue clock-face similar to a cogwheel-type seconds-hand animation and a pendulum bob of a suitable size.
The actual pendulum bob functions with respect to the gravitational pull and is based on the oscillatory sequence. Pendulums are classified into two types: one, the simple pendulum that does not have a fixed periodic motion, and second, the seconds pendulum that follows the simple harmonic motion. The time period of oscillation of the pendulum is always two seconds per cycle, in contrast to the varying time period of oscillations of a simple pendulum. However, the clock in this program design has nothing to do with the movement of the pendulum’s bob, as explained ahead.
First, Canvas element is initialised within the webpage, within a specified area and then context is called. Context, an element internal to Canvas element, makes the graphical representation on Canvas. The analogue clock is placed on a suitable area on the screen so we can define a 2D context on Canvas, which we previously called.
Next, we draw the dial/face of the clock, hands, pendulum string and bob, and then assign these values and functionalities. Once these values are defined, an animation frame is called at regular intervals that we preset in the program code.
The animation rate of the clock is preset in the code at 0.025 seconds and a delay is also defined. This animation routine is called back every 60 milliseconds for 1000 milliseconds (one second).
This project uses the system clock’s time to synchronise the time on the screen. In the code you can see the new Date function is called at every definition of hour, minute, seconds and milliseconds. The new Date is a native function that calls the system’s time. As we have previously defined the frame rate, the clock’s hand animates accordingly. That is, time is extracted from the computer system and hands of the clock are placed at appropriate locations on the clock-face.
Running the application
Chrome browser can run this program without hassles. Old versions of Internet Explorer do not have the plug-ins for rendition of objects that are created by the code. Instead, an old version supports animation of images and graphics that we point in the program, which has an external link to the file written inside the program code. But this itself cannot generate animations. Vector graphics can be inducted into Internet Explorer using vector mark-up language (VML), but these can only be used for static graphical shapes like circles, rectangles and lines.
To run it, just double-click on apc.htm file. You will get the program output screen as shown in Fig. 1.
If your default browser is an older version of Internet Explorer, you will get an error message as shown in Fig. 2. In that case, right-click on apc.htm code and select Open with→Google Chrome options to run the program.
Download source code: click here
Bukya Sridhar is a B.Tech in electronics and communications engineering and enjoys coding in JavaScript. He has a keen interest in space technology (satellite communication) and mobile communication
