CS 106: Lab 03

CS 106 Winter 2016

Lab 03: Basic physics

Due: Friday, January 29th, 4:00pm

Starter code: L03.zip (for both questions)

Question 1 Miniputt

You will implement a simple miniature golf game based that demonstrates friction and collisions.

Open the Golf sketch from the provided zip file. Read through the source code to see where everything lives. Run it to see a simple golf course with a ball (white) and hole (black). You can click on the ball and drag a line away from it. When you release the mouse, the ball is supposed to roll directly away from that line, slowing to a stop and colliding off the edge of the sketch, until it either stops or goes into the hole. Right now that doesn't work—the sketch freezes when you let go of the mouse button.
Everything in the sketch is already set up for you except for the step() function, which actually implements the physical simulation. All you have to do is complete the step() function. You'll need to add about 25 lines of code. The function includes comments that indicate what the various pieces should be, but you shouldn't necessary write your solution in the order of those comments. I suggest the following:
- Implement the First Law (Step 4 in the comments): update the position of the ball using its velocity vector. (The velocity is set for you in the mouseReleased() hook.) When you draw the shooting line using the mouse, the ball will move at a constant speed forever.
- Implement collisions (Step 5 in the comments). You'll need four if statements, one for each edge of the sketch window. If the ball has crossed that edge, you need to flip one coordinate of its velocity vector to make it bounce.
- Implement friction (Steps 1, 2 and 3). You'll want to gradually remove speed from the ball. If the speed goes so low that the ball's motion is overcome by friction, set the ball's velocity to zero. See the comments in the provided code for more ideas.

Optional enhancements: If you have time, consider adding enhancements to the game. Most obviously, you could alter the STATE_CELEBRATE mode in the draw() function, so that it displays some kind of message and waits for a click before starting a new round. You could also build a more complex game mechanic (say, total number of golf strokes over ten holes) and display that as the user's score. Then write that score to an external file. Since this is miniputt, you could always add things like obstacles, though the collision detection code can get complicated.

Save your work in a sketch called Golf. (If you start with the provided code, this should be automatic.)

Question 2 Fireworks!

It's the fourth week of class! Let's celebrate with fireworks! Each firework will consist of a spray of "embers". We'll use instances of an Ember class to represent each one. The embers will burst outward from each mouse click, and will fall to the bottom of the screen under the influence of gravity.

Open the Fireworks sketch from the provided zip file. Run it to preview the black night sky that will become your canvas.
Click on the Ember tab and read through the code that controls each ember. Eventually you'll have to make some small changes to this file, and you might do more if you try some of the enhancements below.
Add code to the draw() function that walks over the global array of Embers and asks each one to draw itself. There's debugging code in setup() that creates a single Ember, which you should now see in the centre of the sketch.
Now fill in the step() function to perform the global physical simulation. This function is very simple: just walk over the global array of embers, calling each one's step() method. After that loop is complete, call the removeAllDeadEmbers() function to cull out the embers that have left the sketch window.
Let's make things move! Fill in the empty step() method in the Ember class. This should work exactly like our in-class examples of the First and Second laws of motion: update the velocity using gravity, and then update the position using the velocity. If you run the sketch, you'll now see your one little ember fly off the screen in a random direction.
Now it's time to make proper fireworks. First, in setup(), comment out the line that creates a single test ember, and uncomment the line that creates an empty array to be filled later (see the comments in the function). We don't want any embers on the screen when the sketch starts up.
Add a mousePressed() hook that creates a complete firework. This is slightly more complicated (though still only about eight lines of code). Let's break it down into steps:
- Create a local variable to hold a random hue.
- Create a local variable to hold a random speed (you may need to experiment with the speed range to get something you're happy with).
- Create a local variable to decide how many embers to put into this firework. Again, choose the number from a random range that you find via experimentation.
- Create a local array of Embers of the size determined above.
- In a loop, put a new Ember into each slot of the array. The Ember starts at the mouse location and uses the randomly chosen speed and hue chosen above.
- Finally, use the provided function to add the array you created to the end of the global embers array.
Finally, let's add a pretty special effect. Comment out or remove the call to background() in draw(). Run the sketch, just to see the pretty colour trails your fireworks leave behind. Then go back into draw(). Instead of a call to background(), draw a partially transparent black rectangle over the entire sketch. This will cause past frames to "fade out" as new frames are drawn on top of them, adding "comet tails" to the embers.

Optional enhancements: If you have time, I encourage you to experiment with the visual style of these fireworks. There are many opportunities to improve the sketch. Here are a few:

Choose better colours for the fireworks. In real life there are a few main colours that most fireworks use. You'll notice that just choosing random hues can give some dark blues and purples that aren't very natural, and you'll never get white.
Instead of drawing a dot at each ember position, draw a line from the ember's old position to its new one. To do so, you'll need to change the Ember class to store additional x and y values for the ember's previous position. Then the Ember draw() method can use the previous and current x and y coordinates.

Save your work in a sketch called Fireworks. (If you start with the provided code, this should be automatic.)

Submission

Remember to review the Code Style Guide and use Processing's built-in auto format tool. Then review the How To Submit document. At the top of all of your source files, be sure to include a comment with your name and student ID number. When you're ready, zip up the entire L03 folder containing the two sketches above (Golf and Fireworks) into a single archive called L03.zip and upload that file to LEARN.