Using Vectors and Matrices in JavaScript
There are a number of operations that can be carried out on matrices - ranging from addition, subtraction all the way to determinant and matrix inverse.
If you have been following our lessons keenly, you are ripe enough to implement any of these matrix operations in code yourself. It's a simple matter of following the same rules that guide you when you calculate these operations by hand. (Do it as a personal project just to be sure).
What we intend to do here is to expose you to the beauty of Vectors and Matrices; how they are used to manipulate pictures and images to produce the effects you enjoy so much -- like picture scaling, skewing, flipping, rotating (clockwise and counter-clockwise), mirroring, merging several pictures (with different effects), colour inverting, e.t.c. -- in picture-design-and-editing applications, and also the theatrical effects produced in games and movies.
Just bear it in mind that vectors are special cases of matrices. That is, vectors are 1 by m or m by 1 dimensional matrices depending on how you choose to look at it.
Image and Picture Effects
HTML animations, transitions and transformations; SVG graphics and canvas drwaings are
achieved through the use of vectors and matrices.
These are largely implemented with CSS and JavaScript.
Graphics and Animations References:
For a head-start on OpenGL, please see the following links:
W3Schools Tutorials
- very precise and well written; Perfect for all.
Check out the CSS tutorials on animations, transitions and transformations; the SVG tutorials
on graphics, and the Canvas tutorials on sprites.