CS 106 Winter 2017
Lab 03: Advanced Shapes
Question 1 Singles
You will practice writing a small, self-contained function in a "dummy" sketch (i.e., a sketch that doesn't really do anything). Create a folder called L03. In that folder, create a new sketch called Singles. In that sketch, write the following functions.
The built-in function dist() computes the Euclidean distance between two 2D points that are passed in as four separate floating-point numbers. Write a new version of dist() that takes two PVectors as parameters and returns the distance between the two points represented by the PVectors. It's quite easy to write this function as a "one-liner", where the body of the function consists of a single return statement. (It's fine for your function to be called dist() even though there's a built-in function of the same name; Processing doesn't get confused, because they take different parameters.)
Write a function rectPoints() that takes four floating-point numbers as parameters, which play the same role as the parameters for the built-in rect() function: the x and y coordinates of the top-left corner of the rectangle, and its width and height. The function returns an array of four PVectors, consisting of the four points of the rectangle defined by the input parameters. You can put the points in array in clockwise or counter-clockwise order, as long as calling vertex() on each of them in turn draws the intended rectangle. (It may help you to draw a rectangle on a piece of graph paper and label the coordinates of the four corners based on the four numbers being passed to your function.)
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.
Save your work in the sketch Singles.
Question 2 Stars and Crosses
In Islamic art, one of the most important geometric patterns is a regular arrangement of eight-pointed stars with cross-shaped gaps between them. The image on the left is a tilework panel from the Victoria and Albert Museum in London, UK. This star-and-cross pattern is sometimes called the "Breath of the Compassionate". In this question you will create a simple drawing of this pattern, like the one on the right. Note that the pattern on the right is rotated 45 degrees relative to the one on the left, in order to make it easier to draw.
Create an empty sketch called StarCross in the L03 folder. Grab a copy of the polar() helper function from one of the sample sketches and drop it into your sketch. Create a setup() function that sets the sketch window to have size 400×400.
Add code to setup() to draw an eight-pointed star, like the one in the drawing above, in the middle of the sketch. The star should have a width of 100 pixels from left tip to right tip, and its outer points should bend at right angles.
The process is very similar to the one for drawing a regular polygon, except that now you have both inner points and outer points, and you have to alternate between them in a loop. In polar coordinates, the outer points will have a radius of r=50, and the inner points will have a radius of approximately r=38.268 (that's more than precise enough for this exercise).
If all goes well, this intermediate step will produce this result:
Modify the code you produced in the previous step so that it produces a 4×4 grid of these stars, with tips touching. The easiest approach is to surround your star-drawing code with two nested loops, one in y and one in x. Then, instead of pushing the star to the middle of the sketch, use these values of x and y to put it at the right spot in the sketch window.
As with some previous drawing exercises, this sketch doesn't change over time, so it doesn't need a draw() function. You can put all the drawing code in setup() to keep things simple.
Choose a colour scheme and stroke thickness that you like. Note that you don't have to draw explicit cross shapes—just let the background colour of the sketch show through to define them.
Save your work in a sketch titled StarCross.
Question 3 Connect-the-Dots
You will write a sketch that draws a closed shape with vertex coordinates taken from a text file, in order to reveal a secret design (created by Robert Bosch).
Download the text file design.txt. Create a new sketch called ConnectTheDots. Add design.txt to the sketch. Create a setup() function that sets the size of the sketch to 400×400 and sets a black background. Once again, you can put the entire sketch into setup()—you don't need a draw() function.
Have a look at the contents of design.txt. You will see that it consists of a series of lines, each containing two numbers. These numbers are the x and y coordinates of points in the sketch window, defining a closed shape.
In your setup() function, draw the shape defined by the points in design.txt. You can do this by iterating over the lines in the text file, splitting each one into two floating point numbers. Naturally, you should use beginShape(), endShape(), and vertex() to draw the shape. Make sure the shape is closed.
You can choose any fill and stroke colours you want for the design. But please use a stroke weight of 2, and set the stroke join to ROUND.
Save your work in the sketch ConnectTheDots.
Submission
When you are ready to submit, please follow these steps.
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.
If necessary, review the How To Submit document for a reminder on how to submit to LEARN.
Make sure to include a comment at the top of all source files containing your name and student ID number.
Create a zip file called L03.zip containing the entire L03 folder and all its subfolders.
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.