What is it?

Its a web page which will draw lines and surfaces in 3D.

Can I use it?

It uses HTML5 and WebGL, so needs a modern browser. Try it and see.

Where is it?

>>>>>>>>>>>>>>>>>>>> It's here <<<<<<<<<<<<<<<<<<<<<<


This works by using JavaScript's ability to dynamically create and execute functions at run-time - so that's Brendan Eich. It produces 3D graphics using WebGL, so that's the Khronos Group. But that's very low-level, so this uses Three.js, so thanks to mrdoob and the rest, and Lee Stemkoski for his examples.

How do you use it?

You start seeing x y and z axes. The x axis is red and y is green. The yellow z axis will remain 'vertical'. All axes are drawn in the range -5 to +5

Use the keyboard to alter the viewpoint as follows:

a - s = rotate about the z axis

q - w = zoom in out

e - d = up and down the z axis

You can use mouse controls on the graph, but they are difficult to control.

Plot a z=f(x,y) surface

The first option is to draw a surface defined as a z-value above or below each (x,y) location. The surface button draws a surface, while mesh draws a wire mesh. Mesh allows you to see lines of constant x or y, while surface gives a clearer idea of the 3d shape. The default expression gives a paraboloid. Another expression to try might be y*sin(x), as shown. We have a sine wave down the (red) x axis, scaled by y going across.

Built-in functions

The following are built-in: sin, abs, acos, atan, ceil, exp, floor, log, pow, sqrt, tan and cos.
Used like sin(2*x+3).


This draws a surface or mesh defined using cylindrical polar co-ordinates. (You will notice a short delay before this is drawn - twenty thousand triangles are being calculated). So each z height is determined by a radius r, distance on the xy plane from 0,0 and an angle θ around from x=0. Click the theta button to get that symbol. The example shown is simply 1/r, a singularity at (0,0)

Parametric surface

x y and z are defined in terms of two parameters, u and v. So u and v are allowed to vary across ranges which are input. For each u,v pair, we calculate x y and z, and this defines a point in space. The set of x,y,z points form a surface. The default values define the surface of a sphere.

As an example, think about this:
This produces a torus. We can treat v as the angle around the tube, and u the angle around the ring.The radius of the ring is 3. x and y values are modified by sin(v), the angle round the tube, the sin giving the horizontal projection of that. The z value is simply cos(v), the vertical component of that. This torus has a ring radius of 3, and a tube radius 1. u is ranging from pi/2 to 3pi/2, so we can see the inside of the tube.

Parametric line

x y and z are defined in terms of a single parameter, t. As t varies, x y and z vary, producing a line. In the default, z=t/5, so z just increases with t. x and y have a factor sin and cos t, which would produce a horizontal circle. But the other factor t increases the radius of the circle, so we get a spiral.

Bug reports and comments

To wm at waltermilner.com please.

Contact Feedback