PH 211 Vpython Introduction Tutorial
Adapted from Byron Philhour
GlowScript is a programming environment that allows us to make web-based 3D models. We’ll be using a Python-based package called Visual Python (or VPython) designed for physics education instruction. When coding in Visual Python in GlowScript, you’ll find that the environment takes care of all the beautiful 3D lighting and objects, letting you focus on the laws of physics directly. It’s a lot of fun.
You will learn some elements of Python and basic coding principles on a need-to-know basis. If you’d like a more formal introduction to the language, please check out – and perhaps bookmark – Python for Everybody by Charles Severance. As we introduce new coding concepts throughout this course, I’ll include links to relevant chapters of this text. The best way to learn a language is to have an achievable task you want to accomplish, so I’ll offer mini-projects for you to complete at the conclusion of each section.
Goal
Learn basic VPython coding skills to setup a program to model projectile motion. This tutorial will cover the basic and get us to a point where we can model our projectile motion lab.
Setup Instructions
- Go to glowscript.org and create a new account.
- Access your personal “programs” area.
- Create a new folder named PH211 by selecting the “Add Folder” tab.
- When you create new programs, you will create them in the PH211 folder. You must select the PH211 folder prior to selecting “Create New Program.”
First Program Instructions
Create your first program in your PH211 folder in glowscript. Name the program “my first program.”
Below is the code you should type in. After you have typed in the code below, select “Run this program.” You should see a white sphere.
Web VPython 3.2
# My First Program
# YOUR NAME HERE
# TODAY's DATE HERE
# these 'hashtag' statements are ignored
myBall = sphere()
You’ll see in my code there were a few lines with # symbols, these are comments.
A comment is any writing that is ignored by the computer and is just a way of communicating a message to other people reading your code. Writing good comments for others is an essential part of coding. All comments begin with a # sign.
There are just two “real” lines of code above, ignoring these comments. The first line of code reads:
Web VPython 3.2
This line must be at the start of all of our GlowScript programs. The only real piece of code in our sample above is as follows:
myBall = sphere()
This line is powerful.
In the line above, sphere() is a class. A class is like a template. myBall is an object – an instance – of the sphere() class. An analogy would be that you are an instance of the student() class. Or the pencil you are holding is an instance of the pencil() class. In computer programming the equal sign has a special meaning. It does NOT mean, as it does in math, that the two sides of the equation are the same. What it means in this line above is we are SETTING the item on the left to REFER TO the item on the right. So myBall is a variable name referring to a new sphere() object we have created.
Now let’s do something more interesting. We are going to edit (i.e., replace) our one line of real code so that it is a bit more complex. Replace the main line of code with the following.
myBall = sphere ( color = vec(1,0,0))The spaces between the symbols don’t really matter in the example, I just added them for clarity.
So, what we’ve done is add a parameter in the creation of our myBall object from the sphere() class. The color parameter must always be set as a vector object (vec for short). A vector in GlowScript always has three parameters of its own, all numbers. For the color parameter, the three parameters are the RED, GREEN, and BLUE (RGB) values that make up the ordinary color spectrum. You can adjust the values of these to make any color you want. The numbers don’t have to be 1 or 0 – you could set them to anything. The basic colors formed from just using 1s and 0s are shown here:
Web VPython 3.2
# My First Program
# YOUR NAME HERE
# TODAY's DATE HERE
# these 'hashtag' statements are ignored
myBall = sphere ( color = vec(1,0,0))
A parameter is a value that tells us about how our object differs from other objects from the same class. In this case the parameter we are adjusting is color – there are also other parameters we will adjust later on, such as the radius of the ball.
To do: choose your favorite color for myBall from the list of eight above and make the ball that color. Don’t worry, you can’t break anything. Hint: just adjust the three parameters in the vec declaration for the color object.
What do you think will happen when we modify the code as follows? Try it and see! Hit RUN several times to see the full effect.
myBall = sphere( color = vec( random(), random(), random()))(Note: it is VERY easy to misplace parentheses when typing in the code above – be careful! Look to see what each parentheses is matched with.)
Here are some common parameters for a sphere:
- sphere(pos=vec(0, 0, 0), radius=2, color=vec(0,1,1))
- pos(vector) – position of center. Default <0,0,0>.
- radius (scalar) – Default 1.
- color (vector) – Default color.white
- size (vector) – Dimensions of a box surrounding the sphere. Default <2,2,2>.
- axis (vector) – Default <1,0,0>
Ok let’s make it even more interesting. We’re going to go back and make our declaration of our myBall object fancier by adding the pos and radius parameters.
Web VPython 3.2
# My first GlowScript program
# Name <- replace with your name
# Date <- replace with the date
myBall = sphere( pos=vec(0,0,0), radius = 2, color = vec(1,0,0) )
To see how the pos parameters works add a second 3D object for a relative comparison. Lets add an object called myArrow defined as an arrow class and give it a different position.
Web VPython 3.2
# My first GlowScript program
# Name <- replace with your name
# Date <- replace with the date
myBall = sphere( pos=vec(0,0,0), radius = 2, color = vec(1,0,0) )
myArrow = arrow( pos=vec(0,4,0))
The arrow we placed has a pos=vec(0,4,0) which means that is it placed 4 units up along the y-axis. The pos parameter controls where a 3D object is placed. Be sure to play around with this parameter, so you understand what it does.
In VPython, the basic coordinate system is shown in the image below.
3D Objects
Go to the VPython documentation to explore the following 3D objects. Choose a few of the following to your code and play around with some of the basic parameters. Place each new 3D object at different locations so they are all visible like the example below.
- Build these 3D objects
- arrow
- box
- cone
- curve
- cylinder
- ellipsoid
- helix
- label
- ring
- sphere
Excellent, nice job. Coding in VPython is easy and we’ll continue to build up our knowledge week by week. Eventually, we will model a projectile fired from a launcher to predict its trajectory and setup a physical experiment to confirm our predictions.
Now we will add some additional parameters to our code.
Web VPython 3.2
# My first GlowScript program
# Name <- replace with your name
# Date <- replace with the date
myBall = sphere( color = vec(1,0,0), radius = 0.5 )
secondBall = sphere( color = vec(0,1,0), pos = vec(0,2,0) )In the code sample above, we have introduced two new parameters for the sphere() class: radius and pos (short for position). The first will set the radius of myBall. This means that the secondBall must have some sort of default radius since it isn’t specified. The default radius appears to be 1.0, since secondBall looks about twice as big as myBall. The parameter pos specifies the position of the ball in an (x, y, z) coordinate system. In this case, secondBall is 2 units away from myBall in the y-direction.
Notice that when naming variables we have used what’s known as camelCase notation - the first letter in the object name is lowercase, but then each word after that is uppercase. You aren’t required by GlowScript to do this, but it is common practice.
Since we are interested in doing physics with GlowScript, let’s agree that all radii and positions are measured in meters. To be clear: nothing in the program requires this to be true, it is just a choice we can make so that we are always consistent.
Methods and Parameters
Create a new Glowscript program for our next tutorial. It is a best practice to create new programs when starting new projects. From now on, create a new program from scratch for each new activity. All your programs will be saved in your Glowscript folders.
In the last section, I'm sure you noticed we use a lot of parentheses in Python programming. Any time you see two parentheses, (), this means a method is being “called.” A method can be thought of as an action. For example, the sphere() method is the action that creates a sphere object. Creation of a sphere, in this example, is the action we have accomplished with the parentheses. Likewise vec() creates a vec (vector) object.
When you create an object, you can create it with parameters. These parameters describe this unique object. You can also change these parameters later. To access a parameter, you type the object’s name, then a period (“dot”) and then the parameter.
For example, read carefully through the following:
# My Program Name
# YOUR NAME HERE
# TODAY's DATE HERE
# these 'hashtag' statements are ignored
myBall = sphere( )
myBall.color = vec(1, 1, 0)
myBall.radius = 0.5
myBall.pos = vec (0, 0.5, 0)
myCube = box()
myCube.color = vec(1, 0, 1)
myCube.opacity = 0.5As you can see, there are other types of shapes we can make (in this case, a box) and there are other parameters available for manipulation - in the case of opacity, any number less than one makes the object slightly see-through. (And, again, remember that the equal sign in programming means we are setting the thing on the left to the thing on the right - and not the other way around (as true "equality" would indicate). One = sign means "Let THIS refer to THAT" - later we'll see that two == signs is how we check if two things are in fact the same.)
If we don’t want a cube, we can replace the last three lines describing myCube above with the following:
Web VPython 3.2
# Ball & Box
# YOUR NAME HERE
# TODAY's DATE HERE
# these 'hashtag' statements are ignored
myBall = sphere( )
myBall.color = vec(1, 1, 0)
myBall.radius = 0.5
myBall.pos = vec (0, 0.5, 0)
myShoeBox = box()
myShoeBox.color = vec(1, 0, 1)
myShoeBox.opacity = 0.5
myShoeBox.size = vec(2, 1, 1)What do you think the following line of code will do? Add it to the program above to see if you were right.
myPointer = arrow( pos = vec(0,2,0), axis = vec(0,-1,0))What do you think the following code segment will accomplish? Again, add it to your program to see if you were right. Run your program a few times to see for sure.
For these next lines of code, add each of them one at a time. Add a comment to before each line with a prediction of what you think the line of code will do.
Then, run the program to see if your prediction was correct.
Add another comment after the new line of code and state if your prediction was correct. If not, indicate what the line of codes does in this comment.
Do this for each new line of code, so it looks like the following.
Web VPython 3.2
# My First Program
# YOUR NAME HERE
# TODAY's DATE HERE
# these 'hashtag' statements are ignored
myBall = sphere( )
myBall.color = vec(1, 1, 0)
myBall.radius = 0.5
myBall.pos = vec (0, 0.5, 0)
myShoeBox = box()
myShoeBox.color = vec(1, 0, 1)
myShoeBox.opacity = 0.5
myShoeBox.size = vec(2, 1, 1)
myPointer = arrow( pos = vec(0,2,0), axis = vec(0,-1,0))
## Prediction: Creates a new object call myTube that will look like a cylindrical object
myTube = cylinder()
## Observation: A white clyinder was added over the top of the right side of the box. Lines of code to try:
myTube = cylinder()
myTube.pos = vector.random()
myTube.axis = vector.random()
myTube.radius = random()
myTube.color = vector(random(), random(), random())
myTube.opacity = random()
Let’s add a few more lines - what do you think these will do?
print("Position: " + myTube.pos)
print("Color: " + myTube.color)Add them to the program above to see if you were right.
The print statement allows you to write things to the “console” space right underneath the 3D window. Anything in quotes is printed verbatim (with a few exceptions I’ll point out later), and anything added on using the + sign will be converted, if possible, to a text equivalent. In the case of vectors, the three values < x, y, z > are printed.
Congrats! You've now learned the basics of how to use methods and parameters. Right now you probably aren't fully aware of how many methods are "out there" and how many parameters are as well. Don't worry, you'll learn all about that soon! If you feel you need a much more basic and step-by-step introduction, don't forget about Python for Everybody by Charles Severance - Chapter 2 introduces variables.