indeed, you needed a 3D matrix, to make

• both rotation (a 2D matrix: the four editable/greyed-bordered boxes on the left)
• and translations (an additional translation vector: the two editable/greyed-bordered boxes on the right)
  in the 2D plane, right?

it's in this webgl tutorial on matrices, or in this one... and it comes from this "intrisic" limitation of RAM, which is "linear"...

So, what's here is more about the 2D plane than about a 2D matrix...

I mean: a 2D matrix can't do translations: (0,0) will stay there.

PS: a few other nice things a 2D matrix can do:

• rotations around a "real" z axis: wiki
• rotations around an "imaginary" t axis: expl1 or expl2
• help you find "the next solution" here

cheers
.k.

Hi Nicky! First of all, thanks a lot for the great idea and implementation here - I've been using the magnificent matrix in my Computer Graphics class since I got to know it - and students love it.

Yesterday I noticed an issue in chrome 69 (Linux, Ubuntu - it worked on Windows with the same resolution). For some crazy reason, the inputs in the input matrix are not fitting the available space (per screenshot).

A quick look in the CSS showed that it could be fixed by (a) dropping the input margins and using (b) display: flex with justify-content: space-between for the matrix elements, as well as (c) dropping the absolute positioning of the last row.

If you're too busy, I can work on a PR.

Thanks a lot!