Analog Clock

First we started with a circle. The dial is composed of a bigger circle and a smaller one - a center point.

With the dial is in place, next step is to add arms of the clock. The end result should have 3 arms - depicting hours, minutes and seconds. To have quicker feedback we started with seconds arm.

Drawing the radius solves the initial position of seconds arm. However, to have the arm goes around the clock, we need to calculate (x,y) coordinates.

I’m aware of the equation of circle. Even tried to solve the equation as a quadratic equation. But that’s not giving the desired result. Later realized, the approach I was trying is applicable for quadratic equation involving single variable.

Quadratic equation with single variable: ax² + bx + c = 0

Equation of circle has 2 variables in 2^nd order: x² + y² = r²

The equation of circle involves 2 variables in second order. I learnt the fact that I don’t know how to solve this equation. And even if it is solved it won’t give us the desired outcome.

Thanks, once again, to Stackoverflow for the rescue. The x and y coordinates are generated through trignomietric functions. With change in degree (or radians) we will get our coordinates.

x = x₀ + radius * cos(2π * θ);

y = y₀ + radius * sin(2π * θ);

where, θ → angle in the circle (starts at 0 degrees)

With this formula used in the chart we derive the seconds hand as follows.

This is able to fill only on quadrant in the circle, so added a if-block to have a full circle.

See the Pen P076-4 by Dheepak (@dheepak_g) on CodePen.

In the above (crude form of) clock we are not having seconds hand but cutting the circle into 60 pieces. Instead, we should delete the line corresponding to previous line. Also, lets display the seconds to compare the clock arm adn actual time.

See the Pen Untitled by Dheepak (@dheepak_g) on CodePen.

The seconds are works by creating a radius of circle with the angle decided by the second (from current time).

 svg.append('line')
      .attr('x1', center.x1)
      .attr('y1', center.y1)
      .attr('x2', x_secs)
      .attr('y2', y_secs )
      .attr('stroke', 'red')
      .attr('stroke-width',3)
      .attr("class", "secs_arm");

The angle gets changes by removing the class ().secs-arm) that’s associated with seconds are.

await sleep(1000);  // This waits for 1 second

d3.select(".secs_arm").remove(); // This line deletes the existing seconds arm

svg.append('line')  // This creates the new line wrt current second
      .attr('x1', center.x1)
      .attr('y1', center.y1)
      .attr('x2', x_secs)
      .attr('y2', y_secs )
      .attr('stroke', 'red')
      .attr('stroke-width',3)
      .attr("class", "secs_arm");

By extending the seconds arm, we are building the minutes and hours arm. The difference is the class should be destructed every 1 minute and 1 hours respectively.

See the Pen P076-6 by Dheepak (@dheepak_g) on CodePen.

We are adjusting the length of the arms to differentiate seconds, minutes and hours.

See the Pen Untitled by Dheepak (@dheepak_g) on CodePen.

The clock is ready. But to complete it we are adding markers on the clock face. This is achieved by adding a larger circle with radius marked for 12 times. And then super-imposing the clock face on it.

See the Pen Untitled by Dheepak (@dheepak_g) on CodePen.

The clock is availble in this page.