The Task

It is the end of the semester we will not delay the due date on this assignment. This is fairly straight forward. Just follow the instructions and check off each part.

We will alter the clock from Apr 15 to have several new features. Here is the movie of clock you are to build. Here is a full frame picture of the clock and a detail of the center of the clock:


The features are:

  • ( 30 pts) Build the clock we had in class. Yes, you can copy the code we did in class for this. You just can't copy from each other.

  • (10 pts) Be sure to use these variable initializations exactly like this (some of these are slightly different that what we did in class):

    // set all the distances and sizes
    cx = width/2.0;
    cy = height/2.0;
    faceRadius = min(width/2.0, height/2.0);
    hoursRadius = 0.5 * faceRadius;
    minutesRadius = 0.6 * faceRadius;
    secondsRadius = 0.8 * faceRadius;
    minuteDotSize = 0.015 * faceRadius;
    hourDotSize = 0.03 * faceRadius;
    dotRadius = 1.00 * secondsRadius;
    numRadius = 1.15 * dotRadius;
    numSize = 0.12 * faceRadius;
    
  • ( 10 pts) Make sure the hour hand doesn't jump on the hour but moves smoothly between the hours. This is the way we did it in class so using the code from class should get you that. The color of the clock face is 40 on the scale from 0 to 255.

  • ( 10 pts) Make sure the clock is resizable. Also we did this in class.

  • ( 10 pts) Change the width of the hour, minute, and second hands to be 4, 3, 2 pixels.

  • ( 10 pts) The tick marks should be circles around the outside of the clock and be sure that the circles are centered on the end point of the second hand as it sweeps.

  • ( 40 pts) Write a routine called

    void ptext(float x, float y, float angle, float len, float size, String t)
    

    This is a lot like pdot for tick marks but instead with text. So you'll need to invoke this procedure within a loop in drawNumbers. This will draw the given text at the point that is at radius distance and the given angle from the point (x, y). The text will be centered around that end point in both horizontal and vertical directions. Angle for this routine should mean the same thing it does as angle does in the pline and pdot routines. The size of the text will be size. The color of the number will be determined by the angle the same way as everywhere else. Note if you pass a number to ptext it will have to be first converted to an int to remove everything after the decimal and then converted to a String using str() before you use it as the last argument in ptext because it is expecting a String.

  • ( 40 pts) Write a routine called

    void drawNumbers(float x, float y, float radius, float size)
    

    This will put all the numbers on the clock face just like drawTicks put all the ticks on the clock face. Add numbers around the outside of the clock by calling ptext 12 times for the numbers 1 through 12. It will use a for statement to loop through the angles where the numbers belong. Make the radius used for drawing a variable called numRadius.

  • ( 10 pts) Make sure that the numbers around the clock are 1 through 12 as on a regular clock. We used an if statement to do this our example in class.

  • ( 30 pts) Make drawHand slightly more complicated. Instead of having the hand just draw in the direction angle with a length radius it needs to do two things: draw a small line 180 degrees in the opposite direction but only 10 % of radius. That is, it has a little part in the opposite direction. See images. Also it has a circle around the origin point whose radius is twice the width of the line weight. The fill color for the circles is the same as the stroke color for the lines. See images. Important: notice that the hour hand is drawn, then the minute, and then the second so that you have a nice stacking of the circles.

Submission

Save your results as a .pde file and submit the file to the submission page. Use the submission page on the class web page. Last submission before due date and time will be graded.