CPSC 120

Principles of Computer Science

Fall 2024

Capstone Project

Due: Wed 12/11 at 1:30pm

The project is due at the time stated. No work will be accepted after 12/11 4:30pm except in the case of an incomplete. No late handins or extensions!

Introduction

This course has introduced several core principles of computer science:

representation — through the choice of shapes for drawing scenes, variables for animation and loops, and parameters for drawing functions
abstraction — through the definition and use of drawing functions
modularity — through organizing code into groups of related statements, and the use of drawing functions

This course has also introduced several of the core constructs and concepts in programming:

variables
conditionals (if statements)
repetition through loops
repetition (specifically, self-similarity) through recursion
arrays
functions

Also central to computer science is the process of algorithm development — an algorithm is a series of steps built from those core constructs and concepts, and algorithm development involves being able to recognize when elements are applicable to the task at hand. We have focused specifically on when to use these elements in the context of interactive animated sketches, but the concepts — choosing between alternatives, repetition, and so on — are much more widely applicable.

And finally, we've also seen some of the things that programs can do, emphasizing topics in computer graphics and animation:

using drawing commands
interaction and animation
constrained and random motion
modeling the natural world through physical simulation (speeding up/slowing down, gravity, air resistance, bouncing)
modeling the natural world using fractals
modeling the natural world using behavioral animation
image manipulation

This project is a capstone project — the purpose is for you to demonstrate your mastery of the course material and to showcase what you can do. This project covers material from the whole course, but with an emphasis on the topics not covered in the midterm project (loops, arrays, fractals and self-similarity, behavioral animation, images and pixel-based manipulation).

Academic Integrity and Collaboration

As with the labs, you may get help with how to solve the problem and with writing and debugging code, but you must document any help received (including from TFs) and any resources used other than the textbook and posted course materials and you may not work together with other students to write code, shortcut to a solution by copying code or using someone else's program as a guide or example, or be in possession of someone else's program or solution before you have handed in your own.

Review the discussion in previous lab handouts and the full collaboration policy for more details.

Handin

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 your sketch.
Make sure that you've auto-formatted your sketch.
Copy the entire capstone directory from your sketchbook (~/cs120/sketchbook) to your handin directory (found inside /classes/cs120/handin).

Task

Welcome to a (very fictional) North Dakota --

Blimps soar by, advertising the state. Crops grow by a lake surrounded by grass, with large mountains in the distance. An island with a magnificent tree floats back and forth across the lake. (It can also be positioned by holding the mouse button down and dragging.) A kite bobs in the wind. And a bald eagle (brown triangle with white head and tail, so clearly a bald eagle) soars overhead, causing the fish (which normally wander around trying not to run into each other) to scurry for cover and hide behind the island when they fall under its gaze (shown by the shaded rectangle).

(This is a screen shot rather than a running sketch because it runs too slowly in a web browser.)

Your task is to create a sketch named capstone which showcases what you've learned in this course. Since we've looked at several things related to modeling the natural world, some sort of landscape — like the fictional North Dakota — would be appropriate, but if you have other ideas, go for it! (Be creative!) Just make sure your sketch satisfies the requirements below.

Requirements

For full credit your sketch must meet the following requirements.

In order to receive full points for an element, it must be both used appropriately and unique. "Used appropriately" means that the construct and pattern is appropriate for the situation — you can't just throw in a pointless 'if' statement or loop or use arrays when arrays are not needed in order to meet a requirement. It also means following the conventions for how things are to be used e.g. each function should have a single purpose (for example, a drawing function shouldn't also update animation variables) and the only variables that a drawing or filter function should access are that function's own parameters. "Unique" means that it is something new for this project, not simply copied over from a class example or the textbook or another assignment or very similar to a class or textbook example or something from another assignment. (Using elements directly from or substantially similar to examples or solutions in the textbook or from class or from your own sketches in previous labs or projects is acceptable with attribution — include a comment in your sketch identifying where the code came from — but won't count towards meeting the requirements of this assignment.)

Unless otherwise noted below, one element can satisfy more than one requirement e.g. an array of boids can address both "a bunch of things animated in a similar way using arrays" and "at least one thing or a group of things which use behavioral animation".

category	requirements

representation, abstraction, and modularity	The sketch must be of something recognizable, and there must be some theme that connects the elements. It can be a silly theme, but there still needs to be a theme. As usual, the intent is that you should deliberately choose the elements of your program to achieve a particular goal. Also as usual, simplification is OK. Use functions to organize the elements of the program. In particular, any compound thing (three or more shapes) or artistic effect must be drawn by a drawing function and any image filter must be implemented using a filter function. Choose appropriate animation variables, loop variables, and function parameters — there should be variables for things that change, and no variables for things that don't. Include: At least one drawing function with parameters that is called more than once.

drawing, interaction, and animation	Include: At least one ellipse, one rectangle, one line, and one arc (one of each) and either a triangle or a quad. At least two instances of one compound thing (three or more shapes). At least one form of interaction (other than resetting the sketch when the mouse is clicked). This could be something tied to or influenced by the mouse position, something based on whether or not the mouse button is being pressed, and/or responding to mouse clicks or key presses. If you do reset the sketch when the mouse is clicked, you'll need some other form of interaction in addition. At least one animated thing. (not using arrays, and other than boids) Any property or properties can be animated: position, size, color, ...

programming constructs	Include: At least one on-the-spot decision and one instance of the state machine pattern for conditionals. (Any given 'if' statement can only count towards one of the patterns.) At least one set of nested loops and one other loop, not including loops going through arrays or images. (The "one other loop" is in addition to the loops involved in the set of nested loops.) A bunch of things animated in a similar way using arrays. (The pixel arrays involved in images do not count.)

special topics	Include four of the following: At least one animated thing which doesn't move in a straight line or a series of straight lines. (other than boids) This could be physics-based or constrained motion (parametric equations), but it can't just be a repeat of the exercises in lab 6 or the examples from class. For example, for physics-based motion you could vary the gravity (or damping or air resistance) in different parts of the window or add magnetic surfaces that attract or repel nearby shapes or have wind blowing in a certain direction. For constrained motion you could modify the idea of circular motion to get spiral motion or combine constrained motion and acceleration/deceleration for a swinging pendulum. You could also add a noise element to other motion. A texture generated using the "fractal clouds" version of the midpoint displacement algorithm described below. This can be a sky with clouds as in the demo, but you can also use different colors for different effects — be creative! At least one fractal drawn using an L-system. This can be a plant (choose one from lab 7 that you didn't implement as part of that lab or see the extra credit options in that lab for some other ideas) or another shape. It can't be the plant you did for lab 7. At least one thing or group of things which use behavioral animation (boids). (See "Boids" below.) Include: at least three behaviors, combined in some way (blended with appropriate weights and/or active at different times) at least one behavior not used in lab 11 or class examples (offset pursuit, flee, interpose, shadow, hide) some means of keeping the boids from disappearing offscreen indefinitely (see "Boid Containment" below) Choose a combination of behaviors that lead to something meaningful and describe what that result is. For example, see the description of the fish behavior in the demo above. Note that you do not have to have large numbers of boids — you can also meet the requirements with just one or two boids if you wish. At least one image filter (where pixel colors within an image are manipulated). Choose one from lab 12 that you didn't implement as part of that lab or research/make up your own. Include a description of the filter — if you make one up, it should be deliberately achieved and not just a random accident. At least one artistic effect (where the color of shapes drawn is influenced by an image). Choose one from lab 12 that you didn't implement as part of that lab or research/make up your own.

programming and software practice	Name your sketch capstone. Choose descriptve names for your variables, parameters, and functions. Include appropriate comments: at the beginning of the sketch, with your name and a description of your scene describing your boids' behavior describing the effect of your image filter, if it is not one from lab 12 for each function definition, describing what the function does and what each of its parameters are for for each image, its source or attribution (a URL or explanation like "I took the photo") Use Auto Format so that the code you hand in is properly formatted. Have permission to use any images that you include in your sketch. This means that the image is one of the ones provided for the in-class exercises and lab 12, a picture you took or created, a picture someone else took or created and gave you permission to use, or an image that you found on the Internet that explicitly allows you to use it. There are many public domain images that are fine to use, but not every image is public domain! Identify the source for each image.

Extra Credit

You can earn extra credit by going substantially beyond the required elements. There are too many possibilities to list, but here are a few specific elements as well as some more general ones:

Make me say wow! — add complexity (lots of shapes, elaborate patterns, more sophisticated motion paths, more complex behaviors or combinations of behaviors, etc), include all six of the special topics elements, have a particularly neat theme, or demonstrate exceptional creativity by combining the elements covered in new and interesting ways. If you've done something you think qualifies, point out what it is in a comment.
Include something that goes beyond what we've covered in the course — research a different L-system description or image filter or technique for generating fractals (such as iterated function systems and the Barnsley fern) or behavior or read about something new in the book. Note that this is not about copying code for something interesting from somewhere — you need to understand the idea and write your own code, not just copy someone else's code. Include a description of what the thing is and provide reference(s) to where you found the information about it.
Speed up the sketch by moving expensive-to-compute background elements (i.e. those involving recursion) to setup(): draw the non-animated background elements, copy the screen pixels into an image, and then, in draw() draw that image plus any animated or interactive bits.

Extra credit options for previous labs and projects can also provide some ideas. More creative and challenging elements will earn more points.

Additional Info

Getting Started

Plan first! Read carefully through the requirements and look through the rest of this section (especially the fractal clouds) so you know what that entails. Then come up with a topic or theme for your sketch and think about how you are going to incorporate all of the "include" requirements. Write your plan down in comments in your sketch — now you have a to-do list where you can cross off (delete) elements when you complete them.

Once you have a plan, start writing code. Utilize incremental development — add one thing at a time.

Speed

With lots of stuff (especially recursion), your sketch may run very slowly. If this happens, limit the depth of the recursion (don't use too large of a max depth for your plants, and don't let "too small" be too small for the fractal clouds — it's OK if they look a bit chunky) and the number of recursive elements (e.g. one plant instead of 20).

If you still want to be extravagant with recursion, see the extra credit options for a suggestion for speeding things up.

Boids

If you are including boids in your sketch, start with the template provided for lab 11 — copy the animation variables (declarations and initialization) and steps 1-4 in draw() into your sketch, array-ify those elements if your plans call for a large number of boids, and then focus on steps 2a and 2b.

You'll also need to add the boids library to your sketch — add a "boids" tab to your sketch and paste in the boids library code like you did in lab 11.

Boid Behaviors

You can review the lab 11 handout for descriptions of many of the provided behaviors, but you'll also need to use at least one behavior that you didn't use in lab 11. The boids library file also contains behaviors that weren't described in the lab 11 handout — look through the file, focusing on the comments and the function headers, to find those behaviors and how to use them. (You can look at the bodies of the functions to see how the behaviors are implemented if you are curious, but it isn't necessary to do that to use them.)

Boid Containment

You also need some way to keep your boids contained, either within a smaller region (as in the demo) or the window itself. Note that it is OK for the boids to leave the window or region temporarily, they just can't disappear offscreen indefinitely.

One option is to do this through behaviors, for example, if a boid leaves the window or region, it can switch to seek or a similar behavior to bring it back inside. (A containment behavior was discussed in class but isn't provided in the boids library — for a more math-intensive extra credit option, you could implement this behavior and use it.)

Alternatively, you can wrap the boid's position at the edge of the window or region (step 4b in the lab 11 template wraps at the edge of the window) or have the boids "bounce" — as with a bouncing ball, flip the sign of the x or y component of the boid's velocity when the boid hits the edge. (If you have problems with slow-moving boids escaping — much like slow-moving bouncing balls — see the "Physics Quirks" section in the midterm project.)

Fractal Clouds

Fractal clouds can be generated using a midpoint displacement algorithm similar to what you used to generate the terrain in lab 7. Here's the idea:

fractal terrain		fractal clouds
	Start with a line segment connecting two points. (The y coordinates of the points can be equal, as shown in the example, or not.)		Start with a rectangle with a color associated with each corner. (the colors are 0, 2, 4, and 8 in this example)
	Replace each line segment with two new line segments which connect the original segment's endpoints with the "displaced midpoint". The displaced midpoint is the midpoint of the original segment, moved up or down by some amount — if the original segment's endpoints are (x1,y1) and (x2,y2), the displaced midpoint is ((x1+x2)/2,(y1+y2)/2+d) where d is a random amount.		Replace each rectangle with four new rectangles as shown. The midpoint colors along each edge are the average of the colors of the adjacent corners (e.g. the top edge's color midpoint is (0+2)/2 = 1). The center color is the average of the four corner colors plus a random displacement (e.g. (0+2+4+8)/4 = 4.67 plus a random displacement = 3.5 as shown)
	Repeat: replace each line segment with two line segments connecting each segment's original endpoints with a displaced midpoint. Keep going until the line segments are sufficiently short. At that point, draw the line segment.		Repeat: replace each rectangle with four smaller rectangles with colors as shown. Keep going until the rectangles are sufficiently small. At that point, draw the rectangle using the average of its corner colors as its color.

Observe that this process follows the replacement pattern — the rectangle in each level is replaced by four smaller rectangles, and only the final rectangle is actually drawn. The elements of the pattern:

The whole design is clouds — name your function drawClouds.
What changes from one level to the next are the position and size of the current rectangle, its four corner colors, and the maximum possible displacement maxd for the center color — this should decrease with each level to keep the color changes from becoming too abrupt. (As the rectangles get smaller, the displacement needs to get smaller so the color differences don't become too great.) All of these things (position, size, corner colors, and maximum displacement) will be parameters to the drawClouds function.
"Small enough" is based on the size (width and height) of the rectangle.
The base shape is a rectangle with the specified position and size, and whose color is the average of the corner colors.
There are four smaller copies with half the size (width and height) and position and corner colors as shown above and a maximum displacement half as big (maxd/2).

This description of the algorithm is meant to parallel the description of the fractal terrain from lab 7, and you can use your terrain function as an example of the structure though the details will be different.

Implementation notes:

For a blue sky with white clouds, you can get away with a single value for each corner's color so only four parameters are needed (one for each corner) rather than twelve (red, green, and blue for each corner). When you draw the rectangle, use fill(c,c,255) where c is the average of the corner color values. If you are drawing something other than clouds, you may need to have three color parameters for each corner. In that case, repeat the math done for the single color values for each of the red, green, and blue components.
Use the Processing function random to generate a random value between -maxd and maxd (the current maximum displacement) for d (the displacement added to the average of the corner colors to get the center color). Create a local variable for d since you will need to use the same value for each of the four smaller copies.
Experiment to find a good starting value for the max displacement — larger values will allow for greater contrast in the result. (However, a value bigger than 255 is not meaningful because color values are 0-255.)
Consider a rectangle to be small if both its height and width are small. Ideally "small" is just a few pixels, but if your sketch runs too slowly, make "small" larger — even large enough that you see a noticeable chunkiness in the pattern.
Since each frame involves generating the pattern from scratch, the random number sequence used for the displacements needs to be reproducible. Use randomSeed at the beginning of draw() so you don't get jumpy sky.