Many years ago when I had just started programming I found this absolute gem by Andries Odendaal.

*modern es6 version*

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | let rotX = 0, rotY = 0, perspective = 500, depth, currX, currY; // learned something like this at Andries Odendaal's www.wireframe.co.za function point3d(x, y, z) { let cosX = Math.cos(rotX), cosY = Math.cos(rotY), sinX = Math.sin(rotX), sinY = Math.sin(rotY), posX, posY, posZ; posZ = z * cosX - x * sinX, posX = z * sinX + x * cosX, posY = y * cosY - posZ * sinY, posZ = y * sinY + posZ * cosY; depth = 1 / (posZ / perspective + 1); currX = posX * depth; currY = posY * depth; return [ currX, currY, depth ]; } |

Here’s is an example of it in action:

I’ve used this code many many times, it’s just easy to throw into any language and instantly get 3d points rendered in 2d. Here is a short video of a Java applet from 2003 called “Catch Env” that made use of it:

Here is the source code for that ^^

http://www.zevanrosser.com/shape2/j/Catchenv.java

You’ll notice in that source, that I nested the equation to allow for local and global transformations. It was around that time that I learned the ins and outs of real 2D and 3D matrix transformation math… Ken Perlin’s classfiles from NYU were a real help when I was learning that stuff. I don’t think this was the exact file I was working with, but it was definitely on his site somewhere.

Before all that, during my junior year in college I created a 3d engine based off Odendaal’s code in Director (Lingo). Here is a video of some of the demos for it:

…and here is a strange screenshot from my personal website at the time:

Just an example of a powerful snippet and a gateway to learning matrix transformation math. When I first really dug in to html5 canvas - before WebGL was supported so widely - having this trick up my sleeve was great. As you can see in the below link, I used it more than a few times back then:

Daily canvas experiments:

http://zreference.com/projects/all-graphics.php