Zikko's Resources


3D to 2D projection - like in the good old days

Back in the days I was active in the Amiga demo scene, a kinda subculture of teenagers creating pretty graphical effects, rendered realtime. This involved some heavy maths, the real meaning and depth of which we had no idea. We just needed it to work and look pretty, and maybe to know how to modify it here and there. For modern day developers creating graphical effects for for example Flash, things aren't very different. The following code takes a 3D coordinate (X, Y and Z), and rotates it three times (around the X, Y and Z axis). The rotation will be around origo (0,0,0). Try running the eight corner coordinates of a cube (see below) through it. To begin with, just use the resulting X and Y coordinates, draw some lines between them. Use rotation values (rotX, rotY and rotZ) that are based on time, multiplied by different coefficients. That will already look a bit 3D-ish. To add some perspective to it, use the resulting Z on your X and Y before using them as 2D coordinates, so that higher Z coordinates amplifies them.

Example input 3D coordinates

100, 100, 100
-100, 100, 100
-100,-100, 100
100,-100, 100
100, 100,-100
-100, 100,-100
-100,-100,-100
100,-100,-100

The magic formula

sinX = sin( rotX );
cosX = cos( rotX );
sinY = sin( rotY );
cosY = cos( rotY );
sinZ = sin( rotZ );
cosZ = cos( rotZ );

x1 = x0;
y1 = cosX * y0 - sinX * z0;
z1 = sinX * y0 + cosX * z0;

x2 = cosY * x1 - sinY * y1;
y2 = sinY * x1 + cosY * y1;
z2 = z1;

x3 = cosZ * x2 - sinZ * z2;
y3 = y2;
z3 = sinZ * x2 + cosZ * z2;

// perspective

x4 = ( x3 * 250 ) / ( z3 + 250 )
y4 = ( y3 * 250 ) / ( z3 + 250 )

Or something like that...


All content on these pages may be used, copied and modifed freely. Questions or comments may be sent to . Also visit zikko.se.