Codelog

Recently when I was working with my Quick Calendar (will talk about that later), I was thinking about an analog clock in C#. I didn’t wanna google for simple stuffs and so started off with it. This was really a quick clock thou’. Here is how I did it.  

Before we can proceed, let me tell you how (rather the logic) behind the analog clock. We will draw the needles from the center of the clock to circumference of the clock. So we need to know,

1. Length of the needle (will be a constant in our case)
2. Origin point, where the needle is fixed (will be the center of a picturebox in our case)
3. Point on the circumference till which the line needs to be drawn

Of all the above the only thing that needs to be found is the point on the circumference of the clock at any given second. Anyways, to find it we know the angle (Hint: At 15th second the needle will be at 90deg and at 30th minute the needle will be at 180deg). So the angle is the second multiplied by 6 (as at 15 seconds, angle is 15 * 6)

angle = second * 6

Now that we have the angle, we can find the co-ordinate on the circumference of the circle in a very simple way. Following the concepts of 5th grade Maths. Construct a right angled triangle as shown. Since we know the value of angle (theta), we can find x and y using the formulae,

sin theta = opposite side / hypotaneous and cos theta = adjacent side / hypotaneous

=> x = sin theta * hyp and y = cos theta * hyp

Great. We know the points on the circumference also. Thats it, our second hand is ready now. Minute hand is also similar to the second hand, but for the hour hand, the angle will be second * 30 ( 30 times 3′o clock is 90degrees). Lets see the programitical implementation of this.

• Put a timer in to your window application with the interval 1000 (1000 millisecond = 1 second)
• In the tick event of the timer, do the following
  
            this.Refresh();  //Will clear the previously drawn lines
            int aHour = DateTime.Now.Hour;  //Calculates the hour
            int aMinutes = DateTime.Now.Minute;  //Minutes
            int aSecond = DateTime.Now.Second;  //Seconds

            Graphics aGraphics = pictureBox1.CreateGraphics();  //Get the graphics object of the picturebox so that we can draw the needles (hands)
            aGraphics.FillRectangle(Brushes.DarkGray, new Rectangle(0, 0, pictureBox1.Size.Width, pictureBox1.Size.Height));  //Draws a black rectangle as the background for our clock
            
            PointF aSecondsPoint = FindXAndY(-(aSecond * 6));  //Will find the co-ordinate points at the current instance  
            aGraphics.DrawLine(Pens.LightBlue, pictureBox1.Width / 2, pictureBox1.Height / 2, aSecondsPoint.X, aSecondsPoint.Y);  //Draws the seconds hand
            aGraphics.DrawString(aSecond.ToString(), aSecondsFont, Brushes.Blue, FindXAndY(-(aSecond * 6)));  //A small string that comes with the hand

            PointF aMinutesPoint = FindXAndY(-(aMinutes * 6));  //Similar to the seconds hand 
           aGraphics.DrawLine(Pens.LightGreen, pictureBox1.Width / 2, pictureBox1.Height / 2, aMinutesPoint.X, aMinutesPoint.Y);
            aGraphics.DrawString(aMinutes.ToString(), aMinutesFont, Brushes.Green, FindXAndY(-(aMinutes * 6)));

            PointF aHoursPoint = FindXAndY(-(aHour * 30));  //Simular to the minutes hand, but multiplied by 30. Refer to the explanation section to know more about this
            aGraphics.DrawLine(aHoursPen, pictureBox1.Width / 2, pictureBox1.Height / 2, aHoursPoint.X, aHoursPoint.Y);
            aGraphics.DrawString(aHour.ToString(), aHoursFont, Brushes.OrangeRed, aHoursPoint.X, aHoursPoint.Y);

• Here is the definition for the FindXAndY method,
  
        private PointF FindXAndY(int theAngle)
        {
            float x2 = pictureBox1.Width / 2 - 75 * (float)Math.Sin(Math.PI / 180 * theAngle);  //Converting the angle to radians and finding the X position
            float y2 = pictureBox1.Width / 2 - 75 * (float)Math.Cos(Math.PI / 180 * theAngle);  //Converting the angle to radians and finding the Y position
            PointF aPoint = new PointF(x2, y2);
            return aPoint;
        }

Hope you have got something really useful today. If you have some other better solutions, put it over here.