Graphics

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.

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?)

Vectors

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.

More Graphics

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.

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.

Basic Animation

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).

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

whiletrue 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.

Buttons

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

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.