PhysGL Tutorial

Go back to PhysGL

PhysGL has a console (i.e. a text output window) which makes it easy to see a program’s output, and start doing some very basic programming. Typing this into the text editor

writeln('hello world')

then clicking the “Run” button will show

hello world

in the console window (lower right).

Naturally, variables are part of the language, as in

x=5
y=10
z=2*x+10
writeln('x=',x)
writeln('y=',y)
writeln(x*y+5)
writeln(z)

which will result in

x=5
y=10
55
20

being displayed in the console window.

Strings work as you might expect, as in:

name = 'Tom'
writeln('Hello there ',name)

which will result in

Hello there Tom

Strings can be put into double or single quotes, so the above code could also be written

name = "Tom"
writeln("Hello there ",name)

Counting can be done with the for-do loop as in

for i=1,10 do
 writeln(i,' ',i^2)
end

Clicking the “Run” button will result in the following output to the console window.

1 1
2 4
3 9
4 16
5 25
6 36
7 49
8 64
9 81
10 100

An optional step can be provided in the for-do loop as in for i=1,10,2.

Beginners often like seeing their name all over the screen like this

for i=1,100 do
 writeln('Scott')
end

Lastly, having a bit of fun with text, here's a zig-zag pattern.

for i=1,20 do
  for j=1,i do
  	write(' ')
  end
  writeln('hi')
end
 
for i=20,1 do
  for j=1,i do
  	write(' ')
  end
  writeln('hi')
end

The real fun is when you can start drawing with 3D graphics. PhysGL was designed to make this easy. Let's start with a red sphere.

draw_sphere(<0,0,0>,15,"red")

This will draw a red sphere at position (0,0,0) with a radius of 15 pixels.

PhysGL sets up a coordinate system so that the x-axis runs left-to-right across the screen, the y-axis up and down, and the z-axis out of the screen (+z) and into the screen (-z). Naturally, the point (0,0,0) is right in the center.

Here's another example,

draw_sphere(<0,0,0>,35,"red")
draw_sphere(<50,0,50>,35,"blue")
draw_sphere(<-50,0,-50>,35,"green")

that draws three spheres stacked near each other in 3D space. Once drawn, if you click and drag on the graphics window, you can see different perspectives of the plot.

We hope this highlights the power of PhysGL: doing 3D graphics with minimal fuss (Did you install any software? Have any import statements? Compile with some framework?)

Note the notation <0,0,0> in the statements above. The < and > are grouping symbols for a vector, so yes, PhysGL has a native vector data type build right in. Whenever you see numbers (or expressions) within a < and >, they stand for the x, y, and z components of a given number. Vectors are of great use to keep track of the three coordinates (x, y, and z) needed for 3D-graphics programming.

PhysGL also knows how to do mathematical operations with vectors too. Try this code.

a=<1,2,1>
b=<2,-2,5>
c=a+b
writeln(c.x,' ',c.y,' ',c.z)
writeln(a*b)

Here you'll see two vectors declared, a and b. The vector c is declared as a+b, and here PhysGL will do a vector addition, which means to add the components of each vector together. The components of c (or that of any vector) can be extracted using the .x, .y and .z notation, as in the first writeln statement. So this statement will correctly output the components of c as 3 0 6 in the console window.

PhysGL also knows how to multiply two vectors, as in the a*b. Currently, the * for vectors means the dot product, so the second writeln statement will display a 3.

The cross product will eventually be put in using the # symbol, but we haven't done this yet.

After spheres, you can draw lines too, as in

draw_line(<0,0,0>,<100,100,100>,"red",5)

which draws a line between the points <0,0,0> and <100,100,100>, in a red color with a thickness of 5.

Here's a stick figure drawing using spheres and lines.

//head
draw_sphere(<0,0,0>,20,"orange")
//body
draw_line(<0,0,0>,<0,-100,0>,"yellow",5)
//arms
draw_line(<0,-25,0>,<-40,-65,0>,"yellow",5)
draw_line(<0,-25,0>,<40,-65,0>,"yellow",5)
//legs
draw_line(<0,-100,0>,<-50,-140,0>,"yellow",5)
draw_line(<0,-100,0>,<50,-140,0>,"yellow",5)

For loops can be used to draw things in repetition. Here's a grid of spheres.

for x=-100,100,20 do
  for y=-100,100,20 do
    draw_sphere(<x,y,0>,10,"red")
  end
end

Note the vector data type in there, centering the sphere at <x,y,0>. It's fun to click and drag on the graphics screen when this one is shown.

PhysGL has a random number generator too. Calling the function rnd(min,max) will return a random number between min and max. Here's a short program which will draw 50 spheres on the screen at random positions.

for i=1,50 do
	x=rnd(-200,200)
	y=rnd(-200,200)
	z=rnd(-200,200)
	draw_sphere(<x,y,z>,15,"yellow")
end

Computer animation requires some mechanism for flipping through screens quickly, to give the illusion of motion. This is tricky in Javascript due to the single-threaded nature of the language. To handle this, Physgl offers the while-animate-end construct. This special while loop works closely with the Javascript timer to ensure the browser does not lock up while flipping screens, and it automatically clears the graphics display at the end of each loop iteration. Thus our only concern is drawing and computing new positions for our objects (for the next loop iteration).

It works like this

x=-200
while x < 200 animate
	pos=<x,0,0>
	draw_sphere(pos,25,"red")
	x=x+10
end 

Here a red sphere is started at x=-200, y=0, z=0. Inside of the while-animate loop, the sphere is drawn, and its x-coordinate is updated (increased by 10 pixels each iteration). As long as x < 200, the while-animate loop will continue to draw and erase the graphics screen.

Note: only one while-animate loop may appear in a given Physgl program. Programs needing to run “forever” (like in an OpenGL event loop), may do something like this

while true animate
...
end

This loop will run until the browser page is refreshed, or the PhysGL “Stop” button is clicked. Here's ball that will bounce around “forever.” Note the “while true animate-end” structure which will loop forever, to keep the ball bouncing.

pos=<0,0,0>
v=<10,5,0>
dt = 1
 
while true animate
 draw_sphere(pos,15,"red")
 pos=pos+v*dt
 
 if pos.y < -250 and v.y < 0 then
  v.y = -v.y
 end
 
 if pos.y > 250 and v.y > 0 then
  v.y = -v.y
 end
 
 if pos.x < -300 and v.x < 0 then
  v.x = -v.x
 end
 if pos.x > 300 and v.x > 0 then
  v.x = -v.x
 end
end

Note also how the code only ever draws the sphere, and never erases it. As mentioned, the entire graphics screen is cleared after each iteration of the while-animate-end structure.

Physgl has support for sliders and buttons, the states of which can be used directly (and in real-time) in your code. This allows for some simple user-interface interactions with your code.

Buttons are formed using the new_button function. Here is some sample code:

function clicked()
  writeln('the button was clicked')
end
 
new_button('click me','clicked')

The arguments to new_button are the button label (in quotes, in this case 'click me'), and what function should be called when the button is clicked. In this case the function 'clicked' is to be called. Be sure to enclosed the function name in quotes. The function definition for “clicked” is shown to display some text in the Physgl console. You may create as many buttons as needed, but note that new_button should only be called once (per button needed), to create the button.

Sliders are also supported using the new_slider function. This code will draw a blue and red sphere, whose radius is set by the slider value.

new_slider('blue',0,500,5,10)
new_slider('red',10,500,10,10)
while true animate
	rblue = get_slider('blue')
	rred = get_slider('red')
	draw_sphere(<100,0,0>,rred,"red")
	draw_sphere(<-100,0,0>,rblue,"blue")
end

You may create as many sliders as needed, but like buttons, only call new_slider once per needed slider.