To place an object on a screen, you typically need to:
If you think of an object as a set of points in a coordinate system, you can describe characteristics of the object such as its position and shape with the position of each point.
The canonical example of a point set is a rectangle:
You can think of these points as offset vectors from the origin or
1 matrices. By modifying these matrices with mathematical operations, you can effectively change attributes from the object.
More specifically, you can do a linear transformation using a matrix to transform this vector. For example, for
n = 2:
You can also combine multiple transformations into a single matrix that performs all the transformations at once.
This post focuses on two-dimensional transformations because they are easier to understand, but the concepts work in any space.
Scaling is used to make an object bigger or smaller, mathematically this means multiplying each coordinate by a constant.
You scale an object uniformly with a matrix that has the following shape:
scale(sx, sy) =
Below is a live example you can play with, move the slider to see how different values change the box:
You scale uniformly across different axis by giving different values to
sy or scale only in one axis by keeping the other constant. Here is an example of scaling only affecting the
You can reflect a vector across either of the axes by using a negative scale factor. In the example below, the rectangle is reflected horizontally by using a scaling factor of
-1 in the
To rotate each point about the origin with the same angle use rotation transforms.
To rotate an object by an angle
ϕ, you need to:
In the example below, you can see a rotation matrix in action (
ϕ defined in radians.) You can move the slider to see the values update.
Shear transforms pushes or “tilts” objects vertically or horizontally.
To shear an object vertically, you can use the following matrix:
And to shear an object vertically you can use:
You can subsequently apply multiple transformations one after the other to the same object to get a more complex transformation, for example, given this box:
If you apply a
scale(1.3) transformation, you get:
If you subsequently apply a
shear-x(-0.3) transform, you get the final result of:
You can express the following example as a composition:
shear-x(scale(X)), and apply multiple transforms to end up with a desired object:
I try to post once a week interesting stuff about programming, *nix, and the web. If you’d like to be notified when a new post goes out, you can subscribe with the form below.