Week 4-A Movement Using If Statements
The steps below walk you through the Processing activity we did during Week 4. All code should allow you to copy and paste.
Step 1: Create a Canvas and Player
Create a canvas in setup() and a "player" that will move - I'm using a square here.
Output when played:
You'll notice that the square isn't in the center.
Why?
The default mode for rectangles/squares in Processing puts the origin at the top left. To put it in the center, we need to change the rectMode() before we draw the rectangle.
Output when played:
Step 2: Use Variables Instead of Values
We'll be using the coordinates and the size of the player square in other code, so let's put the values in reusable variables.
Step 3: Adding Interaction
Processing has a built-in function called keyPressed() that runs when a key is pressed on the keyboard. The key that is pressed gets stored as a char type (like a one-character string).
Copy and paste the rect() code into a keyPressed() function outside and after the setup() function.
Let's add movement.
If you want to move the square up, you want to draw it at a y coordinate that's less than the frame before. So before you draw the square, update y.
Since this new function draws a rectangle, we need a draw() function. Let's put it between the setup() and keyPressed().
Here is the full code so far:
Output when played:
This movement will happen with any key.
As you can see, only the square is being drawn over itself.
To make it look like the square is moving instead of being redrawn, add code to draw a background prior to the square in both setup() and keyPressed(). Here, the background is black:
Output when played:
Step 4: Refining Movement
First, let's put the value that we are moving y to its own variable, speed. This way, the amount of movement can be updated once instead of for each direction of movement.
Now, we can start using an if statement to tell the program to run the code to change the y value ONLY when the 'w' key is pressed.
In all cases, we want the background and square drawn, so it stays outside of the if statement block.
Since the key pressed is stored as the built-in variable named key, lets compare key to 'w' to see if it matches. If it does, we want the code to run.
key is a char type variable. It's one of the few times when you MUST use single quotes for the 'w' (comparison value).
Output when played (keys pressed added to the graphic):
Step 5: Add Other Directions
Copy and paste the if statement or practice typing the if statement and update the comparison value (checking what key to match) and changing the direction y will change.
Copy and paste the two if statements or practice typing them and update the axis and the comparison value (checking what key to match).
Step 6: Get It Working for Lower and Upper Case
Right now, this code only works when the CAPSLOCK is off. To avoid errors, let's say to also run the code with the upper case of each.
We can add a second "test" to the if statements with the logical operator, OR, which is written as "pipes" or || between the tests.
With OR, only one of the tests have to be true for the code to run.
Full Code
Output when played (keys pressed added to the graphic):
Last updated