Vectors and Objects

In this tutorial you will learn how to use VPython to perform some basic vector operations and to display vectors and other objects in a GlowScript scene.

• Create a new GlowScript program and assign it a name of your choice.
• Use this program to test the commands discussed in the sections below.
• The commands in the gray code boxes can be selected and copied and then pasted into your GlowScript program.

1. Vector Objects in VPython

Vectors in VPython can be created with the vector function. For example, we can create a vector \(\overrightarrow{r_1} = < 8, 6, 0 >\) and assign it to the VPython variable r1 using the command

r1 = vector(8,6,0)

Vector objects in VPython have attributes x, y, and z that are equal to the Cartesian components of the vector. For example, r1.x represents the x-component of the vector r1. We can print the x-component of \(\overrightarrow{r_1}\) using

print(r1.x)

Or we could add some additional information to the display like

print("The x-coordinate of the ball is: ",r1.x)

which produces an output of The x-coordinate of the ball is: 8
The magnitude of the vector \(\overrightarrow{r_1} = < x_1, y_1,z_1>\) is found from its components using

$$r_1 = \sqrt{x_1^2+y_1^2+z_1^2}.$$

In VPython, we can compute the magnitude of our vector r1 and assign it to a variable named r1_magnitude using

r1_magnitude = sqrt(r1.x**2 + r1.y**2 + r1.z**2)

Notice that the operation of raising a quantity to a power is performed with the double asterisk operator (**), not the caret (^) that you might expect.

There is also a built in function that is a bit easier to use called mag that will compute the magnitude of a vector.

r1_magnitude = mag(r1)

The direction of a vector can be represented by a unit vector. We know that a unit vector in the direction of \(\overrightarrow{r_1}\) is obtained by dividing the vector by its magnitude

$$\hat r_1 = \frac{\overrightarrow{r_1}}{r_1}$$

We can compute a unit vector in VPython and assign it to a variable named r1_direction using

r1_direction = r1/mag(r1)

There is a built in function called norm that accomplishes the same task, by normalizing the vector to have a length of 1. So, an equivalent method to find a unit vector is

r1_direction = norm(r1)

Finally, now that we know the magnitude and direction of the vector, the following statement will print out the vector, first in normal component notation and then as a magnitude times a unit vector

print("r1 = ", r1, " = ", r1_magnitude, r1_direction)

which would produce an output of r1 = < 8, 6, 0 > = 10 < 0.8, 0.6, 0 >

Another site that can host GlowScript VPython programs is trinket.io.  Trinkets are small modules that allow you to run and write code in any browser, on any device.  Trinkets work instantly, with no need to log in, download plugins, or install software.  We will use some trinkets occasionally in these tutorials to allow you to experiment with code without having to write a new program at glowscript.org.

Review the code in the trinket below and see if you can predict the output.  Then run the trinket by pressing the run button which looks like a PLAY button.  The output will appear in the window to the right.

Try changing the program in some of the following ways.

• change the components of the vector to any values of your choosing,
• add lines to also print the y and z components of the vector,
• change the line where the magnitude of the vector is computed to use the mag function,
• change the line where the direction of the vector is computed to use the norm (or hat) function instead.

2. Displaying an Object

We can use VPython to draw a variety of different shaped objects including spheres, boxes, and cylinders just to name a few.  When we create an object we can set its attributes to control things like its position, color, size, etc.  We can also assign that object to a variable name so that we can refer to the object later.

• Add the following command to your program create a red sphere named ball1 at the location of \(\overrightarrow{r_1}\).

ball1 = sphere(pos=r1, color=color.red, radius=1)

• Notice the location of the center of the sphere is set by assigning a vector to the pos attribute (in this case we set it to r1) and the size is set using the radius attribute.
• When you run the program you should see a red sphere with a radius of 1 unit at position <8,6,0> on the display.

• Notice that with just a single object in the scene it is challenging to be able to visualize the actual location of the object. Even if you rotate the display you cannot be certain that the sphere is in the x,y plane.

3. Setup Coordinate System

In order to make it easier to visualize the relationships between the locations of objects that we will be placing in the GlowScript output window (called the “scene”) we can draw a set of coordinate axes.  We will use an object called a “cylinder” to draw each of the x, y, and z axes.

• Copy the code below and paste it into the GlowScript editor window above your definition of r1 and ball1. (Don’t worry about the complexity of this code for now, we just need it in place to be able to view the coordinate axes.)

# Set up the size of the scene
scene.width = 600
scene.height = 600
 
# Define the parameters for the coordinate axes
a_length = 10         # Each axis will range from - to + of this value
a_color = color.white # Set the color for the coordinate axes here
a_radius = 0.1        # Set the radius of the axes here
 
# Display a set of coordinate axes using narrow cylinders
xaxis=cylinder(color=a_color, pos=vector(-a_length,0,0), axis=vector(2*a_length,0,0), radius=a_radius)
yaxis=cylinder(color=a_color, pos=vector(0,-a_length,0), axis=vector(0,2*a_length,0), radius=a_radius)
zaxis=cylinder(color=a_color, pos=vector(0,0,-a_length), axis=vector(0,0,2*a_length), radius=a_radius)

# Display a label at the end of the positive side of each axis
xlbl=label(pos=vector(1.1*a_length,0,0), text="+X", color=a_color, height=20, box=0)
ylbl=label(pos=vector(0,1.1*a_length,0), text="+Y", color=a_color, height=20, box=0)
zlbl=label(pos=vector(0,0,1.1*a_length), text="+Z", color=a_color, height=20, box=0)

• When you run the program you should see a simple Cartesian coordinate system along with the red sphere as shown below.
• Notice that the initial orientation has the positive x-axis to the right, the positive-y axis upward, and the positive z-axis out of the screen.
• You can use gestures to rotate or zoom the coordinate system on the output of your program.

• Now, it should be clear that the position of the ball, which is at \(\overrightarrow{r_1} = < 8, 6, 0>\), is in quadrant I of the \(x,y\) plane. Rotate the scene to be sure.
• Try reassigning r1 to a new location and make sure that it appears on the display in the location that you expect.

4. Draw a Vector

We can use an object in vPython called an arrow to represent a vector. The pos attribute of an arrow sets the location of the tail of the vector. The axis attribute represents the Cartesian components of the vector. Thus, the tip or arrow of the vector will be at a position of pos + axis.

• Add the following line of code to your program to draw a red position vector from the origin to the location of the red ball.

arrow1 = arrow(pos=vector(0,0,0), axis=ball1.pos, color=color.red, shaftwidth=0.5)

• Notice that the pos attribute for the arrow is set to the origin which means that the tail of the arrow will start from there.
• The axis attribute of the arrow was set to the position of the red ball by referencing its position using ball1.pos. We could have set the axis to vector(8,6,0) but with this method if we change the position of the ball then the arrow’s tip will also change.