How to make a graph of potential and kinetic energy: VPython Tutorial 4 (Visual Python)

graph in vpython
How to make a graph in VPython

The graph of potential and kinetic energy can be plotted in VPython while making python 3d visualization. In this article, we are going to learn how to make a graph of potential energy, kinetic energy, total energy and phase diagram. We will be first learning how to make a graph in VPython and then describe, how to find kinetic energy and potential energy formula. We will also plot phase diagrams for all the three systems described in the previous articles.

How to make a scatter plot in VPython

We need to import graph module to plot graph in VPython. Let’s first plot two points (1,1) and (2,2). You need to open VIDLE and create a new file with the following code. While saving the file, you need to give .py extension (for e.g. mygraph.py). You can run the code by pressing f5.

from visual import*
from visual.graph import*
f1=gdots(color=color.red)
f1.plot(pos=(1,1))
f1.plot(pos=(2,2))

Run this code

Edit this code

Here, we have imported visual graph module and then defined an object f1. There are several kinds of graph plotting objects in visual graph module. The gdots represents the disconnected dots. The plot attribute of f1 object is used to plot the points on the graph. The two points are plotted by writing two separate lines, you can give both the points in the same line also. Once you run the code, a new window with a scatter plot will open.

how to make a graph of scatter plot
The Scatter plot showing two points on the graph. (Credit: Tech for Curious)

If you have a list of points you can plot all of them in one line as follow.

from visual import*
from visual.graph import*
f1=gdots(color=color.red)
f1.plot(pos=[(1,1),(2,2),(3,3),(4,4),(5,5)])

Run this code

Edit this code

scatter plot
The Scatter plot showing many points plotted with a single line of code. (Credit: Tech for Curious)

How to make a line graph in VPython

The scatter plot is easier to understand but if we want to plot energy continuously, we need to connect these dots to get the continuous curve. We will use gcurve object instead of gdots. The gcurve object plots a connected curve. Let’s use the above code to plot connected curve by replacing gdots by gcurve.

from visual import*
from visual.graph import*
f1=gcurve(color=color.red)
f1.plot(pos=[(1,1),(2,2),(3,3),(4,4),(5,5)])

Run this code

Edit this code

Line plot graph
The line graph is a curve connecting all the points in VPython. (Credit: Tech for Curious)

Now, you will not see any scattered points but the only curve connecting these dots. This connected curve is useful for plotting graph of potential and kinetic energy.

How to make a graph of a function in VPython

We want to make a graph of kinetic and potential energy as a function of time. We need to learn how to make a graph of a function with time in VPython.

from visual import*
from visual.graph import*
gd=gdisplay(x=400,y=500,height=600,width=600,title='Dot Tutorial',xtitle='my x-axis', ytitle='my y-axis',foreground=color.black,background=color.white)
f1=gcurve(color=color.red)
t=0
dt=0.1
while (t<20):
 rate(100)
 f1.plot(pos=(t,sin(t)))
 t=t+dt

Run this code

Edit this code

Here, I have added one more line which describes the graph display. The gdisplay has many properties like position (400,500), size (600, 600), title, xtitle, ytitle, background, and foreground. The foreground describes the text color. If you want to create two separate windows for two graphs, you need to define two separate gdisplay and assign them to graph objects (f1 etc.). We have defined the variables t and dt which represent time and time increment. In the ‘while’ loop, the time increases with each iteration and we plot (t, sin t) in each iteration.

how to make a Graph of a function
The Graph of a function showing sin curve. (Credit: Tech for Curious)

Now, we know how to make a graph in VPython, let’s learn how to find kinetic energy and potential energy for the bouncing ball, mass-spring system and pendulum.

How to find Kinetic Energy

The kinetic energy of an object is the energy due to its motion. Consider an object of mass m moving with velocity v. The formula for kinetic energy is represented as

(1)   \begin{equation*} K.E.=\frac{1}{2}mv^2 \end{equation*}

The formula for kinetic energy is common for every system but the formula for potential will depends upon the interaction process and system under consideration.

How to find Potential Energy

The potential energy of an object is present due to its configure. The formula for potential energy is related to the formula of force.

Potential Energy of a Bouncing Ball

The bouncing ball moves under the influence of gravity and the potential energy is actually gravitational potential energy. Consider, a ball of mass m and present at height h from the ground. The formula for potential energy is given as

(2)   \begin{equation*} P.E.=mgh \end{equation*}

where g (9.8 m/s2) is acceleration due to gravity.

Potential Energy of a Spring

The spring-mass system has potential energy only due to the configuration of spring. Consider a spring with spring constant k displaced by length x from its equilibrium position. The formula for potential energy is given as

(3)   \begin{equation*} P.E.=\frac{1}{2}kx^2 \end{equation*}

Potential Energy of a Pendulum

The pendulum also moves under the influence of gravity but the formula for its potential energy is a bit different than Equation 2. Consider the bob of mass m is present at the position (x’,y’) where the origin (0,0) of the prime coordinate system lies at the equilibrium position. The formula for potential energy is given as

(4)   \begin{equation*} P.E.=mgy' \end{equation*}

Suppose the equilibrium of pendulum lies at the position (x0,y0) and bob is present at position (x,y) then the x’ and y’ can be written as

(5)   \begin{equation*} x'=x-x_0 \end{equation*}

(6)   \begin{equation*} y'=y-y_0 \end{equation*}

and the formula for potential energy will be

(7)   \begin{equation*} P.E.=mg(y-y_0) \end{equation*}

In our previous post of the pendulum, we have calculated y’ not y. Hence, we will be using Equation 4

Phase Diagram

In the phase diagram, we draw position on the x-axis and velocity on the y-axis. The phase diagram for an oscillatory system is a closed curve. The phase diagram for the simple harmonic oscillator is elliptical. If the energy of the system is not constant, the curve becomes spiral.

Energy Diagrams of Bouncing Ball

The simulation of the bouncing ball is already explained in the previous post. We have modified the same code to include the graph of potential and kinetic energy.

from visual import*
from visual.graph import*
display(width=500,height=500)
ball=sphere(pos=vector(0,10,0),radius=1,mass=1,color=color.red)
floor=box(pos=vector(0,0,0),size=vector(10,0.5,10),color=color.green)
dt=0.01
ball.velocity=vector(0,0,0)
t=0
g=-9.8
graph1=gdisplay(x=550,y=0,width=400,height=400,title='Energy Vs. Time', xtitle='time',ytitle='Energy',foreground=color.black, background=color.white)
graph2=gdisplay(x=950,y=0,width=400,height=400,title='Phase Diagram', xtitle='Position',ytitle='Velocity',foreground=color.black, background=color.white)
fke=gcurve(gdisplay=graph1,color=color.red)
fpe=gcurve(gdisplay=graph1,color=color.blue)
fte=gcurve(gdisplay=graph1,color=color.black)
fphase=gcurve(gdisplay=graph2,color=color.black)
PE_m=-g*ball.mass*(floor.pos.y+0.25+ball.radius)
while (t<20):
 rate(100)
 ball.velocity.y=ball.velocity.y+g*dt
 ball.pos=ball.pos+ball.velocity*dt
 if ball.pos.y<floor.pos.y+0.25+ball.radius:
 ball.velocity.y=-ball.velocity.y
 KE=0.5*ball.mass*(mag(ball.velocity))**2
 PE=-g*ball.mass*ball.pos.y-PE_m
 fke.plot(pos=(t,KE))
 fpe.plot(pos=(t,PE))
 fte.plot(pos=(t,KE+PE))
 fphase.plot(pos=(ball.pos.y,ball.velocity.y))
 t=t+dt

Run this code

Edit this code

Here, you can see that I have modified the previous code and also introduced new code also. The mass is required to calculate kinetic energy and potential energy. Thus, we defined a new attribute named mass for object ball and assigned value equal to 1. The value 1 is given so that the simulation does not differ much from the previous article but we can change it to some other mass later. We have defined two gdisplay, one for energy diagram and other for phase diagram. So that two separate window will open for two graphs.

We declared three curves for energy, fke, fpe, and fte for kinetic energy, potential energy, and total energy respectively. While declaring, we just associated gcurve with a particular gdisplay and defined a color for identification of curves. We have associated all the three energy gcurves with gdisplay named as graph1.

We declared the gcurve fphase for phase diagram and associated it with gdisplay named as graph2.

Inside the while loop, we have calculated the potential and kinetic energy using Equation 2 and 1 respectively. Then, we have plotted potential energy, kinetic energy and total energy with fpe, fke and fte gcurves respectively. We have plotted the phase diagram by putting the position of the ball at x-axis and velocity of the ball at the y-axis. A new point will be added to the graph with each iteration of the while loop, thus you will see the curve progressing slowly with time. When you run by pressing f5, you will see the following windows on your screen.

simulation of bouncing ball
Simulation of a bouncing ball. (Credit: Tech for Curious)
Bouncing ball Energy Diagram
The Energy diagram of the bouncing ball shows the decreasing energy due to finite value to dt. (Credit: Tech for Curious)
Bouncing ball Phase Diagram
The phase diagram of the bouncing ball does not retrace itself due to the finite value of dt. (Credit: Tech for Curious)

Here, you see that the curve in phase space is not returning the same point and the total energy of the system is also decreasing. Since our system is isolated and no loss of energy is happening, this should not happen. If you remember, I told in the previous post that the value of time increment dt should be very small or infinitesimal. Here, the value of dt is 0.01, let’s change this to 0.001 and change the rate(100) to rate(1000) to increase the computation speed otherwise the simulation will be very slow because of smaller dt. We see that the total energy is not decreasing significantly and phase space is also retracing itself. If you want more accuracy, you can decrease the value to time increment dt but this will require more computation.

Bouncing ball Energy Diagram
The energy Diagram of Bouncing ball showing constant total energy with the smaller value of dt. (Credit: Tech for Curious)
Bouncing ball Phase Diagram
The Phase Diagram of Bouncing Ball appears to be retracing itself for the smaller value of dt. (Credit: Tech for Curious)

Energy Diagrams of a Spring-Mass system

If you want to understand simulation of the spring-mass system, you can read the previous article. We have modified the code of spring-mass system also similar to the above modifications.

from visual import*
from visual.graph import*
display(width=500,height=500,center=vector(6,0,0),background=color.white)
wall=box(pos=vector(0,1,0),size=vector(0.2,3,2),color=color.green) 
floor=box(pos=vector(6,-0.6,0),size=vector(14,0.2,4),color=color.green)
Mass=box(pos=vector(9,0,0),velocity=vector(1,0,0),size=vector(1,1,1),mass=1.0,color=color.blue)
pivot=vector(0,0,0)
spring=helix(pos=pivot,axis=Mass.pos-pivot,radius=0.4,constant=1,thickness=0.1,coils=20,color=color.red)
eq=vector(9,0,0)
t=0
dt=0.001
graph1=gdisplay(x=550,y=0,width=400,height=400,title='Energy Vs. Time', xtitle='time',ytitle='Energy',foreground=color.black, background=color.white)
graph2=gdisplay(x=950,y=0,width=400,height=400,title='Phase Diagram', xtitle='Position',ytitle='Velocity',foreground=color.black, background=color.white)
fke=gcurve(gdisplay=graph1,color=color.red)
fpe=gcurve(gdisplay=graph1,color=color.blue)
fte=gcurve(gdisplay=graph1,color=color.black)
fphase=gcurve(gdisplay=graph2,color=color.black)
while (t<50):
 rate(1000)
 acc=(eq-Mass.pos)*(spring.constant/Mass.mass)
 Mass.velocity=Mass.velocity+acc*dt
 Mass.pos=Mass.pos+Mass.velocity*dt
 spring.axis=Mass.pos-spring.pos
 KE=0.5*Mass.mass*(Mass.velocity.x)**2
 PE=0.5*spring.constant*(eq.x-Mass.pos.x)**2
 fke.plot(pos=(t,KE))
 fpe.plot(pos=(t,PE))
 fte.plot(pos=(t,KE+PE))
 fphase.plot(pos=(eq.x-Mass.pos.x,Mass.velocity.x))
 t=t+dt

Run this code

Edit this code

The potential and kinetic energy is calculated using the Equation 3 and 1 respectively. In the case of potential energy, the displacement is the difference of equilibrium position and the actual position of the mass. Similarly in the phase space also, the displacement is plotted on the x-axis and velocity is plotted on the y-axis.

Simulation of Spring Mass System
The Simulation of Spring-Mass System. (Credit: Tech for Curious)
energy of a spring
Energy Diagram showing total energy, kinetic and potential energy of a spring. (Credit: Tech for Curious)
Phase Diagram of Spring
The Phase Diagram of a Spring. (Credit: Tech for Curious)

On running the above code, you will see that the total energy is constant because we have given dt=0.001 which is very small. The phase diagram is also closed circle. If you give dt=0.01, you will see that the total energy is oscillating sinusoidally which should not happen.

Energy Diagrams of a Pendulum

You can read the previous article of simulation of the pendulum if you want to understand in detail. We have modified the previous code of simulation of the pendulum as following.

from visual import*
from visual.graph import*
display(width=500,height=500,center=vector(0,12,0),background=color.white)
g=9.8 # acceleration due to gravity
bob=sphere(pos=vector(5,2,0),mass=1,radius=0.5,color=color.blue)
pivot=vector(0,20,0)
roof=box(pos=pivot,size=vector(10,0.5,10),color=color.green)
rod=cylinder(pos=pivot,axis=bob.pos-pivot,radius=0.1,color=color.red)
t=0 # time 
dt=0.0001 # time interval 
l=mag(bob.pos-pivot) # length of pendulum
cs=(pivot.y-bob.pos.y)/l # calculation of cos(theta) 
theta=acos(cs) # angle with vertical direction
vel=0.0
graph1=gdisplay(x=550,y=0,width=400,height=400,title='Energy Vs. Time', xtitle='time',ytitle='Energy',foreground=color.black, background=color.white)
graph2=gdisplay(x=950,y=0,width=400,height=400,title='Phase Diagram', xtitle='Position',ytitle='Velocity',foreground=color.black, background=color.white)
fke=gcurve(gdisplay=graph1,color=color.red)
fpe=gcurve(gdisplay=graph1,color=color.blue)
fte=gcurve(gdisplay=graph1,color=color.black)
fphase=gcurve(gdisplay=graph2,color=color.black)
while (t<100):
 rate(10000) # maximum 100 calculations per second
 acc=-g/l*sin(theta) # updating of angular acceleration
 theta=theta+vel*dt # updating of angular position
 vel=vel+acc*dt # updating of angular velocity
 bob.pos=vector(l*sin(theta),pivot.y-l*cos(theta),0) # calculating position
 rod.axis=bob.pos-rod.pos # calculating axis of cylinderical rod
 KE=0.5*bob.mass*(l*vel)**2
 PE=g*bob.mass*bob.pos.y
 fke.plot(pos=(t,KE))
 fpe.plot(pos=(t,PE))
 fte.plot(pos=(t,KE+PE))
 fphase.plot(pos=(theta,vel))
 t=t+dt # updating time

Run this code

Edit this code

The potential energy of the pendulum is calculated using Equation 4 but the kinetic energy requires linear velocity. The linear velocity v is obtained from the angular velocity \omega as follow:

(8)   \begin{equation*} v=l\omega \end{equation*}

where l is the length of the pendulum.

The value of dt is taken as 0.0001 so the total energy remains constant by minimizing the error due to finite value to dt. You run the simulation with various values of dt to see the effect of error due to the finite value of dt.

Simulation of Pendulum
The Simulation of a Pendulum. (Credit: Tech for Curious)
Energy Diagram of Pendulum
The Energy Diagram showing total energy, kinetic and potential energy of a pendulum. (Credit: Tech for Curious)
Phase Diagram of Pendulum
The Phase Diagram of a Pendulum. (Credit: Tech for Curious)

I have made a video of the above tutorial also showing how to make a graph of potential and kinetic energy. If you have any query or suggestion, please fill free to use the comment box. Your suggestions help us to decide future tutorials. If you like this tutorial, please share with someone who is interested in visualizing physics. You can follow us on facebook and twitter. You can subscribe us for Email Notification also to get an email whenever we publish a new post.


One thought on “How to make a graph of potential and kinetic energy: VPython Tutorial 4 (Visual Python)”

  1. These are excellent tutorials. You should make some more.

    I have a you tube channel (channelaboutmyinterests) and I want to start doing visuals in vpython for some signal processing and diff equations and this really helps me !!!

Leave a Reply

Your email address will not be published. Required fields are marked *