<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>William E. J. Doane PhD&#187; Programming</title>
	<atom:link href="http://DrDoane.com/category/programming/feed/" rel="self" type="application/rss+xml" />
	<link>http://DrDoane.com</link>
	<description>What will you create today?</description>
	<lastBuildDate>Fri, 18 May 2012 04:05:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Thinking Through A Basic Pong Game in Processing</title>
		<link>http://DrDoane.com/thinking-through-a-basic-pong-game-in-processing/</link>
		<comments>http://DrDoane.com/thinking-through-a-basic-pong-game-in-processing/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 14:42:44 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Computing Education]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=127</guid>
		<description><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Thinking+Through+A+Basic+Pong+Game+in+Processing&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-07-05&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fthinking-through-a-basic-pong-game-in-processing%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
The Problem: Create a basic 1970s style Pong game for one player using the Processing programming language. The paddle will be on the right and the ball will bounce off of the three other sides. If the ball passes the &#8230; <a href="http://DrDoane.com/thinking-through-a-basic-pong-game-in-processing/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Thinking+Through+A+Basic+Pong+Game+in+Processing&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-07-05&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fthinking-through-a-basic-pong-game-in-processing%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
<p>The Problem: Create a basic 1970s style Pong game for one player using <a href="http://Processing.org">the Processing programming language</a>. The paddle will be on the right and the ball will bounce off of the three other sides. If the ball passes the paddle while the ball is traveling to the right, game play ends. The paddle will be controlled by the keyboard&#8217;s UP and DOWN arrow keys.</p>
<p><span id="more-127"></span></p>
<p>The purpose of this article is to present my problem solving process as I create Pong. I&#8217;m going to deliberately walk through the process as a novice programmer might. Students rarely get to see how their instructors think through a problem, unless the instructor live-codes in front of them. But, even then, students are confused by the changing dynamics of the solution as the instructor begins to understand the problem better and refactors his or her code in real-time.</p>
<p>First, let me make sure I understand the problem space. A quick diagram often helps:</p>
<p><a href="http://DrDoane.com/wp-content/uploads/2010/07/pong01.jpg"><img src="http://DrDoane.com/wp-content/uploads/2010/07/pong01.jpg" alt="initial sketch" title="pong01" width="444" height="372" class="alignnone size-full wp-image-128" /></a></p>
<ul>
<li>There&#8217;s a playing field of some unspecified dimensions</li>
<li>there&#8217;s a ball (a circle)</li>
</ul>
<p>Ok, that seems like a good start. Now, let me do the simplest thing that can possibly work to represent what I know about the game. In Processing, there&#8217;s a standard skeleton for basic programs:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Now, let me create the playing field (window) in the setup method and create a ball (circle or ellipse) in the draw method. The Processing reference manual tells me that when drawing an <a href="http://processing.org/reference/ellipse_.html">ellipse</a>, the <a href="http://processing.org/reference/ellipseMode_.html">default drawing mode</a> assumes that the ellipse method takes four arguments: x and y coordinates for the center of the ellipse and width and height values for the horizontal and vertical diameters of the ellipse.</p>
<p>Further, the <a href="http://processing.org/reference/setup_.html">setup method</a> is executed just once, before the program gets started. The <a href="http://processing.org/reference/draw_.html">draw method</a> is an implicit loop in Processing; it gets called many times per second to redraw the window.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span><span class="nu0">20</span>, <span class="nu0">20</span>, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>If I run my code, I get a 400 by 400 pixel window and a circle located at (20,20) that is 20 pixels wide and 20 pixels high, but so far, it just sits there.</p>
<ul>
<li>the ball moves from left to right</li>
</ul>
<p>Well, that implies that the x and y coordinates of the ellipse need to vary, so I&#8217;m going to need to refactor my code to use variables for the x and y coordinates of the ball. When I refactor, I want to reorganize my code, but not change the functionality: the code should be organized better, but the program should do the same thing. I like to use obvious variable names, so my code is easy to read and understand, so I&#8217;ll use &#8220;ballX&#8221; and &#8220;ballY&#8221;. (nota bene: when you find yourself prefixing variable names with the name of objects you&#8217;re manipulating, it suggests strongly that you should consider object-oriented design/programming.)</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>I run my code again, and indeed it behaves exactly the same as it did before the refactor. Now, I&#8217;ll add the least code I can to get the ball to move from left to right a little bit each time it&#8217;s drawn. It&#8217;s often difficult for novices to break down a task like &#8220;move the ball to the right side of the screen&#8221; into the smaller, discrete steps necessary to get the task done. The key, I think, is to think of a loop (in this case, the implicit loop of the draw method) like a flipbook animation from your childhood. You&#8217;re not going to just magically have the ball appear at the right edge of the window. Instead, you&#8217;re going to move the ball just a little toward the right edge each time it&#8217;s drawn.</p>
<p>It&#8217;s probably best for me to think about how much of a change I want ballX to undergo during each drawing cycle. It&#8217;s customary to refer to a small change in x as &#8220;dX&#8221;, the &#8220;delta x&#8221; or &#8220;change in x&#8221; value. Since x represents the number of pixels from the left edge of the window, adding just 2 pixels to the ball&#8217;s location each time it is drawn should have a smooth animation effect. So, I&#8217;ll set the initial value of dX to 2 and add dX to ballX each time the draw method is executed.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = <span class="nu0">2</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>When I run my code, the ball moves!! Not well, but&#8230; it moves! Each drawing of the ball is being left on the playing field. In Processing, to start each drawing cycle with a clean window, you set the <a href="http://processing.org/reference/background_.html">background of the window</a>. Here, I&#8217;ll set it to a solid color using the RGB color model: (255, 255, 255), which is the value I want for red, green, and blue components of the color. Setting them all to 255 causes the background to be white.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = <span class="nu0">2</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>When I re-run it, the ball now moves cleanly&#8230; and keeps moving, right off the right side of the window.  I want to add code that says that if the ball reaches the right side of the window, it should move back the other way. That&#8217;s not ultimately how game play will work, but I want to be able to see the ball moving around successfully, before I worry about how the game ends. I know that in this particular case, the right side of the window is at x coordinate 400, because that&#8217;s how big I made the window in the setup method. So, if the ball&#8217;s x position reaches (or passes) 400 pixels, I&#8217;ll reverse the direction of the change (dX). If a dX value of 2 moves the ball 2 pixels to the right, then a dX value of -2 would move the ball 2 pixels to the left. So all I should need to do is change the sign of dX (lines 13-15). Notice that I&#8217;ve added a comment at line 14 using the // notation. Generally, comments should describe <em>why</em> you&#8217;re writing the code, not how; the code itself tells me how.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = <span class="nu0">2</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; <span class="nu0">400</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>If I run the code, I get a ball that bounces off of the right side of the window, then disappears off the left side! </p>
<ul>
<li>the ball bounces when it hits the left of the playing field</li>
</ul>
<p>Well, I know that the left side of the window is at x coordinate 0 (zero), so I can repeat my code that handles bouncing on the right side (lines 13-15) and change it a little to handle bouncing on the left side of the window.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = <span class="nu0">2</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; <span class="nu0">400</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>This seems to give me the bouncing ball I want, but I&#8217;m bothered by the magic number 400 I&#8217;ve used at line 13. In general, I won&#8217;t know how wide or high the playing field window is. I need to use a variable that represents the width of the window and, fortunately, Processing provides such a variable for me already: width.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = <span class="nu0">2</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>So far, I&#8217;ve only addressed the ball&#8217;s movement left and right. It doesn&#8217;t move up and down at all. Let me write a few lines of code (lines 4 and 23, below) just the way I&#8217;ve handled dX and create a dY variable that behaves similarly.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = <span class="nu0">2</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = <span class="nu0">2</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Well that seems OK&#8230; the ball bounces from the upper-left corner to the lower-right corner, but it&#8217;s not very interesting. Let me spice things up a little by changing the magic numbers I&#8217;ve used for dX and dY to random numbers in the range [+1..+2] at lines 3 and 4.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>When I run it a few times, I notice that the ball works well, if it happens to reach the right and left sides of the window, but when it reaches the top or bottom of the window, it disappears. I can add two additional if statements similar to the two I already have, but this time they&#8217;ll work with the variables ballY and dY. Also, the new code (lines 22-28, below) doesn&#8217;t need to know about the width of the window, but it does need to know about the height of the window and, again, Processing provides us with a convenient variable named height.</p>
<ul>
<li>the ball bounces when it hits the top of the playing field</li>
<li>the ball bounces when it hits the bottom of the playing field</li>
</ul>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Alright, now that the ball seems to be moving around well, I&#8217;ll turn my attention to the paddle.</p>
<ul>
<li>there&#8217;s a paddle (a rectangle) near the right of the playing field</li>
</ul>
<p>I&#8217;m going to make some assumptions about the placement of the paddle. First, it won&#8217;t be touching the right side of the window. Second, it will be 10 pixels wide and 30 pixels tall. I&#8217;m also placing it arbitrarily 10 pixels from the top of the window. I&#8217;m pulling these numbers out of thin air (they&#8217;re magic numbers), so I may well need to change them or replace them with variables later.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>width &#8211; <span class="nu0">15</span>, <span class="nu0">10</span>, <span class="nu0">10</span>, <span class="nu0">30</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>So, now I have an unmoving, inert paddle! Well, it&#8217;s progress&#8230; I&#8217;ll deal with the movement of the paddle, first. I know that I want to change the vertical position of the paddle, which is its y coordinate. So far, the position of the paddle has been hard coded with the magic number 10 (in line 14, above). I&#8217;ll need to refactor that into a variable, since its value will change over time, much like ballX and ballY. I&#8217;ll call it paddleY, to be consistent and obvious.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span>width &#8211; <span class="nu0">15</span>, paddleY, <span class="nu0">10</span>, <span class="nu0">30</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>To be completely consistent, I&#8217;d like to replace my magic use of &#8220;width &#8211; 15&#8243; (line 15, above) with a variable (line 17, below), too. It&#8217;s the x coordinate of the paddle, so I&#8217;ll create a paddleX variable, just like the paddleY variable. I&#8217;m going to run into one problem, though. The variables I define (lines 1-6, below) are declared and initialized before the setup method executes. That means that the size of the window hasn&#8217;t been set yet (line 8), so I can&#8217;t initialize the value of paddleX, since it&#8217;s determined relative to the width of the window. I can only declare my intention to use it (line 5). Later, after the size of the window has been set (line 9), then I can initialize the value of paddleY (line 10) and replace my magic number with the variable (line 17).</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, <span class="nu0">10</span>, <span class="nu0">30</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<ul>
<li>the paddle can move up and down using the keyboard&#8217;s UP and DOWN arrow keys as input</li>
</ul>
<p>Let&#8217;s deal with the problem of having the paddle respond to key presses, now. I do a quick search of the <a href="http://processing.org/reference/">Processing Reference web pages</a> and find some example code for the <a href="http://processing.org/reference/keyCode.html">keyCode property</a> that is close to what I want to do.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">color fillVal = color<span class="br0">&#40;</span><span class="nu0">126</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; fill<span class="br0">&#40;</span>fillVal<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span><span class="nu0">25</span>, <span class="nu0">25</span>, <span class="nu0">50</span>, <span class="nu0">50</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; fillVal = <span class="nu0">255</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; fillVal = <span class="nu0">0</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fillVal = <span class="nu0">126</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>In their example, pressing the arrow keys results in a changed fill color (lines 10-14, above). For my pong game, I want the arrow keys to change the value of paddleY, the paddle&#8217;s vertical position. The variables, draw method (1-6), and else statement (lines 11-13) from the example are irrelevant to my pong game. </p>
<p>As a programmer I often need to find examples of how a task is performed in a given language, and then modify the example to match my circumstances better. When I do that, it&#8217;s good practice to add a comment explaining where I got the original code and acknowledging that it&#8217;s not my original creation. First, it provides me and other programmers with a road map, if I or they ever need to maintain the program I&#8217;ve written. Second, it makes clear which parts of the code are my original creation and which I&#8217;ve borrowed from other sources. If I were writing an English essay, I would use quotation marks and proper citations. When writing code, I add comments and provide URLs, email addresses, etc. to cite my sources.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, <span class="nu0">10</span>, <span class="nu0">30</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY + <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>I have once again put in some magic numbers: 30 at lines 17, 43, and 45, above. It&#8217;s the paddle height, but that&#8217;s not obvious from the code. So, let me refactor that to a variable.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, <span class="nu0">10</span>, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Now that we have a paddle, we want to reconsider when the ball should bounce on the right side of our window. As the code is written, it bounces with it reaches the edge of the window itself, but we want it to bounce when it reaches the left-hand face of the paddle, which is located along a vertical line located at paddleX. I&#8217;ve updated line 20, below.</p>
<p><a href="http://DrDoane.com/wp-content/uploads/2010/07/pong02.jpg"><img src="http://DrDoane.com/wp-content/uploads/2010/07/pong02.jpg" alt="" title="pong02" width="444" height="372" class="alignnone size-full wp-image-129" /></a></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, <span class="nu0">10</span>, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; paddleX<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>But that&#8217;s not the end of the story. As it&#8217;s written, the ball will bounce when it reaches the invisible vertical line, <em>even if</em> it isn&#8217;t touching the face of the paddle. </p>
<ul>
<li>the ball bounces when it hits the paddle (approaching from the left)</li>
</ul>
<p>So, we need to update line 20 so that we check not only the <em>horizontal</em> position of the ball (which we&#8217;ve been doing all along), but also the <em>vertical</em> position of the ball with respect to the vertical position of the paddle.</p>
<p><a href="http://DrDoane.com/wp-content/uploads/2010/07/pong03.jpg"><img src="http://DrDoane.com/wp-content/uploads/2010/07/pong03.jpg" alt="" title="pong03" width="444" height="372" class="alignnone size-full wp-image-130" /></a></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, <span class="nu0">10</span>, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballX &gt; paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>I&#8217;m getting nervous about the complexity of the logic on line 20; other programmers (including my future self!) may not understand what my intention was in writing that code. In fact, <em>I</em> haven&#8217;t really given a name to what it is I&#8217;m trying to do on that line! A large part of programming is communication. As a programmer, I&#8217;m trying to communicate my intentions not only to the computer, so that it can execute them, but also to other programmers who may read my code. I&#8217;ve tried to create a domain specific set of variable names (ballX, ballY, dX, dY, paddleX, paddlyY, and paddleH) to make my code more readable by humans. If I only cared about the computer understanding my code, I could just as easily have used bX and bY or iLoveRockAndRollX and iLoveRockAndRollY. But humans (me, my instructors, my students, my friends, my future employers) need to read the code, too, so I&#8217;d like to make it as understandable as possible.</p>
<p>With that in mind, I&#8217;m going to extract the logic from line 20 into its own method with a method name that makes my intentions clear(er). My new method will return a boolean value (either true or false) depending on whether there has been a collision.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, <span class="nu0">10</span>, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> <span class="br0">&#40;</span>ballX &gt; paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>The collision method, so far, is still not transparent to the casual reader. I&#8217;d like to refactor the code within that method to make my intentions clearer.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, <span class="nu0">10</span>, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; paddleX<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>That refactoring has revealed a problem with my thinking. So far, I&#8217;ve been testing only that the ball is to the right of the left-hand face of the paddle. If the ball somehow managed to get BETWEEN the right edge of the window and the paddle, it would still count as a collision and the ball would start back toward the left. I&#8217;ve noticed this because my testing of the horizontal position of the ball at line 42 isn&#8217;t parallel to my testing of the vertical position of the ball at line 43. In other words, I&#8217;m testing that the ball is between the top and bottom of the paddle, but I&#8217;m only testing that it&#8217;s to the right of the left-most side of the paddle.</p>
<p><a href="http://DrDoane.com/wp-content/uploads/2010/07/pong04.jpg"><img src="http://DrDoane.com/wp-content/uploads/2010/07/pong04.jpg" alt="" title="pong04" width="444" height="372" class="alignnone size-full wp-image-131" /></a></p>
<p>In order to fix this, I need to know how wide the paddle is. Unfortunately, I&#8217;ve left that as a magic number (10) at line 18, until now. I&#8217;ll extract that to a variable (paddleW) and update my collision method to incorporate that at line 43.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballX &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballX &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Finally, I want to end the game, if the player missed the paddle.</p>
<ul>
<li>the game ends when the ball reaches the right of the playing field</li>
</ul>
<p>I notice that, if the ball&#8217;s x coordinate is greater than the window&#8217;s width, then the ball must have passed by the paddle, so the game should end. There are other possible conditions you might use, but this one seems simple and obvious, at the moment.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">20</span>, <span class="nu0">20</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fill<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; rect<span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; noLoop<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballX &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballX &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>I have also noticed that by using the ball&#8217;s x and y coordinates in my collision method, and leaving the default ellipse drawing mode set to CENTER, it&#8217;s actually the center point of the ball that I&#8217;m using as the hot spot (have you hit the wall? have you hit the paddle?) when I should probably be using the ball&#8217;s left-, right-, top-, and bottom-most points as the hot spots.</p>
<p>In order to be able to compute the left-, right-, top-, and bottom-most points of the ball, I&#8217;m going to need to know the radius of the ball (or, equivalantly the diameter). Unfortuneately, I again left that as a magic number (line 16, above), so I&#8217;ll first need to refactor that and extract the radius to a variable (lines 3, 18).</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballR = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">2</span> * ballR, <span class="nu0">2</span> * ballR<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fill<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; rect<span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; noLoop<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballX &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballX &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Now, I can add methods that compute the bounds of the ball on demand (lines 58-72).</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballR = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">2</span> * ballR, <span class="nu0">2</span> * ballR<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fill<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; rect<span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; noLoop<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballX &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballX &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX &#8211; ballR;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY &#8211; ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> ballBottom<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>It&#8217;s usually good practice when refactoring to only change one thing at a time (i.e., only add one new method, only change one variable name, etc.) and then retest your code. That way, you limit the range of mistakes, typos, logic errors, etc. that you might make at any one time.</p>
<p>So, I&#8217;ll begin by finding all the lines of code that I intended to refer to the right-most point of the ball. It seems that lines 22 and 50 should be my targets.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballR = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">2</span> * ballR, <span class="nu0">2</span> * ballR<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fill<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; rect<span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; noLoop<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballX &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballX &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX &#8211; ballR;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY &#8211; ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> ballBottom<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Now, I&#8217;ll find all the lines of code that I intended to refer to the left-most point of the ball. It seems that lines 32 and 50 should be my targets.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballR = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">2</span> * ballR, <span class="nu0">2</span> * ballR<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fill<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; rect<span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; noLoop<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballY &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX &#8211; ballR;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY &#8211; ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> ballBottom<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Test my code to confirm it&#8217;s still functioning, and then I&#8217;ll find all the lines of code that I intended to refer to the top-most point of the ball. It seems that lines 40 and 51 should be my targets.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballR = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">2</span> * ballR, <span class="nu0">2</span> * ballR<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fill<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; rect<span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; noLoop<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballY &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballY &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX &#8211; ballR;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY &#8211; ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> ballBottom<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Test my code once more to confirm it&#8217;s still functioning, and then I&#8217;ll find all the lines of code that I intended to refer to the bottom-most point of the ball. It seems that lines 36 and 51 should be my targets.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballX = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballY = <span class="nu0">20</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballR = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> dX = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> dY = random<span class="br0">&#40;</span><span class="nu0">1</span>, <span class="nu0">2</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleX;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleY = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleW = <span class="nu0">10</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> paddleH = <span class="nu0">30</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> setup<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; size<span class="br0">&#40;</span><span class="nu0">400</span>, <span class="nu0">400</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; paddleX = width &#8211; <span class="nu0">15</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">void</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; background<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">255</span>, <span class="nu0">255</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ellipse<span class="br0">&#40;</span>ballX, ballY, <span class="nu0">2</span> * ballR, <span class="nu0">2</span> * ballR<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; rect<span class="br0">&#40;</span>paddleX, paddleY, paddleW, paddleH<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt; width<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; fill<span class="br0">&#40;</span><span class="nu0">255</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; rect<span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; noLoop<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>collision<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dX = -dX; <span class="co1">// if dX == 2, it becomes -2; if dX is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballBottom<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt; height<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt; <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; dY = -dY; <span class="co1">// if dY == 2, it becomes -2; if dY is -2, it becomes 2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; ballX = ballX + dX;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; ballY = ballY + dY;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">boolean</span> collision<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw4">boolean</span> returnValue = <span class="kw2">false</span>; <span class="co1">// assume there is no collision</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt;= paddleX<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt;= paddleX + paddleW<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>ballBottom<span class="br0">&#40;</span><span class="br0">&#41;</span> &gt;= paddleY<span class="br0">&#41;</span> &amp;&amp; <span class="br0">&#40;</span>ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> &lt;= paddleY + paddleH<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; returnValue = <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw2">return</span> returnValue;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballLeft<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX &#8211; ballR;</div>
</li>
<li class="li2">
<div class="de2"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballRight<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballX + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw4">float</span> ballTop<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY &#8211; ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">float</span> ballBottom<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">return</span> ballY + ballR;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// based on code from http://processing.org/reference/keyCode.html</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw4">void</span> keyPressed<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>key == CODED<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == UP<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; paddleY = paddleY &#8211; paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>keyCode == DOWN<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; paddleY = paddleY + paddleH;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>There are additional features I&#8217;d like to add (the ability to reset the game or to use mouse input, for example) and refactorings I&#8217;d like to make (turn this into an object oriented program), but this is a working, playable game at this point that solves the problem, as stated. A well-trained programmer will no doubt be appalled at the coding style, but I&#8217;ve intentionally tried not to use shorthand notations or to introduce solutions or idioms that would be unfamiliar to the novice programmer. </p>
<p>The fact that I have multiple methods (setup, draw, keyPressed, and now collision) that are all accessing the same variables raises a serious concern for me as does my use of special methods to handle pseudo-properties of the ball (ballTop, ballBottom, ballLeft, ballRight). How can I hope to keep track of where variables are used and modified? I&#8217;m making my code difficult to maintain and understand by using instance variables all over the place. A better solution would be to use object-oriented programming techniques so that I can encapsulate the variables and behaviors related to the ball within an object (perhaps named Ball) and encapsulate the variables and behaviors related to the paddle within another object (named Paddle). I&#8217;m going to set aside my misgivings for now and leave the refactoring of this code into an object-oriented structure for another blog post.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/thinking-through-a-basic-pong-game-in-processing/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Computational Efficiency</title>
		<link>http://DrDoane.com/computational-efficiency/</link>
		<comments>http://DrDoane.com/computational-efficiency/#comments</comments>
		<pubDate>Thu, 24 Jun 2010 21:43:40 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=121</guid>
		<description><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Computational+Efficiency&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-06-24&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fcomputational-efficiency%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming"></span>
I&#8217;d like to give a brief overview of computational efficiency, since it&#8217;s a topic that has come up in a few conversations recently. The super short version is this: it&#8217;s often helpful to understand the resource (time, space, or power) &#8230; <a href="http://DrDoane.com/computational-efficiency/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Computational+Efficiency&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-06-24&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fcomputational-efficiency%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming"></span>
<p>I&#8217;d like to give a brief overview of computational efficiency, since it&#8217;s a topic that has come up in a few conversations recently. The super short version is this: it&#8217;s often helpful to understand the resource (time, space, or power) needs for a given algorithm. Why? Because we want the fastest algorithm, or the one that uses the least amount of storage on our hard drive. In extreme computing environments (think Mars Rover, Apollo capsules, etc), we many have very limited resources available. For example, your digital wrist watch almost certainly has more memory than the Apollo capsules, which only had about 32KB of RAM. How can you <em>possibly</em> land a person on the moon with only 32KB?!!<br />
<span id="more-121"></span><br />
So, how do we measure the resource use of a given algorithm? Essentially, we decide how much of a resource is used for each &#8220;step&#8221; in the algorithm, then try to count the number of steps the algorithm will perform. Suppose we had a very simple algorithm:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">print 1</div>
</li>
</ol>
</div>
<p>With a few simplifying assumptions, it&#8217;s probably safe to say that this would require just 1 step to perform, namely the step of displaying the value 1. Meanwhile, a similar, yet slightly more complex, algorithm such as</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">print x</div>
</li>
</ol>
</div>
<p>would likely require 2 steps: 1 step to look up the value of x and 1 step to display the value. Here, I&#8217;m assuming that the variable x has already been assigned a value, which would have taken a little work, as well.</p>
<p>Taking it one step further (ha!), consider the slightly more complex example of</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">print x + 1</div>
</li>
</ol>
</div>
<p>How many steps would that take? Well, looking up the value of x is still 1 step, plus 1 step for the addition operation, plus 1 step to display the result of the addition. So, 3 steps in total. This assumes that you have a sensible computer at your disposal where addition only needs 1 step to complete.</p>
<p>Again, let&#8217;s make it a little more complicated and consider</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">print x * 1</div>
</li>
</ol>
</div>
<p>Now, multiplication, unlike addition, is usually a two step (or more!) operation. Why is that? Well, for simple addition problems, computers have a straightforward solution to solving the problem. But multiplication is a more complex process, as any 4th grader will tell you. One way to think of multiplication, in the general case, is as repeated addition. So, x * 4 is the same as x + x + x + x. But if addition is a 1 step process, then that approach to multiplication would require 4 steps! Fortunately, computers have better algorithms for multiplication than our grade school teachers taught us. Still, multiplication takes more steps than addition, so for the sake of argument, let&#8217;s say it&#8217;s 2 steps per multiplication. You can probably imagine what would happen with exponentiation!</p>
<p>In short, every operation that the computer must perform takes time, which in the abstract we can think of as steps. Looking up a value is an operation, storing a value is an operation, displaying a value, adding, multiplying, and even just waiting&#8211; they&#8217;re all operations. We can count the number of operations to be performed (not always as trivial as I&#8217;ve made it here) and use the total number of steps as a measure of efficiency.</p>
<p>Some algorithms take constant time to execute. Looking up the first entry in a phone book, for example, will always take the same number of steps, regardless of how big the phone book is.</p>
<p>Other algorithms will vary, based on the size of the input (i.e., how big the phone book is). For example, counting the number of people named Jane in the phone book is relatively easy in a very small town, but very hard in a large city! In computer science terms, we say that the input to an algorithm is of size n (i.e., how many names in the phone book, in this case). When n is big, the algorithm takes more steps.</p>
<p>For very large data sets, the difference between an algorithm that executes in 1 step versus an algorithm that requires n steps (where n varies on the size of the input) is a huge difference. Finding the first name in the phone book in New York City is as easy as finding the first name in the phone book in Smalltown USA.</p>
<p>In computer science we would say that asking &#8220;what is the first&#8221; is O(1) (read: &#8220;big-Oh of 1&#8243; or &#8220;on the order of 1&#8243;) and asking &#8220;how many are there&#8221; is O(n) (read: &#8220;big-Oh of n&#8221; or &#8220;on the order of n&#8221;).</p>
<p>O(1) algorithms execute in a constant number of steps (the time to execute it doesn&#8217;t vary when the input size varies). For example, &#8220;what is the first (or last) element?&#8221; is an O(1) question&#8230; no matter how large the input is, finding the first (or last) element is easy.</p>
<p>O(n) algorithms execute in n steps (the time to execute it DOES vary when the input size varies). For example, &#8220;what is the maximum (or minimum) value in a given list?&#8221; is an O(n) question&#8230; generally, you have to inspect every element in the list to be able to answer it. If you happen to know <em>a priori</em> that the list is sorted (a special case), then finding the minimum or maximum reduces to finding the first or last element in the list, respectively, making it an easy question &#8212; but you have to get the vector sorted, first.</p>
<p>There are many other orders of complexity: O(log(n)), O(n/2), O(n<sup>2</sup>), O(n<sup>3</sup>), O(n!), and so on. Something that&#8217;s O(n!) will take a very large number of steps, even for small values of n (the factorial function grows very quickly!).</p>
<p>In short, understanding something about the number of steps a given algorithm will take to solve an instance of a problem can help us choose among different algorithms that all produce the same result, but where some solutions are more efficient than others.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/computational-efficiency/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Goodbye, Hello World?</title>
		<link>http://DrDoane.com/goodbye-hello-world/</link>
		<comments>http://DrDoane.com/goodbye-hello-world/#comments</comments>
		<pubDate>Tue, 23 Mar 2010 20:59:18 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Computing Education]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=105</guid>
		<description><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Goodbye%2C+Hello+World%3F&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-23&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fgoodbye-hello-world%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
Alfred Thompson questioned on his blog today whether the customary first programming exercise, Hello World, should be replaced with something that&#8217;s more flexible and calls on students to engage in a short, non-trivial first act as a programmer. I admit, &#8230; <a href="http://DrDoane.com/goodbye-hello-world/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Goodbye%2C+Hello+World%3F&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-23&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fgoodbye-hello-world%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
<p><a href="http://blogs.msdn.com/alfredth/archive/2010/03/23/rethinking-hello-world.aspx" target="_blank">Alfred Thompson</a> questioned on <a href="http://blogs.msdn.com/alfredth/" target="_blank">his blog</a> today whether the customary first programming exercise, <a href="http://www2.latech.edu/~acm/HelloWorld.html" target="_blank"><em>Hello World</em></a>, should be replaced with something that&#8217;s more flexible and calls on students to engage in a short, non-trivial first act as a programmer. I admit, I&#8217;ve used <em>Hello World</em> myself with students, but usually not as a first activity. Instead, I use <em>Hello World</em> to help students who have had some hours or days of programming instruction understand that they now know quite a bit about how programming languages express an intention. I ask students to visit the <a href="http://www2.latech.edu/~acm/HelloWorld.html" target="_blank">ACM Hello World web page</a> and compare and contrast that simple program in different languages. How are code blocks started and ended? How is output generated? How is an infinite loop expressed? How are strings represented?</p>
<p><span id="more-105"></span>But to address the primary question Alfred poses, should we use a different first exercise, I&#8217;d say yes. I&#8217;ve used a constructive series of exercises in JavaScript that builds on the idea of rolling dice and a number guessing game for several years with great success and enthusiasm from students.</p>
<p>The first example I offer introduces an activity with which students are already familiar: rolling a single die. Students understand that we&#8217;re trying to generate a number from 1 to 6 (inclusive) and to let the user know the generated number.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> num = Math.<span class="me1">floor</span><span class="br0">&#40;</span><span class="br0">&#40;</span>Math.<span class="me1">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span> * <span class="nu0">6</span><span class="br0">&#41;</span><span class="br0">&#41;</span> + <span class="nu0">1</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You rolled a &quot;</span> + num<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&lt;/script&gt;</div>
</li>
</ol>
</div>
<p>This example allows us to discuss how a function is called (Math.random and Math.floor), the use of the asterisk to denote multiplication, what the outputs of those functions are, and the order of operations, grounded in their prior knowledge about algebra. It also introduces the use of a scalar variable, output, and concatenation; all of that in just two lines of code.</p>
<p>However, the example is necessarily constrained. Users must reload a web page to see a different number generated and there&#8217;s no input from the user. Adding just a few lines of code, we address those issues in the second exercise.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> num = Math.<span class="me1">floor</span><span class="br0">&#40;</span><span class="br0">&#40;</span>Math.<span class="me1">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span> * <span class="nu0">6</span><span class="br0">&#41;</span><span class="br0">&#41;</span> + <span class="nu0">1</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> guess = <span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">&quot;Guess a number from 1 to 6&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; guess = parseInt<span class="br0">&#40;</span>guess<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>guess == num<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You win!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Sorry!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&lt;/script&gt;</div>
</li>
</ol>
</div>
<p>This exercise also allows me to introduce conditionals, the use of == as the equality predicate, and basic data types via the  user string input needing to be converted to an integer. Still, however, the page must be reloaded for each guess, which causes a new random number to be generated, thus making it a game you can only win if your first guess happens to be correct. This allows us to talk about the life cycle of the interpreted code and motivates the need for loops.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> num = Math.<span class="me1">floor</span><span class="br0">&#40;</span><span class="br0">&#40;</span>Math.<span class="me1">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span> * <span class="nu0">6</span><span class="br0">&#41;</span><span class="br0">&#41;</span> + <span class="nu0">1</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> guess = <span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">&quot;Guess a number from 1 to 6&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; guess = parseInt<span class="br0">&#40;</span>guess<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">while</span> <span class="br0">&#40;</span>guess != num<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Sorry! Try again&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; guess = <span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">&quot;Guess another number from 1 to 6&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; guess = parseInt<span class="br0">&#40;</span>guess<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You win!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&lt;/script&gt;</div>
</li>
</ol>
</div>
<p>Each of these exercises builds on the previous examples by adding just  one or two new ideas and lines of code, so that students can see the  logical development of the code and so that each new idea is motivated  by a desire to improve game play, for example, by subtly introducing != as a &#8220;not equals&#8221; predicate. Students are free to experiment with  the range of numbers and the details of the feedback provided to users. Once we&#8217;ve got a reasonably playable game, we can refactor the upper and lower limits of the game to variables.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> min = <span class="nu0">1</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> max = <span class="nu0">6</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> num = Math.<span class="me1">floor</span><span class="br0">&#40;</span><span class="br0">&#40;</span>Math.<span class="me1">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span> * max<span class="br0">&#41;</span><span class="br0">&#41;</span> + min;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw2">var</span> guess = <span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">&quot;Guess a number from &quot;</span> + min + <span class="st0">&quot; to &quot;</span> + max<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; guess = parseInt<span class="br0">&#40;</span>guess<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">while</span> <span class="br0">&#40;</span>guess != num<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Sorry! Try again&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; guess = <span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">&quot;Guess another number from &quot;</span> + min + <span class="st0">&quot; to &quot;</span> + max<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; guess = parseInt<span class="br0">&#40;</span>guess<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You win!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&lt;/script&gt;</div>
</li>
</ol>
</div>
<p>This refactoring is motivated by students&#8217; desire to quickly change the game&#8217;s parameters so that they each have a slightly different version of the game (guess a number between 1 and 10,000,000 isn&#8217;t uncommon!).</p>
<p>This allows us to discuss whether the same code would work, if the range were to include negative numbers (-10&#8230;10, for example), or fractional numbers (-0.5&#8230;0.5, for example; hint: Math.floor might cause problems), or if we wanted to generate richer feedback to users.</p>
<p>In short, I lead students to these examples by providing the motivating context and introducing the new language features just in time. Students get to interact with a fairly interesting first game and to push at the edges of what can be achieved from that simple code base.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/goodbye-hello-world/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Learning to Write in English like Learning to Program</title>
		<link>http://DrDoane.com/learning-to-write-in-english-like-learning-to-program/</link>
		<comments>http://DrDoane.com/learning-to-write-in-english-like-learning-to-program/#comments</comments>
		<pubDate>Wed, 17 Mar 2010 16:52:02 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Computing Education]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=100</guid>
		<description><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Learning+to+Write+in+English+like+Learning+to+Program&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-17&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Flearning-to-write-in-english-like-learning-to-program%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
Imagine for a moment that you were going to teach writing in standard English in the same way we tend to teach computer programming. Alright&#8230; Let&#8217;s learn to write. Before you can write, you need to know about the fundamentals &#8230; <a href="http://DrDoane.com/learning-to-write-in-english-like-learning-to-program/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Learning+to+Write+in+English+like+Learning+to+Program&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-17&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Flearning-to-write-in-english-like-learning-to-program%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
<p>Imagine for a moment that you were going to teach writing in standard English in the same way we tend to teach computer programming.</p>
<blockquote><p>Alright&#8230; Let&#8217;s learn to write. Before you can write, you need to know about the fundamentals of the language we&#8217;re going to use. A <em>language</em> is a collection of <em>words</em> and <em>rules</em> for how you combine those words. Words can be thought of as being of different <em>types</em> that determine the purpose and meaning of the words. For example, two types we&#8217;ll work with are <em>nouns</em> and <em>interjections</em>. There are other types, too, but we&#8217;ll get to those later.</p>
<p>For now, let&#8217;s write your first <em>sentence</em>. A sentence is a <em>valid</em> sequence of words. By valid we mean that the sentence would be recognized by an expert speaker of the language as being acceptable.</p>
<p>So, we need an example of a noun and an interjection to get us started&#8230; One frequently used noun is the word <em>WORLD</em> and a common interjection is <em>HELLO</em>.</p></blockquote>
<p><span id="more-100"></span>The students, if dutiful, carefully take in the presentation, try to memorize the new terms you&#8217;ve introduced, and set about trying to write their first sentences.</p>
<blockquote><p>WORLD HELLO</p>
<p><em>error: unexpected token at line 1: WORLD<br />
</em></p>
<p>HELLO  WORLD</p>
<p><em>error: unexpected token at line 1: WORLD</em></p></blockquote>
<p>Having exhausted the possible combination of the words, we introduce additional notational constraints</p>
<blockquote><p>Well, it turns out that written English requires some additional syntactic sugar in order to be valid. We need to introduce <em>punctuation</em> into out writing, such as <em>commas</em> and <em>periods</em>.</p></blockquote>
<p>and students set to work</p>
<blockquote><p>HELLO, WORLD</p>
<p><em>error: </em><em>unterminated string at line 1</em></p>
<p>HELLO,  WORLD.</p>
<p><em>compilation successful</em></p></blockquote>
<p>Now, what&#8217;s wrong about this process? How could it be made better?</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/learning-to-write-in-english-like-learning-to-program/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Media-Propelled introduction to Computational Thinking</title>
		<link>http://DrDoane.com/media-propelled-introduction-to-computational-thinking/</link>
		<comments>http://DrDoane.com/media-propelled-introduction-to-computational-thinking/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 17:51:06 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Computing Education]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=98</guid>
		<description><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Media-Propelled+introduction+to+Computational+Thinking&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-11&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fmedia-propelled-introduction-to-computational-thinking%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
Eric Freudenthal of the iMPaCT: a Media-Propelled introduction to Computational Thinking project spoke at SIGCSE 2010 about how to engage students who are math phobic with computation and, thereby, with math. Using Python and computation about dynamic systems, students work &#8230; <a href="http://DrDoane.com/media-propelled-introduction-to-computational-thinking/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Media-Propelled+introduction+to+Computational+Thinking&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-11&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fmedia-propelled-introduction-to-computational-thinking%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing+Education&amp;rft.subject=Programming"></span>
<p><a rel="nofollow" href="http://robust.cs.utep.edu/%7Efreudent" target="_blank">Eric  Freudenthal</a> of the iMPaCT: a Media-Propelled introduction to Computational Thinking project spoke at <a href="http://sigcse.org" target="_blank">SIGCSE 2010</a> about how to engage students who are math phobic with computation and, thereby, with math. Using Python and computation about dynamic systems, students work to understand how code == math == concepts. One issue raised was how ethical it is to mislead students initially about whether they&#8217;re learning &#8220;math&#8221;. Eric&#8217;s argument: if students <em>know</em> they&#8217;re learning math, they fallback on unsuccessful rote memorization techniques. If, however, they believe they are working with dynamic systems to understand how the system changes as parameters are adjusted, then students engage and experiment.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/media-propelled-introduction-to-computational-thinking/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Programming Style Guide</title>
		<link>http://DrDoane.com/programming-style-guide/</link>
		<comments>http://DrDoane.com/programming-style-guide/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 20:35:19 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tips & Best Practices]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=94</guid>
		<description><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Programming+Style+Guide&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-05&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fprogramming-style-guide%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming&amp;rft.subject=Tips+%26amp%3B+Best+Practices"></span>
Every programmer and programming language has a preferred variation on how to format code. Here are my best suggestions for the languages I tend to code. Use spaces, not tabs. The definition (display width) of a tab can vary from &#8230; <a href="http://DrDoane.com/programming-style-guide/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=Programming+Style+Guide&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2010-03-05&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fprogramming-style-guide%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming&amp;rft.subject=Tips+%26amp%3B+Best+Practices"></span>
<p>Every programmer and programming language has a preferred variation on how to format code. Here are my best suggestions for the languages I tend to code.</p>
<p><span id="more-94"></span></p>
<ul>
<li>Use spaces, not tabs. The definition (display width) of a tab can vary from one editor and platform to the next. A space is always a space.</li>
<li>Use two (2) spaces to indent a block of code.</li>
<li>Always wrap code blocks with curly braces { } even if they&#8217;re optional for a single line of code. Someone will, eventually, want to add a second line of code to the block and will, as a rule, forget to add the curly braces.</li>
<li>The opening curly brace of a block should be on the same line as its opening statement.
<pre style="font-family: courier, sans-serif;">    public String getFirstname () {
    while (i &lt; 5) {
</pre>
</li>
<li>The closing curly brace should be on its own line.
<pre style="font-family: courier, sans-serif;">    }
</pre>
</li>
<li>Leave a blank line after closing a block of code (including the end of a method), unless followed immediately by another closing curly brace.
<pre style="font-family: courier, sans-serif;">            }
          }
        }
</pre>
</li>
<li>Place a comment after closing a block of code when there&#8217;s a series of closing curly braces.
<pre style="font-family: courier, sans-serif;">            } // if
          } // method
        } // class
</pre>
</li>
<li>always put one (1) space before and after binary operators.
<pre style="font-family: courier, sans-serif;">    x = x + 5;
    while (i &lt; 5) {
</pre>
</li>
<li>Put one (1) space before the opening parenthesis and after the closing parenthesis in <em>statements</em> (for, while, if, and so on) or <em>function calls</em>.
<pre style="font-family: courier, sans-serif;">    for (int i = 0; i &lt; 100; i = i + 1) {
    while (x != 2) {
    if (isPrime (n)) {
    sin (5)
    getPrice ()
</pre>
</li>
<li>Indent each new code block.
<pre style="font-family: courier, sans-serif;">    for (int i = 0; i &lt; 100; i = i + 1) {
      if ((i % 2) != 0) {
        if (isPrime (i)) {
          System.out.println (i);
        } // if
      } // if
    } // for
</pre>
</li>
<li>Use the variable naming convention used in your language of the moment: camelCase or under_scores.</li>
<li>Use meaningful variable and method names. For method names, verbNoun them.
<pre style="font-family: courier, sans-serif;">    numStudents
    totalVacationDays
    getFirstname ()
    computeSalary ()
</pre>
</li>
<li>Use single letter variable names iff the letter reflects a standard (recognizable) convention.
<ul>
<li><span style="font-family: courier, sans-serif;">i, j, k</span> for an index (counter) variable</li>
<li><span style="font-family: courier, sans-serif;">x, y, z</span> for coordinates in 3-space</li>
<li><span style="font-family: courier, sans-serif;">a, b, c</span> for coefficients</li>
<li><span style="font-family: courier, sans-serif;">m, n</span> for the number of items in a collection</li>
<li><span style="font-family: courier, sans-serif;">r</span> for the radius of a circle</li>
<li><span style="font-family: courier, sans-serif;">w, h</span> for the width and height of an object</li>
</ul>
</li>
<li>Use ALL_UPPERCASE for constants (fixed values, like PI)</li>
<li>Use white space to make your code more readable.</li>
<li>Comments should describe <em>why</em> you&#8217;re doing something, not <em>how</em>. The code tells me <em>how</em> you&#8217;re doing it.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/programming-style-guide/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>R Statistical Programming Language</title>
		<link>http://DrDoane.com/r-statistical-programming-language/</link>
		<comments>http://DrDoane.com/r-statistical-programming-language/#comments</comments>
		<pubDate>Thu, 22 Jan 2009 18:34:27 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://www.drdoane.com/?p=9</guid>
		<description><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=R+Statistical+Programming+Language&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2009-01-22&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fr-statistical-programming-language%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming&amp;rft.subject=Tools"></span>
The R Project provides a comprehensive, free, open source statistical programming language and environment based on the S language. R is the name of both the language and the environment in which you generally use the language. It&#8217;s an interactive &#8230; <a href="http://DrDoane.com/r-statistical-programming-language/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.type=&amp;rft.format=text&amp;rft.title=R+Statistical+Programming+Language&amp;rft.source=William+E.+J.+Doane+PhD&amp;rft.date=2009-01-22&amp;rft.identifier=http%3A%2F%2FDrDoane.com%2Fr-statistical-programming-language%2F&amp;rft.language=English&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming&amp;rft.subject=Tools"></span>
<p><a href="http://r-project.org" target="_blank">The R Project</a> provides a comprehensive, free, open source statistical programming language and environment based on the S language. R is the name of both the language and the environment in which you generally use the language. It&#8217;s an interactive environment where the commands you enter generate immediate results that you can use to guide your analyses.<br />
<span id="more-9"></span></p>
<pre>&gt; x &lt;- c(5,4,3,2,5)
&gt; mean(x)
3.8</pre>
<p>There is an active development and support community using R and it&#8217;s been growing more popular in both academic and business communities.</p>
<p><strong>Books &amp; Articles on R</strong></p>
<ul>
<li>Albert, J. (2009). Bayesian computation with R (2nd ed.). New York: Springer.</li>
<li>Baayen, R. H. (2008). Analyzing linguistic data : a practical introduction to statistics using R. Cambridge, UK ; New York: Cambridge University Press.</li>
<li>Braun, J., &amp; Murdoch, D. J. (2007). A first course in statistical programming with R. Cambridge ; New York: Cambridge University Press.</li>
<li>Crawley, M. J. (2007). The R book. Chichester, England ; Hoboken, N.J.: Wiley.</li>
<li>Dalgaard, P. (2008). Introductory statistics with R (2nd ed.). New York: Springer.</li>
<li>Gentle, J. E. (2009). Computational statistics. New York: Springer.</li>
<li>Good, P. I. (2005). Introduction to statistics through resampling methods and R/S-PLUS. Hoboken, N.J.: Wiley-Interscience.</li>
<li>Leipzig, J., &amp; Li, X.-Y. (2009). Data mashups in R. from http://oreilly.com/catalog/9780596804770/</li>
<li>Nolan, D. A., &amp; Speed, T. P. (2000). Stat labs : mathematical statistics through applications. New York: Springer.</li>
<li>Owen, W. J. (2006). Using R in an Undergraduate Mathematical Statistics Sequence [Electronic Version]. InterStat, from http://interstat.statjournals.net/YEAR/2006/abstracts/0605002.php</li>
<li>Owen, W. J. (2007). The R Guide [Electronic Version], from http://cran.r-project.org/doc/contrib/Owen-TheRGuide.pdf</li>
<li>Petris, G. (2009). Dynamic linear models with R. New York: Springer.</li>
<li>Rossiter, D. G. (2009). Introduction to the R Project for Statistical Computing for use at ITC [Electronic Version], from http://cran.r-project.org/other-docs.html</li>
<li>Torgo, L. (2003). Data Mining with R: Learning by Case Studies. LIACC-FEP, University of Porto.</li>
<li>Trosset, M. W. (2009). An introduction to statistical inference and its applications with R. Boca Raton: Chapman &amp; Hall/CRC.</li>
<li>Vance, A. (2009, January 7). Data Analysts Captivated by R’s Power. New York Times, from http://www.nytimes.com/2009/01/07/technology/business-computing/07program.html</li>
<li>Vance, A. (2009, January 8). R You Ready for R. New York Times, from http://bits.blogs.nytimes.com/2009/01/08/r-you-ready-for-r/</li>
<li>Verzani, J. simpleR – Using R for Introductory Statistics.</li>
<li>Warnes, G. R., &amp; Gorjanc, G. (2008). gdata: Various R programming tools for data manipulation.</li>
</ul>
<p><strong>Support for R</strong></p>
<ul>
<li><a href="http://n4.nabble.com/R-f789695.html" target="_blank">Nabble.com</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/r" target="_blank">StackOverflow.com</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/r-statistical-programming-language/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

