Matrix operations Flash applet

[14 Nov 2007]

UPDATE: Since Flash doesn’t work on mobile devices, I am now replacing all the IntMath applets with javascript equivalents, so much of this article is no longer current. This applet is now at Matrix Interactive.

A reader pointed out that my matrix operations Flash interactive was broken.

To my horror, I found she was right. Numbers were appearing all over the place and it was looking all wrong. I wrote the interactive a few years ago in Flash MX, if I recall correctly. Maybe the Actionscript was not playing nicely with the most recent Flash browser plugin.

Anyway, it needed some serious fixing.

When I looked at my code, I groaned. At the time I wrote it, I was excited about attaching code to movie clips (because that was what you did back then). I had not understood the (much better) concept of putting all the code in the first frame of the root. I had around 20 movie clips with bits of code hanging off them here and there. Just trying to figure out which clip did what action to what was a nightmare – even though it was all fairly well documented.

What I hoped would be a 10 minute quick fix was instead going to take quite a lot of time. I removed the broken interactive from the Multiplication of Matrices page, posted a message for users to ‘watch this space’, and set to work.

There was only one thing to do – throw it all out and completely start from scratch. This interactive is one of the most complicated things I’ve developed in Flash. The demonstration of matrix multiplication was an especially tricky thing to get working properly. Over the last week or so I have been slaving over triple nested loops and having fun re-learning some Actionscript syntax that had become rusty.

Here is a slab of the 600-line code. This part creates the middle matrix for the ‘multiply 2 matrices’ option:

for (i=0; i<mat1Cols; i++) {
 for (j=0; j<mat1Rows; j++) {
     matrix1.getNextHighestDepth(), 0, 0, 25, 20);
     = mat1Array[i+j*mat1Cols];
  eval('matrix1.matEle'+(100*i+j)).selectable = false;
  eval('matrix1.matEle'+(100*i+j)).border = false;
  eval('matrix1.matEle'+(100*i+j))._x = 15+(30*i);
  eval('matrix1.matEle'+(100*i+j))._y = 30*j;

Some of the mathematics used to make this interactive:

  • Matrix operations – adding, subtracting, scalar multiplying and multiplying (obviously)
  • Random numbers (Math.random in Actionscript)
  • Floor function, which rounds a number down to the nearest integer (Math.floor)
  • Maximum and minimum comparisons (Math.max and Math.min)
  • Cartesian coordinates (for placing the objects on the screen)
  • Geometry (height and width of matrices for spacing)
  • Arrays (which are a kind of matrix)
  • 3-D Geometry (z-levels of objects for placing things on top of other things)
  • Transformational geometry (rotating the left matrix bracket to form the right matrix bracket)
  • Hexadecimal numbers (eg 0xABABAB) for colors
  • Functions, which are operations that are repeated in the code. You can send variables to a function (eg function createMatrix0(matRows, matCols, type) )

When working on this kind of project I find that I cannot relax until I finish it. I could have spent another few hours giving it some more flair and style, but enough is enough.

Was it worth it? That matrix multiplication page is a high traffic page, so I hope so. Besides, I do enjoy the programming brain challenge.

Yesterday I finally got it all working and published it – go check it out: Matrix Interactive.

Share this page

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>