2D Local & Global Coordinates Introduction to Computer Graphics Arizona State University

G. Farin

January 24, 2006

1 Motivation

In computer graphics, we typically design geometry in a special coordinate system, one that makes the construction easy, and then we move this geometry to a more general environment. Font design is a good 2D example. A designer will create a character of a font within a unit square (local coordinates), and then this character must be mapped to an arbitrary place and size on the printed page (global coordinates).

2 Local to Global and Back

As illustrated in Figure 1, we have a local coordinate box defined by lower-

left corner [\begin{matrix}0 \\ 0 \end{matrix}] and an upper-right corner [\begin{matrix}1 \\ 1 \end{matrix}] that we want to map to

the global coordinate (target) box defined by lower-left corner g_{min} and an upper-right corner g_{max}. Therefore, if we are given a point l in local coordinates, how do we find a point g in global coordinates?

We formulate an expression for the x− and y−coordinates separately and

Figure 1: Local and global coordinates: notation

notice that we would like to preserve ratios. This leads to

\frac{l_{x} − 0}{1 − 0} = \frac{g_{x} − g_{minx}}{g_{maxx} − g_{minx}}
\frac{l_{y} − 0}{1 − 0} = \frac{g_{y} − g_{miny}}{g_{maxy} − g_{miny}}

Solving for the unknown g leads to

\begin{aligned}g_{x} & = g_{minx} + l_{x}(g_{maxx} − g_{minx}) \\ & = g_{minx} + l_{x}Δ_{x} \end{aligned}  (1)
\begin{aligned}g_{y} & = g_{miny} + l_{y}(g_{maxy} − g_{miny}) \\ & = g_{miny} + l_{y}Δ_{y}. \end{aligned}  (2)

We can re-write these equations in the form

g_{x} = (1 − l_{x})g_{minx} + l_{x}g_{maxx}
g_{y} = (1 − l_{y})g_{miny} + l_{x}g_{maxy},

which is linear interpolation. Notice that Δ_{x} and Δ_{y} effect the shape of the geometry in the target box.

• If Δ_{x} > 1 then the geometry is stretched in x.

• If 0 < Δ_{x} < 1 then the geometry is squished in x.

• If Δ_{x} = 1 then there is no change.

• If Δ_{x} < 0 then the geometry flips.

The ratio of Δ_{x}/Δ_{y} defines the aspect ratio of the target box. The aspect ratio of the local system is one; If the target box has an aspect ratio different from one, then the object will be distorted.

If we are given a point in the global system, how do we find a point in the local system? Easy – simply solve (1) and (2) for l_{x} and l_{y}, respectively, namely

l_{x} = \frac{g_{x} − g_{minx}}{Δ_{x}}
l_{y} = \frac{g_{y} − g_{miny}}{Δ_{y}}

3 More General Coordinate Transformations

Often times we will want to map an arbitrary local coordinate box to a global target box. Suppose the local box is defined by the corners l_{min} and l_{max}, and we wish to map to the global target box with corners g_{min} and g_{max}, as illustrated in Figure 2.

Given l, find g: Set up the ratios that will be preserved.

\frac{l_{x} − l_{minx}}{l_{maxx} − l_{minx}} = \frac{g_{x} − g_{minx}}{g_{maxx} − g_{minx}}
\frac{l_{y} − l_{miny}}{l_{maxy} − l_{miny}} = \frac{g_{y} − g_{miny}}{g_{maxy} − g_{miny}}

And solve for g:

g_{x} = g_{minx} + [\frac{l_{x} − l_{minx}}{l_{maxx} − l_{minx}}](g_{maxx} − g_{minx})
g_{y} = g_{miny} + [\frac{l_{y} − l_{miny}}{l_{maxy} − l_{miny}}](g_{maxy} − g_{miny}).

Figure 2: Local and global coordinates: notation

Notice the [l_{max}, l_{min}] → [0, 1] mapping embedded in this equation!

Now it is easy to find l given g. Try it for yourself.

4 World to Window Transformations

It is a common practice to define a minmax box around the geometry that you want to display. Another name for this box is a world coordinate system. This minmax box is then the input to a command such as OpenGL’s gluOrtho2D(), which in turn, maps this minmax box to the window. Let’s suppose that our minmax box is a square of width four, centered at the ori-

gin. In other words, the lower-left corner is at [\begin{matrix}−2 \\ −2 \end{matrix}]. The OpenGL command

takes the form

gluOrtho2D(−2, 2, −2, 2).

As long as the window remains square, the aspect ratio of the world system and the window are the same, and your geometry is not distorted. However, if the window is allowed to be reshaped, and if we want our geometry to be displayed without distortion, then we need to compensate for such changes in aspect ratio.

Suppose the world system has width w_{0} and height h_{0}, and therefore, aspect ratio w_{0}/h_{0}. In our example here, the aspect ratio of the world system is one. Suppose the window has been reshaped to have width w_{1} and h_{1}, and further, suppose that w_{1} < h_{1}.

We need to stretch the minmax box to match the shape of the window’s shape. In other words, we need

\frac{w_{0}}{h_{0}} = \frac{w_{1}}{h_{1}} .

We will leave w_{0} as it is, and stretch the height:

h_{0} = w_{0} \frac{h_{1}}{w_{1}} .

Because our minmax box is centered at the origin, we simply center this new height around the origin, and the new OpenGL command becomes

gluOrtho2D(−2, 2, −2\frac{h_{1}}{w_{1}} , 2\frac{h_{1}}{w_{1}} ).

Our initial assumption was that w_{1} < h_{1}, therefore h_{1}/w_{1} > 1 and we have achieved the stretching we needed.

Now determine the gluOrtho() parameters if w_{1} > h_{1} for yourself!

For more information, examples, and exercises, see Practical Linear Algebra.