<?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</title>
	<atom:link href="http://DrDoane.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://DrDoane.com</link>
	<description>What will you create today?</description>
	<lastBuildDate>Sat, 24 Jul 2010 11:27:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Dependent Sample Assessment Plots</title>
		<link>http://DrDoane.com/2010/07/statistics/dependent-sample-assessment-plots/</link>
		<comments>http://DrDoane.com/2010/07/statistics/dependent-sample-assessment-plots/#comments</comments>
		<pubDate>Wed, 14 Jul 2010 05:04:16 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Assessment & Evaluation]]></category>
		<category><![CDATA[Statistics]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=133</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.title=Dependent Sample Assessment Plots&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Assessment &amp; Evaluation&amp;rft.subject=Statistics&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-14&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/statistics/dependent-sample-assessment-plots/&amp;rft.language=English"></span>
Dependent Sample Assessment Plots (DSAP) constitutute a way of visualizing data from pre-intervention and post-intervention sources in order to determine whether the intervention likely influenced any changes. Suppose you&#8217;re an educator and you administer an assessment to students at the beginning of a unit asking about their level of confidence or understanding of a topic. [...]]]></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.title=Dependent Sample Assessment Plots&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Assessment &amp; Evaluation&amp;rft.subject=Statistics&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-14&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/statistics/dependent-sample-assessment-plots/&amp;rft.language=English"></span>
<p>Dependent Sample Assessment Plots (DSAP) constitutute a way of visualizing data from pre-intervention and post-intervention sources in order to determine whether the intervention likely influenced any changes.</p>
<p>Suppose you&#8217;re an educator and you administer an assessment to students at the beginning of a unit asking about their level of confidence or understanding of a topic. You then teach a lesson that spans some period of time. At the end you collect responses to the same questions again. You now have a dependent sample: two responses that related to the same individual for some number of individuals.</p>
<p><span id="more-133"></span></p>
<table border=1 width="200px" style="margin: 0px auto 0px auto;">
<tr>
<td></td>
<td><em>Pre</em></td>
<td><em>Post</em></td>
</tr>
<tr>
<td>Adam</td>
<td>22</td>
<td>45</td>
</tr>
<tr>
<td>Beth</td>
<td>33</td>
<td>30</td>
</tr>
<tr>
<td>Cindy</td>
<td>35</td>
<td>53</td>
</tr>
<tr>
<td>David</td>
<td>32</td>
<td>55</td>
</tr>
<tr>
<td>Elisabeth</td>
<td>27</td>
<td>40</td>
</tr>
</table>
<p>For such a small sample, you can quickly eye-ball the raw data and see that there seems to have been an upward shift in scores, but is it significant (in the statistical sense)? Could you so easily eye-ball the results for a class of 20, 30, or 100 students? Probably not.</p>
<p>Data visualization is an attempt to reveal patterns in data by converting it from raw numbers to graphic images where we can more easily discern clusters (small groups of students who exhibit similar score patterns), outliers (unusually high or low scores), and effects of treatments (did the instruction result in learning?).</p>
<p>An assessment plot is simply a specialized scatter plot showing the pairs of values as (x, y) coordinates. When we enhance the scatter plot a little, we can gain quick insight into patterns in our data. Consider the following Dependent Sample Assessment Plots:</p>
<p><a href="http://DrDoane.com/wp-content/uploads/2010/07/dssp1.png"><img src="http://DrDoane.com/wp-content/uploads/2010/07/dssp1.png" alt="" title="Dependent Sample Scatter Plot" width="541" height="547" class="aligncenter size-full wp-image-134" /></a></p>
<p>The plot has several features worth mentioning:</p>
<ul>
<li>The x-axis and y-axis use the same range (they&#8217;re on the same scale), so the plot is square.</li>
<li>I&#8217;ve plotted post-assessment scores along the x-axis so that the mean difference will be positive for increases in post-scores and negative for decreases in post-scores.</li>
<li>The solid black line running from the lower-left to the upper-right represents x and y values that are the same (10, 10), (20, 20), and so on; this is called the identity line. Therefore, if there was no change between the pre- and post-assessment, we would expect the points to appear along this 45 degree line.</li>
<li>Any points below this line represents a positive change (scores increased from the pre- to post-assessment).</li>
<li>Any points above this line represents a negative change (scores decreased from the pre- to post-assessment).</li>
<li>The horizontal, thinly-dashed red line represents the pre-assessment mean; here, about 29.</li>
<li>The vertical, thinly-dashed red line represents the post-assessment mean; here, about 44.</li>
<li>The thick, dashed red line running diagonally is the mean of the difference between pre- and post-assessment scores (the difference mean); here, 14.8, i.e., post-assessment scores were 14.8 points higher than pre-assessment scores, on average.</li>
<li>The green bar indicates the 95% confidence interval: the range of values for the population mean difference that are reasonable, in light of these data. Technically, this is the range of  values that would not lead to rejection for alpha = 0.05. </li>
<li>If the green bar includes the identity line, then any observed difference is not statistically significant.</li>
<li>Conversely, if the green bar does not include the identity line, then any observed difference is statistically significant.</li>
</ul>
<p>This simple visualization offers us much information quickly and scales well to samples of moderate class sizes. (See the 40-student example, below.)</p>
<p> Free software is available to help us generate these graphs with just a little effort on our part. <a href="http://www.r-project.org/">R</a>, a statistical programming environment, is available for <a href="http://cran.opensourceresources.org/">download</a> for Windows, Macintosh, or Linux operating systems and offers a wealth of data management, analysis, and visualization tools. Here I&#8217;ll focus on only one such tool: <a href="http://cran.r-project.org/web/packages/granova/index.html">granova</a>.</p>
<p><a href="http://cran.r-project.org/web/packages/granova/index.html">Granova</a> is an abbreviation for Graphical Analysis of Variance and is a package available (also for free) for use in R written by Bob Pruzek and Jim Helmreich. In fact, the above plot was generated using granova.</p>
<p>In order to install and use R and granova to produce this plot, you would</p>
<ol>
<li><a href="http://cran.opensourceresources.org/">Download R</a></li>
<li>Install R per your operating system&#8217;s usual process</li>
<li>Mac Users will also need to <a href="http://cran.r-project.org/bin/macosx/tools/">download and install tcl/tk</a></li>
<li>Launch R</li>
<li>Type the following commands within R</li>
<ul>
<li>
<pre>install.packages("granova", dep=TRUE)</pre>
</li>
<li>
<pre>library(granova)</pre>
</li>
<li>
<pre>x <- cbind(post=c(45, 30, 53, 55, 40), pre=c(22, 33, 35, 32, 27))</pre>
</li>
<li>
<pre>granova.ds(x)</pre>
</li>
</ul>
</ol>
<p>In the future, to run your own analysis using your own pre- and post-assessment data, you would simply</p>
<ol>
<li>Launch R</li>
<li>Type the following commands within R</li>
<ul>
<li>
<pre>library(granova)</pre>
</li>
<li>
<pre>x <- cbind(post=c(45, 30, 53, 55, 40), pre=c(22, 33, 35, 32, 27))</pre>
</li>
<li>
<pre>granova.ds(x)</pre>
</li>
</ul>
</ol>
<p>replacing the numbers on the line beginning with
<pre>x <- </pre>
<p> with your own pre- and post-assessment scores. It's important that the two lists of numbers are in matched order. That is, 22 and 45 are scores for the first student, 33 and 30 are scores for the second student, and so on. Also, notice that I've entered post-assessment scores, first, so that the post-scores will appear on the x-axis.</p>
<p>In closing, consider the data below: 40 pairs of scores in both raw numeric and granova format. Can you eye-ball any trends from the raw data? What about based on the plot?</p>
<p>For more examples on how these types of enhanced scatter plots can be used, see Pruzek and Helmreich's paper in the Journal of Statistics Education Volume 17, Number 1 (2009), <a href="http://www.amstat.org/publications/jse/v17n1/helmreich.html" target="_blank">Enhancing Dependent Sample Analyses Using Graphics</a>.</p>
<table border=1>
<tr>
<td><em>Pre</em></td>
<td><em>Post</em></td>
</tr>
<tr>
<td>21.72</td>
<td>50.68</td>
<td valign=top rowspan=40><img src="http://DrDoane.com/wp-content/uploads/2010/07/dssp2.png" /></td>
</tr>
<tr>
<td>33.26</td>
<td>36.39</td>
</tr>
<tr>
<td>20.41</td>
<td>51.55</td>
</tr>
<tr>
<td>26.06</td>
<td>36.26</td>
</tr>
<tr>
<td>33.62</td>
<td>32.18</td>
</tr>
<tr>
<td>27.16</td>
<td>20.13</td>
</tr>
<tr>
<td>30.38</td>
<td>27.90</td>
</tr>
<tr>
<td>28.84</td>
<td>59.17</td>
</tr>
<tr>
<td>33.00</td>
<td>34.18</td>
</tr>
<tr>
<td>36.36</td>
<td>41.76</td>
</tr>
<tr>
<td>30.36</td>
<td>48.92</td>
</tr>
<tr>
<td>33.16</td>
<td>35.80</td>
</tr>
<tr>
<td>31.42</td>
<td>43.73</td>
</tr>
<tr>
<td>39.90</td>
<td>40.53</td>
</tr>
<tr>
<td>29.90</td>
<td>52.50</td>
</tr>
<tr>
<td>35.42</td>
<td>34.67</td>
</tr>
<tr>
<td>29.14</td>
<td>38.33</td>
</tr>
<tr>
<td>22.31</td>
<td>29.02</td>
</tr>
<tr>
<td>27.96</td>
<td>41.19</td>
</tr>
<tr>
<td>24.42</td>
<td>57.77</td>
</tr>
<tr>
<td>23.65</td>
<td>28.68</td>
</tr>
<tr>
<td>26.94</td>
<td>26.31</td>
</tr>
<tr>
<td>35.09</td>
<td>23.09</td>
</tr>
<tr>
<td>38.29</td>
<td>53.75</td>
</tr>
<tr>
<td>39.09</td>
<td>50.23</td>
</tr>
<tr>
<td>30.21</td>
<td>23.43</td>
</tr>
<tr>
<td>24.78</td>
<td>35.14</td>
</tr>
<tr>
<td>34.26</td>
<td>54.71</td>
</tr>
<tr>
<td>31.64</td>
<td>20.91</td>
</tr>
<tr>
<td>31.41</td>
<td>27.45</td>
</tr>
<tr>
<td>23.84</td>
<td>48.05</td>
</tr>
<tr>
<td>36.11</td>
<td>25.58</td>
</tr>
<tr>
<td>37.45</td>
<td>59.60</td>
</tr>
<tr>
<td>29.38</td>
<td>56.05</td>
</tr>
<tr>
<td>39.72</td>
<td>51.28</td>
</tr>
<tr>
<td>29.82</td>
<td>36.91</td>
</tr>
<tr>
<td>31.82</td>
<td>21.71</td>
</tr>
<tr>
<td>24.82</td>
<td>23.96</td>
</tr>
<tr>
<td>37.80</td>
<td>49.52</td>
</tr>
<tr>
<td>38.45</td>
<td>56.68</td>
</tr>
</table>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/07/statistics/dependent-sample-assessment-plots/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dear Apple: beauty lies in parity</title>
		<link>http://DrDoane.com/2010/07/reflections/dear-apple-beauty-lies-in-parity/</link>
		<comments>http://DrDoane.com/2010/07/reflections/dear-apple-beauty-lies-in-parity/#comments</comments>
		<pubDate>Tue, 06 Jul 2010 14:32:44 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Reflections]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=125</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.title=Dear Apple: beauty lies in parity&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Reflections&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-06&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/reflections/dear-apple-beauty-lies-in-parity/&amp;rft.language=English"></span>
I love Apple&#8217;s design aesthetic. I see it in the simplicity of their physical and software UIs, although usually not in the baroque nature of their business processes. What frustrates me is the lack of parity among the Apple-born technologies. I don&#8217;t just want a good experience on one device, I want it on, between, [...]]]></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.title=Dear Apple: beauty lies in parity&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Reflections&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-06&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/reflections/dear-apple-beauty-lies-in-parity/&amp;rft.language=English"></span>
<p>I love Apple&#8217;s design aesthetic. I see it in the simplicity of their physical and software UIs, although usually not in the baroque nature of their business processes. What frustrates me is the lack of parity among the Apple-born technologies. I don&#8217;t just want a good experience on one device, I want it on, between, and among all my Apple devices!</p>
<p>Case in point, a few years ago I submitted a note to Apple suggesting that they had missed the boat by not having the iPhone earphone controller/mic work on their notebook line, too. That is, I wanted to be able to iChat using the iPhone earbuds as my earphones and microphone. Sure enough, the latest MacBook Pro models have <a href="http://www.apple.com/macbookpro/specs.html">that feature</a>. I&#8217;m not saying it was me! I&#8217;m sure many people had a similar idea, and told Apple about it, and I&#8217;m thankful for it. What I <em>am</em> asking is, why didn&#8217;t Apple notice it? Are their development efforts so siloed or their release cycles so offset from one another that it&#8217;s not possible?</p>
<p>Another, current, case in point: the push for ebooks. I have my iPad (thank you, Steve!) and I loaded iBooks on it. I like it. I like the upgrade even more. And there are more features I expect will come soon. However, it&#8217;s frustrating to not have iBooks parity between the iPad (/iPhone/iPod touch) and iTunes on my MacBook.</p>
<ul>
<li>on the iPad, I can&#8217;t easily manage my collection (gather new books, other than from the iBookstore, (and that&#8217;s yet another frustration!), although it&#8217;s slowly getting better with the &#8220;open in&#8230;&#8221; capability.</li>
<li>on my MacBook, in iTunes, I can&#8217;t read the ebooks I&#8217;ve collected.</li>
</ul>
<p>Or the jumble that passes for document management in iWorks for the iPad, or for the Notes app on the original iPhone, or&#8230; or&#8230;</p>
<p>If Apple truly wants devices like the iPad to be devices for everyone, then the user experience on different Apple devices really needs to be in parity from day-zero.</p>
<p>Don&#8217;t make me think twice.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/07/reflections/dear-apple-beauty-lies-in-parity/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Thinking Through A Basic Pong Game in Processing</title>
		<link>http://DrDoane.com/2010/07/computing-education/thinking-through-a-basic-pong-game-in-processing/</link>
		<comments>http://DrDoane.com/2010/07/computing-education/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.title=Thinking Through A Basic Pong Game in Processing&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing Education&amp;rft.subject=Programming&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-05&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/computing-education/thinking-through-a-basic-pong-game-in-processing/&amp;rft.language=English"></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 paddle while the ball is traveling to the right, game play ends. The paddle will [...]]]></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.title=Thinking Through A Basic Pong Game in Processing&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Computing Education&amp;rft.subject=Programming&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-05&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/computing-education/thinking-through-a-basic-pong-game-in-processing/&amp;rft.language=English"></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/2010/07/computing-education/thinking-through-a-basic-pong-game-in-processing/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>My Classroom Rules</title>
		<link>http://DrDoane.com/2010/07/reflections/my-classroom-rules/</link>
		<comments>http://DrDoane.com/2010/07/reflections/my-classroom-rules/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 14:34:00 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Reflections]]></category>
		<category><![CDATA[Teaching]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=126</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.title=My Classroom Rules&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Reflections&amp;rft.subject=Teaching&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-03&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/reflections/my-classroom-rules/&amp;rft.language=English"></span>
Recently, several students commented that I seemed to have a lot of classroom rules. This is an old refrain in my life, and, in a sense, it&#8217;s true. However, the rules I have are all just special cases of my basic three rules, which I share on my About Me page. If you are going [...]]]></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.title=My Classroom Rules&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Reflections&amp;rft.subject=Teaching&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-07-03&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/07/reflections/my-classroom-rules/&amp;rft.language=English"></span>
<p>Recently, several students commented that I seemed to have a lot of classroom rules. This is an old refrain in my life, and, in a sense, it&#8217;s true. However, the rules I have are all just special cases of my basic three rules, which I share on <a href="http://drdoane.com/about/">my About Me page</a>. </p>
<ol>
<li>If you are going to break the rules, don&#8217;t be obnoxious about it.</li>
<ul>
<li>If you can&#8217;t be engaged, don&#8217;t distract others. It&#8217;s unfair to both you and them.</li>
</ul>
<li>Don&#8217;t disappoint me.</li>
<ul>
<li>Don&#8217;t promise to focus, but fail to do so. Instead, acknowledge whatever is distracting you and address it.</li>
</ul>
<li>Be aware.</li>
<ul>
<li>Know what questions your classmates are asking.</li>
<li>Recognize which questions are related to tweaking the solution and which are related to a different problem context.</li>
</ul>
</ol>
<p><a href="http://dl.dropbox.com/u/1184374/DrDoane.com/ClassroomRules.png" target="_blank"><img alt="Wil's Classroom Rules" src="http://dl.dropbox.com/u/1184374/DrDoane.com/ClassroomRules.png" class="alignnone" width="100%" /><br /><em>A full sized version of my rules diagram</em></a></p>
<p>I think my biggest failing in the classroom is that I&#8217;m uneven in the application of the rules, which is perceived as me being arbitrary. Inconsistency and randomness seem very similar to the outside observer.  </p>
<p>I sometimes let feature creep take over the problem statement, which can lead to unintentional complexity or student confusion as the problem changes. I need to spend more time up front specifying the problem completely with students so that it&#8217;s clear to them and me what the invariants are. </p>
<p>I also find it difficult to ask a student actually to leave the classroom. I&#8217;m forever optimistic that the unfocused student will find moments of clarity and engage with the course material. Often, they do, but unfortunately, while I&#8217;m waiting for that to happen, the class as a whole is affected and, generally, material isn&#8217;t covered as concisely, clearly, or completely as might have been the case otherwise, thereby disadvantaging the other students who could have gone further, faster. Such is the nature of a set of random people with diverse metacognitive skills and needs. Still, I&#8217;m certain that I could serve better both ends of the spectrum.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/07/reflections/my-classroom-rules/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Computational Efficiency</title>
		<link>http://DrDoane.com/2010/06/programming/computational-efficiency/</link>
		<comments>http://DrDoane.com/2010/06/programming/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.title=Computational Efficiency&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-24&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/programming/computational-efficiency/&amp;rft.language=English"></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) needs for a given algorithm. Why? Because we want the fastest algorithm, or the one [...]]]></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.title=Computational Efficiency&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Programming&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-24&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/programming/computational-efficiency/&amp;rft.language=English"></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/2010/06/programming/computational-efficiency/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Co-work and Coffee Shops</title>
		<link>http://DrDoane.com/2010/06/reflections/co-work-and-coffee-shops/</link>
		<comments>http://DrDoane.com/2010/06/reflections/co-work-and-coffee-shops/#comments</comments>
		<pubDate>Wed, 16 Jun 2010 18:03:17 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Reflections]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=124</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.title=Co-work and Coffee Shops&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Reflections&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-16&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/reflections/co-work-and-coffee-shops/&amp;rft.language=English"></span>
It strikes me that co-work spaces and coffee shops are similar, but&#8230; not. Your typical coffee shop grudgingly offers moderately useful WiFi (can we get rid of the 20 minute timeouts and required &#8220;accept terms&#8221; pages, please!) and a few power outlets and has yet to figure out what to do with all these individual [...]]]></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.title=Co-work and Coffee Shops&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Reflections&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-16&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/reflections/co-work-and-coffee-shops/&amp;rft.language=English"></span>
<p>It strikes me that co-work spaces and coffee shops are similar, but&#8230; not. Your typical coffee shop grudgingly offers moderately useful WiFi (can we get rid of the 20 minute timeouts and required &#8220;accept terms&#8221; pages, please!) and a few power outlets and has yet to figure out what to do with all these individual patrons taking up so much table space for so long. In short: lots of coffee, little access to power or high speed WiFi.</p>
<p>Co-work spaces have more than enough power outlets and Wifi, usually high speed and reliable (if not, find another co-work space!), but very little coffee. People are expected to come in, spend time without buying anything, and slurp all the Internet they can.</p>
<p>Could we have a coffee shop-style chain of co-work shops with space, meeting rooms, power, and WiFi and sell day passes/memberships? What&#8217;s the critical population/entrepreneurial density to sustain it?</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/06/reflections/co-work-and-coffee-shops/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Note to &#8220;Content Providers&#8221;: Don&#8217;t Harsh my Mellow</title>
		<link>http://DrDoane.com/2010/06/critiques-solutions/note-to-content-providers-dont-harsh-my-mellow/</link>
		<comments>http://DrDoane.com/2010/06/critiques-solutions/note-to-content-providers-dont-harsh-my-mellow/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 17:23:23 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Critiques & Solutions]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=123</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.title=Note to &#8220;Content Providers&#8221;: Don&#8217;t Harsh my Mellow&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Critiques &amp; Solutions&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-15&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/critiques-solutions/note-to-content-providers-dont-harsh-my-mellow/&amp;rft.language=English"></span>
So-called &#8220;content providers&#8221; who provide little to no content in their RSS feeds break my flow. They&#8217;re an annoyance to read. Their one-line teasers drive me away from their content, not toward it. I tend to unsubscribe from those feeds, rather than visit their websites. If your one-paragraph introduction is compelling, I&#8217;ll visit your site [...]]]></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.title=Note to &#8220;Content Providers&#8221;: Don&#8217;t Harsh my Mellow&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Critiques &amp; Solutions&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-15&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/critiques-solutions/note-to-content-providers-dont-harsh-my-mellow/&amp;rft.language=English"></span>
<p>So-called &#8220;content providers&#8221; who provide little to no content in their RSS feeds break my flow. They&#8217;re an annoyance to read. Their one-line teasers drive me <em>away from</em> their content, not toward it. I tend to <em>unsubscribe</em> from those feeds, rather than visit their websites.</p>
<p>If your one-paragraph introduction is compelling, I&#8217;ll visit your site to read the rest. However, your one-line teasers are rarely compelling and often annoyingly vacuous. </p>
<p>Please, provide the content and let <em>me</em> decide how to consume it.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/06/critiques-solutions/note-to-content-providers-dont-harsh-my-mellow/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Reeder for the iPad</title>
		<link>http://DrDoane.com/2010/06/tools/reeder-for-the-ipad/</link>
		<comments>http://DrDoane.com/2010/06/tools/reeder-for-the-ipad/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 17:18:51 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=122</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.title=Reeder for the iPad&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Tools&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-15&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/tools/reeder-for-the-ipad/&amp;rft.language=English"></span>
While many content providers are working diligently to find ways to lock us in to their content and to exclude aggregation, it&#8217;s aggregation that I want!! I want to be able to read my content in the form and manner that fits my workflow of the moment. Reeder for the iPad is a great example [...]]]></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.title=Reeder for the iPad&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Tools&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-15&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/tools/reeder-for-the-ipad/&amp;rft.language=English"></span>
<p>While many content providers are working diligently to find ways to lock us in to their content and to exclude aggregation, it&#8217;s aggregation that I want!! I want to be able to read my content in the form and manner that fits my workflow of the moment. </p>
<p><a href="http://itunes.apple.com/us/app/reeder/id375661689?mt=8">Reeder for the iPad</a> is a great example of an app that makes reading a pleasure. It&#8217;s fast; amazingly fast. I can read my <a href="http://reader.google.com">Google Reader</a> subscribed feeds, mark items for further follow-up, forward them to my Twitter feed (Note to Reeder devs: I maintain more than one Twitter account and more than one account on other social networking sites, to separate the personal from the professional roles vested in me), add it to my Instapaper account, and so on. In short, reading news feeds in <a href="http://itunes.apple.com/us/app/reeder/id375661689?mt=8">Reeder</a> is a pleasure; very nearly perfect.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/06/tools/reeder-for-the-ipad/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I Don&#8217;t *WANT* an App for That</title>
		<link>http://DrDoane.com/2010/06/critiques-solutions/i-dont-want-an-app-for-that/</link>
		<comments>http://DrDoane.com/2010/06/critiques-solutions/i-dont-want-an-app-for-that/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 17:08:46 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Critiques & Solutions]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=119</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.title=I Don&#8217;t *WANT* an App for That&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Critiques &amp; Solutions&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-15&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/critiques-solutions/i-dont-want-an-app-for-that/&amp;rft.language=English"></span>
With the explosion of applications for the iPhone and iPad, I wanted to point out that, for many things, I don&#8217;t want an app for that! Consider the works of Shakespeare; I really don&#8217;t want a separate app for each of his plays and sonnets. Some books and magazines are being published as separate apps, [...]]]></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.title=I Don&#8217;t *WANT* an App for That&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Critiques &amp; Solutions&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-15&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/critiques-solutions/i-dont-want-an-app-for-that/&amp;rft.language=English"></span>
<p>With the explosion of applications for the iPhone and iPad, I wanted to point out that, for many things, I don&#8217;t <em>want</em> an app for that! Consider the works of Shakespeare; I really don&#8217;t want a separate app for each of his plays and sonnets. Some books and magazines are being published as separate apps, to take advantage of the graphics in OpenGL ES, to control content distribution, etc; I understand their reasoning. But I don&#8217;t want one-app-per-book; it&#8217;s too messy and disjoint. Similarly, I don&#8217;t want one-app-per-magazine or one-app-per-newspaper; I read too many sources each day for that model to work. </p>
<p>What I want is to be able to retrieve, review, annotate, and share content I view with the tools I find most natural and that enable my workflow. I do wish &#8220;content providers&#8221; could grasp that and start providing some content, instead of trying to lock it away.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/06/critiques-solutions/i-dont-want-an-app-for-that/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Thoughts on Course Grades</title>
		<link>http://DrDoane.com/2010/06/assessment-evaluation/thoughts-on-course-grades/</link>
		<comments>http://DrDoane.com/2010/06/assessment-evaluation/thoughts-on-course-grades/#comments</comments>
		<pubDate>Wed, 09 Jun 2010 16:52:49 +0000</pubDate>
		<dc:creator>William Doane</dc:creator>
				<category><![CDATA[Assessment & Evaluation]]></category>
		<category><![CDATA[Critiques & Solutions]]></category>

		<guid isPermaLink="false">http://DrDoane.com/?p=120</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.title=Thoughts on Course Grades&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Assessment &amp; Evaluation&amp;rft.subject=Critiques &amp; Solutions&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-09&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/assessment-evaluation/thoughts-on-course-grades/&amp;rft.language=English"></span>
Like many educators, I worry about the level of effort that my students commit to their studies (the process) and the quality of their work (the product). We call the process many things: engagement, time on task, passion&#8230; But we mean to describe that self-driven, motivated commitment to learning for the sake of learning that [...]]]></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.title=Thoughts on Course Grades&amp;rft.aulast=Doane&amp;rft.aufirst=William&amp;rft.subject=Assessment &amp; Evaluation&amp;rft.subject=Critiques &amp; Solutions&amp;rft.source=William E. J. Doane PhD&amp;rft.date=2010-06-09&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://DrDoane.com/2010/06/assessment-evaluation/thoughts-on-course-grades/&amp;rft.language=English"></span>
<p>Like many educators, I worry about the level of effort that my students commit to their studies (the process) and the quality of their work (the product). We call the process many things: engagement, time on task, passion&#8230; But we mean to describe that self-driven, motivated commitment to learning for the sake of learning that we value.</p>
<p>Unfortunately, in many educational environments, the standard proxy for effort is the course grade. Grades are a poor proxy, but are so ingrained in educational practice (in some of the institutions where I teach) and in students&#8217; minds that it may be useful to consider a way to structure grade rewards  to encourage the genuine engagement from students that we desire. </p>
<p><span id="more-120"></span></p>
<p>I&#8217;ve tried to address this in my syllabi and in my course designs by assuring students in various ways. Most recently, I&#8217;ve tried to get them to understand that they start out in my class with an A and that it&#8217;s theirs to lose by not doing the course work. I&#8217;ve had some success with that approach and some students have embraced the notion that they start at the high end of the scale and not at the low end. It&#8217;s subtle, but seems to help some students&#8217; mindset.</p>
<p>I&#8217;ve recently been trying to reconcile that with my insistence in classes that students should view the syllabus as the least they can do to pass a course; they should view it as a floor, rather than a ceiling. But why should they, when they get an A for doing what&#8217;s listed in the syllabus? The potential reward (or lack thereof) doesn&#8217;t match the effort I&#8217;d like to see my students make. </p>
<p>Meanwhile, I&#8217;ve read Carol Dweck&#8217;s work on the <a href="http://bit.ly/GNGI">perils of praise</a> which, if I read it correctly, comes down to two main findings:</p>
<ul>
<li>If you praise outcomes (using rewards, e.g.), learners will tend not to take risks. Instead, they&#8217;ll do only those things they know they can do, because they&#8217;ve done them before and know it will bring rewards.</li>
<li>If you prize <em>effort</em>, then learners will tend to take risks, even if it might lead to failure, because they learn to value the process, rather than the product.</li>
</ul>
<p>I&#8217;ve also been thinking about Daniel Pink&#8217;s work on <a href="http://bit.ly/95k7K6">the motivation distribution</a>: reward too little or too much and individuals aren&#8217;t motivated; reward enough to cover the necessities and individuals are motivated to improve.</p>
<p>How can I build those ideas into my course designs?</p>
<p>Effort is difficult to observe or quantify, but we know it when we see the results. I can focus on the effort involved when I&#8217;m conversing with students, but how can I encode the value I place on effort in forms that will resonate with students who don&#8217;t typically engage in conversations with their instructors?</p>
<p>Setting the right reward structure might be easier, however. Simply create a syllabus that outlines what students need to do to attain a respectable B in a course and leave an A-level project up to the individual student to conceive of, propose, and execute. Think of the A-level project as the student&#8217;s 20% flex time. They get to be creative; in fact, <em>need to be</em> creative in order to receive the highest rewards. The project design, itself, can be a series of milestones that presses students to think early and often about their original contribution to the class. </p>
<p>Some students will be happy working toward a B and leaving it at that, while the others—the grade-seekers and aspirers—will be called on to think about their learning experience and about what sparks their creative talents.</p>
]]></content:encoded>
			<wfw:commentRss>http://DrDoane.com/2010/06/assessment-evaluation/thoughts-on-course-grades/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 3.805 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2010-09-08 14:22:18 -->
