| 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.
This week's lab deals with conditionals (more commonly known as if statements), one of two fundamental control structures in Processing. (We'll get to the other, loops, later in the course.) The ability to make choices — to have different things happen at different times, whether this is something that only happens in some frames and not others or a choice of alternatives for what happens in a frame — is a big step forward in terms of what our sketches can do.
We've identified two main patterns for how those choices are made: an on-the-spot decision, where one can look at the situation in the current frame (i.e. the values of system variables and animation variables) and determine what to do, and state machines, where additional knowledge about the past or what has been happening is needed in order to determine what to do. A mouseover effect is an example of an on-the-spot decision — based on the current position of the mouse with respect to some region within the drawing window, one can decide whether or not to take some action. Click-to-toggle is an example of a state machine — whether or not to take an action in the current frame depends on whether or not the mouse was clicked at some point in the past, so we need to introduce a state variable to make that information available in the current frame.
Successfully completing this lab means that you are able to:
work with if statements in Processing, including
construct sketches using conditionals, including
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 lab5a, lab5b, lab5c, and lab5d directories from your sketchbook (~/cs120/sketchbook) to your handin directory (found inside /classes/cs120/handin).
Before you start writing code, review the process of working with conditionals — the posted slides and in-class exercises handouts contain the conditionals questions and the syntax for if statements, and the posted examples provide an illustration of answering those questions in a particular situation and how those answers turn into code. Look through the examples and make sure you understand what the code does and how it matches up to the relevant questions.
As always, practice incremental development. You don't have to code the entire sketch at once — start with one piece or a simpler version of the task and add to it bit by bit.
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.)
The goal in this exercise is to create a sketch named lab5a which works like the example shown — a small ellipse starts in the center of the drawing window and, when the mouse comes close to it, it runs away from the mouse. Since the ellipse can (and probably will!) escape outside the boundaries of the drawing window, clicking the mouse should reset the ellipse's position to the center of the drawing window.
Make the drawing window 400x400 and define "close to the mouse" as "the mouse position is within 100 pixels of the center of the ellipse". You can treat the horizontal and vertical directions separately — you don't need to compute the straight-line distance between the mouse and the center of the ellipse, but instead check separately if the x coordinates are within 100 pixels and if the y coordinates are within 100 pixels.
To create this sketch:
Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save your sketch as lab5a.
Start with the part(s) that don't involve making choices: an animated ellipse which starts in the center of the window. (Don't include the update part of animation variables yet, though, since how — or if — the ellipse's position changes involves making choices.)
Next, update the ellipse's position. Since the horizontal and vertical directions can be considered separately, start with just the horizontal movement. Ask yourself the conditionals questions below, write the answers in comments in your sketch (similar to what was done for the examples in class), and add the corresponding code/code structure for each as you go.
Can how to move the ellipse be determined from a
snapshot? (Is what to do based on system variables and/or
animation variables?)
[Yes, this is an on-the-spot decision.]
How many alternatives are there for what happens? Is do nothing a possibility? This tells you which flavor of if is needed — add the right template to your sketch.
What are the alternatives? This tells you the body of each case of the if — fill in the code for each of the ways the ellipse's position can be updated.
How do you decide which alternative to do? This tells you the conditions for each case of the if. Fill them in.
Repeat the previous step for the vertical movement. Since this is a separate decision with a separate set of alternatives, you will need a second if statement after the first.
The goal in this exercise is to create a sketch named lab5b where a small ellipse starts in the center of the drawing window, moving right. There are two situations in which the ellipse's direction can change:
Clicking the mouse — each click changes the direction once following the sequence right to down to left to up to right and so forth.
When the ellipse reaches the edge of the window — if it is moving right and reaches the right edge of the window, it should start moving down instead of continuing to go right; if it is moving down and reaches the bottom edge of the window, it should start moving left instead of continuing to go down; and so forth.
To create this sketch:
Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save your sketch as lab5b.
Start with the part(s) that don't involve making choices: an animated ellipse which starts in the center of the window and moves right.
Next, handle the changes of direction resulting from the mouse clicks. Ask yourself the conditionals questions below, write the answers in comments in your sketch (similar to what was done for the examples in class), and add the corresponding code/code structure for each as you go.
Can how to move the ellipse be determined from a
snapshot? (Is what to do based on system variables and/or
animation variables?)
[No, the direction changes when the mouse is clicked so the
current direction depends on what has happened in the
past.]
How many alternatives (including "do nothing") are there for what happens? This tells you the type for the state variable.
What are the alternatives for? This tells you the name for the state variable. Add the variable declaration.
What are the alternatives? Decide on which value of the state variable corresponds to which alternative and add a comment to your state variable declaration with this information.
Which alternative do we start with? Initialize the state variable accordingly.
Use the state variable — write an if statement with a case for each value of the state variable and the corresponding alternative in the body of each case.
For each alternative, what triggers a change to doing that alternative? Write an if statement with a case for each value of the state variable — the condition captures what triggers that change and the body of the case sets the state variable accordingly. Keep in mind that for mouse clicks, the "when the mouse is clicked" part of the trigger is accomplished by where the if statement is written rather than something included in the conditions of the if.
To handle the changes of direction resulting from the ellipse reaching an edge of the window, observe that this only adds a new set of circumstances that trigger a change of direction — we're still dealing with which direction the ellipse is moving. That means you only need to consider the last step:
For each alternative, what triggers a change to doing
that alternative? Write an if statement with a
case for each value of the state variable — the
condition captures what triggers that change and the body of
the case sets the state variable accordingly. (Since this
doesn't involve mouse clicks, this if will go
in draw(), typically at the end — it's part
of "update for the next frame" and a convention for that is
to update the state variables after updating the animation
variables.
Hint: as seen in the "rect moving right and left" example
from class, it is better to think of and write "reaching a
specific point" conditions as "reaching or going beyond a
specific point". This is because an animation is a series
of frames and motion isn't actually continuous —
the position jumps from one value to the next and so might
be updated from just before the specific point to just
after.
Create a sketch named lab5c which contains an ellipse that starts at the bottom center of the window and moves upward whenever the mouse is moving. The ellipse's position should reset to the bottom when it goes off the top of the window. Clicking the mouse should stop the ellipse — after a click, the ellipse shouldn't move any more, even if the mouse is moved or clicked again.
The system variables pmouseX and pmouseY contain the mouse's previous position — you can determine if the mouse is moving by checking whether the current position is different from the previous position.
To create this sketch, follow a procedure similar to the previous exercises: start with the parts that don't involve making choices (an animated ellipse starting at the bottom center of the window), then work on the elements involve making choices one at a time — first consider the upward movement of the ellipse, then handle resetting at the bottom when it moves off the top of the window, and finally handle the mouse clicks. For each, go through the conditionals questions, starting with determining whether it is an on-the-spot decision or a state machine.
Create an interactive and/or animated sketch of your own design. (Name this sketch lab5d.) What the sketch depicts is up to you (here's a chance to be creative!) but for full credit it must include the following required elements:
While the scene as a whole must be original and created by you for this exercise, you can reuse elements from class or other exercises/labs. This means that cars, trees, snowmen, hot air balloons, etc are fine.
The scene must be recognizable as something, meaning that shapes should be deliberately placed and colors deliberately chosen and that the interaction and animation should make sense in the context of the scene.
You must have at least three instances of making choices (*) and they can't all be the same. In particular, you must have:
At least one on-the-spot decision and at least one state machine.
At least one involving two alternatives and at least one involving more than two alternatives. ("Do nothing" is a possible alternative.)
At least three different "flavors" of choices being made. For example, #1 involves two instances of making choices — horizontal movement and vertical movement — but only one "flavor" of choice because the only difference between them is the direction of movement. #3 has three flavors — movement, going off the edge of the window, and clicking to toggle. Ask if you aren't sure if something you are considering counts as a separate flavor!
(*) Note that this doesn't mean only three if statements, as one instance of the state machine pattern involves two if statements.
You must have a drawing function for each kind of compound thing (containing three or more shapes), even if there is only one copy of that compound thing in your scene. Use parameters when the copies vary in some way (position, size, color, etc) rather than creating separate functions for each copy. In addition, each function must have a descriptive name related to its purpose and a comment immediately before the function describing the purpose of the function and what each of its parameters are for.
As with all sketches, your name and a description of what your scene is a picture of must be included in a comment at the beginning of the sketch and your code must be properly formatted. (Use auto-format!)
You can earn extra credit by going substantially beyond the required elements. Add to your sketch for #4 and include a brief description of what you've done for extra credit in a comment at the beginning of your sketch. Some possibilities:
Go above and beyond with an elaborate scene and more conditionals.
Make use of the mousePressed and/or mouseButton system variables (note, not the mousePressed() function!) mentioned in section 4.5 to do things only while the mouse button is being held down or when a particular mouse button is clicked. Look them up in the Processing API for more information.
Incorporate key presses, with different things happening when different keys are pressed. See the Processing API for more information on the keyPressed() function and the key system variable, which you'll need for figuring out which key was pressed.
Make use of a parameter of type boolean in a drawing function. For example, you might have a drawing function that draws a car with headlights on the front end. If you then have two cars in the scene, one pointing left and one pointing right, the function should have a boolean parameter whose value specifies pointing left or pointing right instead of creating a left-pointing car-drawing function and a separate right-pointing car-drawing function. Another option is an element that is sometimes present and sometimes not e.g. a boolean parameter to a hot air balloon drawing function could specify whether to show the flame in the burner or not. Include at least two instances of the thing your function draws in your sketch to demonstrate both values of the boolean parameter, or have that property be animated or interactive in some way — the idea is that it should be possible to see each alternative at some point.
Have an action which only repeats a fixed number of times. For example, in #3, have the ellipse reset to the bottom five times but the sixth time it just disappears off the top. (Implement something like this as part of #4, don't change your sketch for #3.)