JavaScript served as a good modeling language for the algorithms, since IE handles all of the animation and rendering and I could concentrate on the math alone. I should note, for the record, that these scripts are not cross-browser -- mostly because they weren't really intended to be web presentations, just exercises.

Most of the source is self-explanatory and pretty heavily-commented by me for me as I was plodding through this.

About the 3D "Engine"

The 3D code is probably the most basic way of generating a 3D image. A routine NGON_init is fed a series of three values, which represent x, y and z coordinates. Each triplet is made into a point object (if that point doesn't already exist). Since the monitor space is set up as the fourth quadrant of a Cartesian axis, the Cartesian values are also stored in the point object for reference later.

At every third point, a face object is created. I'm using VML to draw the faces. One pitfall with VML is forgetting this patch of code at the top of the page:

In the above block, iRotationAngle is a global constant that I've set to 10. By multiplying it by PI and dividing by 180, you turn the angle of 10 degrees into radians, which the trig functions of the JavaScript Math class like to work with.

This step performs vector math on the three axes of each point in the object. The implications of this are most visible in the 3D Engine - Points script which only displays the points.

The next step in rotating and displaying the 3D object is projecting it from a parallel projection (press "p" when viewing the objects to see the difference) with no perspective distortion to a perspective projection.

There's a little elfin magic in this as the iFov (Field-of-view) values and iDistance values may need to be tweaked to suit your purposes. You can achieve any effect from fish-eye lens all the way down to straight parallel projection by playing with these values.

The last step is backface culling which is done by calculating the face normals and determining whether or not they're aimed into the receding distance. This is where the Cartesian values for each point really come in handy, since performing the fourth quadrant translation can get kind of tedious here.

This, again, is a vector operation -- specifically, the cross product of any two of the face vectors (sides, here). You must calculate the edge vectors originating from the same point, otherwise your normal will be inverted and your backface will show up. This had me flummoxed for a day.

The other scripts

Each page stands on its own with the exception of the "Newtonia" section, which is an object-oriented worldspace that allows for on-the-fly creation of pendula, springs, or static objects to be dropped into the same 2D world with each other.

Newtonia's collision detection relies on the idea of bounding boxes, and that the center of colliding objects intersect at a line that is of a certain angle from the horizon. This uses polar coordinates to determine where, along the edge of each object, the point of collision lies. Since these are bounding boxes, I have to kind of fudge it by checking where the colliding object is with respect to the...uh...other colliding object.

It's easier with two bounding circles. For example, here's a script that will follow your mouse around the circumference of a circle. Think of the coordinates of the mouse cursor as the center of another object, and you'll get the sense of how this could be used for collisions.

The other scripts in this collection are borrowed from the math in Newtonia or the 3D engine. Kevin Fortuna particularly liked the Spinning Menu. Here's a quick description of the other scripts:

Spinning Menu - this displays a "Lazy-Susan" style menu which spins from the background to the foreground, fading as it recedes.

N-Gon - this allows the user to create an n-sided polygon in two or three dimensions. Rotation and zooming is also enabled. The objects are drawn in wire-frame. The code uses DHTML and VML.

N-Gon Filled - this script has the same feature set as N-Gon, with the difference that the polygons are filled. Also uses DHTML and VML.

Ole' Footeye - this demonstrates spring properties in the figure of a disembodied foot sporting a single bouncing eye.

Nice Shootin' - this script demonstrates principles of gravity and trajectory using DHTML.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.