Motion with Uniform Speed

We are going to animate the motion of two objects. This relies on the theory of kinematics developed by Galileo Galilei. We are going to use pseudocode first, which means we’re going to write out in ordinary words what the code will look like. Here is our pseudocode:

Step 1: Create two objects 
Step 2: Move one of the objects slightly rightward
Step 3: Wait briefly
Step 4: Repeat Steps 2 and 3 over and over (this is called a loop!)

Ok now we are going to say the same thing in GlowScript. There’s going to be a lot of new things in here – don’t panic, we’ll explain everything. Run it and see what happens, then very carefully look through the code. Again, we’ll go through the code line by line after, so don’t worry if it isn’t clear at first.

Web VPython 3.2

# Name <- put your name here
# Date <- put today’s date here


redBall = sphere( color = vec(1,0,0), radius = 0.5 )
greenBall = sphere( color = vec(0,1,0), pos = vec(0,2,0) )

time = 0.0    # this is the starting time
dt = 0.01      # this is the time between each frame of animation
speed = 0.4   # this is the speed of the object in meters per second

while(time < 10.0):
    rate(1/dt)    
    redBall.pos.x = redBall.pos.x + speed * dt
    time = time + dt

Doesn't it look like it is moving smoothly? It isn't - this is stop motion animation! It is moving one step at a time. The steps are just very small.

Let’s look at the code carefully.

redBall = sphere( color = vec(1,0,0), radius = 0.5 )
greenBall = sphere( color = vec(0,1,0), pos = vec(0,2,0) )

Here we created two separate sphere objects. The first one is red (remember that the color vector tells us the amount of RED, GREEN, and BLUE in the mix). The default radius for a ball is 1.0, so we decided to make the red ball half as big. The second ball is green, and starts a distance of 2 units above the red ball. The red ball is at the default starting position, which is (0,0,0).

time = 0.0    # this is the starting time
dt = 0.01      # this is the time between each frame of animation
speed = 0.4   # this is the speed of the object in meters per second

In these three lines we created variables to represent numbers. These are decimal numbers. The variable dt, which is short for “delta time” or "change in time" is the amount of time that passes between each snapshot of the motion of the ball. We are going to move the ball in 0.01 second increments. This means the ball will move a small amount 100 times each second - much too quickly for us to notice. The third number is the speed of the object, which tells us how far it moves in one second. A bigger number here will make the ball move faster. You can try it and see - you won't break anything!

while(time < 10.0):

In this line, we create a loop. A loop is a set of repeated instructions. Everything that is indented below this line will be repeated over and over and over, as long as the condition of the loop is met. The condition of the loop is that the time is less than 10 seconds. This means the loop will stop executing over and over eventually. This is why the red ball eventually stops.

rate(1/dt)

In this line, we set the rate at which the loop repeats. This is a very important part of programming in Visual Python. A computer is capable of doing things very very quickly, so we are - in essence - slowing it down so that it runs in "real time." The rate method tells you the maximum number of times the loop should run every second. Since we want each repetition of the loop to represent dt = 0.01 seconds, it makes since that we want the rate to be 1/0.01 = 100 loops per second. That will make our animation appear to be in "real time."

redBall.pos.x = redBall.pos.x + speed * dt

In this we actually move the ball by changing its position value. Remember that the pos parameter for the object has three inputs representing the three directions x, y, and z. We can ‘pick’ these out by writing down myBall.pos.x or myBall.pos.y or myBall.pos.z.

Remember that the equal (=) sign means we are setting the thing on the left to refer to the thing on the right. So: we are setting myBall.pos.x to whatever it was at the start of the loop plus the amount speed times dt. In other words, we have moved the ball by the tiny amount speed times dt, which is the speed it is traveling multiplied by the (very brief) amount of time it spent traveling that speed. In this case, we are updating the position by (0.4 meters per second) (0.01 second) = 0.004 meters = 4 millimeters*! Not very far! But remember we do that over and over (100 times every second) so it seems to move pretty quickly. All of our animation will be accomplished in this way.

time = time + dt

In this line, we simply update the time variable by incrementing it by the amount dt. If we didn’t do this, the loop wouldn’t know when to stop! Time started with a value of 0.0. After one loop, time will equal 0.01. After two loops, time will equal 0.02. Eventually it will reach 10.0, and the while condition will be false, and the loop will stop, ending the program (since there is nothing following the loop).

Let's play around to make sure we understand.

Try making the following modification to the speed. Before you hit RUN, predict what you think will happen.

speed = 1.2 # this is the speed of the object in meters per second

What happened?

Now try making the following modification - changing the + sign to a - sign. Before you hit RUN, add a comment to predict what you think will happen. Then add a comment after the line of code to discuss your observation.

redBall.pos.x = redBall.pos.x - speed * dt

Did it work out? Change it back to a + sign when finished.

Now try the following modification, changing the two ‘x’ variables in that line to ‘y’, as shown below. Before you hit RUN, predict what you think will happen.

redBall.pos.x = redBall.pos.x + speed * dt

What happens if you greatly increase the time step? Can we make the motion look more chunky? Try this:

dt = 0.10

The time step is now 10 times bigger, and the loop only runs 10 times per second. The ball still moves the same speed ... but just looks worse.

Previous
Next