📄 514-519.html
字号:
<HTML>
<HEAD>
<META name=vsisbn content="1571690433"><META name=vstitle content="Black Art of Java Game Programming"><META name=vsauthor content="Joel Fan"><META name=vsimprint content="Sams"><META name=vspublisher content="Macmillan Computer Publishing"><META name=vspubdate content="11/01/96"><META name=vscategory content="Web and Software Development: Programming, Scripting, and Markup Languages: Java"><TITLE>Black Art of Java Game Programming:Building the JAVAroids Game</TITLE>
<!-- HEADER --><STYLE type="text/css"> <!-- A:hover { color : Red; } --></STYLE><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><script><!--function displayWindow(url, width, height) { var Win = window.open(url,"displayWindow",'width=' + width +',height=' + height + ',resizable=1,scrollbars=yes'); if (Win) { Win.focus(); }}//--></script><SCRIPT><!--function popUp(url) { var Win = window.open(url,"displayWindow",'width=400,height=300,resizable=1,scrollbars=yes'); if (Win) { Win.focus(); }}//--></SCRIPT><script language="JavaScript1.2"><!--function checkForQuery(fm) { /* get the query value */ var i = escape(fm.query.value); if (i == "") { alert('Please enter a search word or phrase'); return false; } /* query is blank, dont run the .jsp file */ else return true; /* execute the .jsp file */}//--></script></HEAD><BODY>
<TABLE border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=75 valign=top>
<img src="../1571690433.gif" width=60 height=73 alt="Black Art of Java Game Programming" border="1">
</td>
<td align="left">
<font face="arial, helvetica" size="-1" color="#336633"><b>Black Art of Java Game Programming</b></font>
<br>
<font face="arial, helvetica" size="-1"><i>by Joel Fan</i>
<br>
Sams, Macmillan Computer Publishing
<br>
<b>ISBN:</b> 1571690433<b> Pub Date:</b> 11/01/96</font>
</td>
</tr>
</table>
<P>
<!--ISBN=1571690433//-->
<!--TITLE=Black Art of Java Game Programming//-->
<!--AUTHOR=Joel Fan//-->
<!--AUTHOR=Eric Ries//-->
<!--AUTHOR=Calin Tenitchi//-->
<!--PUBLISHER=Macmillan Computer Publishing//-->
<!--IMPRINT=Sams//-->
<!--CHAPTER=13//-->
<!--PAGES=514-519//-->
<!--UNASSIGNED1//-->
<!--UNASSIGNED2//-->
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="510-514.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="519-521.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
<P><BR></P>
<H3><A NAME="Heading7"></A><FONT COLOR="#000077">Doing a Little Vector Math</FONT></H3>
<P>In this section, we’re going to cover the math necessary to implement moving and rotating polygons. In particular, you’ll learn about local and screen coordinate systems, as well as Cartesian and polar coordinates.
</P>
<H4 ALIGN="LEFT"><A NAME="Heading8"></A><FONT COLOR="#000077">Local vs. Screen Coordinates</FONT></H4>
<P>To implement polygon sprites that will move and rotate, the polygon will be represented as a sequence of vectors that start at the origin. Figure 13-4 shows an example of five vectors that comprise a house (a.k.a. a pentagon).
</P>
<P><A NAME="Fig4"></A><A HREF="javascript:displayWindow('images/13-04.jpg',600,409 )"><IMG SRC="images/13-04t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/13-04.jpg',600,409)"><FONT COLOR="#000077"><B>Figure 13-4</B></FONT></A> Simple house</P>
<P>This house is represented in a local coordinate system, since all vectors are relative to the local origin (0,0) and don’t tell us where the polygon will appear on the screen. In contrast, screen, or <I>absolute,</I> coordinates tell us exactly where the house will be displayed. Figure 13-5 shows the coordinate system used by the graphics context. Remember that points beyond the extents of the graphics context, such as points with negative coordinates, are not displayed. And since (0,0) is at the upper-left corner, y coordinates increase as you go down the screen, in contrast to local coordinates, where increasing y means going up.</P>
<P><A NAME="Fig5"></A><A HREF="javascript:displayWindow('images/13-05.jpg',460,460 )"><IMG SRC="images/13-05t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/13-05.jpg',460,460)"><FONT COLOR="#000077"><B>Figure 13-5</B></FONT></A> Graphics context coordinate system</P>
<P>To display the house at some location on the screen, the local coordinates must be <I>transformed</I> into screen coordinates. It’s really easy to do this. First decide where the origin of the house should be in screen coordinates. Let’s call the screen position of the origin (<I>locx,locy</I>). Then the screen coordinates for each point of the house can be found by adding the vector for that point to the new origin (<I>locx,locy</I>). Figure 13-6 shows the house with origin at (200,200).</P>
<P><A NAME="Fig6"></A><A HREF="javascript:displayWindow('images/13-06.jpg',600,411 )"><IMG SRC="images/13-06t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/13-06.jpg',600,411)"><FONT COLOR="#000077"><B>Figure 13-6</B></FONT></A> House coordinates transformed to screen coordinates</P>
<P>Wait! The house is upside down. This is because of the opposite orientation of the y-axes in the local and screen coordinate systems. To orient the local y-axis properly, multiply each vector’s y coordinate by -1 before transforming to screen coordinates. Figure 13-7 shows the result of performing this transformation.
</P>
<P><A NAME="Fig7"></A><A HREF="javascript:displayWindow('images/13-07.jpg',600,410 )"><IMG SRC="images/13-07t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/13-07.jpg',600,410)"><FONT COLOR="#000077"><B>Figure 13-7</B></FONT></A> The correct house to screen transformation</P>
<P>In summary, a local vector (<I>x,y</I>) transforms to screen coordinates (<I>s,t</I>) by</P>
<!-- CODE SNIP //-->
<PRE>
s = locx + -1 * x;
t = locy + -1 * y;
</PRE>
<!-- END CODE SNIP //-->
<P>where (<I>locx,locy</I>) is the screen position of the local origin. By applying this formula to each vector of a polygon, we can move the polygon anywhere on the screen! When the orientation of the polygon is unimportant, as in our case, we’ll omit the multiplication by -1.</P>
<H4 ALIGN="LEFT"><A NAME="Heading9"></A><FONT COLOR="#000077">Cartesian vs. Polar Coordinates</FONT></H4>
<P>Now we will learn how to rotate a polygon about its origin. This is really easy in <I>polar</I> coordinates, so we’re going to transform the <I>Cartesian</I> coordinates we’re familiar with (that is, the standard x and y) into polar form.</P>
<P>Polar coordinates (<I>r,theta</I>) are just another way of specifying points in the 2D plane. As Figure 13-8 shows, <I>r</I> is the distance from (<I>x,y</I>) to the origin, or the <I>magnitude</I> of vector (<I>x,y</I>); <I>theta</I> is the angle from some distinguished axis, such as the x-axis. Equations 13-1 and 13-2 relate (<I>x,y</I>) to (<I>r,theta</I>).</P>
<P><A NAME="Fig8"></A><A HREF="javascript:displayWindow('images/13-08.jpg',600,409 )"><IMG SRC="images/13-08t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/13-08.jpg',600,409)"><FONT COLOR="#000077"><B>Figure 13-8</B></FONT></A> Relationship between Cartesian and polar coordinates</P>
<P><B>Equation 13-1</B> Converting polar to Cartesian coordinates</P>
<!-- CODE SNIP //-->
<PRE>
// (r,theta) => (x,y)
x = r * Math.cos(theta);
y = r * Math.sin(theta);
</PRE>
<!-- END CODE SNIP //-->
<P><B>Equation 13-2</B> Converting Cartesian to polar coordinates</P>
<!-- CODE SNIP //-->
<PRE>
// (x,y) => (r,theta)
r = Math.sqrt(x*x + y*y); // Pythagorean theorem
theta = Math.atan2(y/x); // the arctangent of y/x
</PRE>
<!-- END CODE SNIP //-->
<P>Figure 13-9 shows that the result of rotating (<I>r,theta</I>) about the origin by <I>alpha</I> degrees is (<I>r, theta+alpha mod 360</I>). As you see, it’s trivial to rotate a vector about the origin in polar coordinates!</P>
<P><A NAME="Fig9"></A><A HREF="javascript:displayWindow('images/13-09.jpg',600,517 )"><IMG SRC="images/13-09t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/13-09.jpg',600,517)"><FONT COLOR="#000077"><B>Figure 13-9</B></FONT></A> Rotating a vector about the origin</P>
<P>To sum up, this is one way to rotate a vector (<I>x,y</I>) about the origin:</P>
<DL>
<DD><B>1.</B> Convert (<I>x,y</I>) into its polar coordinate representation (<I>r, theta</I>) using Equation 13-2.
<DD><B>2.</B> Compute <I>theta1 = theta+alpha mod 360</I>.
<DD><B>3.</B> Convert (<I>r,theta1</I>) into its Cartesian representation (<I>x1,y1</I>) using Equation 13-1.
</DL>
<P><BR></P>
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="510-514.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="519-521.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -