The Task

We will make a 24 hour clock. What makes it 24 hour is the clock face will count up from zero hour to 23. But the clock face has only either the AM numbering of the hours or the PM numbering of the hours shown at any one time. The AM numbering is from 0 to 11. The PM is from 12 to 23.

AM clock face PM clock face

To get this answer you must first implement the clock we did in class. Here were the sizes of everything:

// the sizes of everything
   clockface = radius * 0.9;
   hoursRadius = radius * 0.5;
   minutesRadius = radius * 0.65;
   secondsRadius = radius * 0.72;
   hoursTick = radius * 0.04;
   minutesTick = hoursTick * 0.5;  // notice minutesTick is based on hoursTick not radius
Next are the changes you have to make to the class code.

The Changes you need to Make

  1. ( 30 pts ) implement the clock from class.

  2. ( 10 pts ) background color for the face of the clock should be a 40 in the grayscale.

  3. ( 10 pts ) The second hand width is 2 pixels, the minute hand is 3 pixels, and the hour hand is 5 pixels.

  4. ( 30 pts ) define a function similar to drawTick called drawNum that takes the following parameters:

    void drawNum(float x, float y, float angle, float len, float tsize, int num)
    

    where tsize is the size of the text and num is the number to be printed. Please use an alignment for the text that produces the same look as in the pictures.

  5. ( 30 pts ) Use drawNum to number the hours around the face on the inside of tick marks circle. If the time is AM then number from 0 to 11 and if it is PM then number from 12 to 23 as seen in the pictures. Noon is PM and midnight is AM. Create two variables local to draw the numbers: hoursNum that is used for distance from center of the clock to the center of the hour number and hoursNumSize that is the size of the next of the hour numbers. hoursNum is 85% of the second hand length and hoursNumSize is twice the hours tick size.

  6. ( 30 pts ) Use drawNum to number the minutes around the face on the outside of the circle of tick marks. Every 5 minute mark as in the pictures above needs to be marked. Create two variables local to draw the numbers: minutesNum that is used for distance from center of the clock to the center of the minute number and minutesNumSize that is the size of the next of the minute numbers. minutesNum is 115% of the second hand length and minutesNumSize is 120% of the hours tick size.

Submission

Save your results as a .pde file and submit the file to the bblearn page.