Matrix learning toy


I've always been pretty good at math. Not like a genius or anything, but I get it and I can work with it, you know? Unfortunately I've not been that good at paying attention or spending time on homework. I didn't attend a particularly difficult level of secondary school and, well, my grades were fine as is. No need to waste time on homework that I could spend building tree huts, right?

While it still holds true to some degree, I never really bothered to learn about matrices. To be frank, this is only something that bothered me last week while digging deeper into webgl. So you know, it's still not a piece of knowledge I had been missing for all this time. Anyways, they became relevant so I dug into them and learned how to do them. And built a tool, of course.

The TLDRs can jump right to the candy.

Matrix computations are quite trivial by nature. It's quite tedious to work them out by hand, but the operations themselves are super simple. You only have to remember a new approach to tackle them and then apply your basic calc to them. This is not a tutorial and I'm not the right person to teach you about them. There's a nice complex wikipedia entry with pictures. But really mostly you want the pictures, so just google image for it and follow the arrows. Well, or use my tool.

Right, the matrix tool. So it's really just a toy to play around with. Get some bearings about what happens when you enter which values where. Why is an identity matrix doing what it should do. What's the math behind the various 3d transformations. Ok it won't actually tell you "why", just shows you outputs and, if applicable, intermediate values.

How's it work?

You can edit each cell of a matrix directly. You can enter numbers or any other crap. For a single matrix that's not super interesting, but if you click the "add matrix" button it will add another matrix and create an "op node". That last bit is not relevant, but the point is that it now has two matrices with an operation, defaulting to "dot" (multiplication).

You can click the operation to change it to dot, division, addition, or subtraction. You probably mostly want dot.

If you click "add matrix" again, the output of the current operation is applied to another identity matrix, and so forth. This way you can create a chain of matrix transformations, see the intermediate outputs (on the right) and get the final result. Note that the order is relevant. You can only add matrices to the end of the chain because, well, it's too much work to make that work for the middle/front too :)

The name is optional, just to give a semantic description of the matrix if you want to.

The structure field is an easy way to copy/paste a matrix from another program. It supports a list of values, separated by either () {} [] (or even some mixes, it doesn't really care) and will try to auto detect the size.

The size fields allow you to alter the matrix. Internally it just keeps everything in a 6x6 double array (quite inefficient, but super irrelevant). So if you resize the matrix you may see values you previously hid. The max size is hardcoded to 6x6. To change that you mainly have to update the datastructure which is assuming a max width/height of 6 right now.

The current field is a representation of the current matrix and could be different from the input structure. You can change the characters used in this field by the options at the top of the page. Some programs may require a certain character, and comma's or no comma's.

The size really allows you to adjust the matrix size. As said before, hardcoded to be between 1 and 6, inclusive.

There's one special case for the matrix: if you use a 1x1 it will apply the operation 1:1 to each cell, rather than normal matrix op. So for example ((1,2),(3,4))*((2)) multiplies each cell by 2, no other magic. This special case works for 1x1 only. Other matrices require the left hand side width to be equal to the right hand side height for multiplication, or same dimensions for addition.

There's a preset dropdown which is mostly designed for playing with 2d and 3d transformations. If you select one of them in the dropdown it will replace the size inputs with something relevant for that preset. You can enter values and the matrix will be updated properly (this is one way binding, updating the matrix directly won't update the special fields). I hope I got those presets correct...

At the top is a load and export button. The export button creates a link with hash for your current matrix. The load button will load the hash part. It's a bit clunky, I know. Then again, nobody but me will probably use it anyways so I feel an equilibrium has been reached in terms of effort there :)

I think that's it. Hope it helps you :)