Velocity
To start with, let’s review some code from the last lesson:
def setup(): size(600, 600) x = 0 def draw(): background(0,0,0) global x rect(x, 20, 15, 15) x = x + 5
Here, we have the code we wrote last lesson to make a square move across the screen. You can paste that code into your window and test it.
Now, let’s look at an example that is very similar, but with a slight tweak:
def setup():
size(600, 600)
x = 0
velocity = 5
def draw():
background(0,0,0)
global x, velocity
rect(x, 20, 15, 15)
x = x + velocity
Is this any different? Using the velocity variable instead of automatically adding 5 to x actually doesn’t cause your code to run any differently at the moment. However, it will become clear why this is useful soon.
Try messing with the value of the velocity variable. If you make the value much higher than 5, you might see something like this:
On the other hand, if you make the velocity variable negative and x start as 500? You end up with something like this:
Exercises
Exercise 1
You may remember doing this in the last lesson, but this time we’re going to try it with using variables. See if you can modify your existing code to make the square move diagonally using variables for the velocity.
Hint 1: It may be helpful to use two variables rather than one for velocity here.
Once you’ve done that, see if you can mess with each of the velocities to make the square move at different angles. You may have also done this in the last lesson in a challenge exercise, but this time, you’ll be using variables to control the angle, instead of just numbers.
Challenge Exercises
Exercise 1
Lets make two rectangles that each move in opposite directions. Start with the code below.
def setup():
size(600, 600)
x1 = 0
y1 = 0
x2 = 585
y2 = 585
def draw():
global x1, y1, x2, y2
background(0,0,0)
fill(255,0,0)
rect(x1, y1, 15, 15)
fill(0,0,255)
rect(x2,y2,15,15)
At the moment, the squares won’t be moving. See if you can write code so that the two squares move in toward each other like this. Remember to use variables for the velocity values.
Once you get that, try modifying the velocities to have them each go in different angles – like this:
Collision
One important part of a lot of games is having objects behave differently when they collide with a wall. Some games may even have objects behave differently when they collide with other objects.
Here is some code that will get a ball to move to the right continuously.
def setup():
size(600, 600)
x = 50
y = 50
velocity = 5
def draw():
background(0,0,0)
global x, y, velocity
ellipse(x,y,20,20)
x = x + velocity
What if we wanted the ball to stop when it hits the wall?
Try modifying your code to look like this instead.
def setup():
size(600, 600)
x = 50
y = 50
velocity = 5
def draw():
background(0,0,0)
global x, y, velocity
ellipse(x,y,20,20)
if x + 10 >= 600:
velocity = 0
x = x + velocity
You’ll notice the only difference with this code is this if statement:
if x + 10 >= 600:
velocity = 0
Here, the computer checks if the edge of the circle is up to the edge of the wall (which is when its x coordinate is greater than or equal 600 since we set the width of the window as 600), and assigns the velocity variable the value 0 when this happens, which stops the ball.
>= in computer science means “greater than or equal to”.
Remember that the x coordinate of the ellipse represents the middle of the circle. We have to add 10 to x the if statement to make sure that we’re checking the edge of the circle rather than the middle of it.
Feel free to talk this over with another student or mentor.
Now let’s try modifying the code so that the ball reverses direction instead of stopping. Try changing the if statement to look like this:
if x + 10 >= 600:
velocity = -5
This assigns the velocity variable the value -5 when the edge of the ball hits the right wall. Now when you run it, you should see the ball bounce off the right wall.
Exercises
Exercise 1
What if we want it to also be able to bounce off the other wall so that it looks something like this?
see if you can add to your existing code to make this happen.
Hint 1: If the right side of the wall has an x coordinate of 600, what would the left side be?
Exercise 2
Next let’s modify our code so that the ball moves up and down in addition to left and right. You should be able to do this using the same code you did in the earlier exercise when we made the ball move diagonally.
Now, see if you can modify the code so that the ball bounces off the top and the bottom as well – like this:
Challenge Exercises
Exercise 1
What if we want to make the bounce pattern unpredictable? Let’s randomize it! Do you remember how to make things random? See if you can make the speed/direction change randomly when the ball hits the wall.
Exercise 2
Make the ball change color every time it bounces.
Hint 1: The fill function and the random function first introduced in Lesson 1: Drawing will be helpful again here.
Exercise 3
Make the ball stop bouncing after 10 bounces.
Hint 1: Can you create a variable to count the number of bounces? Under what condition would you want to add to this variable?
Exercise 4
When you press a key, change the velocity.
Hint 1: It may be helpful to review the Keyboard Events section from Lesson 2: Events and Movement.