CSE120 Sp17 Lab 6 - Jumping Monster

Goals

Setup

You will be asked to design your own monster for this assignment. However, to make more effective use of your lab time, you may start early on the rest of the lab by using this default monster. However, your assignment submission MUST be with your custom monster!

Jumping Monster

Step 1: Create Your Monster

Start this assignment with a drawing canvas of width 500 pixels and center your monster in the middle (around an x-position of 250 pixels).

Create your own customized monster -- it should have its own function with parameters to control its position. It should have at least 1 leg and at least 1 eye, but everything else is up to you.

Some inspiration is shown below, but remember this monster should be your very own and not a copy of someone else's. As usual, please sketch your ideas on paper before you start to code, and, if it helps, label some points.

Step 2: Set Up the Pages

If you haven't already set up your window and background color, make sure to clear your background in draw(). Create an int variable at the top of your code named page and initialize it to 0.

Add the code below into your draw() function: 

if (page == 0) {
   // display page 0
   // call your monster function
   // if statement for moving the eye
   rect(50, 50, 100, 100); // remove this after testing
} 
else {
   // display page 1
   // call your monster function
   // if statement for jumping
   ellipse(50, 50, 100, 100); // remove this after testing
}

Step 3: Changing Pages

Add the code below to the bottom of your program: 

void keyPressed() {
   page = 1 - page;
}

When a key is pressed, the value of page variable toggles between 0 and 1. Try it out -- you should see it changing from a rectangle to an ellipse. If it works properly, you can remove the rect and ellipse code from the if-statements.

Step 4: Moving the Eye (Page 0)

We will move the eye left or right based on where the mouse is. We begin by declaring a new float variable, called eye_adjust, initialized to 0. When we change the eye_adjust value in the code, we will change it by 0.5, which is why it must be a float.

Add eye_adjust to the eye's x-position in your monster function. (Before proceeding, temporarily initialize eye_adjust to 10 and to -10, and notice that the eye is looking right or left; then set it back to 0.)

To move the eye requires an if-statement at the start of page 0. These two ifs nudge the ellipses left or right, but not so far as to be wrong, which is why we use min() and max(). You will have to adjust the numbers a bit to customize for your own monster.

  1. Write an if-statement that tests if mouseX is greater than, say 300. If it is greater, set eye_adjust = min(eye_adjust + 0.5, 10);. If not, do nothing.

Test this out by running the code. Start with your mouse in the middle of the drawing canvas and then slowly move it to the right. When does the eye start and stop moving? Make sure you understand how the line of code above accomplishes this.

  1. Write a second if-statement immediately after the first that does an equivalent, but opposite test (i.e. it should handle the eye moving to the left).

Test it out! The eye should move towards the mouse when the mouse is on each side, but it won't move if the mouse is in the "middle range."

Step 5: Smarter Eye Movements (Page 0)

Your monster's eye will always start looking left because the cursor begins at (0,0) by default. So let's have the user's mouse click determine whether the eye should move or not.

To do this, we begin by declaring a boolean variable called look. This variable can only have the value true (allow eye movements) or false (disable eye movements). Which do we want to initialize look with?

As we did in the Events assignment, create a mousePressed() function that will run when the user clicks the mouse. Write the function so that on each mouse click, it changes the value of look (i.e. switch from false to true or vice-versa -- more if-statements!).

Finally, go back and update your if-statements in your page 0 code to only update the eye_adjust when look is true. We accomplish this using the AND operator (&&). Make sure that eye_adjust is only changed when both look is true AND your mouse is in particular ranges.

Step 6: Jumping (Page 1)

These modifications to the program are for page 1. The plan is to make your monster jump. To start, define two integer variables: jump_value, which should be initialized to 0, and step, which should be initialized to a number bigger than 1 -- you decide for your monster.

To make the monster move, change the function for your monster to add jump_value to the y-position for all of the shapes that make up the monster.

At the end of the monster code for page 1, add an if-statement similar to the ones from page 0. You will need to adjust these numbers for your own monster.

Test it out and make sure that the page 1 monster is jumping around.

Step 7: Bending the Knees

Jumping monsters look cooler when they bend their knees while jumping. It's a fact. Currently, your monster's legs move down as much as the rest of the body. But if they instead stopped moving at some point while going down, it would look like the knees were bending! This is another application for min(). If we replaced the y-position of the legs with something similar to min(270+jump_value, 330), then they would stop at 330; again you will have to adjust the numbers for your own monster.

Step 8: Update Behaviors [OPTIONAL]

It is recommended that you work on a separate copy of your monster code so that you don't break your previous work!

If you've played around with your completed monster sufficiently, you may have noticed weird or unrealistic behaviors. Explore a bit and see if you can add to or improve the behavior.

Here are some questions to thought questions to get you started:


Submission