Vectors and matrices
MULTIPLICATION:
AB x AC = AD
(8, 2) x (2, 6) = (8 x 2, 2 x 6) = (16, 12)
You might ask yourself how all of this relates to
matrices and CSS transforms but if you treat pixels
as vectors represented on a plane, you can use all
those vector operations to transform your pixels.
Matrices help us convert these transformations into
instructions that computers and graphics cards are
able to understand.
Matrices come in different sizes, which we
describe as dimensions. One of the simpler matrices
would be a two-dimensional matrix, made from two
columns and two rows. Here’s an example:
| 3 0 |
| 0 2 |
Multiplying matrices is a bit more complex than
with vectors; we need to use the dot product of
rows against the columns. To multiply a matrix by a
vector, do the following:
|a b| |x| |a x + b y|
| | x | | = | |
|c d| |y| |c x + d y|
And to multiply two 2D matrices together:
|a1 b1| |a2 b2| | a1a2 + a1c2 b1a2 + b1c2 |
| | x | | = | |
|c1 d1| |c2 d2| | c1b2 + c1d2 d1b2 + d1d2|
Let’s look at some examples of common matrices for
basic transformations. A scalar matrix is a matrix
where all off-diagonal elements are zero. We can use
this to scale our graphics up or down:
| scaleX 0 |
| |
| 0 scaleY |
This scalar matrix can be used to define how we
want to scale our image. Say we would like to scale
our image to double its original size while keeping its
ratio, we would use the following matrix:
| 2 0 |
| |
| 0 2 |
But if we wanted to double the scale of our image
horizontally only, we would keep the scaleY of the
matrix to the original value 1.
| 2 0 |
| |
| 0 1 |Another interesting matrix example is the rotation
matrix that borrows its wonders from trigonometry.
The matrix manifests itself as follows:| cos(Ơ) sin(Ơ) |
| |
| -sin(Ơ) cos(Ơ) |For the next example, we want to rotate our image
<3#ghjuhhv#forfnzlvh#+Ē27#udgldqv,=|#frv+Ē27,#####vlq+Ē27,#|
| |
#0vlq+Ē27,#####frv+Ē27,COMPUTER GRAPHICS TO CSS
In computer graphics, a matrix can act as
instructions for the GPU or another engine. Think
of them as another way to represent transformation
(as RGB is another way to represent colours) and
be used within CSS to perform a different type of
manipulation in two and three dimensions.Top left Subtracting
vectors AB(8, 2) and AC(2,
6) to create the new vector
AD(6,-4)
Top right Multiplying
vectors AB(8, 2) and AC(2,
6) to create the new vector
AD(16,12)
Above left Scaling an
image to double its original
size using a scalar matrix
Above right Scaling an
image horizontally using
the scaleX of the matrix