Jan 11, 2019 tags: | visualisation | tool | js |
Vector Transformation Visualization Tool (vtvt) — an online demo
Updated: 2019-04-22
I’ve created vtvt, an interactive tool for visualising vectors and their transformations in R2. It’s written in plain JavaScript (ECMAScript 2015) and utilizes html5 <canvas>.
Features (v1.03 2019-04-22):
- displays custom vectors, lines and points;
- supports object dragging (mouse or touch gestures);
- supports custom vector mapping (i.e. you can make a vector update its coordinates and colour in every frame based on some inputs, e.g. coordinates of other vectors);
- built-in calculation and display of eigenvectors;
- can display an animated sequence of vectors (multiple vectors per frame are allowed);
- multi-platform support (tested with the following operating systems: MacOS Sierra, Windows 10, Ubuntu 16.04, iOS 12, Raspbian Stretch[rpi3]).
Source, demos and reference are available from the github repository. The code is distributed under the terms of the MIT license. Thanks to u/senocular and u/theogjpeezy from reddit for answering a few questions I had about js while working on vtvt.
Demo shortcuts:
- Demo #1: addition of two vectors
- Demo #2: addition of three vectors
- Demo #3: plotting various objects
- Demo #4: power iteration algorithm for eigenvector estimation
- Demo #5: unit circle transformation
- Demo #6: linear regression
- Demo #7: principal component analysis
- Demo #8: a vector field
Demo #1
Vector v3 is mapped to v1 and v2 so it’s updated automatically every time you drag either of them. A copy of v2 is created and shifted over to the end of v1.
Demo #2
Another illustration of vector addition
Demo #3
Besides vectors, it’s also possible to draw lines, points and custom objects originating from (0,0) or any other point.
Demo #4
Animation of the power iteration algorithm: blog post
Demo #5
Unit circle transformation
Demo #6
Interactive linear regression. Each point can be moved around.
Demo #7
Interactive principal component analysis: blog post
Demo #8
A vector field: blog post