Enter the Matrix

I am not a mathematician, in fact, I’d go as far as to say that my elementary mathematical ability is terrible, overruled by complex number, calculus and strange thoughts about the general concept of numbers around theoretical physics, anyway, I think I’ve somehow managed to figure out quite a bit about geometry and the 3D mathematics that allows one to simulate some of the effects of 3D spacial manipulation that we see around us on a daily basis. The thing that has enabled me to do this is pure perseverance. I guess that is an ability in itself yet I must stress that I learned this without any formal training so perhaps it should come with a guarantee WARNING (There isn’t a guarantee). Right, disclaimer over but I’d also like to say that I’ve probably done it the hard way and taking linear algebra and/or trigonometry lessons in school, college or university might help you if you find this tough going. Of course, there is also a large number of online resources to keep you busy so if you don’t like what you see, please go see Mr. Google at his usual home.

This tutorial is specifically geared towards 3D when approaching it with regards to computer graphics. I’m going to outline some of the basics of three dimensional math which will include information about vectors, the purpose of matrices and why the sin and cosine trigonometric functions are so important when simulating 3D space. I will then visit the concepts of projection where I will concentrate on delivering some of the concepts that allow you to put your 3D scene onto your 2D monitor. For further information about projection, I suggest looking up one of the greatest mathematicians of all time, August Ferdinand Möbius.

Vectors

You probably use vectors every day without knowing it. The number line (you know, basic counting) is a one dimensional space right? You can move along it in a single dimension. That gem of knowledge took me about a year to figure out on my own, congratulations, you now know it (or already knew it). OK, lets elaborate further. Generally, when we start counting, we start at zero. It makes sense in our everyday world and it will make sense here too. So, below, I present the trusty number line with some positive and negative integers (whole numbers) shown.

Let’s look at at the number line because it’s so often dismissed and in my opinion, I think that this is a bit of a problem in the way that numbers are usually taught. Here are a few things I noticed about it;

• I assume that the number line would keep going forever, to negative infinity on the negative side of zero and to positive infinity on the positive side of zero.
• I can select a single point on or in-between any of the integer values.
• It is one dimensional (Some might call this line the x dimension, that’s just a convention and could just as easily be; foo, y or yo’ mamma).
• Any single point on the number line can be represented with a single numerical value.
• An addition to any given value on the number line would move us positively along the number line (in this case, right).
• A subtraction to any given value on the number line would move us negatively along the number line (in this case, left).
• If I started at zero and added a random value, lets say four, I could represent that addition as a direction of right and magnitude of four.
• If I started at zero and added a random value, lets say four, I could represent that addition as a direction of right and magnitude of four.
• If I started at zero and added a random value, lets say four, I could represent that addition as a direction of right and magnitude of four.

Yes…that’s right, I was supposed to write that three times. Why? Let’s look at the definition of a vector from Wikipedia:

In elementary mathematics, physics, and engineering, a Euclidean vector (sometimes called a geometric or spatial vector) is a geometric object that has both a magnitude (or length) and direction.

What a revelation! We actually do vector maths every day when we calculate the change from the shop, it’s just that we’re bound to use a single dimensional that we call the number line. Let’s prove this point by doing some vector maths in our little one dimensional, infinite universe. Perhaps the easiest place to start would be to do some simple vector addition right? Firstly, we must note that we must designate a starting point on our number line, we call this the origin. Our origin will be at zero and instead of using yo’ momma as our axis name, I think it’s probably best that we stick to the convention and use ‘x’.

We can see that starting from the origin, if we were to add four, we could represent the resulting vector with an arrow starting at zero and ending at four. Lets take a look at that.

So, with a single number of four, we managed to determine both a direction and magnitude. So, what if I were to add another vector to this vector, lets say, a vector that goes in the same direction with a magnitude of two? Lets take a look at that.

Well, I colored the resulting vector in green, it seems that the addition of a vector in the positive direction with magnitude of four and a second vector in the same direction with a magnitude of two results in a vector in the positive direction with a magnitude of six. So isn’t this just basic math? Yes…however, starting to think about basic math in this way means that we can tool ourselves with some new interesting concepts:

• If I wanted to move the resulting point to the right, I could add a positive vector at the beginning or end of the addition.
• If I wanted to move the resulting point to the left, I could add a negative vector at the beginning or end of the addition.
• If I wanted to make the vector have a length of one, I could just divide it by the positive value of its length. (as long as it’s length is not zero)
• If I wanted to scale it so that it became bigger, I could multiply its length by a value greater than one.
• If I wanted to scale it so that it stayed the same size, I could multiply its length by one.
• If I wanted to scale it so that it got smaller, I could multiply its length by a value smaller than one.
• I could calculate it’s direction in relation to another vector.
• More….

Woah…This is a lot of functionality that just popped out of our simple number line but how can you code this functionality for your new one dimensional world? Well, first of all we can build a Vector.

Note: Flash has some built in Vector classes that can be used, but we’re learning so lets build our own. Also note, this is not the typed array version of a Vector, it is the mathematical construct of the same name.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

package io.plugin.math.algebra
{
 
/**
* A one dimentional, Vector class
* @author Gary Paluk - http://www.plugin.io
*/
public class Vector1D
{
private var _x: Number;
 
public function Vector1D( x: Number = 0)
{
_x = x;
}
 
public function get x():Number
{
return _x;
}
 
public function set x(value:Number):void
{
_x = value;
}
 
}
 
}

package io.plugin.math.algebra
{

/**
* A one dimentional, Vector class
* @author Gary Paluk - http://www.plugin.io
*/
public class Vector1D
{
private var _x: Number;

public function Vector1D( x: Number = 0)
{
_x = x;
}

public function get x():Number
{
return _x;
}

public function set x(value:Number):void
{
_x = value;
}

}

}

OK…basic, it is a number. Nothing exciting there, but lets start adding some of that functionality we discovered earlier, how about that addition:

1
2
3
4

public function add( v: Vector1D ): void
{
_x += v.x;
}

public function add( v: Vector1D ): void
{
_x += v.x;
}

And subtraction?

1
2
3
4

public function subtract( v: Vector1D ): void
{
_x -= v.x;
}

public function subtract( v: Vector1D ): void
{
_x -= v.x;
}

What about one of the functions that’s a little more complicated? Scaling?

1
2
3
4

public function scale( scaler: Number ): void
{
_x *= scaler;
}

public function scale( scaler: Number ): void
{
_x *= scaler;
}

Hmmm, that was even more simple that the addition and subtraction methods. What about the function where we make our vector have a length of one? This function is very useful later on, for now, you only need to know a couple of things, this function is called normalization so we will give our method the name normalize() and that when we normalize our vector, we must preserve its direction.

1
2
3
4
5
6
7
8
9
10
11
12
13

public function get length(): Number
{
return Math.abs( x );
}
 
public function normalize(): void
{
if ( length == 0 )
{
throw new Error("A division by zero is not possible as you're not Neo.");
}
scale( 1 / length );
}

public function get length(): Number
{
return Math.abs( x );
}

public function normalize(): void
{
if ( length == 0 )
{
throw new Error("A division by zero is not possible as you're not Neo.");
}
scale( 1 / length );
}

OK, anyone slightly familiar with programming a bit of AS3 will now be tooled up with a few pretty boring functions of one dimensional vectors but we are interested in 3D so lets step things up a bit by entering the second dimension. You might already be familiar with a second dimension. If you’ve ever done some Flash coding, MovieClips have been able to be moved around the screen on at least two dimensions since the program was first available. You might know this second dimension by it’s axis name, y. It is 90 degrees out of phase with the x dimension and again, y is just a convention, usually associated with a vertical axis. We will make our second dimension opposite to the direction that Flash uses for its screen co-ordinates, as the direction of these axes is completely up to the programmer.

With this new addition of a second dimension, to specify a point in our 2D space, you will notice that must provide two numbers instead of one. We will do this in order of (x, y), x being the point on the x axis and y, the point on the y axis. Our origin will be in the center at (0, 0). Lets do something similar to what we did on our earlier example in one dimension, we will add a vector of (5, 2) and draw it with a red line to indicate the resulting vector.

I will add another vector (-3, 2) indicated in blue and I will draw the final result of the addition in green again.

The result of our addition is a new vector from (0,0) to (2,4). We could calculate its length and we can see that it definitely has a direction. The old single, horizontal axis made figuring out a vectors direction quite easy, if it was positive it was was at 90 degrees (if zero degrees is positive y) and if it was negative, it was at 270 degrees. It was always going to point either left or right unless it’s length was zero, but now it just be at any angle from 0 to 360. Maybe we will need this information later on, so lets keep it in mind.

This tutorial is being worked on, but right now, I have to do some work so I’ll bee back on it tomorrow morning!