2x2 Matrix Visualization

This was part of a final project for CS 324E at UT Austin, taken Spring 2017.

A =

λ₁ =
λ₂ =

x₁ =

x₂ =

Determinant:

About

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.

λ₁ and λ₂ are the eigenvalues of matrix A, and x₁ and x₂ 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

Comments

There are a few cool observations about this visualization.

Singular matrices map to lower dimensional spaces (they are vectors or points)
Matrices with negative determinants 'flip' the ellipse
The singular values of the matrix are the magnitude of the semi-major/semi-minor ellipse axes. For symmetric matrices, eigenvetors line up with the semi-major/semi-minor axes.
Complex eigenvalues/eigenvectors live in the space outside of your screen. I currently do not display complex eigenvectors on the plot, even though I could show the projection of the complex vector on the real plane (your screen).
"Poorly conditioned" matrices are elongated ellipses

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).

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.