In order to be a successful game developer you must be skilled in technologies other than simply programming, art, music, game design, etc. You also need to be skilled in mathematics.
Unfortunately, skills in mathematics are in short supply among many students who enroll in my classes. Further, I suspect that such shortcomings are not peculiar to my classes. Those skills are probably in short supply among students on a nationwide basis. The purpose of this course is to remedy that situation for students enrolled in the game development curriculum at Austin Community College.
This module is the first in a series designed to teach you some of the math skills that you will need to become a successful game developer. In addition to helping you with your math skills, I will also teach you how to incorporate those skills into object-oriented programming using Java.
If you are familiar with other object-oriented programming languages such as C#, you should have no difficulty porting this material from Java to those other programming languages.
Since most computer games make heavy use of either 2D or 3D graphics, you will need skills in the mathematical areas that are required for success in 2D and 3D graphics programming. As a minimum, this includes but is not limited to skills in:
The math portion of this course will concentrate on the last five items in the above list. (I will assume that you either already have, or can gain the required skills in geometry and trigonometry on your own. There are many tutorials available on the web to help you in that quest my own Brief Trigonometry Tutorial.)
If you are familiar with my previously published tutorials, you may be aware that I usually try to cover the waterfront in my tutorials. Although I often make references to other good material, I rarely depend on material written by others to form an integral part of my presentation. In other words, I usually provide the required technical background to support the programming concepts embodied in my tutorials.
Insofar as vectors and matrices for this course are concerned, however, I will take a different approach. I will frequently refer you to an excellent interactive tutorial on Vector Math for 3D Computer Graphics by Dr. Bradley P. Kjell for the required technical background.
I will then teach you how to incorporate the knowledge that you gain from Kjell's tutorial into Java code with a heavy emphasis on object-oriented programming.
In the process, I will develop and explain a game-programming math library that you can use to experiment with and to confirm what you learn about vectors and matrices from the Kjell tutorial. The library will start out small and will grow as we progress through more and more material in subsequent modules.
Once you get into the Kjell interactive tutorial, you will find that the technical material is excellent, but the ability to navigate through the tutorial is somewhat limited. In particular, the Kjell tutorial requires you to start at the beginning of each chapter and to navigate forward or backward one page at a time. (There are Next, Home, and Previous buttons on each page.)
I have provided a set of online links that will make it easier for you to navigate the Kjell tutorial. With those links, you will be able to navigate inside the tutorial on the basis of topic headers and you won't be constrained to navigate from start to finish in a chapter one page at a time. Among other advantages, this will make it easier for you go back and review topics that you may not have understood completely on your first pass through the material.
I will frequently make reading assignments at the beginning of each module. You will have online access to all of the modules. You should stay one step ahead of the lectures and complete those reading assignments prior to the class in which the discussion of the relevant module will begin.
Before continuing with this module, you should study CHAPTER 0 -- Points and Lines in Kjell's tutorial (see the module titled Resources).
You should also study Kjell's CHAPTER 1 -- Vectors, Points, and Column Matrices down through the topic titled Variables as Elements.
I don't plan to present lectures that duplicate what Kjell has to say. Instead, I expect you to study the material and bring your questions about that material to the next class where I will try to answer them. If you don't ask questions about the Kjell material, that material won't be discussed in the classroom.
You may believe that you already know all there is to know about points and lines. However, I suspect that you will find explanations of some subtle issues that you never thought about before in the Kjell material.
In addition, Kjell begins the discussion of vectors and establishes the relationship between a vector and a column matrix in this reading assignment.
While you are there, make sure you understand what a column matrix means. Make sure you understand that a column matrix can be used to represent a point in a given coordinate frame. Also make sure you understand that the same point will have different representations in different coordinate frames. (You must know which coordinate frame is being used to represent a point with a column matrix.)
The purpose of this section, which will appear frequently in these modules, is to provide supplemental material to help blind and VI students understand the material in the Kjell tutorial (or other online references) that may not be accessible to them due to formatting issues, etc.
However, this is not an attempt to explain that material. This is simply an attempt to make it possible for blind and VI students to read that material with meaning.
The text and the navigation components in this reading assignment appear to be completely accessible using the screen reader named NVDA.
You will note that in most cases, Kjell asks a question before leaving one page and provides an answer on the next page. This is an excellent learning tool and you should take advantage of it.
The inaccessible material in this reading assignment consists primarily of a photographic image of a building and the use of matrix notation.
For the most part, the headings that follow match up with the page titles in the Kjell tutorial that contain the inaccessible content.
The photograph of the building appears on several different pages in Kjell's tutorials. It appears for the first time on Kjell's page titled "Picture of a Point."
There are two identical hexagonal structures on top of the building, one in the foreground and the other appearing to be perhaps 100 feet behind the first one. The camera angle is such that one structure appears large on the right side of the image. Due to perspective, the other structure appears smaller near the left side of the image. (Remember, the two structures are physically the same size. They appear to be different sizes due to being different distances from the camera.)
A slim metal rod or spire is mounted on the top of each structure pointing directly toward the sky. The two spires appear to be the same length and the upper tip of each spire appears to be at the same elevation above the ground.
The caption below the photograph reads "A geometrical point is a location in space. It has no other characteristics. It has no length, width, or thickness. It is pure location."
A smaller version of the same image appears on Kjell's page titled "Points in Space."
The same image appears again on Kjell's page titled "Very Thin Wire." This time, however, a straight line segment has been drawn on the image that connects the very top of one spire to the very top of the other spire as though a thin wire has been attached to the top ends of the spires and pulled very taut.
The hexagonal structure closest to the camera is mounted on a flat portion of the roof and a fancy white railing has been constructed in a square surrounding the structure. (If there is such a railing on the other structure, it isn't visible.)
The railing forms a fence that appears to be two or three feet high above the roof. It consists of four rails that connect corner posts at that level, four more rails parallel to the first four but near the level of the roof, and fancy grating between the upper and lower rails. The camera angle is such as to be facing one corner of the railing. Three corners of the railing are visible. Question 6 on the page titled "Very Thin Wire" refers to the top rail at the leftmost visible corner of the railing.
The same picture appears again on Kjell's page titled "Triangles." In this case, however, in addition to the line segment that was drawn to connect the top ends of the two spires together, two addition line segments were drawn to connect the top end of each spire to the top leftmost visible corner of the white railing.
The picture appears again on Kjell's page titled "Representation," but this time without the three black line segments that formed the triangle. In this version three red line segments have been added. The three red line segments join at the bottom-left corner of the railing at the level of the roof. That juncture forms one end of each of the three red line segments. Kjell refers to this point as the origin. An arrow head is drawn on the other end of each of the three red line segments
One red line segment extends toward the sky, along the edge of the post on the leftmost corner of the railing. This line is parallel to both spires. The upper end of this line segment is labeled with a Y alongside the arrowhead.
A second red line segment extends to the right along the bottom rail and is perpendicular to the first line segment described above. This line segment is labeled with an X alongside the arrowhead. These two line segments describe a plane that is parallel to the surface formed by one side of the railing.
The third red line segments goes off toward the left. This line segment is perpendicular to both of the other line segments. This line segment is labeled with a Z alongside the arrowhead.
Kjell refers to each of the three red line segments as an axis. The three taken together would normally be referred to as the axes (plural). Although it isn't shown in the image, each axis would, mathematically, also extend in the opposite direction through the origin.
In addition to the three axes, the image has a red dot at the top right corner of the railing, in the plane formed by the X and Y axes. That dot is labeled P0. Reference is made to that point in Question 9 on the page titled "Coordinates."
Kjell also introduces the concept of a column matrix on the page titled "Coordinates." Sighted readers would see Kjell's column matrix as the three letters X, Y, and Z in a vertical column, with X at the top and Z at the bottom. The three letters in the column are enclosed in a large matching pair of square brackets.
Although I am a novice when it comes to using NVDA, it appears that NVDA goes silent when it encounters the representation of the matrix. Therefore, in these modules, I will represent a column matrix in an HTML table as shown below:
X |
Y |
Z |
I have been told by those who know how to use screen readers that the elements in such a table are accessible.
The answer to Question 9 on that page is given as:
8.0 |
2.0 |
0.0 |
Kjell's page titled "Little Boxes" contains a drawing of a box in a 3D coordinate system. The origin is drawn a little below and to the left of the center of the drawing.
The three axes are shown in red intersecting at the origin. Only the positive ends of the axes are shown. In other words, only those axes that are to the right of, in front of, and above the origin are shown.
The Y axis points straight up as a vertical line. The X axis points off to the right as a horizontal line. The Z axis is intended to point out of the screen and poke you in the eye. Since that isn't possible, however, the Z axis is drawn pointing down and to the left at an angle of approximately 135 degrees clockwise relative to the X axis.
Vertical tic marks are shown on each axis to serve as numeric calibration points. Although not labeled as such, each tic mark appears to represent one unit.
A 3D representation of a box is drawn behind the plane formed by the X and Y axes. The front face of the box touches that plane. The left face of the box touches the plane formed by the Y axis and the negative Z axis.
The width of the box is shown to be four tic marks or four units. The height of the box is shown to be eight tic marks or units. There is no way to know what the depth of the box is just from looking at the drawing. (The negative end of the Z axis is not shown and therefore there are no tic marks to use to measure the depth of the box.)
A large black dot is shown at the upper-right front corner of the box and labeled Q0. Another large black dot is shown at the upper-right back corner of the box and labeled Q1.
Right-click here (or execute the corresponding keyboard commands) to download an SVG file named Math1006a.svg that contains a drawing very similar to the Kjell drawing. You can explore that drawing using the ways described in the module titled Preface. Sighted users should be able to simply click here to cause the SVG file to open and display the drawing in their browser.
Kjell shows the following matrix as representing the coordinates of the point labeled Q0:
4.0 |
8.0 |
0.0 |
Kjell represents the answer to Question 10 with the following matrix:
4.0 |
8.0 |
-4.0 |
Kjell represents the answer to Question 11 with the following matrix:
4.0 |
12.0 |
-4.0 |
Kjell shows the same picture again but this time with a different (green) coordinate system and a red + labeled P1 at the top of the closest spire.
The structure containing the closest spire adjoins a portion of the building's roof that slopes the way many roofs do. The sloping portion of the roof is to the left of the structure in the image.
A new green 3D coordinate system is drawn with the Z axis pointing to the left along the ridge line of the roof. The X axis appears to point toward the ground parallel to the pitch of the roof and perpendicular to the ridge line of the roof. The Y axis points up at an angle perpendicular to the slope of the roof.
This picture also shows the point P0 in red at the top-right corner of the railing.
Kjell repeats the fact that in the previous frame, the point labeled P1 was given the representation
4.0 |
12.0 |
-4.0 |
He says that the column matrix that represents P1 in the new frame is roughly
-2.0 |
16.0 |
-8.0 |
In my opinion, however, one would be hard pressed to determine that simply from looking at the picture.
Kjell represents the answer to Question 13 as
3.0 |
8.0 |
-4.0 |
The picture appears again on the page titled Sunlight in its original form with nothing drawn on it. This time, the picture is intended to show light and shadows attributable to the sun, which is not shown in the picture.
The flat pitched roof is in shadow and the right side of the railing and the structure is in shadow. The left side of the structure and the railing is in the sunlight. This suggests that the sun is rather low in the sky somewhere off to the left of the building. The sun is low enough that the pitch on the roof causes it to be in shadow.
The picture appears again on the page titled Vector. This time, five equal length parallel line segments are shown in yellow with arrow heads on the right end of each line segment. The line segments appear to point from upper left to lower right at an angle of approximately 45 degrees clockwise relative to the horizontal.
The picture appears again on this page. This time, the picture not only shows the yellow vectors, it also shows the red 3D coordinate system from before with the origin at the bottom of the left-most side of the railing, the Y axis pointing straight up, the X axis parallel to the bottom of the railing and pointing off to the right, and the Z axis perpendicular to the X and Y axes.
Kjell refers to the tail and the tip of a vector. The tip is the end with the arrow head.
Obviously, you can't answer Question 16 without seeing a graphic representation of the picture and comparing the lengths of the vectors to the other landmarks in the picture, such as the length of the top rail on the railing. However, you can read his answer to the question.
The vector on this page reads
3.0 |
-4.0 |
-3.0 |
We have now moved into CHAPTER 1 — Vectors, Points, and Column Matrices of the Kjell tutorial.
The page titled Virtual Tourist contains a drawing of a type that is often referred to as a wireframe drawing. This picture represents a snowman constructed of three large balls of white snow stacked vertically. The snowball on the bottom is largest, and the snowball on the top is the smallest.
A blue hat is placed on the top and some black and orange dots form the eyes and the nose.
However, the drawing doesn't show solid white snowballs. Instead, each ball looks like something that one might construct from wires with the intent of covering the structure with white material to create a solid snowball. In other words, only the skeleton for each snowball is shown and you can see through that skeleton.
The snowman sits on a ground that is also a wireframe drawing. In other words, the ground consists of a rough grid of wires which, when covered with a flexible material, would resemble a surface with little hills and valleys.
The snowman is facing the camera, and is surrounded by four evergreen trees and a part of a fifth one. Three trees and a part of a fourth tree are on the left side of the scene, to the right of the snowman. The remaining tree is on the snowman's left, which places it on the right side of the scene.
The trees are constructed of orange wireframe cylinders for the tree trunks, capped by green wireframe cones for the evergreen foliage. The cones are large at the bottom and small at the top.
This page shows the finished or nearly finished version of the same picture. In this picture, the wireframe objects appear to have been covered with a flexible material of the correct color. The snowballs look like solid white spheres. The tree trunks look like solid orange cylinders. The green tops of the trees look like solid cones.
Highlights and shadows have been added to cause the scene to be more realistic. Those shadows make it appear that the light is directed on the scene from a little to the right of the camera. Thus, the bottom snowball has a highlight on the lower left abdomen (if a snowman has an abdomen). The snowman's right side (remember, the snowman is facing the camera) is in shadow, and the snowman's extreme left side has a tinge of shadow.
Highlights and shadows have been applied to the trunks and the green cones that make up the trees in a manner that is consistent with the light source described above.
The ground, however, doesn't exhibit little hills and valleys that were apparent in the wireframe version. For some reason, the lower left portion of the image that represents the ground has been given a pink tint.
You can download and save this image as a jpg file. If you are fortunate enough to have access to an IVEO system and the IVEO Creator Pro software, you can import the jpg file into IVEO and emboss it using the variable dot heights produced by a Tiger embosser. That should give you a feel for the highlights and shadows, etc. However, be aware that for some reason, when you download and import the file into IVEO, a large C appears in front of the lower snowball that makes up the snowman.
This page contains another view of the same scene. In this view, the camera appears to have pulled further back from the snowman and moved around to the snowman's left so that the snowman is no longer facing the camera. Because the camera has been pulled back, the snowman and the trees appear to be smaller and several additional trees have come into the scene.
This page contains a vector diagram in the form of a 3D cube. Four vectors form the bottom left, top left, top right, and bottom right edges of the cube that tie the front face of the cube to the back face of the cube.
You can right click here to download an SVG file named Math1006b that replicates the vector diagram on the page titled Vector in Kjell's tutorial. You will probably need to open this file in the free IVEO viewer, Google Chrome, or IE9 to print and work with it. I am currently running Firefox 8.0, which does not display the arrow heads on the vectors. The arrow heads are constructed from SVG "path" elements, which probably means that Firefox 8.0 does not support SVG "path" elements. (It seems that there is always one compatibility problem or another.)
There is an image on Question 5 on the page titled Vector, but you should be able to answer the question without seeing the image.
The vector on Kjell's page titled Column Matrix reads
2.9 |
-4.6 |
0.0 |
This page also contains a row matrix. NVDA seems to read the row matrix with no problem.
Question 6 on this page asks for the Dimension of each of the three following column matrices:
First matrix
2.9 |
-4.6 |
0.0 |
Second matrix
-13.45 |
92.4 |
2.0 |
-42.01 |
Third matrix
2 |
0 |
5 |
1 |
The answers are given on the next page in Kjell's tutorial as 3, 4, and 4.
This page in Kjell's tutorial contains the following structure containing three column matrices:
|
|
|
Question 7 asks if the column matrix given by
2.9 |
-4.6 |
0.0 |
is the same as the column matrix given by
2.9 |
0.0 |
-4.6 |
The answer is given on the next page in Kjell's tutorial titled Convenient Printing of Column Matrices.
That completes the supplemental notes for the reading assignment for this module.
I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.
I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com.
The remainder of this module will be dedicated to putting what you have learned about points and lines to work in program code. Vectors will be taken up in the next module.
This is not a course in computer programming. You were not expected to know how to program computers when the course started, and you will not be expected to know how to program computers when you complete the course.
However, the course description reads as follows:
"Presents applications of mathematics and science in game and simulation programming. Includes the utilization of matrix and vector operations, kinematics, and Newtonian principles in games and simulations. Also covers code optimization."
That description isn't referring to board games where the players toss the die and move little tokens around a path on the board. The course description is referring to computer games and simulations. Computer games and simulations require programs to be written.
You will be expected to gain a strong appreciation of how the mathematics and physics concepts that we cover factor into computer programming by the time you finish the course. For that reason, most, if not all, of those concepts will be illustrated using computer code. Hopefully that exposure will give you a strong appreciation for how the mathematics and physics concepts factor into the program code for a game program.
In the next module, we will begin the development of a general purpose game math library that will make it easier to mentally separate the mathematical concepts from the program code. In this module, however, we will simply illustrate the concepts of points and lines by programming those concepts directly into a simple demonstration program.
This is a simple Java program that illustrates one of the ways that points and lines can be represented in Java code.
In this and most future modules, I will break the programs down and explain them in fragments. A complete listing of this program is provided in Listing 8 near the end of the lesson.
This program illustrates one implementation of the concepts of a point and a line segment in Java code. Four points (locations in space) are defined by passing the coordinates of the four points as the x and y parameters to the constructor for the Point2D.Double class. This results in four objects of the Point2D.Double class being created or instantiated.
Two line segments are defined by passing pairs of points as parameters to the constructor for the Line2D.Double class. This results in two objects of the Line2D.Double class being created or instantiated.
The draw method belonging to an object of the Graphics2D class is used to draw the two line segments on a Canvas object for which the origin has been translated to the center of the Canvas.
Figure 1 shows a reduced version of the screen output.
Figure 1. Graphics illustration of four points and two lines. |
---|
![]() |
The coordinate values of the points and the selection of point-pairs to specify the ends of the line segments is such that the final rendering is a pair of orthogonal lines that intersect at the origin. (You could think of these lines as the axes in a Cartesian coordinate system.)
Right click here to download an SVG file named Math1006c.svg containing essentially the same image as shown in Figure 1.
Listing 1 shows the controlling class, including the main method for the program named Math1006_01. The main method simply instantiates a new object of a class named GUI. It is the GUI object that produces the screen image shown in Figure 1.
Listing 1. The controlling class named Math1006_01. |
---|
class Math1006_01{ public static void main(String[] args){ GUI guiObj = new GUI(); }//end main }//end controlling class Math1006_01 |
Listing 2 shows the beginning of the class named GUI, including the constructor for the class.
Listing 2. Beginning of the class named GUI. |
---|
class GUI extends JFrame{ //Specify the horizontal and vertical size of a JFrame // object. int hSize = 800; int vSize = 800; GUI(){//constructor //Set JFrame size and title setSize(hSize,vSize); setTitle("R.G.Baldwin"); //Create a new drawing canvas and add it to the // center of the JFrame. MyCanvas myCanvas = new MyCanvas(); this.getContentPane().add(myCanvas); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); }//end constructor |
Listing 2 begins by declaring and initializing a pair of instance variables that will be used to specify the size of the JFrame shown in Figure 1.
The constructor begins by using the two instance variables to set the size of the JFrame. The constructor also sets the title for the JFrame.
Then the constructor instantiates a Canvas object and adds it to the JFrame. Without getting into the details as to why, I will simply tell you that the Canvas object fills the entire client area of the frame, which is the area inside of the four borders.
Finally, the constructor defines the behavior of the X-button in the top right of the JFrame and causes the JFrame to become visible on the screen.
If you want to dig deeper into these topics, you may want to spend some time studying my tutorials at www.DickBaldwin.com.
Listing 3 shows the beginning of an inner class named MyCanvas including the beginning of an overridden paint method. (The Canvas class was extended into the MyCanvas class to make it possible to override the paint method.)
Listing 3. Beginning of the inner class named MyCanvas. |
---|
class MyCanvas extends Canvas{ //Override the paint() method. This method will be // called when the JFrame and the Canvas in its // contentPane are displayed on the screen. public void paint(Graphics g){ //Downcast the Graphics object to a Graphics2D // object. The Graphics2D class provides // capabilities that don't exist in the Graphics // class. Graphics2D g2 = (Graphics2D)g; //By default, the origin is at the upper-left corner // of the canvas. This statement translates the // origin to the center of the canvas. g2.translate( this.getWidth()/2.0,this.getHeight()/2.0); |
This overridden paint method will be executed whenever the JFrame containing the Canvas is displayed on the computer screen or whenever the repaint method is called on the canvas.
The paint method always receives an incoming reference to an object of the class Graphics. As a practical matter, you can think of that object as representing a rectangular area on the screen on which the instructions in the paint method will draw lines, images, etc.
(The paint method actually receives a reference to an object of the class Graphics2D, but to maintain backward compatibility, Sun elected to pass it in as the superclass type Graphics.)
The Graphics class was defined early in the life of the Java programming language, and it has limited capability. Later on, Sun defined the Graphics2D class as a subclass of Graphics.
Significant new capabilities, (including the ability to deal with coordinate values as real numbers instead of integers), were included in the Graphics2D class. In order to access those new capabilities, however, it is necessary to downcast (change the type of) the incoming reference to type Graphics2D as shown in Listing 3.
The last statement in Listing 3 translates the origin from the upper-left corner of the canvas to the center of the canvas. This is equivalent to creating a new coordinate frame as explained by Kjell.
The default coordinate frame has the origin at the upper-left corner of the canvas. The new coordinate frame has the origin at the center of the canvas. Note, however, that even though the origin has been translated, the positive vertical direction is still toward the bottom of the canvas.
Listing 4 defines two points in space by instantiating two objects of the class named Point2D.Double, and saving references to those objects in variables of the superclass type Point2D.
Listing 4. Define two points as two locations in space. |
---|
Point2D pointA = new Point2D.Double(-this.getWidth()/2.5,0.0); Point2D pointB = new Point2D.Double(this.getWidth()/2.5,0.0); |
The object referred to as pointA represents the location in 2D space at the left end of the horizontal line shown in Figure 1. As explained by Kjell, the values used to represent this location in space are relative to the current coordinate frame in which the origin is at the center of the canvas.
Had the origin not been translated to the center of the canvas in Listing 3, a different set of values would have been required to represent that same location in space.
Similarly, the object referred to as pointB represents the location in space at the right end of the horizontal line shown in Figure 1.
Listing 5 uses the two points described above to construct an object that represents a line segment connecting the two points by instantiating an object of the class named Line2D.Double.
Listing 5. Construct a line segment. |
---|
Line2D.Double horizLine = new Line2D.Double(pointA,pointB); |
As shown in Figure 1, the values of the points relative to the current coordinate frame causes this line segment to be horizontal when the coordinate frame is displayed with the orientation shown in Figure 1.
On the other hand, a different rendering of the coordinate frame may have caused the line segment to be something other than horizontal.
The main point here is that the line segment created in Listing 5 represents a line segment between two points in space but it is not the true line segment.
The true line segment has no width, and therefore is not visible to the human eye. The line segment constructed in Listing 5 is simply a representation of the true line segment.
When rendered on the screen, that line segment could take on an infinite number of appearances depending on how the space is rendered on the screen. It just happens that in the case of Figure 1, the rendering of that space on the screen causes the line segment to appear to be parallel to the bottom of a rectangular screen.
Listing 6 uses a similar procedure to construct an object that represents a line segment that is perpendicular to the previous line segment, and which intersects the previous line segment at the origin of the current coordinate frame.
Listing 6. Construct an object that represents a vertical line segment. |
---|
Point2D pointC = new Point2D.Double(0.0,-this.getHeight()/2.5); Point2D pointD = new Point2D.Double(0.0,this.getHeight()/2.5); Line2D.Double vertLine = new Line2D.Double(pointC,pointD); |
Finally, Listing 7 calls the draw method of the Graphics2D class twice in succession to draw the two lines on the screen as shown in Figure 1.
Listing 7. Draw the two lines on the screen. |
---|
g2.draw(horizLine); g2.draw(vertLine); }//end overridden paint() }//end inner class MyCanvas }//end class GUI |
Listing 7 also signals the end of the overridden paint method, the end of the inner class named MyCanvas, and the end of the top-level class named GUI.
Kjell describes his points and lines in a very general way that is suitable for use in mathematical operations later on. However, in the above program, I fell into the trap of defining my points and lines using Java classes that are intended primarily for rendering graphics on the screen. That approach is probably not conducive to use in mathematical operations.
We need to step back and take another look at what we are doing here. That will be the main purpose of the next module.
If you are also a programming student, or if you have a strong interest in programming, I encourage you to copy, compile, and run the program that I have presented in this module to confirm that you get the same results. Experiment with the code, making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.
See the module titled Resources for a list of online resources for this course.
In this lesson, you learned what Kjell has to say about points, lines, and vectors. You also saw what you learned about points and lines implemented in Java program code.
Listing 8 shows a complete listing of the program, which you can copy, compile, and run.
Listing 8. Complete listing of the program named Math1006_01. |
---|
/*Math1006_01.java Copyright 2011, R.G.Baldwin This program illustrates the visual manifestation of the concepts of points and lines using Java. Four points (locations in space) are defined by using the coordinates of the four points as the x and y parameters to the constructor for the Point2D.Double class. This results in four objects of the Point2D.Double class. Two line segments are defined by using pairs of points as parameters to the Line2D.Double class. This results in two objects of the Line2D.Double class. The draw method belonging to an object of the Graphics2D class is used to draw the two line segments on a Canvas object for which the origin has been translated to the center of the Canvas. The coordinate values of the points and the selection of point-pairs to specify the ends of the line segments is such that the final rendering is a pair of orthogonal lines that intersect at the origin. Tested using JDK 1.6 under Vista Home Premium Edition. *********************************************************/ import java.awt.geom.*; import java.awt.*; import javax.swing.*; class Math1006_01{ public static void main(String[] args){ GUI guiObj = new GUI(); }//end main }//end controlling class Math1006_01 //======================================================// class GUI extends JFrame{ //Specify the horizontal and vertical size of a JFrame // object. int hSize = 800; int vSize = 800; GUI(){//constructor //Set JFrame size and title setSize(hSize,vSize); setTitle("R.G.Baldwin"); //Create a new drawing canvas and add it to the // center of the JFrame. MyCanvas myCanvas = new MyCanvas(); this.getContentPane().add(myCanvas); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); }//end constructor //----------------------------------------------------// //This is an inner class of the GUI class. class MyCanvas extends Canvas{ //Override the paint() method. This method will be // called when the JFrame and the Canvas in its // contentPane are displayed on the screen. public void paint(Graphics g){ //Downcast the Graphics object to a Graphics2D // object. The Graphics2D class provides // capabilities that don't exist in the Graphics // class. Graphics2D g2 = (Graphics2D)g; //By default, the origin is at the upper-left corner // of the canvas. This statement translates the // origin to the center of the canvas. g2.translate( this.getWidth()/2.0,this.getHeight()/2.0); //Define two points. Point2D pointA = new Point2D.Double(-this.getWidth()/2.5,0.0); Point2D pointB = new Point2D.Double(this.getWidth()/2.5,0.0); //Use the points to construct an object that // represents a line segment that connects the two // points. The values of the points causes this // line segment to be horizontal. Line2D.Double horizLine = new Line2D.Double(pointA,pointB); //Use the same procedure to construct an object that // represents a vertical line segment. Point2D pointC = new Point2D.Double(0.0,-this.getHeight()/2.5); Point2D pointD = new Point2D.Double(0.0,this.getHeight()/2.5); Line2D.Double vertLine = new Line2D.Double(pointC,pointD); //Draw the horizontal and vertical line segments on // the canvas. g2.draw(horizLine); g2.draw(vertLine); }//end overridden paint() }//end inner class MyCanvas }//end class GUI |
This section contains a variety of miscellaneous information.
Housekeeping material
|
Affiliation: I am a professor of Computer Information Technology at Austin Community College in Austin, TX. |
-end-