| CPSC 120 | Principles of Computer Science | Fall 2025 |
Loops expand our ability to easily draw lots of similar things when there is some kind of pattern in the positioning, color, size, and orientation of those things — stripes on a road, a flock of birds, a patch of wildflowers, shapes in a quilt block, etc.
Arrays expand our ability to easily animate lots of similar things in similar ways by making it possible to write loops where what is changing from one repetition to the next is (or includes) the animation variables themselves — arrays are used when each thing would need its own set of animation variables because the values may be different for different things (without a pattern).
This week's lab focuses on working with arrays using a development strategy intended to simplify the task of animating lots of things: first figure out the drawing and animating for a single thing, then transform the single-thing solution to a many-thing solution by adding arrays.
Successfully completing this lab means that you are able to:
recognize applications of arrays
work with arrays in Processing, specifically
create a sketch animating many things by array-ifying a sketch animating one thing
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 lab9a, lab9b, lab9c, and lab9d 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 meetings for this lab will be the week of Nov 17.
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.
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.
Review the slides, in-class exercises handouts, and in-class exercise solutions from the last week (arrays and array-ifying sketches).
Do the exercises in order.
Read through all of each exercise before you start on it. In particular, note that the "to do this" steps are what you should actually do to complete the exercise — don't just read the first sentence of the problem, look at the example, and try to write the sketch from there. Follow the steps!
You must follow the array-ifying procedure from class — for #1-3, you are provided with a complete sketch that animates one thing, and constructing such a sketch is the first part of #4 — array-ify these as directed in each exercise rather than writing a new sketch from scratch.
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.
Be sure to save your sketch frequently (ctrl-S). (Every time you run your sketch is good.) The editor does not auto-save!
|
In this exercise you'll create a sketch which looks like raindrops landing in a puddle — there should be 50 expanding-and-fading circles and clicking the mouse should toggle the fill color for all of the circles. The starting point is a sketch which draws a single expanding circle — the circle starts at a random position with a random size and (grayscale) color, then expands (increasing the size) and fades (making the color more white). When the color is white, the circle is given a new random position and the size is reset to 0 and the color is reset to black. Clicking the mouse toggles the circle's fill color between white and the circle's current color. |
|
To do this:
Create a new sketch, add your name and a description of the sketch in comments at the beginning, paste in the contents of the provided starter_raindrop sketch, and save it as lab9a.
Complete the Exercise 1 section of the the lab 9 worksheet.
Based on your answers from the worksheet, array-ify the sketch so that there are 50 circles.
In this exercise you'll create an animation similar to the one shown — there should 50 circles, each of which starts in a random position and then, one by one, starts to move after a delay. Stagger the delays so that the first circle starts to move after 40 frames, the next after 80 frames, the next after 120 frames, etc. Click the reset the demo, but you do not need to be able to click to reset your sketch.
The starting point is a sketch which draws a single circle that starts moving after 200 frames. A countdown timer is used to achieve the delayed start — the pattern for a countdown timer is an int variable initialized to some value greater than 0 and updated by subtracting 1. The action occurs when the countdown timer reaches or drops below 0.
The countdown timer in the provided code is named timer. Observe that it is initialized to 200 in setup(), so that the ellipse will start moving after 200 frames. Also observe the update and use steps in draw() — the value of timer is decreased by 1 (update) and the ellipse's x coordinate is updated (to move the ellipse) when the countdown has reached 0 (use).
To do this:
Create a new sketch, add your name and a description of the sketch in comments at the beginning, paste in the contents of the provided starter_delayed sketch, and save it as lab9b.
Complete the Exercise 2 section of the the lab 9 worksheet.
Based on your answers from the worksheet, array-ify the sketch so that there are 50 circles starting 40 frames apart as described above.
|
In this exercise you'll create an animation of a series of exploding fireworks. The starting point is a sketch which animates a single spark in the fireworks display. This is an example of a two-stage animation — there's a launch stage where the spark moves upwards and an explosion stage where the spark fall back towards the ground. The transition between stages is based on the passage of time, so a countdown timer is used — when the timer reaches 0, the current stage changes from launch to explosion or vice versa. |
|
To do this:
Create a new sketch, add your name and a description of the sketch in comments at the beginning, paste in the contents of the provided starter_fireworks sketch, and save it as lab9c.
Complete the Exercise 3 section of the the lab 9 worksheet.
Based on your answers from the worksheet, array-ify the sketch so that there are 1000 sparks.
In this exercise you'll create a 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:
Two sketches: a one-thing version named lab9d_starter and the array-ified version named lab9d.
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 for #4 in previous labs. 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.
Demonstrate animating a bunch of things using arrays. In particular, there must be:
The three array variables can be properties of the same bunch of things, or you can have multiple sets of things animated using arrays.
There should be some scenery in addition to the bunch of animated things — this doesn't necessarily have to be elaborate, but there should be some context for your animated things.
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 lab9d_starter.
Implement the starter version of your sketch — include everything except the bunch of things that will be animated using arrays. For those, animate just a single copy of the thing.
Save a copy of your starter version as lab9d.
Identify which animation variables should become array varaibles and the initialization, drawing, and upate chunks of code that will be wrapped with loops, then implement the array-ifying process to complete your sketch.
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 extra credit:
Save a copy of the fireworks sketch (#3) as lab9c_ec and add one or more of the following:
Choose a new random color for the firework each time it is launched. (Use the same color for all of the sparks, not a separate one for each.)
Vary the color of the sparks: each time the firework is launched, choose a new random color as the base color, then give each spark a random color near the base color. To do this, add a small random amount to each color component of the base color for each spark — include negative numbers in the range so the new color can be brighter or darker than the base color.
Have multiple fireworks at once, though they can all launch and explode at the same time. Do not add separate arrays for position, speed, transparency, etc for each of the fireworks — just add more sparks to the existing arrays but initialize different chunks of the arrays differently.
Have multiple fireworks at once which launch and explode at different times. Do not add separate arrays for position, speed, transparency, etc for each of the fireworks — just add more sparks to the existing arrays and use clever initialization. You may need to array-ify additional animation variables.
Real fireworks leave a bit of a trail, like in the demo at the top of this page. You can get a full trail by only clearing the background at the beginning of the sketch instead of every time a frame is drawn, then make clever use of partially-transparent rectangles to achieve the fading-trail effect. (You don't need extra arrays for this.)
Add additional animated bunches of things to your sketch from #4. (It's fine to add to lab9d for this, you don't need to have a separate extra credit version.) For each thing that requires array(s), add to the start sketch first, then array-ify the relevant new additions and add that to your lab9d sketch. Make sure you follow this process — little credit will be given if you don't!