<?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>Rabbit Creative &#187; ruby</title>
	<atom:link href="http://www.rabbitcreative.com/tag/ruby/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rabbitcreative.com</link>
	<description>ruby, rails, objects and &#60;del&#62;politics&#60;/del&#62; markets</description>
	<lastBuildDate>Tue, 25 Oct 2011 02:14:49 +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>Fast pixel-perfect collision detection.</title>
		<link>http://www.rabbitcreative.com/2009/01/07/fast-pixel-perfect-collision-detection/</link>
		<comments>http://www.rabbitcreative.com/2009/01/07/fast-pixel-perfect-collision-detection/#comments</comments>
		<pubDate>Wed, 07 Jan 2009 08:28:36 +0000</pubDate>
		<dc:creator>Rabbit</dc:creator>
				<category><![CDATA[programming]]></category>
		<category><![CDATA[gosu]]></category>
		<category><![CDATA[math]]></category>
		<category><![CDATA[ruby]]></category>
		<category><![CDATA[video game programming]]></category>

		<guid isPermaLink="false">http://www.rabbitcreative.com/?p=146</guid>
		<description><![CDATA[I doubt I am the first to discover this, but I have developed a way to get K access time regardless of the size of the two-dimensional plane you&#8217;re working with. The general idea is to arrange your data in such a way that you can access any point on a two-dimensional plane as a [...]]]></description>
			<content:encoded><![CDATA[<p>I doubt I am the first to discover this, but I have developed a way to get <a href="http://cppreference.com/wiki/complexity">K access time</a> regardless of the size of the two-dimensional plane you&#8217;re working with.</p>
<p>The general idea is to arrange your data in such a way that you can access any point on a two-dimensional plane as a single number and vice versa. For example, given a plane 10 pixels wide by 5 pixels tall, the point (6, 2) will represent 6 + (2 * 10) = 26, or the 26th element of your array. The value stored at this index can be whatever you want; I chose true to mean solid (collision) and false to mean empty (no collision).</p>
<p>To illustrate this, picture your plane as a grid, but instead of using points (x, y pairs) to denote location, you use a single number. Read the grid like you read a book: left-to-right, top-to-bottom. So say you have a 10&#215;5 plane, you&#8217;d read it like this&#8230;</p>
<table border="1" cellpadding="5" cellspacing="0" style="text-align: center;">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td style="background: #FFFF00;">25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
</tr>
</table>
<p>These numbers map perfectly as indices to an array whose values are true or false (solid or empty). This way, it doesn&#8217;t matter how big your grid/plane/level is, the time required to access element 5 is identical to the time it takes to access element 5,000,000.</p>
<p>Here are some benchmarks in Ruby to show how fast array index lookup is. Each array was accessed 1,000 times with a hard-coded number:</p>
<pre>
                         user     system      total        real
10,000 elements      0.000000   0.000000   0.000000 (  0.000393)
2,500,000 elements   0.000000   0.000000   0.000000 (  0.000307)
</pre>
<p>As you can see, even if you perform this operation hundreds of times per second (as you might in a video game) the performance remains good.</p>
<p>I did all this in <a href="http://www.ruby-lang.org/en/">Ruby</a> and <a href="http://code.google.com/p/gosu/">Gosu</a>, but I imagine it&#8217;ll work for any language. The basic formula I used to generate the indices looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">rows.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>row<span style="color:#006600; font-weight:bold;">|</span>
  row.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>col<span style="color:#006600; font-weight:bold;">|</span>
    pixels<span style="color:#006600; font-weight:bold;">&#91;</span>col <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#006600; font-weight:bold;">&#40;</span>row <span style="color:#006600; font-weight:bold;">*</span> map.<span style="color:#9900CC;">width</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#0000FF; font-weight:bold;">true</span><span style="color:#006600; font-weight:bold;">/</span><span style="color:#0000FF; font-weight:bold;">false</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>The rest of your game can maintain the traditional (x, y) coordinate system. However, when you want to check for collisions, you must convert that point into its numerical representation. This is identical to the index-calculation I showed you earlier:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">x <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#006600; font-weight:bold;">&#40;</span>y <span style="color:#006600; font-weight:bold;">*</span> map.<span style="color:#9900CC;">width</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#008000; font-style:italic;"># x is col and y is row</span></pre></div></div>

<p>If you&#8217;re generating tiles of a specific size (e.g. 16&#215;16) from a text file (as in Gosu&#8217;s Captain Ruby example), you&#8217;re going to have to perform some extra manipulation to create the full range of pixels.</p>
<p>Imagine a text file containing 50 rows of text. Each row contains 100 characters. Each character represents a 16&#215;16 tile in your level. If you perform the array index creation based on the number of characters in your file, you will get 50 * 100 = 5000 pixels instead of the actual (16 * 100) * (16 * 50)  = 1,280,000 pixels in your level. Quite the difference.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rabbitcreative.com/2009/01/07/fast-pixel-perfect-collision-detection/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

