02 VPython.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# VPython"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[VPython](http://vpython.org/) is a Python package to teach computational modeling in an introductory physics course.  [Jupyter VPython](https://github.com/BruceSherwood/vpython-jupyter) is based on iVisual by John Coady and is developed and maintained by Bruce Sherwood and Ruth Chabay. \n",
    "\n",
    "You can also run VPython in a browser using [GlowScript](http://www.glowscript.org/) or from an IDE or command line. A blog post by Bruce Sherwood gives the [history of VPython](https://matterandinteractions.wordpress.com/2016/04/27/a-time-line-for-vpython-development/) and recognizes a number of important contributors."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Documentation and Examples"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For complete VPython documentation, go to [glowscript.org](http://www.glowscript.org/docs/VPythonDocs/index.html).\n",
    "\n",
    "GlowScript is a web-based application for writing and running VPython. It uses Google authentication, so it requires a gmail account. Jupyter is a general editor that includes stylized text, mathematical markup, and live code. It works with all Python packages (that have been installed on the server). GlowScript is exclusively for writing and running VPython and is recommended for first-time VPython programmers.\n",
    "\n",
    "You can view [my publicly available VPython programs on GlowScript](http://www.glowscript.org/#/user/Aaron_Titus/folder/My_Programs/) to see more examples."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Import Packages"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Frequently you will import packages that provide additional codebase essential for mathematical and scientific applications. In this case, we want to use the `math` package and `vpython` package."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from math import *\n",
    "from vpython import *"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If running the `import` statments above produces an error, then it is possible you need to install the vpython package. From the command line type:\n",
    "\n",
    "`pip install vpython`\n",
    "\n",
    "You should see a message that it was successfully installed."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create a 3D scene and sphere"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, we will create a 3D scene (including a title) and draw a sphere. The ``canvas()`` function creates the 3D window. The function ``sphere()`` creates a sphere."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"glowscript\" class=\"glowscript\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "window.__context = { glowscript_container: $(\"#glowscript\").removeAttr(\"id\")}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "scene=canvas(title=\"My first 3D scene\")\n",
    "sphere()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By default the sphere is at the center of the scene, and the \"camera\" (your point of view) is looking directly at the center.\n",
    "\n",
    "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.\n",
    "\n",
    "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 revolve around the scene, hold down the Control key while you click and drag the mouse. Because this is a sphere, you won't notice a significant change except for lighting.\n",
    "\n",
    "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."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Position and Other Properties of an Object"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's give the sphere a different position in space, a radius, and a color. Run the program below.  Experiment with  changes to ``pos``, ``radius``, and ``color``. Run the program (shift-enter) each time you change an attribute to see its effect."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"glowscript\" class=\"glowscript\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "window.__context = { glowscript_container: $(\"#glowscript\").removeAttr(\"id\")}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "scene=canvas(title=\"My first 3D scene\")\n",
    "sphere(pos=vector(2,4,0), radius=0.40, color=color.red)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Autoscaling and Units"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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, the previous program could represent a sphere with a radius 0.20 m at the position $(2,4,0)$ m."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creating a Box Object"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Another object we will often create is a box. A box is defined by its position, axis, length, width, and height as shown below.\n",
    "\n",
    "![box](02-files/box.jpg)\n",
    "(image from [VPython Docs](http://www.glowscript.org/docs/VPythonDocs/index.html))\n",
    "\n",
    "Run the following program to create a box. The length, width, and height of the box are expressed as a vector with the attribute: ``size=vector(L,H,W)``  .\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"glowscript\" class=\"glowscript\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "window.__context = { glowscript_container: $(\"#glowscript\").removeAttr(\"id\")}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "scene=canvas(title=\"Create a box\")\n",
    "box(pos=vector(0,0,0), size=vector(10,0.2,0.5), color=color.orange)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Experiment by rotating the box, and zooming in and out. Change its length and re-run the program. Similarly change its height and width and re-run the program to observe the result."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Comments"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Comment lines start with a \\# (called a pound sign or hashtag).  A comment line can be a note to yourself, such as:\n",
    "\n",
    "```python\n",
    "#units are meters\n",
    "```\n",
    "\n",
    "Or a comment can be used to remove a line of code temporarily, without erasing it. Putting a \\# at the beginning of the line creating the box, as shown below, will cause it to not appear.\n",
    "\n",
    "```python\n",
    "#box(pos=vector(0,0,0), size=vector(1,0.2,0.5), color=color.orange)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Checkpoint \\#1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We will draw a tennis court and will change the position of a tennis ball."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In the cell below, there is a code template that creates a scene, a box, and a sphere. Use what you've learned to:\n",
    "\n",
    "1.  Create a box that represents a tennis court. Make it green, 78 ft long, 36 ft wide, and 2 ft tall. Place its center at the origin.\n",
    "\n",
    "- Create 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 objects visible.\n",
    "\n",
    "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. It's a good idea to use a comment line to indicate units.\n",
    "\n",
    "```python\n",
    "\n",
    "# units are ft\n",
    "\n",
    "```\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "#Edit this code to make a green box at the origin, 78 ft long, 36 ft wide, and 2 ft tall.\n",
    "#Create an orange sphere at  <-28,5,8> ft with radius 1 ft.\n",
    "#Use a comment line to remind readers of the units\n",
    "scene=canvas(title=\"tennis court\")\n",
    "box()\n",
    "sphere()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Naming Objects; Using Object Names and Attributes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Sometimes we want to change the position of the ball after we defined it. Thus, give a name to the sphere by adding ``tennisball=`` before the ``sphere()`` statement as shown below.\n",
    "\n",
    "```python\n",
    "tennisball=sphere(pos=vector(-28, 5, 8), radius=1, color=color.orange)\n",
    "```\n",
    "\n",
    "We've now given the name ```tennisball``` 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, run the following cell."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tennisball=sphere(pos=vector(-28, 5, 8), radius=1, color=color.orange)\n",
    "print(tennisball.pos)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can change the ball's position by changing ```tennisball.pos``` to a new vector. Run the following program where the ball's position is changed. The ball is first drawn at the position $<-28, 5, 8>$ and then redrawn at the new position $<0,6,0>$. This happens so quickly that you do not notice the tennis ball drawn at the first location which is why printing the values is so useful."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "scene=canvas(title=\"tennis court\")\n",
    "box(pos=vector(0,0,0), size=vector(78,2,36), color=color.green)\n",
    "tennisball=sphere(pos=vector(-28, 5, 8), radius=1, color=color.orange)\n",
    "print(tennisball.pos)\n",
    "tennisball.pos=vector(0,6,0)\n",
    "print(tennisball.pos)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Motion with Constant Velocity"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In general, every program that models the motion of physical objects has two main parts:\n",
    "\n",
    "1. **Before the loop**: The first part of the program tells the computer to:\n",
    "    1. Create 3D objects.\n",
    "\t- Give them initial positions and velocities.\n",
    "\t- Define numerical values for constants we might need.\n",
    "2. **The ``while`` loop**:  The second part of the program, the loop, contains the lines that the computer reads to tell it how to update the positions of the objects over and over again, making them move on the screen.\n",
    "\n",
    "To learn how to model the motion of an object, we will write a program to model the motion of a steel ball moving with a constant velocity as it rolls across a track.  \n",
    "\n",
    "The track is at the origin and has a length of 3 m, a height of 0.05 m, and a width of 0.1 m. We will make the y-position of the track -0.075 m (below zero). The track's height is 0.05 m. If we add half the height to the center of the track, then the top surface of the track is at -0.05 m. We can place a ball of radius 0.05 m at $y=0$ such that it appears to be on top of the track.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "scene=canvas(title=\"Ball on Track with Constant Velocity\")\n",
    "track=box(pos=vector(0,-0.075,0), size=vector(3,0.05,0.1), color=color.white)\n",
    "ball=sphere(pos=vector(-1.4,0,0), radius=0.05, color=color.orange)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Defining the Velocity of the Ball"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, we will define the velocity of the ball to be to the right with a speed of 0.3 m/s. A unit vector that points to the right is $<1,0,0>$. So, the velocity of the ball can be written on paper as:\n",
    "\n",
    "$$\\vec{v} = |\\vec{v}|\\hat{v} = 0.3<1,0,0>$$\n",
    "\n",
    "Next we will see how to write this in VPython.\n",
    "\n",
    "Just as the position of the ball is referenced as ``ball.pos``, let's define the ball's velocity as ``ball.v`` which indicates that $v$ is a property of the object named ``ball``.  Thus, we will write the ball's velocity as\n",
    "\n",
    "```python\n",
    "\n",
    "ball.v=0.3*vector(1,0,0)\n",
    "\n",
    "```\n",
    "\n",
    "This statement creates a property of the ball  ``ball.v`` that is a vector quantity with a magnitude 0.3 that points to the right.  Whenever you want to refer to the velocity of the ball, you must refer to ``ball.v``. For example, \n",
    "use\n",
    "\n",
    "```python\n",
    "\n",
    "print(ball.v)\n",
    "\n",
    "```\n",
    "\n",
    "to print the ball's velocity."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Defining Values for Other Constants and Variables"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To make an object move, we will update its position every $\\Delta t$ seconds. In general, $\\Delta t$ should be small enough such that the displacement of the object is small. The size of $\\Delta t$ also affects the speed at which your program runs. If it is exceedingly small, then the computer has to do lots of calculations just to make your object move across your screen. This will slow down the computer.\n",
    "\n",
    "For now, let's use 1 hundredth of a second as the time step, $\\Delta t$. Let's define a variable $dt$ for the time interval.\n",
    "\n",
    "```python\n",
    "dt=0.01\n",
    "```\n",
    "\n",
    "Also, let's define the total time $t$ for the clock. The clock starts out at $t=0$.\n",
    "\n",
    "```python\n",
    "\n",
    "t=0\n",
    "\n",
    "```\n",
    "\n",
    "That completes the first part of the program which tells the computer to:\n",
    "\n",
    "1. Create the 3D objects and name them.\n",
    "- Give the ball an initial position and velocity.\n",
    "- Define variable names for the clock reading $t$ and the time interval $dt$.\n",
    "\n",
    "Run the program below. Note that the ball doesn't move because we have not added a loop to change its position.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "scene=canvas(title=\"Ball on Track with Constant Velocity\")\n",
    "track=box(pos=vector(0,-0.075,0), size=vector(3,0.05,0.1), color=color.white)\n",
    "ball=sphere(pos=vector(-1.4,0,0), radius=0.05, color=color.orange)\n",
    "\n",
    "ball.v=0.3*vector(1,0,0)\n",
    "\n",
    "print(ball.v)\n",
    "\n",
    "dt=0.01\n",
    "t=0\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creating a ``while`` loop to continuously calculate the position of the object"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We will now create a ```while``` loop. Each time the program runs through this loop, it will:\n",
    "\n",
    "1. Calculate the displacement of the ball and add it to the ball's previous position in order to find its new position. This is known as the *position update*.\n",
    "2. Calculate the clock reading by incrementing $t$ by an amount $dt$ through each iteration of the loop. This is the *time update*.\n",
    "3. Repeat.\n",
    "\n",
    "To see how this works, let's write a loop that updates the clock reading $t$ and prints the result.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "t=0\n",
    "dt=0.01\n",
    "while t < 10.0:\n",
    "    t=t+dt\n",
    "    print(t)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Just as we updated the clock using ``t=t+dt``, we also want to update the object's position. Physics tells us that the object's new position is given by:\n",
    "\n",
    "$$\\mbox{future position}  =   \\mbox{position now} + \\mbox{velocity} \\times \\mbox{time step}$$\n",
    "\n",
    "$$\\vec{r}_f = \\vec{r}_i + \\vec{v}\\Delta t$$\n",
    "\n",
    "This is called the *position update equation*. It says, \"take the current position of the object, add its displacement, and assign the future position of the object at the end of the time interval to the result.\" In Python the \"=\" sign is an *assignment* operator. It takes the result on the right side of the = sign and assigns its value to the variable on the left. \n",
    "\n",
    "In VPython, to update the position of the object named ``ball`` with velocity ``ball.v``, we will write\n",
    "\n",
    "```python\n",
    "\n",
    "ball.pos=ball.pos+ball.v*dt\n",
    "\n",
    "```\n",
    "\n",
    "You may have noticed that the ``while`` loop in the previous program ran much faster than real time. The clock counted from zero to 10 s in steps of 0.01 s faster than a real clock. For animation where the position of objects is updated, it is desirable to slow down the loop so you can observe the objects move. Inside the ``while`` loop, we will add a ``rate()`` statement to control how fast the loop iterates. In this program:\n",
    "\n",
    "```python\n",
    "\n",
    "t=0\n",
    "dt=0.01\n",
    "while t < 10.0:\n",
    "    rate(100)\n",
    "    t=t+dt\n",
    "    print(t)\n",
    "\n",
    "```\n",
    "\n",
    "``rate(100)`` tells the computer to run the loop 100 times in one second. Since $dt=0.01$ then this program should increment $t$ at approximately real time.\n",
    "\n",
    "Now, let's put all of this together to make our final program that models the motion of a ball moving with constant velocity. Run the program below. Note that there are three distinct parts of the program:\n",
    "\n",
    "1. create the 3D objects and scene\n",
    "2. define the velocity, clock reading, and time step\n",
    "3. use a loop to update position and clock reading"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"glowscript\" class=\"glowscript\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "window.__context = { glowscript_container: $(\"#glowscript\").removeAttr(\"id\")}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#create the scene and 3D objects\n",
    "scene=canvas(title=\"Ball on Track with Constant Velocity\")\n",
    "track=box(pos=vector(0,-0.075,0), size=vector(3,0.05,0.1), color=color.white)\n",
    "ball=sphere(pos=vector(-1.4,0,0), radius=0.05, color=color.orange)\n",
    "\n",
    "#define the velocity of the ball, the clock reading, and the time step\n",
    "ball.v=0.3*vector(1,0,0)\n",
    "dt=0.01\n",
    "t=0\n",
    "\n",
    "#use a while loop to update the position of the ball and clock after each time step\n",
    "while t<10:\n",
    "    rate(100)\n",
    "    ball.pos=ball.pos+ball.v*dt\n",
    "    t=t+dt\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Graphing Computed Data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To graph computed data using VPython, we must create a graph display and a create a curve. Then, as we update the position and clock reading in each time step, we will add a data point to the graph.\n",
    "\n",
    "To create a graph with a title and axis labels, use the ``graph()`` function.\n",
    "\n",
    "```python\n",
    "\n",
    "xGraph=graph(title=\"x(t) for a ball on a track\", xtitle='t (s)',ytitle='x (m)', width=400, height=150)\n",
    "\n",
    "```\n",
    "\n",
    "To create a curve, use the ``gcurve`` function.\n",
    "\n",
    "```python\n",
    "\n",
    "xtdata=gcurve(color=color.blue, graph=xGraph)\n",
    "\n",
    "```\n",
    "\n",
    "To add data points to this curve, use the ``plot()`` function.\n",
    "\n",
    "```python\n",
    "\n",
    "xtdata.plot(t,ball.pos.x)\n",
    "\n",
    "```\n",
    "\n",
    "Note that I have given names to the graph and the curve. This allows us to plot more than one curve on a graph or to create more than one graph. Also, remember that you cannot graph a vector. You can only graph scalars. Therefore, we must graph just the x-position of the ball ``ball.pos.x`` as a function of time. Altneratively, the y-position of the ball or z-position of the ball can be graphed, but not ``ball.pos`` because this is a vector.\n",
    "\n",
    "To observe this in action, run the program below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"glowscript\" class=\"glowscript\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "window.__context = { glowscript_container: $(\"#glowscript\").removeAttr(\"id\")}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#create the scene and objects\n",
    "scene=canvas(title=\"Ball on Track with Constant Velocity\")\n",
    "track=box(pos=vector(0,-0.075,0), size=vector(3,0.05,0.1), color=color.white)\n",
    "ball=sphere(pos=vector(-1.4,0,0), radius=0.05, color=color.orange)\n",
    "\n",
    "#set the initial values for the velocity, time step, and clock reading.\n",
    "ball.v=0.3*vector(1,0,0)\n",
    "dt=0.01\n",
    "t=0\n",
    "\n",
    "#create a graph\n",
    "xGraph=graph(title=\"x(t) for a ball on a track\", xtitle='t (s)',ytitle='x (m)', width=600, height=200)\n",
    "\n",
    "#create curve\n",
    "xtdata=gcurve(color=color.blue, graph=xGraph)\n",
    "\n",
    "while t<10:\n",
    "    rate(100)\n",
    "\n",
    "    #update position and time\n",
    "    ball.pos=ball.pos+ball.v*dt\n",
    "    t=t+dt\n",
    "    \n",
    "    #plot a data point to the x(t) curve\n",
    "    xtdata.plot(t,ball.pos.x)    \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You will notice that the graph autoscales. This is sometimes distracting. It is possible to set the limits of the x and y axes of the graph using the parameters ``xmin``, ``xmax``, ``ymin``, and ``xmax``. In the program below, I use these parameters in the ``graph()`` function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "#create the scene and objects\n",
    "scene=canvas(title=\"Ball on Track with Constant Velocity\")\n",
    "track=box(pos=vector(0,-0.075,0), size=vector(3,0.05,0.1), color=color.white)\n",
    "ball=sphere(pos=vector(-1.4,0,0), radius=0.05, color=color.orange)\n",
    "\n",
    "#set the initial values for the velocity, time step, and clock reading.\n",
    "ball.v=0.3*vector(1,0,0)\n",
    "dt=0.01\n",
    "t=0\n",
    "\n",
    "#create a graph\n",
    "xGraph=graph(title=\"x(t) for a ball on a track\", xtitle='t (s)',\n",
    "             xmin=0, xmax=10, ymin=-2, ymax=2,\n",
    "             ytitle='x (m)', width=600, height=200)\n",
    "\n",
    "#create curve\n",
    "xtdata=gcurve(color=color.blue, graph=xGraph)\n",
    "\n",
    "while t<10:\n",
    "    rate(100)\n",
    "\n",
    "    #update position and time\n",
    "    ball.pos=ball.pos+ball.v*dt\n",
    "    t=t+dt\n",
    "    \n",
    "    #plot a data point to the x(t) curve\n",
    "    xtdata.plot(t,ball.pos.x)    \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For complete VPython documentation, go to [glowscript.org](http://www.glowscript.org/docs/VPythonDocs/index.html). GlowScript is a web-based application for writing and running VPython. It uses Google authentication, so it requires a gmail account. Jupyter is a general editor that includes stylized text, mathematical markup, and live code. It works with all Python packages (that have been installed on the server). GlowScript is exclusively for writing and running VPython and is recommended for first-time VPython programmers."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "VPython",
   "language": "python",
   "name": "vpython"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}