cheap 3d animate

f(x,y) { return ; }
x angle: | y angle: | z angle: |
x unit: | y unit: | z unit: |
x obj unit: | y obj unit: | z obj unit: |
zoom | Front height: , Back height:
range [-x,x] [,] |
range [-y,y] [,] |
R^3 Origin (Ox,Oy,Oz): (, , )
Rotate Surface (x,y,z): (, , )
Translate Surface (Tx,Ty,Tz): (, , )
R^2 Origin (Ox',Oy'): (, )
Another demo of (x,y,z)=f(t) can be found by clicking here.

Cheap 3-D to 2-D Projection Matrix


Or the 2x3 Gerhold Projection Matrix

I show you how to multiply
three coordinates with three 2-d bases to move
left and right with cosine and up and down with sine
to the right spot, like on a piece of paper.

A 2-D ijk-Picture of a 3-D graph can be found
in the calc3book.pdf from
That had let me think how to do that on the screen.

The following algorithm covers most of
the steps i figured out already to do the standard
transforms before projecting with this nice formula.

All three angles start at 0 α := x-Axis Angle
β := y-Axis Angle
γ := z-Axis Angle
u{x,y,z} := Unit of the vectors
of the projection base.
should all have same size, .
else the thing stretch to a side
when rotating

The projection is a 2x3 matrix.
I had the idea to use three two dimensional vectors.
The idea came from orthogonal bases and
the memory of the ijk-Notation Picture
showing the three base vectors on the axes.

Each column holds a base vector for x,y or z.
[len*cos({x,y,z}angle), len*sin({x,y,z}angle)]
Instead of taking numbers i took the unit circle
and angles.

P =
ux*Math.cos(α) uy*Math.cos(β) uz*Math.cos(γ)
ux*Math.sin(α) uy*Math.sin(β) uz*Math.sin(γ)

In the following steps i first get the points.
Then i apply the local transformations.

x = points[i]
y = points[i+1]
z = points[i+2]
Apply a local 3x3 base
x = x*XBx+y*XBy+z*XBz
y = x*YBx+y*YBy+z*YBz
z = x*ZBx+y*ZBy+z*ZBz

Rotate the object

Do local translation to origin

x = Ox + Tx + x
y = Oy + Ty + y
z = Oz + Tz + z
O = Origin, T = Translation

Rotate the object around the world.

Apply the perspective to the points.

If i multiply the 3-D coordinates now
with P, i get the correct x' and y' for
the 2-D screen.

P*[x;y;z] = [x';y']

Ok, i have figured out transforms above, to
prove the work.
This here is the projection onto the screen:

x' = x*ux*Math.cos(α)
+ y*uy*Math.cos(β)
+ z*uz*Math.cos(γ)
y' = x*ux*Math.sin(α)
+ y*uy*Math.sin(β)
+ z*uz*Math.sin(γ)

Now i can shift the picture on the 2-D screen
by adding x' = origin2x + x' and
y' = origin2y + y'

Could apply the 2-D stuff on the image now.

The text of this document is not very good,
but i hope you get the point until here.

Will rewrite it technically.