<?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>Algorithms and Stuff &#187; collision detection</title>
	<atom:link href="http://blog.ivank.net/tag/collision-detection/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.ivank.net</link>
	<description>Algorithms and Stuff</description>
	<lastBuildDate>Thu, 14 Mar 2013 18:36:34 +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>Quadtree visualization in JavaScript</title>
		<link>http://blog.ivank.net/quadtree-visualization.html</link>
		<comments>http://blog.ivank.net/quadtree-visualization.html#comments</comments>
		<pubDate>Tue, 15 Nov 2011 10:15:44 +0000</pubDate>
		<dc:creator>Ivan Kuckir</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[bitmap]]></category>
		<category><![CDATA[collision detection]]></category>
		<category><![CDATA[data structure]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[quadtree]]></category>
		<category><![CDATA[trees]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://blog.ivank.net/?p=437</guid>
		<description><![CDATA[Today&#8217;s post will be about Quadtrees. I have coded a little visualization, which may help you understand this data structure. Hot to use it Click on the first or second bitmap (A or B) to edit it. Quadtrees of bitmaps are drawn on the right side. Then you can rebuild the last bitmap (C) depending [...]]]></description>
			<content:encoded><![CDATA[<p>Today&#8217;s post will be about Quadtrees. I have coded a little visualization, which may help you understand this data structure.</p>
<p><span id="more-437"></span></p>
<p><iframe height="565"  src="http://www.ivank.net/blogspot/quadtree.html" style="border: 5px solid #282923; width:100%;"></iframe>  </p>
<h3>Hot to use it</h3>
<p>Click on the first or second bitmap (A or B) to edit it. Quadtrees of bitmaps are drawn on the right side. Then you can rebuild the last bitmap (C) depending on A and B by clicking the right button.</p>
<h2>What is Quadtree</h2>
<p><a href="http://en.wikipedia.org/wiki/Quadtree">Quadtree</a> is a data strucutre, which is used to representa bitmap as a tree. Conversion from a bitmap to the tree can be described as follows:</p>
<ul>
<li>a tree for a constatn-colored bitmap is a leaf of this color</li>
<li>otherwise it is an inner node, it&#8217;s for children are trees for it&#8217;s for quadrants</li>
</ul>
<div style="display:none;">
<h2>Nice features</h2>
<h3>Array representation</h3>
<p>A very nice feature is, that quadtree can be represented in an array with values T, 0, 1. T means inner node, 0 and 1 are colors of leaves, T has 4 child values right after it (for example, T000T000T0001 is a quadtree 8&#215;8 with black bottom-right bit).</p>
<h3>Comprimation</h3>
<p>In some cases, quadtree is much smaller than a bitmap (it can be used for comprimation, bitmap can be any binary data). When 2 trees are small, some logic operations on them can be performed faster than on bitmaps.</p>
<h3>Collision detection</h3>
<p>Sometimes we have an objects inside a 2D plane and we have to check, wich of them are colliding (overlaying) each other. Basically, we should check collision between every 2 objects ($O(n^2)$). We can also put these objects into quadtree, we can recrsively subdivide quadrants, so each object will be <a href="http://upload.wikimedia.org/wikipedia/commons/8/8b/Point_quadtree.svg">in it&#8217;s own leaf with no other objects in it</a>. Then we can check the collision of each object only with objects in it&#8217;s neighboring quadrants, depending on it&#8217;s size ($O(n*log(n))$).</p>
</div>
<h2>The code</h2>
<p>A qadtree node has a method for copying the tree, QNode.Copy(bool p). When &#8220;p&#8221; is true, it inverts it&#8217;s colors (&#8220;negation&#8221;).</p>
<h3>Logic operations on trees</h3>
<pre name="dlhl" class="js">
function GetLogic(a, b, op)  // tree a, tree b, operation, returns tree
{
   if(a.leaf)
   {
      if(op=="and") return (a.black ? b.Copy(false) : a.Copy(false));
      if(op=="or" ) return (a.black ? a.Copy(false) : b.Copy(false));
      if(op=="xor") return (a.black ? b.Copy(true ) : b.Copy(false));
      if(op=="min") return (a.black ? b.Copy(true ) : a.Copy(false));
   }
   else if(b.leaf)
   {
      if(op=="and") return (b.black ? a.Copy(false) : b.Copy(false));
      if(op=="or" ) return (b.black ? b.Copy(false) : a.Copy(false));
      if(op=="xor") return (b.black ? a.Copy(true ) : a.Copy(false));
      if(op=="min") return (b.black ? b.Copy(true ) : a.Copy(false));
   }
   else
   {
      var t = new QNode();
      t.c1 = GetLogic(a.c1, b.c1, op);
      t.c2 = GetLogic(a.c2, b.c2, op);
      t.c3 = GetLogic(a.c3, b.c3, op);
      t.c4 = GetLogic(a.c4, b.c4, op);
      return t;
   }
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.ivank.net/quadtree-visualization.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
