# 2x2 Matrix Visualization

A =

λ1 =
λ2 =
x1 =

x2 =

Determinant:

I've commonly seen matrices in textbooks represented in two dimensions as ellipses. This page is my attempt at making that representation interactive. Although this is limited to 2x2 matrices, the same concepts can be extrapolated to higher dimensions.

Here, the 2x2 identity matrix is represented by a two-dimensional unit ball centered at the origin, as shown by the yellow circle in the above plot, which is a representation of \lVert \mathbf{A} \rVert_2 . This unit disk is mapped to an ellipse by the transformation that matrix A represents.

λ1 and λ2 are the eigenvalues of matrix A, and x1 and x2 are the corresponding eigenvectors of matrix A. These are represented visually by the green and blue vectors on the above plot.

### Instructions

• Input values into matrix A
• Click the submit button to see the matrix transformation
• Click the reset button to set A back to the identity matrix
• Zoom in and out of the plot using the + and - buttons

There are quite a few cool observations about this visualization. Some day, when I have more time, I will write more about them. But for now, here is a short list of observations.
• Singular matrices map to lower dimensional spaces (they are vectors or points)
• Matrices with negative determinants 'flip' the ellipse
• Semi-major/semi-minor ellipse axes sometimes align with eigenvectors, and other times do not (singular values vs. eigenvalues)
• Complex eigenvalues/eigenvectors live in the space outside of your screen. I currently do not display complex eigenvectors on the plot, even though I should probably show the projection of the complex vector on the real plane (your screen).
• "Poorly conditioned" matrices are elongated ellipses
... and there are probably a lot more things that I've overlooked, but that's all I've come up with for now. Please let me know if you've come up with anything else, or if you have any comments, questions, or corrections!

### Source Code

• Version 1 (ZIP file, 20 kB): This is the original Processing code (entirely Processing/Java). You will need the Processing software package to run the program. It has a slightly different GUI from the version on this page (screenshot). It's honestly not as good as the one on this page because I had to make my own text box and button classes, whereas this page uses HTML text boxes and buttons, but they still work.
• NOTE: I have been told this version doesn't work on Mac OS X, but I'm not sure why because I don't have a Mac to test on...
• Version 2 (ZIP file, 101 kB): This is code for the version you see on this page (Processing/Java, Javascript, HTML, & CSS). It comes with version 1.4.1 of Processing.js, so you won't need any other packages for this version to work. This is probably the version you want if you aren't familiar with Processing.