Gallery: Linear transformation visualiser

Gallery
1

Recently, I was trying to create a 2D linear transformation visualiser to help one of my friends learn linear algebra. While I initially created it in Scratch 2.0 (my friend wasn’t familiar with any other programming language, and I wanted her to understand how the code worked), I quickly got frustrated and moved to p5.js, a more familiar environment.

TODO

  1. Animate the transformation - This should be reasonable easy, and p5.teach may help me with this. EDIT: A version of the sketch that animates the transformation can be found here!
  2. Make it fast - I don’t know about you, but on my PC the sketch is slightly laggy and jerky. Not much, but it’s slow. I may need help with this
  3. Add coordinates - Again, I may need help with this, since I don’t have a lot of experience with text in p5.js.

TL;DR

I made a 2D linear transformation visualiser. Get the code here, or just play with it here.

4 Likes
2

Update: I’ve now added the determinant, along with the formula, rendered by KaTeX.

3

Do you mind if i convert this to processing later or do you already plan on doing this?

2 Likes
4

I’d be delighted it if you could translate this to Processing! I myself don’t know Java, so I couldn’t convert this to Processing even if I wanted to.

Note, however, that this sketch uses KaTeX to render the LaTeX formulas and matrices. This is not available in Java, so you’ll probably want to use something like JEuclid.

1 Like
5

ok ill take a look and see what I can do.