Case Study: Computer Graphics in Automotive Design

This case study investigates how three-dimensional images are rendered effectively in two dimensions. This type of operation is very important in automotive design, for it allows engineers to experiment with images on a computer screen instead of using a three-dimensional model of the automobile.  One way to render a three-dimensional image in two dimensions is called a perspective projection, which is studied in this case study.  You should read Section 2.7 before attempting this case study.

The data for this case study was derived from measurements made on the author's 1983 Toyota Corolla; all coordinates are measured in feet.  The origin is placed at the center of the car.

Data Points: (-6.5,-2,-2.5), (-6.5,-2,2.5), (-6.5,.5,2.5), (-6.5,.5,-2.5), (-2.5,.5,-2.5), (-2.5,.5,2.5), 
                     (-.75,2,-2.5), (-.75,2,2.5), (3.25,2,-2.5), (3.25,2,2.5), (4.5,.5,-2.5), (4.5,.5,2.5), 
                     (6.5,.5,-2.5), (6.5,.5,2.5), (6.5,-2,2.5), (6.5,-2,-2.5)

These data points are collected in a data matrix D: each column contains the x, y, and z coordinates of a particular data point.  A fourth row containing all ones is attached to the matrix since homogeneous coordinates are being used.

D=(({{-6.5`, -6.5`, -6.5`, -6.5`, -2.5`, -2.5`, -0.75`, -0.75`, 3.25`, 3.25`, 4.5`, 4.5`, 6.5`, 6.5`, 6.5`, 6.5`}, {-2, -2, 0.5`, 0.5`, 0.5`, 0.5`, 2, 2, 2, 2, 0.5`, 0.5`, 0.5`, 0.5`, -2, -2}, {-2.5`, 2.5`, 2.5`, -2.5`, -2.5`, 2.5`, -2.5`, 2.5`, -2.5`, 2.5`, -2.5`, 2.5`, -2.5`, 2.5`, 2.5`, -2.5`}, {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}}))

Here is the data matrix D in Mathematica form.  Since D is a protected variable, lower case d is used instead.

d={{-6.5,-6.5,-6.5,-6.5,-2.5,-2.5,-.75,-.75,3.25,3.25,4.5,4.5,6.5,6.5,6.5,6.5},{-2,-2,.5,.5,.5,.5,2,2,2,2,.5,.5,.5,.5,-2,-2},{-2.5,2.5,2.5,-2.5,-2.5,2.5,-2.5,2.5,-2.5,2.5,-2.5,2.5,-2.5 ,2.5,2.5,-2.5},{1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1}};

In addition to the data points, how these data points are to be connected must be known.  A table listing which points connect to which others may be supplied.  Another way to record which points connect to which others is to use an adjacency matrix. This matrix consists only of 0's and 1's; the (i,j) entry in the matrix is a 1 if points i and j are connected.  Figure 1 shows both the table of connections and the adjacency matrix.

({{({{Pt., Coordinates, Connects to}, {1, (-6.5,-2,-2.5),  2,4,16}, {2, (-6.5,-2,2.5), 1,3,15}, {3, (-6.5,.5,2.5), 2,4,6}, {4, (-6.5,.5,-2.5), 1,3,5}, {5, (-2.5,.5,-2.5), 4,6,7}, {6, (-2.5,.5,2.5), 3,5,8}, {7, (-.75,2,-2.5), 5,8,9}, {8, (-.75,2,2.5), 6,7,10}, {9, (3.25,2,-2.5), 7,10,11}, {10, (3.25,2,2.5), 8,9,12}, {11, (4.5,.5,-2.5), 9,12,13}, {12, (4.5,.5,2.5), 10,11,14}, {13, (6.5,.5,-2.5), 11,14,16}, {14, (6.5,.5,2.5), 12,13,15}, {15, (6.5,-2,2.5), 2,14,16}, {16, (6.5,-2,-2.5), 1,13,15}}),           (({{0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1}, {1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0}, {0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, {1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, {0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0}, {0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0}, {0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0}, {0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0}, {0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0}, {0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0}, {0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0}, {0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0}, {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1}, {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0}, {0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1}, {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0}}))}})

Figure 1: Connection of Data Points: Table and Adjacency Matrix

The adjacency matrix will be used later in the lab, so here it is given in Mathematica form:

A={{0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,1},
     {1,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0},
     {0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0},
     {1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0},
     {0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0},
     {0,0,1,0,1,0,0,1,0,0,0,0,0,0,0,0},
     {0,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0},
     {0,0,0,0,0,1,1,0,0,1,0,0,0,0,0,0},
     {0,0,0,0,0,0,1,0,0,1,1,0,0,0,0,0},
     {0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,0},
     {0,0,0,0,0,0,0,0,1,0,0,1,1,0,0,0},
     {0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0},
     {0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1},
     {0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0},
     {0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,1},
     {1,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0}};

Connecting the data points as given in Figure 1, results in the picture in Figure 2, which Mathematica has rendered as a two-dimensional image.

Figure 2: The Toyota data points connected

How has Mathematica rendered the picture in Figure 2?  The key is a perspective projection.  A form of this projection is studied in the text on pages 163 and 164. In order to perform a perspective projection a center of projection (b,c,d) and a viewing plane must be identified.  The center of projection is the position of the viewer's eye; the viewing plane is the plane onto which the image is projected.  In the book, it is assumed that the center of projection has coordinates (0,0,d) and that the viewing plane is the xy plane.  In what follows it is also assumed that the viewing plane is the xy plane, but any choice of center of projection (b,c,d) will be allowed.

Given the center of projection (b,c,d) and some data point (x,y,z), the point (x*,y*,0) in the xy plane which lies on the same line as (b,c,d) and (x,y,z) must be found; see Figure 6 on page 163 for a picture. The point (x*,y*) in two-dimensional space is then plotted.  To find the coordinates x* and y*, the equation of the line through (b,c,d) and (x,y,z) must be calculated.  As is done on page 53 of the text, let the vectors p and v be defined as follows:

p=(({{b}, {c}, {d}})), v=(({{x}, {y}, {z}}))-(({{b}, {c}, {d}}))=(({{x-b}, {y-c}, {z-d}}))

The line through p parallel to  v is needed. Its equation may be written as

x=p+tv=(({{b}, {c}, {d}}))+t(({{x-b}, {y-c}, {z-d}}))=(({{b+t(x-b)}, {c+t(y-c)}, {d+t(z-d)}}))

where x is a point on the line  and t is a parameter which varies over all real numbers.  Since the point of interest on this line is (x*,y*,0), d+t(z-d)=0, or t=d/(d-z).  The values x* and y* may be found by substituting this value of t into their respective equations:

(SuperStar[x])=b+t(x-b)=b+((d(x-b))/(d-z))=((d x-b z)/(d-z)),
(SuperStar[y])=c+t(y-c)=c+((d(y-c))/(d-z))=((d y-c z)/(d-z))

Dividing the numerators and denominators of these fractions by d,

(SuperStar[x])=((x-(b/d) z)/(1-(1/d)z)),(SuperStar[y])=((y-(c/d) z)/(1-(1/d)z))

As in the text, the perspective projection will be represented by a matrix P, and homogeneous coordinates will be used to represent the points.  The point (x,y,z,1) must map to the point (x*,y*,0,1), but these coordinates may be scaled by the factor 1-(1/d)z, and instead map the point (x,y,z,1) to the point (x-(b/d)z, y-(c/d)z, 0, 1-(1/d)z).  Now it is relatively easy to display P:

P(({{x}, {y}, {z}, {1}}))=(({{1, 0, -(b/d), 0}, {0, 1, -(c/d), 0}, {0, 0, 0, 0}, {0, 0, -(1/d), 1}}))(({{x}, {y}, {z}, {1}}))=(({{x-(b/d)z}, {y-(c/d)z}, {0}, {1-(1/d)z}}))

For example, here is the perspective projection of the Toyota from two different points:

Example 1: (b,c,d)=(0,0,10)  This is the situation computed in the text.  Then

P=(({{1, 0, 0, 0}, {0, 1, 0, 0}, {0, 0, 0, 0}, {0, 0, -(1/10), 1}}))

In Mathematica form,

P={{1,0,0,0},{0,1,0,0},{0,0,0,0},{0,0,-1/10,1}};

so the data matrix D is converted to PD, which is labelled as newd:

newd=P.d;

(({{-6.5`, -6.5`, -6.5`, -6.5`, -2.5`, -2.5`, -0.75`, -0.75`, 3.25`, 3.25`, 4.5`, 4.5`, 6.5`, 6.5`, 6.5`, 6.5`}, {-2.`, -2.`, 0.5`, 0.5`, 0.5`, 0.5`, 2.`, 2.`, 2.`, 2.`, 0.5`, 0.5`, 0.5`, 0.5`, -2.`, -2.`}, {0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`}, {1.25`, 0.75`, 0.75`, 1.25`, 1.25`, 0.75`, 1.25`, 0.75`, 1.25`, 0.75`, 1.25`, 0.75`, 1.25`, 0.75`, 0.75`, 1.25`}}))

To obtain coordinates in (R^( 2)) divide the top three entries in each column by the corresponding entry in the fourth row, then discard the fourth row.  One can then plot the points (x*,y*) given in the first two rows of this matrix and connect them using the connection data in Figure 1. One can use Mathematica to find and plot these points in the following manner.  First notice that the third row of the matrix will always contain only zeros and need not be changed.  The top two entries in each column of PD (which we have stored as newd) may be divided by the entries in the fourth row using the command

M=Table[newd[[i,j]]/newd[[4,j]],{i,2},{j,16}]

(({{-5.2`, -8.67, -8.67, -5.2`, -2.`, -3.33, -0.6000000000000001`, -1.`, 2.6`, 4.33, 3.6`, 6.`, 5.2`, 8.67, 8.67, 5.2`}, {-1.6`, -2.67, 0.67, 0.4`, 0.4`, 0.67, 1.6`, 2.67, 1.6`, 2.67, 0.4`, 0.67, 0.4`, 0.67, -2.67, -1.6`}}))

The program RenderData included with this assignment  will use the data in this matrix and the adjacency matrix given above to plot the picture. In this case, the adjacency matrix is A and the data matrix is m, so the program produces Figure 3:

fig3=RenderData[A,M];

The program should produce the figure below:

Figure 3: The Toyota from point (0,0,10)

Example 2: (b,c,d)=(10,5,10) In this case

P=(({{1, 0, -1, 0}, {0, 1, -(1/2), 0}, {0, 0, 0, 0}, {0, 0, -(1/10), 1}}))

P={{1,0,-1,0},{0,1,-1/2,0},{0,0,0,0},{0,0,-1/10,1}};

so the data matrix D is converted to PD:

newd=P.d;

(({{-4.`, -9.`, -9.`, -4.`, 0.`, -5.`, 1.75`, -3.25`, 5.75`, 0.75`, 7.`, 2.`, 9.`, 4.`, 4.`, 9.`}, {-0.75`, -3.25`, -0.75`, 1.75`, 1.75`, -0.75`, 3.25`, 0.75`, 3.25`, 0.75`, 1.75`, -0.75`, 1.75`, -0.75`, -3.25`, -0.75`}, {0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`, 0.`}, {1.25`, 0.75`, 0.75`, 1.25`, 1.25`, 0.75`, 1.25`, 0.75`, 1.25`, 0.75`, 1.25`, 0.75`, 1.25`, 0.75`, 0.75`, 1.25`}}))

After rescaling by the elements in the fourth row, the coordinates for (x*,y*) are the columns of the matrix

M=Table[newd[[i,j]]/newd[[4,j]],{i,2},{j,16}];

(({{-3.2`, -12.`, -12.`, -3.2`, 0.`, -6.667, 1.4000000000000001`, -4.333, 4.6000000000000005`, 1.`, 5.6000000000000005`, 2.667, 7.2`, 5.333, 5.333, 7.2`}, {-0.6000000000000001`, -4.333, -1.`, 1.4000000000000001`, 1.4000000000000001`, -1.`, 2.6`, 1.`, 2.6`, 1.`, 1.4000000000000001`, -1.`, 1.4000000000000001`, -1.`, -4.333, -0.6000000000000001`}}))

Again using RenderData to plot the points (x*,y*) and connecting them using the adjacency matrix A, the picture in Figure 4 results.

RenderData[A,M];

The program should produce the figure below:

Figure 4: The Toyota from (10,5,10)

To give the effect of moving around while viewing the Toyota, a sequence of pictures from a varying set of centers of projection could be constructed.  For example, consider moving along the line with constant y-coordinate 0 and constant z-coordinate 10.  Points on this line have the form (b,0,10), where the x-coordinate b varies over some interval.  Since this line runs parallel to the driver's side of the Toyota, moving along this line should produce a set of images one would see while moving beside the car.  Since b is variable, the projection matrix in this case is

P=(({{1, 0, -(b/10), 0}, {0, 1, 0, 0}, {0, 0, 0, 0}, {0, 0, -(1/10), 1}}))

A sequence of pictures will be generated from a set of centers of projection along this line by using the  Do command.  The x-coordinate b will go from -10 to 10 by increments of 1/10.

Do[(b=i/10;
P={{1,0,-b/10,0},{0,1,0,0},{0,0,0,0},{0,0,-1/10,1}};
newd=P.d;
M=Table[newd[[i,j]]/newd[[4,j]],{i,2},{j,16}];
RenderData[A,M]),{i,-100,100,1}]

Mathematica can animate these pictures.  Click on the cell bracket containing all of the pictures which were just generated, then press Ctrl-Y. The pictures should then be animated, and will simulate passing the Toyota.

Another way to give the effect of motion is to perform a rotation  or a "zooming in" on the original data then performing a perspective projection from a fixed point.  Examples of each of these operations follow.

Rotations:  To rotate the three-dimensional object about the y-axis by an angle φ, the following calculations are done. By convention, a positive angle is the counterclockwise direction when looking toward the origin from the positive half of the axis of rotation.  As in the text, it may be shown that the rotation matrix using homogeneous coordinates for such a rotation is

(Subscript[A, y])=(({{cos φ, 0, sin φ, 0}, {0, 1, 0, 0}, {-sin φ, 0, cos φ, 0}, {0, 0, 0, 1}}))

Ay={{Cos[phi],0,Sin[phi],0},{0,1,0,0},{-Sin[phi],0,Cos[phi],0},{0,0,0,1}};

Likewise the matrices using homogeneous coordinates for rotations about the x and z axes are:

(Subscript[A, x])=(({{1, 0, 0, 0}, {0, cosφ, -sinφ, 0}, {0, sinφ, cosφ, 0}, {0, 0, 0, 1}})) and (Subscript[A, z])=(({{cosφ, -sinφ, 0, 0}, {sinφ, cosφ, 0, 0}, {0, 0, 1, 0}, {0, 0, 0, 1}}))

Ax={{1,0,0,0},{0,Cos[phi],-Sin[phi],0},{0,Sin[phi],Cos[phi],0},{0,0,0,1}};

Az={{Cos[phi],-Sin[phi],0,0},{Sin[phi],Cos[phi],0,0},{0,0,1,0},{0,0,0,1}};

To rotate the Toyota by 45° (or π/4 radians) about the x-axis one could set φ = π/4 and find that the rotation matrix is

phi=π/4;
Ax

(Subscript[A, x])=(({{1, 0, 0, 0}, {0, (1/(Sqrt[2])), -(1/(Sqrt[2])), 0}, {0, (1/(Sqrt[2])), (1/(Sqrt[2])), 0}, {0, 0, 0, 1}}))

Then apply this matrix to the data matrix D, getting (Subscript[A, x])D, which is too unwieldy to display.

Ax.d;

A perspective projection is now applied to this set of data. If the center of projection is (0,0,10) as in the first example, P(Subscript[A, x])D may be computed (remember to re-enter the correct P at this point)

P={{1,0,0,0},{0,1,0,0},{0,0,0,0},{0,0,-1/10,1}};

newd=P.Ax.d;

then divided by the fourth row to get the coordinates for (x*,y*) as the columns of the matrix

M=Table[newd[[i,j]]/newd[[4,j]],{i,2},{j,16}];

(({{-4.93, -6.74, -8.25, -5.69, -2.19, -3.17, -0.72, -1.1, 3.14, 4.77, 3.94, 5.71, 5.69, 8.25, 6.74, 4.93}, {0.27, -3.3, -1.79, 1.86, 1.86, -1.79, 3.07, -0.52, 3.07, -0.52, 1.86, -1.79, 1.86, -1.79, -3.3, 0.27}}))

These points are plotted to get the picture in Figure 5.

RenderData[A,M]

Notice how the image is rotated from that in Figure 1.

Figure 5: The rotated Toyota

A sequence of pictures can be generated which show the effects of rotating various amounts.  For example, the following code can be used to simulate the rotation of the Toyota about the z-axis, as viewed from the point (0,0,10).

Do[(phi=i*Pi/100;
Az={{Cos[phi],-Sin[phi],0,0},{Sin[phi],Cos[phi],0,0},{0,0,1,0},{0,0,0,1}};
P={{1,0,0,0},{0,1,0,0},{0,0,0,0},{0,0,-1/10,1}};
newd=P.Az.d;
M=Table[newd[[i,j]]/newd[[4,j]],{i,2},{j,16}];
RenderData[A,M]),{i,0,200,1}]

"Zooming": Imaging software packages offer the ability to zoom in (or out) from a picture. Usually 100% zoom indicates the original size of the graphics image. A zoom percentage of 200% would be double that of the original, while a percentage of 50% would be half the size of the original. To make this into a transformation, note that this is a special case of scaling where each of the x, y and z axes is scaled by the same factor p.  For a 200% zoom, p=2; for a 50% zoom, p=.5.  As is shown on page 160, the matrix which performs this scaling in homogeneous coordinates is

B=(({{p, 0, 0, 0}, {0, p, 0, 0}, {0, 0, p, 0}, {0, 0, 0, 1}}))

Thus, for example, to zoom in by 200% on the image of the Toyota, one could first find that

B=(({{2, 0, 0, 0}, {0, 2, 0, 0}, {0, 0, 2, 0}, {0, 0, 0, 1}}))

B={{2,0,0,0},{0,2,0,0},{0,0,2,0},{0,0,0,1}};

and thus that BD is the matrix

B.d;

(({{-13, -13, -13, -13, -5, -5, -1.5, -1.5, 6.5, 6.5, 9, 9, 13, 13, 13, 13}, {-4, -4, 1, 1, 1, 1, 4, 4, 4, 4, 1, 1, 1, 1, -4, -4}, {-5, 5, 5, -5, -5, 5, -5, 5, -5, 5, -5, 5, -5, 5, 5, -5}, {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}}))

The matrix PBD (given center of projection (0,0,10)) may now be computed, then divided by its fourth row to get the matrix

P={{1,0,0,0},{0,1,0,0},{0,0,0,0},{0,0,-1/10,1}};
newd=P.B.d;
M=Table[newd[[i,j]]/newd[[4,j]],{i,2},{j,16}];

(({{-8.67, -26, -26, -8.67, -3.33, -10, -1, -3, 4.33, 13, 6, 18, 8.67, 26, 26, 8.67}, {-2.67, -8, 2, 0.67, 0.67, 2, 2.67, 8, 2.67, 8, 0.67, 2, 0.67, 2, -8, -2.67}}))

When these points are plotted, the picture in Figure 6 results.

Do[(p=i/200;
P={{1,0,0,0},{0,1,0,0},{0,0,0,0},{0,0,-1/10,1}};
B={{p,0,0,0},{0,p,0,0},{0,0,p,0},{0,0,0,1}};
newd=P.B.d;
M=Table[newd[[i,j]]/newd[[4,j]],{i,2},{j,16}];
RenderData[A,M]),{i,100,300,2}]

fig6=RenderData[A,M]

Compare this figure to the original picture, which is Figure 3.

Figure 6: Zoom of 200%

Since the program RenderData only graphs a portion of the x-y plane, only a part of the zoomed picture is shown. Mathematica can be programmed to automatically scale its pictures, but then there would not be much difference between Figures 3 and 6. Notice that the parts of the zoomed picture don't have quite the same relationships to each other that they had in the original picture; this has happened because each image is viewed from the same point, and near objects are "magnified" more by the perspective transformation.  The scaling transformation could be applied after the perspective projection. Of course, this will seem to change the center of projection of the zoomed image.

Questions:

1. Find the perspective projection using the Toyota data in matrix D using the following points as centers of projection. Sketch the result using Mathematica.
	a.  (b,c,d)=(-5,10,10)
	b.  (b,c,d)=(0,10,25)

2. Produce Mathematica code which would show motion relative to the Toyota along a line which has constant x-coordinate  0, constant z-coordinate 10, and a y-coordinate varying from -5 to 5.

3. How might one develop Mathematica code which would show motion relative to the Toyota along a line which is not parallel to any of the coordinate axes?  Produce a plan for doing this or actually produce the code itself.

4. Rotate the Toyota 30° about the y-axis, then perform the perspective projection with center of projection (0,10,25). Sketch the result using Mathematica.  How does this sketch compare with that in Question 1b?

5. Rotate the Toyota 45° about the z-axis, then perform the perspective projection with center of projection (0,10,25). Sketch the result using Mathematica.  How does this sketch compare with that in Question 1b?

6. Produce Mathematica code which would show motion the Toyota rotating about the x and y axes.  Experiment with rotating about two axes simultaneously.

7. Zoom in on the Toyota with a zoom factor of 150%, then perform the perspective projection 
with center of projection (0,10,25). Sketch the result using Mathematica.  How does 
this sketch compare with that in Question 1b?

8. Produce Mathematica code which shows a "zooming effect" along the z-axis as the zoom parameter varies.  Compare this approach to changing the centers of projection.

References:

1.  Foley, James D., Andries van Dam, Steven K. Feiner, and John F. Hughes. Computer 
Graphics: Principles and Practice.  Second Edition. Reading: Addison-Wesley, 1996.

Chapters 5 and 6 contain a wealth of information about transformations and viewing in two and three dimensions.

RenderData[adjacency_, data_]:=(ptlist={};
For[i=1,i≤16,i++,
For[j=i,j≤16,j++,
If[adjacency[[i,j]]==1,{pt={},
AppendTo[pt,Transpose[data][[i]]],
AppendTo[pt,Transpose[data][[j]]],
AppendTo[ptlist,pt]}]]];
g={};
For[i=1,i≤Length[ptlist],i++,
AppendTo[g,Line[ptlist[[i]]]]];
Show[Graphics[g],PlotRange->{{-12,12},{-12,12}},AspectRatio->1])