Tag Archives: 3D

3d Point to 2d Point (Easy Mini 3d Engine)

By Zevan | July 26, 2018

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

:D

Posted in 3D, Graphics, graphics algorithms, html5, javascript | Also tagged , , | Leave a comment

3D Shape

By Zevan | November 26, 2008
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. var centerX:Number = 200, centerY:Number = 200, zpos:Number, xpos:Number, ypos:Number, depth:Number;
  3. var rotX:Number = 0, rotY:Number = 0, px:Number, py:Number, pz:Number;
  4. var cosx:Number, cosy:Number, sinx:Number, siny:Number;
  5.  
  6. var canvas:BitmapData = new BitmapData(400,400,true,0xFF000000);
  7. addChild(new Bitmap(canvas));
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10.  
  11. function onLoop(evt:Event):void {
  12.     canvas.fillRect(canvas.rect, 0xFF000000);
  13.      rotX += (mouseX / 50 - rotX)/12;
  14.      rotY += (mouseY / 50 - rotY)/12;
  15.      
  16.      cosx = Math.cos(rotX);
  17.      cosy = Math.cos(rotY);
  18.      sinx = Math.sin(rotX);
  19.      siny = Math.sin(rotY);
  20.      for (var a:Number =0; a <6.28; a+=.1){
  21.           for (var b:Number =0; b <6.28; b+=.05){
  22.               px = 100 * Math.cos(a) * Math.cos(b) * Math.cos(b);
  23.               py = 100 * Math.sin(a) * Math.cos(b)
  24.               pz = 100 * Math.sin(b);
  25.               zpos= pz*cosx - px*sinx  ;
  26.               xpos= pz*sinx +px*cosx  ;
  27.               ypos= py*cosy - zpos*siny  ;
  28.               zpos= py*siny+ zpos*cosy ;
  29.               depth = 1/((zpos/340)+1);
  30.               canvas.setPixel((xpos * depth) + centerX, (ypos * depth) + centerY, 0xFFFFFF);
  31.           }
  32.      }
  33. }

Renders a rotating 3D shape.

Posted in BitmapData, setPixel | Also tagged , | 5 Comments