-
Notifications
You must be signed in to change notification settings - Fork 11
/
chapter12.html
213 lines (129 loc) · 17.2 KB
/
chapter12.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5459430-3");
pageTracker._trackPageview();
} catch(err) {}</script>
<meta http-equiv="Content-Type" content="text/html;charset=us-ascii" />
<title>IYOCGwP, Chapter 12 - Cartesian Coordinates</title>
<link rel="stylesheet" href="inventbook.css" type="text/css" media="all" />
</head>
<body class='chapter12body'>
<table border='0' width='100%'><tr><td><a href='chapter11.html'>Go to Chapter 11 - Bagels</a></td><td align='right'><a href='chapter13.html'>Go to Chapter 13 - Sonar Treasure Hunt</a></td></tr></table>
<div style='height: 310px;'><a href='http://www.amazon.com/Invent-Your-Computer-Games-Python/dp/0982106017/'><img src='images/buyad.png' align='right'></a></div>
<div style='height: 350px;'><img src='images/chap12.png'></div>
<div class='inthischapter'><h3 id="TopicsCoveredInThisChapter">Topics Covered In This Chapter:</h3>
<ul>
<li>Cartesian coordinate systems.</li>
<li>The X-axis and Y-axis.</li>
<li>The Commutative Property of Addition.</li>
<li>Absolute values and the <span class='m'>abs()</span> function.</li>
</ul></div>
<p>This chapter does not introduce a new game, but instead goes over some simple mathematical concepts that we will use in the rest of the games in this book.</p>
<p>When you look at 2D games (such as Tetris or old Super Nintendo or Sega Genesis games) you can see that most of the graphics on the screen can move left or right (the first dimension) and up or down (the second dimension, hence 2D). In order for us to create games that have objects moving around two dimensions (such as the two dimensional computer screen), we need a system that can translate a place on the screen to integers that our program can deal with.</p>
<p>This is where Cartesian coordinate systems come in. The coordinates can point to a very specific point on the screen so that our program can keep track of different areas on the screen.</p>
<p>Negative numbers are often used with Cartesian coordinate systems as well. The second half of this chapter will explain how we can do math with negative numbers.</p>
<p>You may already know about Cartesian coordinate systems and negative numbers from math class. In that case, you can just give this chapter a quick read anyway to refresh yourself.</p>
<h2 id="GridsandCartesianCoordinates">Grids and Cartesian Coordinates</h2>
<p style='float: right;' class='centeredImageP'><img src='images/12-1.png' alt='' class='centeredImage' /><br />
Figure 12-1: A sample chessboard with a<br />black knight at a, 4 and a white knight at e, 6.</p>
<p>A problem in many games is how to talk about exact points on the board. A common way of solving this is by marking each individual row and column on a board with a letter and a number. Figure 12-1 is a chess board that has each row and each column marked.</p>
<p>In chess, the knight piece looks like a horse head. The white knight is located at the point e, 6 and the black knight is located at point a, 4. We can also see that every space on row 7 and every space in column c is empty.</p>
<p>A grid with labeled rows and columns like the chess board is a Cartesian coordinate system. By using a row label and column label, we can give a coordinate that is for one and only one space on the board. This can really help us describe to a computer the exact location we want. If you have learned about Cartesian coordinate systems in math class, you may know that usually we have numbers for both the rows and columns. This is handy, because otherwise after the 26th column we would run out of letters. That board would look like Figure 12-2.</p>
<p style='float: right;' class='centeredImageP'><img src='images/12-2.png' alt='' class='centeredImage' /><br />
Figure 12-2: The same chessboard but with<br />numeric coordinates for both rows and columns.</p>
<p>The numbers going left and right that describe the columns are part of the <span class='term'>X-axis</span>. The numbers going up and down that describe the rows are part of the <span class='term'>Y-axis</span>. When we describe coordinates, we always say the X-coordinate first, followed by the Y-coordinate. That means the white knight in the above picture is located at the coordinate 5, 6 (and not 6, 5). The black knight is located at the coordinate 1, 4 (not to be confused with 4, 1).</p>
<p>Notice that for the black knight to move to the white knight's position, the black knight must move up two spaces, and then to the right by four spaces. (Or move right four spaces and then move up two spaces.) But we don't need to look at the board to figure this out. If we know the white knight is located at 5, 6 and the black knight is located at 1, 4, then we can just use subtraction to figure out this information.</p>
<p>Subtract the black knight's X-coordinate and white knight's X-coordinate: 5 - 1 = 4. That means the black knight has to move along the X-axis by four spaces.</p>
<p>Subtract the black knight's Y-coordinate and white knight's Y-coordinate: 6 - 4 = 2. That means the black knight has to move along the Y-axis by two spaces.</p>
<h2 id="NegativeNumbers">Negative Numbers</h2>
<p>Another concept that Cartesian coordinates use is negative numbers. <span class='term'>Negative numbers</span> are numbers that are smaller than zero. We put a minus sign in front of a number to show that it is a negative number. -1 is smaller than 0. And -2 is smaller than -1. And -3 is smaller than -2. If you think of regular numbers (called <span class='term'>positive numbers</span>) as starting from 1 and increasing, you can think of negative numbers as starting from -1 and decreasing. 0 itself is not positive or negative. In this picture, you can see the positive numbers increasing to the right and the negative numbers decreasing to the left:</p>
<p class='centeredImageP createspace'><img width='570' height='72' src='images/12-3.png' alt='' class='centeredImage' /><br />
Figure 12-3: A number line.</p>
<p class='centeredImageP noncreatespace'><img src='images/12-3.png' alt='' class='centeredImage' /><br />
Figure 12-3: A number line.</p>
<p>The number line is really useful for doing subtraction and addition with negative numbers. The expression 4 + 3 can be thought of as the white knight starting at position 4 and moving 3 spaces over to the right (addition means increasing, which is in the right direction).</p>
<p class='centeredImageP createspace'><img width='570' height='131' src='images/12-4.png' alt='' class='centeredImage' /><br />
Figure 12-4: Moving the white knight to the right adds to the coordinate.</p>
<p class='centeredImageP noncreatespace'><img src='images/12-4.png' alt='' class='centeredImage' /><br />
Figure 12-4: Moving the white knight to the right adds to the coordinate.</p>
<p>As you can see, the white knight ends up at position 7. This makes sense, because 4 + 3 is 7.</p>
<p>Subtraction can be done by moving the white knight to the left. Subtraction means decreasing, which is in the left direction. 4 - 6 would be the white knight starting at position 4 and moving 6 spaces to the left, like in Figure 12-5:</p>
<p class='centeredImageP createspace'><img width='570' height='131' src='images/12-5.png' alt='' class='centeredImage' /><br />
Figure 12-5: Moving the white knight to the left subtracts from the coordinate.</p>
<p class='centeredImageP noncreatespace'><img src='images/12-5.png' alt='' class='centeredImage' /><br />
Figure 12-5: Moving the white knight to the left subtracts from the coordinate.</p>
<p>The white knight ends up at position -2. That means 4 - 6 equals -2.</p>
<p>If we add or subtract a negative number, the white knight would move in the <i>opposite</i> direction. If you add a negative number, the knight moves to the <i>left</i>. If you subtract a negative number, the knight moves to the <i>right</i>. The expression -6 - -4 would be equal to -2. The knight starts at -6 and moves to the <i>right</i> by 4 spaces. Notice that -6 - -4 has the same answer as -6 + 4.</p>
<p class='centeredImageP createspace'><img width='570' height='135' src='images/12-6.png' alt='' class='centeredImage' /><br />
Figure 12-6: Even if the white knight starts at a negative coordinate, moving right still adds to the coordinate.</p>
<p class='centeredImageP noncreatespace'><img src='images/12-6.png' alt='' class='centeredImage' /><br />
Figure 12-6: Even if the white knight starts at a negative coordinate, moving right still adds to the coordinate.</p>
<p class='centeredImageP'><img src='images/12-7.png' alt='' class='centeredImage' /><br />
Figure 12-7: Putting two number lines together creates a Cartesian coordinate system.</p>
<p>The number line is the same as the X-axis. If we made the number line go up and down instead of left and right, it would model the Y-axis. Adding a positive number (or subtracting a negative number) would move the knight up the number line, and subtracting a positive number (or adding a negative number) would move the knight down. When we put these two number lines together, we have a Cartesian coordinate system like in Figure 12-7. The 0, 0 coordinate has a special name: the <span class='term'>origin</span>.</p>
<h2 id="MathTricks">Math Tricks</h2>
<p>Subtracting negative numbers or adding negative numbers seems easy when you have a number line in front of you, but it can be easy when you only have the numbers too. Here are three tricks you can do to make evaluating these expressions by yourself easier to do.</p>
<h3 id="Trick1AMinusEatsthePlusSignonitsLeft">Trick 1: "A Minus Eats the Plus Sign on its Left"</h3>
<p>The first is if you are adding a negative number, for example; 4 + -2. The first trick is "a minus eats the plus sign on its left". When you see a minus sign with a plus sign on the left, you can replace the plus sign with a minus sign. The answer is still the same, because adding a negative value is the same as subtracting a positive value. 4 + -2 and 4 - 2 both evaluate to 2.</p>
<p class='centeredImageP'><img src='images/12-8.png' alt='' class='centeredImage' /><br />
Figure 12-8: Trick 1 - Adding a positive and negative number.</p>
<h3 id="Trick2TwoMinusesCombineIntoaPlus">Trick 2: "Two Minuses Combine Into a Plus"</h3>
<p>The second trick is if you are subtracting a negative number, for example, 4 - -2. The second trick is "two minuses combine into a plus". When you see the two minus signs next to each other without a number in between them, they can combine into a plus sign. The answer is still the same, because subtracting a negative value is the same as adding a positive value.</p>
<p class='centeredImageP'><img src='images/12-9.png' alt='' class='centeredImage' /><br />
Figure 12-9: Trick 2 - Subtracting a positive and negative number.</p>
<h3 id="Trick3TheCommutativePropertyofAddition">Trick 3: The Commutative Property of Addition</h3>
<p>A third trick is to remember that when you add two numbers like 6 and 4, it doesn't matter what order they are in. (This is called the <span class='term'>commutative property</span> of addition.) That means that 6 + 4 and 4 + 6 both equal the same value, 10. If you count the boxes in the figure below, you can see that it doesn't matter what order you have the numbers for addition.</p>
<p class='centeredImageP'><img src='images/12-10.png' alt='' class='centeredImage' /><br />
Figure 12-10: Trick 3 - The commutative property of addition.</p>
<p>Say you are adding a negative number and a positive number, like -6 + 8. Because you are adding numbers, you can swap the order of the numbers without changing the answer. <span class='nw'>-6</span> + 8 is the same as 8 + -6. But when you look at 8 + -6, you see that the minus sign can eat the plus sign to its left, and the problem becomes 8 - 6 = 2. But this means that -6 + 8 is also 2! We've rearranged the problem to have the same answer, but made it easier for us to solve without using a calculator or the computer.</p>
<p class='centeredImageP'><img src='images/12-11.png' alt='' class='centeredImage' /><br />
Figure 12-11: Using our math tricks together.</p>
<p>Of course, you can always use the interactive shell as a calculator to evaluate these expressions. It is still very useful to know the above three tricks when adding or subtracting negative numbers. After all, you won't always be in front of a computer with Python all the time!</p>
<div class='sourceblurb'>
>>> 4 + -2<br />
2<br />
>>> -4 + 2<br />
-2<br />
>>> -4 + -2<br />
-6<br />
>>> 4 - -2<br />
6<br />
>>> -4 - 2<br />
-6<br />
>>> -4 - -2<br />
-2<br />
>>><br />
</div>
<h2 id="AbsoluteValuesandtheabsFunction">Absolute Values and the <span class='m'>abs()</span> Function</h2>
<p>The <span class='term'>absolute value</span> of a number is the number without the negative sign in front of it. This means that positive numbers do not change, but negative numbers become positive. For example, the absolute value of -4 is 4. The absolute value of -7 is 7. The absolute value of 5 (which is positive) is just 5.</p>
<p>We can find how far away two things on a number line are from each other by taking the absolute value of their difference. Imagine that the white knight is at position 4 and the black knight is at position -2. To find out the distance between them, you would find the difference by subtracting their positions and taking the absolute value of that number.</p>
<p>It works no matter what the order of the numbers is. -2 - 4 (that is, negative two minus four) is -6, and the absolute value of -6 is 6. However, 4 - -2 (that is, four minus negative two) is 6, and the absolute value of 6 is 6. Using the absolute value of the difference is a good way of finding the distance between two points on a number line (or axis).</p>
<p>The <span class='m'>abs()</span> function can be used to return the absolute value of an integer. The <span class='m'>abs()</span> function is a built-in function, so you do not need to import any modules to use it. Pass it an integer or float value and it will return the absolute value:</p>
<div class='sourceblurb'>
>>> abs(-5)<br />
5<br />
>>> abs(42)<br />
42<br />
>>> abs(-10.5)<br />
10.5<br />
</div>
<h2 id="CoordinateSystemofaComputerMonitor">Coordinate System of a Computer Monitor</h2>
<p style='float: right;' class='centeredImageP'><img src='images/12-12.png' alt='' class='centeredImage' /><br />
Figure 12-12: The Cartesian coordinate system on a computer monitor.</p>
<p>It is common that computer monitors use a coordinate system that has the origin (0, 0) at the top left corner of the screen, which increases going down and to the right. There are no negative coordinates. This is because text is printed starting at the top left, and is printed going to the right and downwards. Most computer graphics use this coordinate system, and we will use it in our games. Also it is common to assume that monitors can display 80 text characters per row and 25 text characters per column (look at Figure 12-12). This used to be the maximum screen size that monitors could support. While today's monitors can usually display much more text, we will not assume that the user's screen is bigger than 80 by 25.</p>
<h2 id="SummaryUsingthisMathinGames">Summary: Using this Math in Games</h2>
<p>This hasn't been too much math to learn for programming. In fact, most programming does not require understanding a lot of math. Up until this chapter, we have been getting by on simple addition and multiplication.</p>
<p>Cartesian coordinate systems are needed to describe exactly where in a two dimensional area a certain position is. Coordinates are made up of two numbers: the X-coordinate and the Y-coordinate. The X-axis runs left and right and the Y-axis runs up and down. On a computer screen (and in most computer programming), the X-axis starts at 0 at the left side and increases on the way to the right. The Y-axis starts at 0 on the top of the screen and increases on the way down.</p>
<p>The three tricks we learned in this chapter make it very easy to add positive and negative integers. The first trick is that a minus sign will eat the plus sign on its left. The second trick is that two minuses next to each other will combine into a plus sign. And the third trick is that you can swap the position of the numbers you are adding. This is called the commutative property of addition.</p>
<p>For the rest of the book, we will use the concepts we learned in this chapter in our games because they have two dimensional areas in them. All graphical games require understanding how Cartesian coordinates work.</p>
<table border='0' width='100%'><tr><td><a href='chapter11.html'>Go to Chapter 11 - Bagels</a></td><td align='right'><a href='chapter13.html'>Go to Chapter 13 - Sonar Treasure Hunt</a></td></tr></table>
<div style='height: 310px;'><a href='http://www.amazon.com/Invent-Your-Computer-Games-Python/dp/0982106017/'><img src='images/buyad.png' align='right'></a></div>
</body>
</html>