| CPSC 120 | Principles of Computer Science | Fall 2024 |
Labs are due at the start of class. It is OK if you show up and copy your files to the handin directory at the very beginning of class, but this should take at most a couple of minutes and you should not spend the next lab period finishing up the previous week's lab. I will check timestamps, and files handed in more than five minutes after the start of lab will be considered late.
See the policy on late work and extensions.
Motion involves changing an object's position over time. "Simple motion" can be viewed as moving in a straight line at a constant speed; "complex motion" is thus everything else. In this lab you'll make use of some of the patterns of motion discussed in class, and will also apply the ideas to animating something other than position.
Successfully completing this lab means that you are able to:
The short version:
Help with learning the process of constructing programs is fine; shortcutting the process and arriving at a result that you didn't produce yourself or don't fully understand how to produce is not.
Always attempt the problem yourself first, using this lab handout, the materials from class posted on the schedule page, and the assigned reading in the textbook.
Your primary resources for help should be office hours and the Teaching Fellows.
You may not work with other students to write code together.
You may not shortcut to a solution by copying code (except as specifically authorized in instructions) or using someone else's program as a guide or to understand what yours should be like even if you don't directly copy anything, You may not be in possession of someone else's program or solution before you have handed in your own.
You must document any help received (including from TFs) and any resources used other than the textbook and posted course materials. Put comments in your sketch indicating who helped (or the source used) and how / with what.
Make sure that you understand not only the result achieved, but also how one knows what to do to achieve that result. This gets at the process of writing a sketch — identifying what code elements are needed, filling in the details for a particular task, and pulling it all together.
Review the discussion in previous lab handouts and the full collaboration policy for more details.
To hand in your work:
Make sure that your name and a short description of the sketch are included in a comment at the beginning of each sketch.
Make sure that you've auto-formatted each sketch.
Copy the entire lab6a, lab6b, lab6c, and lab6d directories from your sketchbook (~/cs120/sketchbook) to your handin directory (found inside /classes/cs120/handin).
The exercises in this lab are about applying the right pattern rather than figuring out some complex motion from scratch. For each exercise, review the slides for a description of the relevant pattern(s) and the examples posted on the schedule page for an example of what that pattern looks like in code.
Also read through all of each exercise before starting it — there are often useful hints and notes after the initial statement of the task that will help you solve the problem.
As always, refer to the class materials (slides, in-class exercises handouts, and examples) posted on the schedule page.
(This section is needed for #4. Come back to it when you are ready to start on that exercise.)
A hypotrochoid is a curve generated by tracing a point on a small circle as that circle rolls around inside of a larger circle — depending on the relative sizes of the circles and where on the small circle the point of interest is, you can get quite a variety of interesting patterns. Hypotrochoids are one of the kinds of curves that can be created with the Spirograph toy. (Astroids — a particular kind of hypotrochoid — are also featured in the Pittsburgh Steelers' logo.)
Hypotrochoids are described by the following parametric equations:
x = (R-r)*cos(t) + a*r*cos(t*(R-r)/r) + cx y = (R-r)*sin(t) - a*r*sin(t*(R-r)/r) + cy
t is the parameter that can be varied to generate points along the curve, (cx,cy) controls where the curve is drawn (centered at (cx,cy)), and the other values are constants that you can set to control the nature of the curve — R and r are the radii of the large and small circles, respectively, and a is another constant (≥ 0) that you can choose.
The value of R+r controls the size of the pattern — the pattern will just fit within a circle of radius R when a=1 and a circle of radius R+r when a=2.
The ratio of R to r controls how many cusps or lobes the curve has — if the ratio is integer (r evenly divides R) or rational (R/r can be reduced to a fraction with integer numerator and denominator), then the value of numerator when R/r is written in simplest terms is the number of lobes. The chart below (from Wolfram Mathworld) provides some examples — the pairs of numbers on the left side indicate the ratio r:R e.g. (2,7) means that the ratio r:R is 2:7.
Within a row, the chart shows the effect of a — a increases from left to right. (Specifically, the columns show a = 0.1*R/r, a = 0.2*R/r, a = 0.3*R/r, etc.)
If the ratio of R to r is irrational (such as 1:π), then the curve is not closed (it never repeats exactly) and has an infinite number of cusps or lobes.
Put your name and a description of the sketch in comments at the beginning of each sketch. Also don't forget to Auto Format your code before handing it in. (Refer back to lab 2 for more on Auto Format if needed.)
Create a sketch named lab6a which contains four bouncing balls, as shown. (Use the same colors as in the demo — red, yellow, blue, purple.) All four balls should start in the same position in the upper left corner of the window and have the same initial speeds (0 for the y speed, greater than 0 for the x speed). In addition, all four balls should be subject to gravity and should bounce off all four edges of the window. However, the yellow ball should also be subject to air resistance (in both x and y), the blue ball should also be subject to damping when it bounces, and the purple ball should also be subject to both air resistance and damping. Clicking the mouse should reset the balls to their starting positions and speeds. (Click to reset the demo.)
To create this sketch: Start with the red (gravity-only) ball and then add one ball to the sketch at a time, rather than trying to write the whole sketch at once.
Suggestion: Use the same values for gravity, air resistance, and damping throughout the sketch so you can see the effect each has on the behavior of the ball.
Note: You will likely observe some strange effects, especially if you let the sketch run for a while — balls may get stuck and slide or jiggle along an edge of the window or they may escape the window entirely. These are artifacts resulting from some simplifications in the mathematics and bounce-handling and can be ignored. (But strange behavior can also be the result of doing something wrong, so ask if you aren't sure if what you are seeing is OK.)
Create a sketch named lab6b which draws an expanding circle as shown. The circle should be centered in the drawing window. The size of the circle should start at 0 and grow, but the speed of growth should decrease over time. (Choose an initial speed of growth and how quickly it decreases so the circle doesn't grow past the edges of the window.) To achieve the behavior of the example (where the circle eventually stops growing entirely), do not allow the speed to drop below 0 (a negative speed means the circle will shrink rather than grow) — this means that if updating the speed would make its value negative, the speed should be set to 0 instead.
Clicking the mouse should reset the animation.
Hint: This is a case of "acceleration" pattern, except that it is the size of the circle rather than its position that is being updated and "speed" refers to the speed of growth rather than speed of movement.
Create a sketch named lab6c which has a small ellipse smoothly wandering around the drawing window as shown.
Note: This is a case of the "smoothly-varying random position" pattern rather than a random walk — compute the position of the ellipse directly (rather than updating) using Perlin noise.
To create this sketch: Start by having just the x coordinate of the ellipse determined by Perlin noise; let the y coordinate be fixed. (Like the example from class.) Choose an increment for t that gives a smooth but not too slow effect. Then handle the y coordinate similarly.
Note: You will need two separate t parameters, one for x and one for y. Update both by the same amount, but initialize them to different values. (If you initialize both t parameters to similar values, you'll notice that the ellipse only moves along or near a diagonal line — this is because noise(t) always generates the same value for the same value of t.)
Create a sketch named lab6d which draws a hypotrochoid.
This is a case of the "constrained motion" pattern — compute the position of the ellipse directly (instead of updating) using the parametric equations given above. Choose values for cx and cy so the curve is centered in the drawing window, choose a ratio r:R and a value for a so you get an interesting pattern (use the chart as a guide, but also feel free to experiment — you do not need to generate the same pattern shown in the demo), and scale your choices for r and R so that the curve fits nicely in the drawing window without being too small or extending outside the window. (For example, different (r,R) values (2,7), (20,70), and (40,140) all have the same ratio 2:7 and thus generate the same curve but with an increasingly larger size.) Update t by an amount that draws the curve in a reasonable amount of time without leaving big gaps between the ellipses.
Clicking the mouse should clear the background.
Hint: This is actually motion — remember that the difference between something just moving around the screen and something leaving a trail as it moves is where the background is cleared.
Suggestion: With a 400x400 drawing window, try R=133, r=57, and a=1.5 as starting point.
You can earn extra credit by going substantially beyond the required elements. Some possibilities:
Modify your sketch for #1 to add one or both of the following features:
Include a rectangular obstacle for the balls to bounce off of (in addition to the walls).
Turn off gravity or have the balls accelerate upward (as if being pushed by a rocket thruster) as long as the mouse button is being held down. Look up the mousePressed system variable (not the function!) in the Processing API to help with this.
Get the simulation right — fix the artifacts arising from the math simplifications in #1 so that the balls don't get stuck or escape. Stop by office hours to discuss this. (Familiarity with geometry and algebra is needed.)
Epitrochoids are similar to hypotrochoids, but are generated by having the small circle roll around the outside of the larger circle instead of the inside. The parametric equations are:
x = (R+r)*cos(t) - a*r*cos(t*(R+r)/r) + cx y = (R+r)*sin(t) - a*r*sin(t*(R+r)/r) + cy
Modify your sketch from #2 so that clicking the mouse clears the background and also toggles between drawing a hypotrochoid and an epitrochoid. Choose values for r, R, and a that lead to an interesting result.
Create a new sketch lab6e which contains one or both of the following:
Spiral motion — have an ellipse, rectangle, or other shape moving in a spiral. The animation should start over when the shape has reached the center of the spiral or the edge of the drawing window (depending on which way it is spiralling). Hint: A spiral is similar to a circle, but with what else changing?
Acceleration or deceleration not in a straight line. For example, consider a swinging pendulum — the bob gains speed as it falls, then slows as it reaches the high point of the swing. This combines the idea of gravity (acceleration downwards) with constrained motion (in a circle).
Include a brief description of what you've done for extra credit in a comment at the beginning of your sketch. More creative and challenging elements will earn more points.