How to map points between 2D coordinate systems

This topic describes how to map points from one 2D coordinate system to another. This can be useful for graphics systems, such as canvas, that do not provide a current transformation matrix (CTM).

An affine transformation is a linear (or first-order) transformation that can relate two 2D coordinate systems, typically through a composition of rotations, translations, dilations, and shears. The following is a possible example:

Two 2D affine coordinate systems

Assuming a typical screen coordinate system (shown in red), affine transformations are expressed algebraically as follows:

Generic affine transformation equations

In other words, if we can determine a, b, c, and d, we can calculate the point (x', y') from the point (x, y) and vice versa.

Notice that this system of linear equations has four unknowns. Therefore, we need four equations to determine a, b, c, and d:

Four equations and four unknowns

In matrix notation, this linear system can be written as:

Matrix form of the prior system of equations

To determine a through d, we invertM and solve as follows:

Solving for the u vector

Note  Although most modern calculators, as well as a number of mathematical websites (such as WolframAlpha), can easily invert matrices, the symbolic inverse of M is as follows:

Formula for the inverse of M

Now by examining u and M, we see that we only need two known coincident points from each coordinate system:

u vector and M matrix

For example, from the previous diagram, we see that:

First diagram's set of coincident points

Plugging these values into u and M yields:

Matrix form for the first diagram

Taking the inverse of M (approximate values shown) and multiplying by u produces:

Calculation of the v vector

That is:

a, b, c, and d from vector v

So the transformation equations become:

Calculation of transformation equations for the first diagram

For example, (x, y) = (37.1, 58.3) maps to the point (x', y') = (-7, -3) as follows:

First validation for transformation equations

And the point (x, y) = (54.28, 24.33) maps to the x’y’-origin, as expected:

Second validation for the transformation equations for the first diagram

This transformation technique can be useful for graphics systems that do not provide a current transformation matrix (CTM). Unlike SVG, canvas (as of this writing) does not provide a CTM (that is, there is no canvas.context.getTransform method). Therefore, the technique we've discussed here can be used in a number of scenarios instead. For example, consider a 600 pixel by 400 pixel canvas (in red) with the following implied coordinate system (in green):

Canvas diagram (second diagram)

For this relatively simple case, the required transformation equations can be derived without using linear algebra, but we do so to exemplify the above procedure. From this diagram, we see that:

Coincident point set for the second diagram

Thus,

M matrix associated with the second diagram

And,

Inverse of M for the second diagram

Therefore,

Solution of v vector for the second diagram

So the transformation equations become:

Transformation equations for the second diagram

That is, (0, 0) maps to (-8, 4) as follows:

First validation of transformation equations for the second diagram

And (600, 400) maps to (4, -4) in the same way:

Second validation of the transformation equations for the second diagram

As a final validation, we confirm that (400, 200) maps to the origin of the green coordinate system:

Third validation of the transformation equations for the second diagram

When the transformation equation coefficients are known, you can calculate (x, y) from (x', y') as follows:

Equations for x and y given x' and y'

To conclude, when a graphical system (such as canvas) does not provide a CTM, the above technique can be used to generate useful transformation equations given two coincident points from both 2D coordinate systems.

Related topics

How To Create 3D Graphics Using Canvas
HTML5 Canvas
SVG Coordinate Transformations

 

 

Show:
© 2014 Microsoft