Matrix Tutorial

Monkey Archive Forums/Monkey Tutorials/Matrix Tutorial

slenkar(Posted 2011) [#1]
Terms used:

Matrix - A bunch of numbers
Matrices - plural of matrix
Stack - A collection of objects where you can only add objects to the top and remove objects from the top.
DrawingMatrix- The matrix that influences graphics drawing.
Translate - move
Identity matrix - a matrix that does not alter graphics drawing.
Pop - remove an object from the top of a stack.
Push - add an object to the top of a stack.

When drawing graphics with monkey, all drawing is influenced by the DrawingMatrix.
The DrawingMatrix consists of 6 numbers:
2 for skewing graphics
2 for scaling graphics
2 for translating graphics

The identity matrix looks like this (1,0,0,1,0,0)
It has a scale of 1,1 and the other numbers are zero, so when graphics are drawn to the screen they appear unchanged.

To draw a square at double its normal size you would do this in monkey:

The Scale command alters the scale numbers in the drawing matrix.
Then a rectangle would be drawn at screen co-ordinates 0,0 and it would be 100 by 100 pixels in size because of the scale command.

These changes are cumulative so if you do the same thing twice it adds the numbers you type-in to the numbers in the DrawingMatrix.


doing this:

would be the same as:

Translating is also affected by the scale, so drawing a rect at screen coordinates 20,30 and setting Scale to (2,2) would result in the rectangle appearing at 40,60.

So, to draw a Rectangle at screen coords:30,30
SetMatrix(1,0,0,1,0,0) 'reset the matrix to identity


To rotate an image from its center you have to make sure you have its handle set to the center,


Local img:Image=LoadImage("img.png")

If you want to rotate the graphics you are about to draw you have to use the Rotate command, this alters the skewing and scale of the matrix to
produce a rotation effect.

you supply a number to the Rotate command to tell monkey how many degrees you want to rotate the graphics by.

E.g. Rotate(90)

You have to translate the matrix to the position
you want the image to appear at before you use the Rotate command.

to draw an image at 100,100 rotated by 45 degrees:
SetMatrix(1,0,0,1,0,0)'reset the matrix

There is also a stack of matrices that can be used.

The PushMatrix() command makes a copy of the DrawingMatrix and puts it onto the matrix stack.
The DrawingMatrix is unchanged though.
This is useful for when you want to save a matrix and use it later.

When you are ready to use it you use the command PopMatrix() then the DrawingMatrix is replaced by the matrix on top of the stack.
The matrix on top of the stack is also removed from the stack (and destroyed).

Warpy(Posted 2011) [#2]
Good stuff!

CodeGit(Posted 2011) [#3]
Good. Maybe should be added to the monkey docs??

DruggedBunny(Posted 2011) [#4]
Yeah, good stuff, thanks.

Is it worth me adding my matrix tutorial here? It's currently embedded as a huge list of comments in Monkey docs -> Sample Programs -> James Boyd -> Matrix rocks! and I imagine it'd be easier to read in this form.

(If so, same thread or start new thread?)

slenkar(Posted 2011) [#5]
thanks I may do some more tutorials later

GfK(Posted 2011) [#6]
Is there much overhead on using loads of Translate/Rotate stuff?

slenkar(Posted 2011) [#7]
I dont think so, because its just altering numbers in the matrix.

Warpy(Posted 2011) [#8]
No. Each transformation is at most six multiplication operations and shifting a couple of arrays about.

For some reason there's a hard limit on the number of matrices you can push to the stack, but that's easily changed or removed by looking at graphics.monkey