Question 1 Singles

In your L03 folder, create a new sketch called Singles. In that sketch, write the following functions.

1. Write a function called circle() that takes three floating-point numbers as arguments, representing the x and y coordinates of the centre of a circle and a radius for that circle, and draws the circle. The function should not return a value. (As an extension, write a second version of circle() that takes two arguments: a single PVector containing the centre of the circle, and a radius.)

2. Write a function secondsToday() that takes no arguments. It uses the built-in functions hour(), minute() and second() to return an integer telling you how many seconds have elapsed since midnight. So, if the function were called at exactly 2:37.19pm, it would return 14*60*60 + 37*60 + 19 = 52639.

3. Write a function fourCorners(). It takes no arguments, and returns an array of four PVector objects, representing the four corners of the sketch window. For example, if setup() contains the call size( 400, 300 );, then fourCorners() might return the array {new PVector(0,0), new PVector(400,0), new PVector(400,300), new PVector(0,300)}.

You are encouraged, but not required, to test your functions by writing a setup() function that calls them and checks whether the correct answers are returned.

If you want, save your work in the sketch Singles.

Question 2 Zig Zags

Create a new sketch titled ZigZag in your L03 folder. In it, write a function called zigzag() that can draw zig-zag shapes according to a few different parameters. Use beginShape(), vertex(), and endShape() to specify the path. The zigzag() function shouldn't have any other function calls in it (if you want to add fill or stroke colours to the zig-zag, do it in the place where this function gets called). It can have other things in it, like local variables and loops.

In particular, your function should look like this (you can copy this code into your sketch as a starting point):

void zigzag( float y, float w, float h )
{
  // TODO: Fill this in
}

The following diagram illustrates the shape of the complete path you should draw to construct your zig-zag pattern:

The parameters y, w, and h control the shape and location of the zig-zag. It always starts at the point (0,y) on the left edge of the sketch window. Then, it repeatedly steps to the right by distance w until it crosses the right edge of the sketch. The steps alternate moving vertically up and down by distance h. Thus the value of w controls the density of zig-zags across the sketch window, and h controls their heights.

In order to build a closed path that can be filled with a solid colour, when you pass the right edge of the sketch window, add vertices that drop down below the bottom of the sketch, overshoot the left edge, and then come back up to join to the first point in the zig-zag. You'll end up with a path that looks like the dotted line above.

Once your zigzag() function is written, write a setup() function that creates a sketch window of size at least 400×400, and draws a picture using zig-zags as a prominent part of the composition. You can include other graphics if you want, but your picture must have at least five zig-zags in it, all visible, and filled with at least three different colours. For example, I worked from top to bottom in a loop, drawing zig-zags with random colours, widths, and heights. I added a blue background and a sun-like circle. The result is a bit like an abstract mountainscape:

Save your work in a sketch titled ZigZag.

Question 3 Clock

Create a working analogue clock sketch that displays the current time. The sketch window should have size at least 500×500. It should show 12 tick marks around the clock face, with the marks for 12, 3, 6 and 9 o'clock drawn more prominently (e.g., longer). There should be a minute hand and a shorter hour hand that show the current time. The hour hand should be offset by the number of minutes after the hour, so that it sweeps smoothly from one hour to the next.

Here's a suggested plan for writing this sketch:

1. In your L03 folder, create a new sketch called Clock.

2. Write a setup() function that sets the sketch window size to (at least) 500×500.

3. Copy the function polar() from the lecture notes into the sketch. You'll want to use it here.

4. Create a draw() function. Set the background colour. If you want, draw a background for the clock face (e.g., a circle).

5. In draw(), write a for loop that draws 12 tick marks for the hours. You can use any shapes you want, though lines or triangles are probably simplest. The marks for 12, 3, 6 and 9 o'clock must be visually distinct. Use the polar() function to calculate the coordinates of the points you want to draw. (If you want, you can try drawing even smaller tick marks for the minutes too.) Remember that your coordinates must be offset relative to the centre of the sketch.

6. Use the built-in functions hour() and minute() to ask Processing for the current time. Store these values in local variables. Look at the documentation for these functions if you need to.

7. Draw the minute hand as a line from the centre of the clock to the edge. Use the current minutes after the hour to determine what angle to use with the polar() function. Remember that the sketch's coordinate system is "upside-down", so you may need to fiddle with angles a bit, and/or turn some numbers into their negatives.

8. Draw the hour hand as a line from the centre of the clock to a point not quite at the edge. Use the current hour to determine the angle, but also add in a fractional amount of hour based on the current minutes. For example, at 10:30, the hour hand should point halfway between 10 and 11; at 7:23, the hour hand should point to a position 23/60 of the way from 7 to 8.

Save your work in a sketch titled Clock.

Submission

When you are ready to submit, please follow these steps.

1. Please ensure that any sketches you submit compile and run. It's better to submit a sketch that runs smoothly but implements fewer required features than one that has broken code for all features. If you get partway into a feature but can't make it work, comment it out so that the sketch works correctly without it.

2. If necessary, review the Code Style Guide and use Processing's built-in auto format tool. You do not need to use the precise coding style outlined in the guide, but whatever style you use, your code must be clear, concise, consistent, and commented.

3. If necessary, review the How To Submit document for a reminder on how to submit to LEARN.

4. Make sure to include a comment at the top of all source files containing your name and student ID number.

5. Create a zip file called L03.zip containing the entire L03 folder and its subfolders ZigZag and Clock. If your folder also contains your Singles sketch, that's fine.

6. Upload L03.zip to LEARN. Remember that you can (and should!) submit as many times as you like. That way, if there's a catastrophe, you and the course staff will still have access to a recent version of your code.

7. If LEARN isn't working, and only if LEARN isn't working, please email your ZIP file to the course account (see the course home page for the address). In this case, you must mail your ZIP file before the deadline. Please use this only for emergencies, not "just in case". Submissions received after the deadline may receive feedback, but their marks will not count.