MathJs Tutorial 5: Simulating Constant Velocity

Lesson Objectives and Overview

In this lesson, students will put together what they have learned in the previous lessons and begin simulating motion.

• Students will learn how to give a Particle object a velocity.

• Students will learn how to update the position of a particle based on its velocity.

• Students will learn how to use the function drawArrow() to represent velocity vectors.

In the previous tutorial, you learned that you can get Tychos to do repetitive calculations, updating the values of variables with new values based on the calculations that were performed. In this lesson, you are going to see that you can get Tychos to perform a repetitive calculation to update the position of a particle, and thus simulate motion.

Velocity is a Rate of Change

Let's return to the definition of velocity, which we can use to calculate the change in distance that a particle will experience in a given change in time. Below is the mathematical representation of a particle's velocity in the x dimension:

We can calculate how far the particle will travel during a specific change in time by simply representing the change in position as:

The larger the velocity in the x direction, then the larger the position change for the given interval of time.

We are now going to also state that what is true in the x dimension is true for the y dimension (and the z dimension) as well because space is uniform and we can say that our x or y or z dimensions are really quite arbitrary:

(and )

Because we are working in a 2D space, let's represent our change in 2D space by the matrix :

If our particle's position is given as the vector , then we can calculate the new position of the particle by simply adding the change in position given by :

Let's say that a particle's initial position is [0, 0] and it's position is changing at the rate of 10 meters per second in the x direction and 5 meters per second in the y direction. We want to track the movement of the particle by identifying the position at 0.1 second intervals. The table below shows the particle's position from 0 to 1 second:

We are calculating the position iteratively. As time progresses, we can simply update the postion of the particle for each interval of time that has elapsed - what is called an iteration. An iteration is a small interval or a step in the process. The iteration interval is the amount of time represented by .

Iteratively Updating A Particle's Position in Tychos

Doing these calculations over and over again can seem a bit tedious, and as the interval time shortens, then the number of calculations required grows...

But as you have learned in the previous tutorial, computers are really good at doing these kinds of repetitive calculations. In fact, you can just set up the formula and then have the computer do all the calculations for you.

Click on the link below to open the Tychos scenario in a new broswer tab where you can follow along, or use the embedded frame that contains the scneario below:

MathJs Tutorial - Simulating 2D Constant Velocity

The first thing that you will notice is a green circle object on the screen, located at a position of (50, 50). The code shown below (which is in the in the Initial State pane), is responsible for creating and displaying this circle:

c1 = Circle({pos:[50, 50], radius:5, color:"green"})

Now we want the circle to move, but we have to define the rate at which it is going to move.

Let's say that we wanted to simulate a particle moving along the x axis with a velocity of 10 meters per second:

We can define this velocity as a matrix in code:

v = [10,0]

Now we could use this matrix to conduct some calculations on how to update the position of the particle. We are going to introduce here a method commonly used in many programming languages to associate this velocity to the circle c1. This way we can see that this velocity "belongs" to the circle c1 by giving the particle an attribute.

Change the above line of code so that it now looks like this:

c1.v = [10, 0]

The velocity matrix [10, 0] is now an attribute of the circle, just as the position of the circle is also an attribute that we can access like this:

c1.pos = [0, -50]

If you press the Start button, you will see that the particle does not move yet. This is because Tychos has no idea what velocity is. You have to define how the velocity is going to update the position. This is done in the Calculations pane.

Remember that the simulated world's time is segmented into units called steps. If the step rate is 20 steps per second, then the change in time (or dt) is .05 seconds. So if an object has a velocity of say 10 meters per second, then we need to define how far it would go in .05 seconds. This will be the rate of position change per step.

The change in position is the change in the particle's position for that step, but the velocity is defined as the rate of change per second. Add this line of code to the Calculations pane:

ds = c1.v * dt

In the above code, we are saying that the change in position (ds) will be calculated by multiplying the circle's velocity by the interval time (dt). This will calculate the change in position for this step. It is an identical calculation to the one we defined above, but now just in code:

We can now use this to change the current position of the circle by recalculating the position of the circle every frame. Place this line of code just below the previous line of code, once again in the Calculations Pane:

c1.pos = c1.pos + ds

When you press the Start button you should see the circle move!

Let's see if this makes sense. Because the step rate is 1/20 of a second, which is .05 seconds, and the velocity is [10, 0], then for a single frame, the circle will move 0.5 units (10 x .05 = 0.5) in the x direction. After 2 steps, which is 1/10 of a second, the particle will have moved 1 unit. After 10 steps, which is 1/2 of a second, the circle will have moved 5 units in the x direction. Finally, you should see that after 20 steps, which is 1 second, the particle will have moved 10 units in the x direction. This is precisely what we want. We want the circle to move at 10 units per second along the x direction.

Go back to the Initial State pane and change the circle's velocity:

c1.v = [10, 5]

When you press the Start button, you should see the that the circle is now traveling in a diagonal path - it is now traveling in both the x and y dimensions!

Finally, let's add a vector arrow to represent the veclocity vector of the circle. Add this line of code in the Intial State Pane:

a_v = Arrow({pos:c1.pos, size:c1.v, color: "red"})

And then add these lines of code into the Calculations Pane, at the bottom, below all the other code:

a_v.pos = c1.pos
a_v.size = c1.v

When you play the simulation, you will see an arrow that is moving with the circle, representing the direction and speed that it is traveling in.

Cool! Now its time to work on some goals to see if you actually get it:

• Create a circle called c2 with an initial position of [100, 50]

• Make the circle c2 move so that it returns to the origin after 5 seconds.

• Create a circle called c3 with an initial position of [-70, -100]

• Make the circle c3 move so that its position is [30, 30] afte 5 seconds.

You have successfully simulated objects moving through 2D space at a constant velocity!

Conclusion

You should now be familiar with the following:

• How to repetitively perform a calculation to update a variable's value each step.

• Understand that the variable dt represents the time interval duration for each step.

• Understand that the time in seconds in the simulated universe (virtual time) is the result of the step rate multiplied by the time interval (dt)

• How to change an object's position by:

  • Defining a velocity matrix for the object.

  • Multiplying the velocity matrix by the time interval to get the change in position.

  • Add the change in position to the object's current position in order to update it.

• How to attach velocity vectors to an object in order to visualize the object's velocity.