Partnership for Integration of Computation into Undergraduate Physics

### Exercise 1: Creating an account Go to [http://www.glowscript.org/](http://www.glowscript.org/) and create an account. You will need a Google account because GlowScript uses your Google account for authentication. After logging in, you will see a link to "your programs are here." Click this link to enter the IDE. ### Exercise 2: Creating folders and files 1. Once you log in and follow the link to your programs, you are in the GlowScript IDE. Click the  tab to create a new folder. A pop-up window appears as shown below.  Depending on whether you want to share your program with others, mark it public or private by checking or unchecking the "Public" checkbox. 2. With the folder name highlighted orange (showing you are in the folder), click the link *Create New Program* and name the program "intro" or something appropriate. ### Exercise 3: Starting a program: Setup statements 1. Notice that GlowScript includes the first line of the program for you. ```python GlowScript 2.1 VPython ``` Every GlowScript program begins with this setup statement. It tells GlowScript you are writing VPython code. The version number (2.1 in this case) is included to ensure that older programs will continue to run without errors, even if GlowScript is updated to newer versions. 2. Also, notice there is no "save" menu. Like Google Docs, GlowScript automatically saves your program as you are typing it. ### Exercise 4: Creating an object and controlling the scene 1. As your first VPython command, let's make a sphere. Skip a line in order to make your code more readable, and on line 3, type: ```python sphere() ``` This statement tells the computer to create a sphere object. 2. Run the program by clicking *Run this program*. GlowScript exits the edit mode and enters the run mode. You should see a white sphere on a black background like shown below. This is called the *scene*.  By default the sphere is at the center of the scene, and the *camera* (your point of view) is looking directly at the center. 3. If you are on a PC or have a two-button mouse, hold down both mouse buttons and move the mouse forward and backward to make the camera move closer or farther away from the center of the scene. On a Mac, hold down the option key and mouse button while moving the mouse forward and backward. This is how you *zoom* in VPython. A scroll wheel also zooms in and out. 4. Hold down the right mouse button alone and move the mouse to make the camera revolve around the scene, while always looking at the center. On a Mac, in order to rotate the view, hold down the Control key while you click and drag the mouse. This is how you *rotate* the scene in VPython. (Technically, it's the camera that is rotating.) Because this is a sphere, you won't notice a significant change except for lighting. By default, when you first run the program, the coordinate system is defined with the positive x direction to the right, the positive y direction pointing up toward the top edge of the monitor, and the positive z direction coming out of the screen toward you. You can then rotate the camera view to make these axes point in other directions relative to the camera. ### Exercise 5: Error messages: Making and fixing an error GlowScript tells you when there is a syntax error in your program. (Logic errors are much more difficult to fix!) To see an example of an error message, let's try making a spelling mistake. 1. Click **Edit** to return to editing mode, and change line 3 of the program to the following: ```python phere() ``` 2. Run the program. There is no function or object in VPython called ``phere()``. As a result, an error message pops up. The message gives the *approximate* line number where the error occurred and a description of the error, as shown below.  The line number may be off but is usually close. 3. Correct the error in the program by clicking **Edit this program** and returning to the editor. Once in editing mode, you can click the X to close the error message. There are two types of errors: (1) syntax errors which might be a typing or coding mistake and (2) programmatic errors so the program runs correctly but does something other than what you intended. The error message helps you find the first of these. Finding errors that cause a program to act differently than you intended is much more difficult and is a skill you will develop. ### Exercise 6: Changing attributes (position, size, color, shape, etc.) of an object Now let's give the sphere a different position in space and a radius. 1. Change line 3 of the program to the following: ```python sphere(pos=vector(-5,2,3), radius=0.40, color=color.red) ``` 2. Run the program. Experiment with other changes to ``pos``, ``radius``, and ``color``. Run the program each time you change an attribute. 3. Answer the following questions: 1. What does changing the ``pos`` attribute of a sphere do? 2. What does changing the ``radius`` attribute of a sphere do? 3. What does changing the ``color`` attribute of a sphere do? What colors can you use? You can try ``color=vector(1,0.5,0)`` for example. The numbers stand for RGB (Red, Green, Blue) and each color can have values between 0 and 1. Can you make a purple sphere? Note that colors such as cyan, yellow, and magenta are defined, but not all possible colors are defined. Choose random numbers between 0 and 1 for each color (Red, Green, Blue) and see what you get. ### Autoscaling and units VPython automatically zooms the camera in or out so all objects appear in the window. Because of this autoscaling, the numbers for the ``pos`` and ``radius`` can be in any consistent set of units, like meters, centimeters, inches, etc. For example, this could represent a sphere with a radius 0.20 m at the position $<2,4,0>$ m. ### Exercise 7: Creating a box object Another object we will often create is a box. A box is defined by its position, axis, length, width, and height as shown below. (from [GlowScript.org](http://www.glowscript.org/docs/VPythonDocs/box.html))  1. Type the following on a new line, then run the program: ```python box(pos=vector(0,0,0), size=vector(2,1,0.5), color=color.orange) ``` The length, height, and width of the box are expressed as a vector with the attribute: ``size=vector(L,H,W)``. 2. Do the following: 1. Change the length to 4 and rerun the program. 2. Now change its height and rerun the program. 3. Similarly change its width and position. 4. Which dimension (length, height, or width) should be changed to make a box longer along the y-axis? Change your code now to check your answer. 5. What point does the position of the box refer to? A. the center of the box B. one of its corners C. the center of one of its faces D. some other point ### Exercise 8: Comment lines (lines ignored by the computer) Comment lines start with a \# (pound sign). A comment line can be a note to yourself, such as: ```python # units are meters ``` Or a comment can be used to remove a line of code temporarily, without erasing it. 1. Put a \# at the beginning of the line creating the box, as shown below. ```python #box(pos=vector(0,0,0), size=vector(2,1,0.5), color=color.orange) ``` 2. Run the program. What did you observe? 3. Uncomment this line by deleting the \# and run the program again. The box now appears. ### Exercise 9: Naming objects; Using object names and attributes We will draw a tennis court and will change the position of a tennis ball. 1. Clean up your program so it contains only the following objects: 1. A green box that represents a tennis court. Make it 78 ft long, 4 ft tall, 36 ft wide. Place its center at the origin. 2. An orange sphere (representing a tennis ball) at location $<-28,5,8>$ ft, with radius 1 ft. Of course a tennis ball is much smaller than this in real life, but we have to make it big enough to see it clearly in the scene. Sometimes we use unphysical sizes just to make the scene pretty. (Remember, you don't type the units into your program. But rather, you should use a consistent set of units and know what they are. In this case it is feet.) 2. Run your program and verify that it looks as expected. Use your mouse to rotate the scene so you can see the ball relative to the court. Your program should look like the one below. ```python GlowScript 2.1 VPython box(pos=vector(0,0,0), size=vector(78,4,36), color=color.green) sphere(pos=vector(-28, 5, 8), radius=1, color=color.orange) ``` 3. Change the position of the tennis ball to $<0,6,0>$ ft. 4. Run the program. 5. Sometimes we want to change the position of the ball after we defined it. Thus, give a name to the sphere by changing the ```sphere``` statement in the program to the following: ```python tennisball=sphere(pos=vector(0, 6, 0), radius=1, color=color.orange) ``` We've now given a name to the sphere. We can use this name later in the program to refer to the sphere. Furthermore, we can specifically refer to the attributes of the sphere by writing, for example, ``tennisball.pos`` to refer to the tennis ball's position attribute, or ``tennisball.color`` to refer to the tennis ball's color attribute. To see how this works, do the following exercise. 6. Start a new line at the end of your program (perhaps line 7) and type: ```python print(tennisball.pos) ``` 7. Run the program. 8. Look at the text below the 3D scene. The printed vector should be the same as the tennis ball's position. 9. Add a new line to the end of your program (perhaps line 9) and type: ```python tennisball.pos=vector(32,7,-12) ``` When running the program, the ball is first drawn at the original position but is then drawn at the last position. (Note: whenever you set the position of the tennis ball to a new value in your program, the tennis ball will be drawn at that position.) This may happen so quickly that you do not notice the tennis ball drawn at the two locations. 10. Add a new line to the end of your program (perhaps line 11) and type: ```python print(tennisball.pos) ``` (Or just copy and paste your previous print statement.) 11. Run your program. It now draws the ball, prints its position, redraws the ball at a new position, and prints its position again. As a result, you should see the following two lines printed: ``` <0, 6, 0> <32, 7, -12> ``` Of course, this happens faster than your eye can see it which is why printing the values is so useful. ### Exercise 10: Creating a new scene You are going to create objects for the game *Frogger*. You will only use spheres and boxes for this part. 1. Click the link to your username to return to your folders. 2. If necessary, click your subfolder. Create a new blank file and name it something like *Frogger*. 3. Create a green box for the frog that is at the location $<0,-100,0>$, has a length=10, height=10, and width=10 units. Name the box ``frog``. 4. Create a yellow sphere for a lily pad at $<-60,100,0>$ with a radius of 5. Name the sphere ``lilypad``. 6. Create a blue box for the water that is at the location $<0,0,-10>$, has a length=150, height=220, and width=10 units. Name the box ``water``. 7. Rotate the scene. Is the lily pad inside the water or on top of the water? Is the frog inside the water or on top of the water? 8. Is physics used in this program? Why does the frog not move in this program? ### Exercise 11: Adding more objects to your scene 1. Create another yellow sphere for a lily pad at $<60,100,0>$ with a radius of 10. Name the sphere ``lilypad4``. 2. In between these two lily pads, create two more named ``lilypad2`` and ``lilypad3`` so the lily pads are equally spaced. 3. Create a gray road that is exactly half the height of the water. It should extend from the middle of the blue box to the bottom end of the blue box. 4. Create a long cyan box on the left side of the road and a short magenta box on the right side of the road, between the frog and the water. Name them ``car1`` and ``car2``. 5. Print the positions of the cars and the frog. The figure below shows what you should see.  ### Exercise 12: Adding cylinders to your scene 1. In the top right corner of the GlowScript window, click the link to **Help**. This opens the documentation window. Click the menu to **Choose a 3D object** and view the list of objects shown below.  2. Select the cylinder and read how to create a cylinder. 3. Change the lily pads so they are thin cylinders that appear to float on top of the water. 4. Use the cylinder object to create 3 logs of different lengths in the water. 5. Now, click the menu to **Work with 3D objects** in the documentation and select **Materials/Textures**. Read how to specify a texture. You will probably want to click the link to the example program that demonstrates the pre-defined textures. 6. Change the three wooden logs so they use the wood texture. The figure below is an example program that fits the criteria for program A.