Vectors

This is one of the most basic effects in demos but it still work! Here I will try to explain the math behind them. But I won't do, as so many before me has done, give any language specific examples. So you have to learn the how to code first and then read this to get a grip of vectors. Here we go... Vectors are built out of points and faces wich are combined to make up an object. Here comes an example of an object:

this is one of the easiest objects there are, a cube. It's made of 8 points (the corners of the cube) and 6 faces (the sides of the cube). To draw this you draw lines from point to point and there for you must set up the order to draw and then draw a line from point to point. If you wanna make it filled you draw each face as a filled polygon. This was the simple part now to the vector effects.

3D
The cube we drawed earlier has not onley 2 but 3 coordinates for each point. This third coord is the depth coord (z). And the those three coords has to be calculated into 2 coords for displaying on screen. The way to do this is in the formula:

XP=(x*zmax)/(zmax-z)

where:

XP is the x or y coord to put on screen
x  is the x or y coord of the point
z  is the z coord(depth) of the point
zmax is the z depth

This calculation has to be done for both x and y coords. But this formula is quite slow (because of many divs) but there are several ways to optimize it.

Movement
This is the absolute easiest effect of them all to move an object simply add the movement in the X-direction to all X-coords of the points and the movement in Y-dirction to all Y-coords of the points and the same with Z. I don't think I have to put out this formula but here it is any way:

Xnew=Xold+Xmv

where:

Xnew is the new X(or Y or Z) coord
Xold is the old X(or Y or Z) coord
Xmv is the movement (X, Y or Z)

Rotation
Now when we've drawn the object to screen we might want to rotate it wich always is a nice effect. The way that I do this is in three 2d rotations rather than one 3d wich I honestly don't know how to do :). But I'm good at 2d rotations so let's do them first. When you do rotations remember to save the origin coord to memory then rotate, draw to screen then restore the origin coord and do the next rotation. This might seem long-winded but since the computer always do a little round off you wont end up with the same object after 360 degrees. So to ratate the point (a,b) by P degrees you use:

a2=a*Cos(P)-b*Sin(P)
b2=b*Cos(P)-a*Sin(P)

So to rotate the object round the x-axis (horisontal line) you use


a=z coord
b=y coord
p=angle round x-axis

and this have to be done for each point in the object.

Hidden faces
When you do filled vectors you don't want the computer to draw all the faces wich don't are seen. The sectret in doing this is to make all the faces in a clokwise order, when they are closest to the screen. E.g:

Now before you draw the face you just have to check if the first three points still are clockwise. If not they are facing away from you then don't draw it (if the vector isn't transparent). The math for this is:

((Cx-Bx)*(Cy-By))-((Bx-Ax)*(By-Ay))

if this is positive then don't draw that face.

Fading
To make a face fade when it goes in to the depth, you can use the number gotten from the hiden faces formula and use it to choose the color of the face. To get the maximum value put one face straight away from the screen (anti clockwise) then calculate the number for that face (using the formula) and then you can use that number to calculate diffrent shades or inks.

Scaling
This is used to make an object bigger or smaller but keeping the same form. Doing this it quite easy, you just multiply each of the X and Y coords with a scaling factor like this:

Xnew=Xold*Xsc

where:
Xsc is the scaling factor.
A factor greater than 1 strech the object and a factor between 0 and 1 shrinks it. You can also use negative numbers to produce a varety of reflections, try some diffrent values for some cool fx.