Lab 4
Patterns of Change

Due: Fri 10/3 at the start of class

Introduction

Animation involves change — in position, size, color, or some other attribute. This week's lab deals with patterns of change.

Successfully completing this lab means that you are able to:

• implement steady motion, acceleration and deceleration, and a random walk
• use Perlin noise to generate smooth randomness
• animate something along a motion path described by parametric equations
• apply the motion patterns discussed in class to other properties (such as size and color)

Handin and Presentation Meeting

Handin

Hand in a hardcopy (paper) of your worksheet in class.

To hand in your sketches:

• 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 lab4a, lab4b, lab4c, and lab4d directories from your sketchbook (~/cs120/sketchbook) to your handin directory (found inside /classes/cs120/handin).

It is OK if you copy your files to the handin directory at the very beginning of class.

Presentation Meeting

Presentation meetings for this lab will be the week of Oct 6.

Exercise #4 is the presentation problem. Come to the presentation meeting prepared to discuss your sketch. You may be asked to point out and explain how your code meets the requirements of the problem, explain how portions of your code work, and/or apply skills from the problem to a new situation.

Policies

The policies on late work and extensions, academic integrity, and the use of AI for this lab are the same as for lab 2. Review them there.

Preliminaries

Reference

Review this week's slides, in-class exercises handouts, and in-class exercise solutions for information, templates, and examples.

Hypotrochoids

(This section is needed for #3. 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.

Exercises

In this exercise you'll create a sketch which draws an expanding circle as shown in the demo. (Click the mouse to reset the animation.) The requirements for your sketch: Name the sketch lab4a. Make the drawing window 400x400. The speed of the circle's growth should decrease over time. Choose an initial speed of growth and a rate of decrease so the circle eventually fills most of the window but doesn't extend outside. The circle should stop expanding when the rate of expansion reaches 0. (It should not then start shrinking.) Clicking the mouse should reset the circle to its initial size. To do this: Complete the Exercise 1 section of the lab 4 worksheet. Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab4a. Implement the expanding circle so that it fills most of the window (but doesn't extend outside) before starting to shrink. Keep the circle from shrinking: use min or max when updating the speed as identified on the worksheet. Add resetting the circle to its initial size when the mouse is clicked.	Your browser does not support the canvas tag.
In this exercise you'll create a sketch with two wandering circles as shown. (Click the mouse to reset the animation.) The requirements for your sketch: Name the sketch lab4b. Make the drawing window 400x400. The red circle should start in the position marked by the small gray circle and should wander according to a random walk. The blue circle should wander within the gray box. Use Perlin noise to create a smoothly-varying random position, and choose an increment for t that gives a smooth but not too slow effect. Clicking the mouse should reset the red circle to its starting position. You do not need to draw the gray circle and box — they are just to show aspects of the circles' motion. To do this: Complete the Exercise 2 section of the lab 4 worksheet. Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab4b. Write the code for the red circle. Write the code for the blue circle. Note that you will need separate t parameters for each instance of noise — update both by the same amount (use the same step) but initialize them to different values. (If you initialize both t parameters to similar values, you'll notice that the circle only moves along or near a diagonal line — this is because noise(t) always generates the same value for the same value of t.) Add resetting the red circle to its initial position when the mouse is clicked.
In this exercise you'll create a sketch which draws a hypotrochoid. (Click the mouse to reset the animation.) The requirements for your sketch: Name the sketch lab4c. Make the drawing window 400x400. 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 (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. 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. To do this: Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab4c. Read the section about hypotrochoids above and review the pattern for constrained motion using parametric equations in the slides from class. Write the code for a small ellipse moving along a hypotrochoid and leaving a trail. Start with R=133, r=57, and a=1.5. Choose (cx,cy) to be the center of the drawing window. (optional, but encouraged) Experiment with other values of R, r, and a to produce another interesting pattern. Add clearing the background when the mouse is clicked.	Your browser does not support the canvas tag.
In this exercise you'll create an animated sketch of your own design. What the sketch depicts is up to you (here's a chance to be creative!) but for full credit it must include the following elements: Name the sketch lab4d. The scene must be recognizable as something. Include a comment at the beginning of the sketch describing what it depicts. The intent is that you should deliberately choose positions and colors for the shapes — simply drawing a bunch of shapes at whatever location they happen to end up at is not acceptable. Simplifying things (like making a tree out of a rectangle and a triangle) is fine. The scene must be original and created by you — it can be something entirely new for this exercise or you can extend your sketches from #4 in lab 2 or lab 3. You may not, however, copy code from other exercises in this lab, examples or solutions in the textbook or from class, or other sources even if you then make some changes — create your own version (such as a fancier car) from scratch. You must include comments in your sketch identifying what thing each drawing command or group of drawing commands is associated with. For example, the comment // cloud would be appropriate just before the commands that set colors and draw the shapes for a hot air balloon. Also use blank lines to separate the drawing commands for different elements in the scene. You must include an instance of each of the steady motion, acceleration/deceleration, and smoothly-varying random (Perlin noise) patterns. You must include an instance of a pattern other than steady change being applied to size, and an instance of a pattern other than steady change being applied to color. You must include one of the following: Spiral motion. Spiral motion is similar to circular motion, but the radius of the circle also changes. Acceleration or deceleration along a constrained motion path. For example, consider a swinging pendulum — the bob gains speed as it falls, then slows as it reaches the high point of the swing. Clicking the mouse should reset the animation to the beginning so that it appears to start over. To do this: Complete the Exercise 4 section of the lab 4 worksheet. Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab4d. Draw any fixed (not animated) elements. Include comments labeling the sections of code that draw each compound or simple thing. Practice incremental development — add code for a few shapes at a time rather than writing everything before you run the program for the first time. Add the animated elements one at a time. For each, include a comment labeling the section of code that draws that element.

Extra Credit

Challenge yourself and earn extra credit by going substantially beyond the required elements. (See the assignments and evaluation policy for more details on extra credit.) Some possibilities for #4:

• A more elaborate or creative sketch, particularly with respect to demonstrating different applications of the patterns of change discussed in class.

• Motion along other parametric curves such as the general position ellipse or Lissajous curve (see here). Other curves are also fine — include a comment with the URL or other reference for where you found the parametric equations.

• Include both spiral motion and acceleration or deceleration not in a straight line.

• Objects moving in the real world are subject to air resistance, a force proportional to speed acting opposite to the direction of motion:

      speed = speed + acceleration - resistance*speed

  where resistance is typically a very small number (close to 0). Include air resistance.

It's OK to add on to your lab4d sketch but be sure to include a brief description of what you've done for extra credit in a comment at the beginning of the sketch.