Lab 6
Making Choices

Due: Fri 10/17 10/24 at the start of class

Introduction

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, next.) 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: on-the-spot decisions, where the decision about which alternative to do is based only on the current value of animation or system variables, and prior happenings, where the decision about which alternative depends on prior events — the current decision is the same as the previous one unless the decision-changing thing has just happened. 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 prior happenings — 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. Prior happenings decisions require the introduction of a state variable in order to remember the current action.

Successfully completing this lab means that you are able to:

• construct sketches using conditionals, including

  • identifying when conditionals are needed
  • identifying the conditionals pattern applicable in a given situation
  • using the conditionals questions to successfully construct if statement(s) to accomplish a task

• work with if statements in Processing, including

  • writing syntatically correct if statements
  • describing the semantics of an if statement (what the code does)
  • using the relational operators ==, !=, <, >, <=, and >=
  • using the logical operators &&, ||, !
  • writing and understanding boolean expressions

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 lab6a, lab6b, lab6c, and lab6d 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 27. (Note that this is delayed a week because of fall break Oct 18-21. The lab is still due Oct 17, however!)

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.

Relational and Logical Operators

You'll need the relational operators ==, !=, <, <=, >, >= to express the conditions under which each alternative is chosen and the logical operators &&, ||, and ! to build up more complicated conditions from individual parts. The relational operators are used throughout sections 5.1-5.7 in the textbook. The logical operators are covered in section 5.4. Check out that section as well as the posted examples, especially if the ideas were new to you when discussed in class on Wednesday.

Prior Happenings and State Variables

The prior happenings pattern requires the introduction of a state variable to keep track of the current alternative. With any variable, it is necessary to declare, initialize, use, and update it.

Declaring a variable requires a type. State variables will be either int (whole numbers) or boolean (true or false), depending on the number of alternatives. Use boolean when there are only two alternatives (such as an ellipse moving up or down) and int when there are more than two.

The state variable keeps track of the current alternative, so its values must correspond to the different possible alternatives. Which value corresponds to which alternative is something that must be decided — and described in a comment along with the variable declaration. For example, in the white-red-blue rect example there are three possible colors for the rectangle (white, red, and blue) so the state variable rectColor is of type int and the values 1, 2, and 3 were chosen to represent white, red, and blue respectively. This choice is important to explain in a comment because it is arbitrary — we could just have easily chosen 3, 2, 1 or 2, 3, 1 or ... to represent the same three colors.

For boolean state variables, also name the variable to indicate what a true value means. For example, for a rect moving right and left, there are two alternatives: moving right and moving left. The state variable is named moveRight with true corresponding to moving right. (Alternatively, it could have been named moveLeft with the convention that true corresponds to moving left.)

Mouse Movement

Exercise #3 involves doing something only when the mouse is moving. You can determine if the mouse is moving by checking whether its current position is different from its previous position. The mouse's previous position can be obtained from the system variables pmouseX and pmouseY.

Exercises

In this exercise you'll create a sketch which works like the example — a small ellipse starts in the center of the drawing window and moves away from the mouse when the mouse comes close. The requirements for your sketch: Name the sketch lab6a. Make the drawing window 400x400. Define "close to the mouse" as "the mouse position is within 100 pixels of the center of the ellipse". 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. 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. 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 lab6a. Start with the basic sketch structure: open a drawing window and clear the background. Complete the Exercise 1 section of the lab 6 worksheet. Complete the sketch: Start with the parts not involving decisions: set up for an animated ellipse that starts in the center of the window but doesn't actually move (yet). Make the ellipse move away from the mouse in the horizontal direction. Slot your answers from the worksheet into the appropriate template as discussed in class. Make the ellipse move away from the mouse in the vertical direction. This will be very similar to the horizontal case and should only involve adding to your code, not changing existing parts.

Your browser does not support the canvas tag.

In this exercise you'll create a sketch which works like the example — a small ellipse starts in the center of the drawing window, moving right. It changes direction (from right to down to left to up to right) when the mouse is clicked and/or it reaches the edge of the window. The requirements for your sketch: Name the sketch lab6b. Make the drawing window 400x400. The ellipse should start in the center of the window and be moving right. The sequence of directions should be right to down to left to up to right and so forth. Clicking the mouse should change the direction of movement according to the sequence. The ellipse should also change direction according to the sequence when it reaches the edge of the window in the direction it is travelling e.g. when the ellipse is travelling right and reaches the right side of the window, it should start travelling down instead. 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 lab6b. Start with the basic sketch structure: open a drawing window and clear the background. Complete the Exercise 2 section of the lab 6 worksheet. Complete the sketch: Start with the parts not involving decisions: set up for an animated ellipse that starts in the center of the window but doesn't actually move (yet). Make the ellipse move right to start and change directions when it reaches an edge of the window. Slot your answers from the worksheet into the appropriate template as discussed in class. Also make the ellipse change direction when the mouse is clicked. This is still part of the same decision (what direction to move the ellipse in) but is handled in the event handler for the mouse click instead of draw() — you'll need another "update" if. Note that this should only involve adding the event handler — you shouldn't need to change anything in draw() or elsewhere in your sketch.

Your browser does not support the canvas tag.

1. In this exercise you'll create a sketch where an ellipse starts at the bottom center of the window and moves upward whenever the mouse is moving. The requirements for your sketch:

   • Name the sketch lab6c.

   • Make the drawing window 200x800.

   • The ellipse should start in the bottom center of the window.

   • The ellipse should move upward (only) when the mouse is moving.

   • The ellipse's position should reset to the bottom of the window when it goes off the top.

   • 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.

   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 lab6c.

   • Start with the basic sketch structure: open a drawing window and clear the background.

   • Complete the Exercise 3 section of the lab 6 worksheet.

   • Complete the sketch:

     • Start with the parts not involving decisions: set up for an animated ellipse that starts at the bottom center of the window but doesn't actually move (yet).

     • Make the ellipse move up when the mouse is moving. Slot your answers from the worksheet into the appropriate template as discussed in class.

     • Make the ellipse's position reset when it moves off the top of the window. Slot your answers from the worksheet into the appropriate template as discussed in class. This should only involve adding to your code, not changing existing parts.

     • Make the ellipse stop moving when the mouse is clicked. Slot your answers from the worksheet into the appropriate template as discussed in class. This should only involve adding to your code, not changing existing parts.

2. 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:

   • Name the sketch lab6d.

   • 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.

   • You must have at least three instances of making choices (*) and they can't all be the same kind of choice. In particular, you must have:

     • At least one instance each of the two conditionals patterns: on-the-spot and prior happenings.

     • At least one decision involving two alternatives and at least one involving more than two alternatives. ("Do nothing" counts as 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 prior happenings pattern involves two if statements.

   • You must use drawing functions and parameters when it is appropriate to do so, and each function must have a descriptive name related to its purpose.

     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 lab6d.

     • Start with the basic sketch structure: open a drawing window and clear the background.

     • Complete the Exercise 4 section of the lab 6 worksheet. It's OK to do this incrementally as you implement your sketch, just be sure to fill in the worksheet before you write code.

     • Build up your sketch bit-by-bit. When you get to something involving a conditional, slot your answers from the worksheet into the appropriate template as discussed in class.

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:

• 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.)

It's OK to add on to your lab6d 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.