As Figure 1.2 shows, the origin of the device-coordinate systems lies at the top-left corner of the canvas, so that the positive y-axis, points downward. This is reasonable for text output, where we start at the top and increase y as we go to the next line of text. However, this direction of the y-axis is different from normal mathematical practice and therefore often inconvenient in graphics applications. For example, in a discussion about a line with a positive slope, we expect to go upward when we move along this line from left to right. Fortunately, we can arrange for the positive y direction to be reversed by performing this simple transformation:

Instead of the discrete (integer) coordinates we are using at the lower, device-oriented level, we want to use continuous (floating-point) coordinates at the higher, problem-oriented level. Other usual terms are device and logical coordinates, respectively. Writing conversion routines to compute device coordinates from the corresponding logical ones and vice versa is a bit tricky. We must be aware that there are two solutions to this problem, even in the simple case in which increasing a logical coordinate by one results in increasing the device coordinate also by one. We want to write the following methods:

With regard to x-coordinates, the first solution is based on rounding:

int iX(float x){return Math.round(x);}
float fx(int x){return (float)x;}

For example, with this solution we have

The second solution is based on truncating:

int iX(float x){return (int)x;}           // Not used in
float fx(int x){return (float)x + 0.5F;}  // this book.

With these conversion functions, we would have

With both solutions, the difference between any value x and fx(iX(x)) is not greater than 0.5. We will use the first solution throughout this book, since it is the better one if logical coordinates frequently happen to be integer values. In these cases the practice of truncating floating-point numbers will often lead to worse results than we would have with rounding.

Besides the above methods iX and fx (based on the first solution) for x-coordinates, we need similar methods for y-coordinates, taking into account the opposite directions of the two y-axes. At the bottom of the canvas the device y-coordinate is maxY while the logical y-coordinate is 0, which may explain the two expressions of the form maxY – ... in the following methods:

int iX(float x){return Math.round(x);}
int iY(float y){return maxY - Math.round(y);}
float fx(int x){return (float)x;}
float fy(int y){return (float)(maxY - y);}

Figure 1.4 shows a fragment of a canvas, based on maxY = 16.

Figure 1.4. Logical and device coordinates, based on ymax = 16

The pixels are denoted as black dots, each placed in the center of a square of dashed lines. In this discussion and elsewhere in this book, let us write x and y for logical and X and Y for device coordinates. (Since it is customary in Java to use lower-case letters at the beginning of variable names, we will not write X and Y in program text.) In Figure 1.4, the device-coordinates (X, Y) are placed between parentheses near each dot. For example, the pixel with device coordinates (8, 2), at the upper-right corner of this canvas fragment, has logical coordinates (8.0, 14.0). We have

iX (8.0)  = Math.round (8.0) = 8
iY (14.0) = 16 - Math.round (14.0) = 2
fx (8)    = (float)8 = 8.0
fy (2)    = (float) (16 - 2) = 14.0

The dashed square around this dot denotes all points (x, y) satisfying

All these points are converted to the pixel (8, 2) by our methods iX and iY.

Let us demonstrate this way of converting floating-point logical coordinates to integer device coordinates in a program that begins by drawing an equilateral triangle ABC, with the side AB at the bottom and the point C at the top. Then, using

we compute the new points A′, B′ and C′ near A, B and C and lying on the sides AB, BC and CA, respectively, writing

xA1 = p * xA + q * xB;
yA1 = p * yA + q * yB;
xB1 = p * xB + q * xC;
yB1 = p * yB + q * yC;
xC1 = p * xC + q * xA;
yC1 = p * yC + q * yA;

We then draw the triangle A′B′C′, which is slightly smaller than ABC and turned a little counter-clockwise. Applying the same principle to triangle A′B′C′ to obtain a third triangle, A″B″C″, and so on, until 50 triangles have been drawn, the result will be as shown in Figure 1.5.

Figure 1.5. Triangles drawn inside each other

If we change the dimensions of the window, new equilateral triangles appear, again in the center of the canvas and with dimensions proportional to the size of this canvas. Without floating-point logical coordinates and with a y-axis pointing downward, this program would have been less easy to write:

// Triangles.java: This program draws 50 triangles inside each other.
import java.awt.*;
import java.awt.event.*;

public class Triangles extends Frame
{  public static void main(String[] args){new Triangles();}

   Triangles()
   {  super("Triangles: 50 triangles inside each other");
      addWindowListener(new WindowAdapter()
         {public void windowClosing(WindowEvent e){System.exit(0);}});
      setSize (600, 400);
      add("Center", new CvTriangles());
      show();
   }
}

class CvTriangles extends Canvas
{  int maxX, maxY, minMaxXY, xCenter, yCenter;

   void initgr()
   {  Dimension d = getSize();
      maxX = d.width - 1; maxY = d.height - 1;
      minMaxXY = Math.min(maxX, maxY);
      xCenter = maxX/2; yCenter = maxY/2;
   }
   int iX(float x){return Math.round(x);}
   int iY(float y){return maxY - Math.round(y);}

   public void paint(Graphics g)
   {  initgr();
      float side = 0.95F * minMaxXY, sideHalf = 0.5F * side,
         h = sideHalf * (float)Math.sqrt (3),
         xA, yA, xB, yB, xC, yC,
         xA1, yA1, xB1, yB1, xC1, yC1, p, q;
      q = 0.05F;
      p = 1 - q;
      xA = xCenter - sideHalf;
      yA = yCenter - 0.5F * h;
      xB = xCenter + sideHalf;
      yB = yA;
      xC = xCenter;
      yC = yCenter + 0.5F * h;
      for (int i=0; i<50; i++)
      {  g.drawLine(iX(xA), iY(yA), iX(xB), iY(yB));
         g.drawLine(iX(xB), iY(yB), iX(xC), iY(yC));

g.drawLine(iX(xC), iY(yC), iX(xA), iY(yA));
         xA1 = p * xA + q * xB;
         yA1 = p * yA + q * yB;
         xB1 = p * xB + q * xC;
         yB1 = p * yB + q * yC;
         xC1 = p * xC + q * xA;
         yC1 = p * yC + q * yA;
         xA = xA1; xB = xB1; xC = xC1;
         yA = yA1; yB = yB1; yC = yC1;
      }
   }
}

In the canvas class CvTriangles there is a method initgr. Together with the other program lines that precede the paint method in this class, initgr may also be useful in other programs.

It is important to notice that, on each triangle edge, the computed floating-point coordinates, not the integer device coordinates derived from them, are used for further computations. This principle, which applies to many graphics applications, can be depicted as follows:

which is in contrast to the following scheme, which we should avoid. Here int device coordinates containing rounding-off rounding-off errors are used not only for graphics output but also for further computations, so that such errors will accumulate:

In summary, we compare and contrast the logical and device coordinate systems in the following table, in terms of (1) the convention used in the text, but not in Java programs, of this book; (2) the data types of the programming language; (3) the coordinate value domain; and (4) the direction of the positive y-axis:

Suppose we want to map an interval of real logical coordinates, such as

to the set of integer device coordinates {0,1,2,..., 9}. Unfortunately, the method

int iX(float x){return Math.round(x);}

used in the previous section is not suitable for this purpose because for any x greater than 9.5 (and not greater than 10) it returns 10, which does not belong to the allowed sequence 0,1,...,9. In particular, it gives

ix (10.0) = 10

while we want

ix (10.0) = 9

This suggests that in an improved method iX we should use a multiplication factor of 0.9. We can also come to this conclusion by realizing that there are only nine small intervals between ten pixels labeled 0,1,...,9, as Figure 1.6 illustrates. If we define the pixel width (= pixelWidth) as the distance between two successive pixels on a horizontal line, the above interval 0 ≤ x ≤ 10 of logical coordinates (being real numbers) corresponds to 9 × pixelWidth. So in this example we have:

In general, if a horizontal line of our window consists of n pixels, numbered 0,1,..., maxX (where maxX = n – 1), and the corresponding (continuous) interval of logical coordinates is 0 ≤ x ≤ rWidth, we can use the following method:

Figure 1.6. Pixels lying 10/9 logical units apart

int iX(float x){return Math.round(x/pixelWidth);}

where pixelWidth is computed beforehand as follows:

maxX = n − 1;
pixelWidth = rWidth/maxX;

In the above example the integer n is equal to the interval length rWidth, but it is often desirable to use logical coordinates x and y satisfying

where rWidth and rHeight are real numbers, such as 10.0 and 7.5, respectively, which are quite different from the numbers of pixels that lie on horizontal and vertical lines. It will then be important to distinguish between isotropic and anisotropic mapping modes, as we will discuss in a moment.

As for the simpler method

int iX(float x){return Math.round(x);}

of the previous section, this can be regarded as a special case of the improved method we have just seen, provided we use pixelWidth = 1, that is rWidth = maxX, or rWidth = n – 1. For example, if the drawing rectangle is 100 pixels wide, so that n = 100 and we can use the pixels 0,1,2,..., 99 = maxX on a horizontal line, this simpler method iX works correctly if it is applied to logical x-coordinates satisfying

The point to be noticed is that, due to the value pixelWidth = 1, the logical width is 99.0 here although the number of available pixels is 100.

The term anisotropic mapping mode implies that the scale factors for x and y are not necessarily equal, as the following code fragment shows:

Dimension d = getSize();
maxX = d.width - 1; maxY = d.height - 1;
pixelWidth  = rWidth/maxX;
pixelHeight = rHeight/maxY;

...
int iX(float x){return Math.round(x/pixelWidth);}
int iY(float y){return maxY - Math.round(y/pixelHeight);}
float fx(int x){return x * pixelWidth;}
float fy(int y){return (maxY - y) * pixelHeight;}

We will use this in a demonstration program. Regardless of the window dimensions, the largest possible rectangle in this window has the logical dimensions 10.0 × 7.5. After clicking on a point of the canvas, the logical coordinates are shown, as Figure 1.7 illustrates.

Figure 1.7. Logical coordinates with anisotropic mapping mode

Since there are no gaps between this largest possible rectangle and the window edges, we can only see this rectangle with some difficulty in Figure 1.7. In contrast, the screen will show this rectangle very clearly because we will make it red instead of black. Although the window dimensions in Figure 1.7 have been altered by the user, the logical canvas dimensions are still 10.0 × 7.5. The text displayed in the window shows the coordinates of the point near the upper-right corner of the rectangle, as the cross-hair cursor indicates. If the user clicks exactly on that corner, the coordinate values 10.0 and 7.5 are displayed. This demonstration program is listed below.

// Anisotr.java: The anisotropic mapping mode.

import java.awt.*;
import java.awt.event.*;

public class Anisotr extends Frame
{  public static void main(String[] args){new Anisotr();}

   Anisotr()
   { super("Anisotropic mapping mode");
     addWindowListener(new WindowAdapter()

{public void windowClosing(WindowEvent e){System.exit(0);}});
      setSize (400, 300);
      add("Center", new CvAnisotr());
      setCursor(Cursor.getPredefinedCursor(Cursor.CROSSHAIR_CURSOR));
      show();
   }
}

class CvAnisotr extends Canvas
{ int maxX, maxY;
  float pixelWidth, pixelHeight,
      rWidth = 10.0F,
      rHeight = 7.5F,
      xP = −1, yP;

   CvAnisotr()
   { addMouseListener(new MouseAdapter()
     {  public void mousePressed(MouseEvent evt)
        {  xP = fx(evt.getX()); yP = fy(evt.getY());
           repaint();
        }
     });
   }
   void initgr()
   {  Dimension d = getSize();
      maxX = d.width - 1; maxY = d.height - 1;
      pixelWidth  = rWidth/maxX; pixelHeight = rHeight/maxY;
   }

   int iX(float x){return Math.round(x/pixelWidth);}
   int iY(float y){return maxY - Math.round(y/pixelHeight);}
   float fx(int x){return x * pixelWidth;}
   float fy(int y){return (maxY - y) * pixelHeight;}

   public void paint(Graphics g)
   {  initgr();
      int left = iX (0), right = iX(rWidth),
          bottom = iY (0), top = iY(rHeight);
      if (xP >= 0) g.drawString(
         "Logical coordinates of selected point: "
         + xP + " " + yP, 20, 100);
      g.setColor(Color.red);
      g.drawLine(left, bottom, right, bottom);

g.drawLine(right, bottom, right, top);
      g.drawLine(right, top, left, top);
      g.drawLine(left, top, left, bottom);
   }
}

With the anisotropic mapping mode, the actual length of a vertical unit can be different from that of a horizontal unit. This is the case in Figure 1.7: although the rectangle is 10 units wide and 7.5 units high, its real height is less than 0.75 of its width. In particular, the anisotropic mapping mode is not suitable for drawing squares, circles and other shapes that require equal units in the horizontal and vertical directions.

We can arrange for horizontal and vertical units to be equal in terms of their real size by using the same scale factor for x and y. Let us use the term drawing rectangle for the rectangle with dimensions rWidth and rHeight, in which we normally draw graphical output. Since these logical dimensions are constant, so is their ratio, which is not the case with that of the canvas dimensions. It follows that, with the isotropic mapping mode, the drawing rectangle will in general not be identical with the canvas. Depending on the current window size, either the top and bottom or the left and right edges of the drawing rectangle lie on those of the canvas.

Since it is normally desirable for a drawing to appear in the center of the canvas, it is often convenient with the isotropic mapping mode to place the origin of the logical coordinate system at that center. This implies that we will use the following logical-coordinate intervals:

Our methods iX and iY will map each logical coordinate pair (x, y) to a pair (X, Y) of device coordinates, where

To obtain the same scale factor for x and y, we compute rWidth/maxX and rHeight/maxY and take the larger of these two values; this maximum value, pixelSize, is then used in the methods iX and iY, as this fragment shows:

Dimension d = getSize();
int maxX = d.width - 1, maxY = d.height - 1;
pixelSize = Math.max(rWidth/maxX, rHeight/maxY);

centerX = maxX/2; centerY = maxY/2;
...
int iX(float x){return Math.round(centerX + x/pixelSize);}
int iY(float y){return Math.round(centerY - y/pixelSize);}
float fx(int x){return (x - centerX) * pixelSize;}
float fy(int y){return (centerY - y) * pixelSize;}

We will use this code in a program that draws a square, two corners of which touch either the midpoints of the horizontal canvas edges or those of the vertical ones. It also displays the coordinates of a point on which the user clicks, as the left window of Figure 1.8 shows.

Figure 1.8. Windows after changing their sizes

In this illustration, we pay special attention to the corners of the drawn square that touch the boundaries of the drawing rectangle. These corners do not lie on the window frame, but they lie just inside it. For the square on the left we have:

By contrast, for the square that has been drawn in the narrow window on the right, it is the corners on the left and the right that lie just within the frame:

The following program uses a drawing rectangle with logical dimensions rWidth = rHeight = 10.0. If we replaced this value 10.0 with any other positive constant, the output would be the same.

// Isotrop.java: The isotropic mapping mode.
//    Origin of logical coordinate system in canvas
//    center; positive y-axis upward.
//    Square (turned 45 degrees) just fits into canvas.
//    Mouse click displays logical coordinates of
//    selected point.
import java.awt.*;
import java.awt.event.*;

public class Isotrop extends Frame
{  public static void main(String[] args){new Isotrop();}

   Isotrop()
   { super("Isotropic mapping mode");
     addWindowListener(new WindowAdapter()
        {public void windowClosing(WindowEvent e){System.exit(0);}});
     setSize (400, 300);
     add("Center", new CvIsotrop());
     setCursor(Cursor.getPredefinedCursor(Cursor.CROSSHAIR_CURSOR));
     show();
   }
}

class CvIsotrop extends Canvas
{  int centerX, centerY;
  float pixelSize, rWidth = 10.0F, rHeight = 10.0F, xP = 1000000, yP;

   CvIsotrop()
   { addMouseListener(new MouseAdapter()
     {  public void mousePressed(MouseEvent evt)
        {  xP = fx(evt.getX()); yP = fy(evt.getY());
           repaint();
        }
     });
   }

   void initgr()
   {  Dimension d = getSize();
      int maxX = d.width - 1, maxY = d.height - 1;

pixelSize = Math.max(rWidth/maxX, rHeight/maxY);
      centerX = maxX/2; centerY = maxY/2;
   }

   int iX(float x){return Math.round(centerX + x/pixelSize);}
   int iY(float y){return Math.round(centerY - y/pixelSize);}
   float fx(int x){return (x - centerX) * pixelSize;}
   float fy(int y){return (centerY - y) * pixelSize;}

   public void paint(Graphics g)
   {  initgr();
      int left = iX(-rWidth/2), right = iX(rWidth/2),
          bottom = iY(-rHeight/2), top = iY(rHeight/2),
          xMiddle = iX (0), yMiddle = iY (0);
      g.drawLine(xMiddle, bottom, right, yMiddle);
      g.drawLine(right,yMiddle, xMiddle, top);
      g.drawLine(xMiddle, top, left, yMiddle);
      g.drawLine(left, yMiddle, xMiddle, bottom);
      if (xP != 1000000)
         g.drawString(
         "Logical coordinates of selected point: "
         + xP + " " + yP, 20, 100);
   }
}