<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Alex Beutel's Mental Masturbation, Musings, and Methods</title>
	
	<link>http://blog.alexbeutel.com</link>
	<description>The Mind of Alex Beutel</description>
	<lastBuildDate>Wed, 18 Jan 2012 23:51:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/AlexBeutel" /><feedburner:info uri="alexbeutel" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Interactive Quadtrees and Well-Separated Pairs Decomposition</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/KAke-IMwmcI/</link>
		<comments>http://blog.alexbeutel.com/445/interactive-quadtrees-and-well-separated-pairs-decomposition/#comments</comments>
		<pubDate>Mon, 16 Jan 2012 17:12:21 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Duke]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Math]]></category>
		<category><![CDATA[Mathematics]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://blog.alexbeutel.com/?p=445</guid>
		<description><![CDATA[While doing computational geometry research with Professor Pankaj K. Agarwal and Thomas M&#248;lhave at Duke, we looked at using quadtrees and the well-separated pairs decomposition (WSPD) for one of our algorithms. As I was reading about the algorithms and geometric concepts, I decided to code them in Javascript and HTML5&#8242;s canvas to get more intuition [...]]]></description>
			<content:encoded><![CDATA[<p>While doing computational geometry research with <a href='http://cs.duke.edu/~pankaj' target='_blank'>Professor Pankaj K. Agarwal</a> and <a href='http://www.cs.duke.edu/~thomasm/' target='_blank'>Thomas M&oslash;lhave</a> at Duke, we looked at using quadtrees and the well-separated pairs decomposition (WSPD) for one of our algorithms.  As I was reading about the algorithms and geometric concepts, I decided to code them in Javascript and HTML5&#8242;s canvas to get more intuition about their behavior.  <b>I will describe the basics of the math behind the geometry in this blog post.  To just play with the demo go <a href='http://alexbeutel.com/geom/wspd.html' target='_blank'>here</a>.</b></p>
<p><i>[All of what I am describing is based off of my reading of <a href='http://valis.cs.uiuc.edu/~sariel/' target='_blank'>Professor Sariel Har-Peled's</a> <a href='http://www.amazon.com/gp/product/0821849115/ref=as_li_ss_tl?ie=UTF8&#038;tag=alebeu-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0821849115' target='_blank'>book on the subject</a>.  I suggest you read that (or other online notes) if you are really interested in the mathematical properties of well-separated pairs decomposition (or a range of other geometric topics).]</i></p>
<h4>Quadtrees</h4>
<p>Quadtrees are a fairly common geometric concept and also data structure for storing points in \(d\)-dimensional space.  We assume all points are within some large cube or in 2-dimensions, as we will focus on, a square.  We split the square into four equal sized smaller squares.  We can do this again on each of the smaller squares and do this continuously (recursively).  We consider each square to be a cell and the four smaller cells within it to be its &#8220;children.&#8221;   A quadtree is a division of the square into smaller and smaller cells until every point has its own cell.</p>
<div style='text-align: center; width: 100%;'>
<a href="http://blog.alexbeutel.com/wp-content/uploads/2012/01/quadtree2.png" class='thickbox' rel='wspd'><img src="http://blog.alexbeutel.com/wp-content/uploads/2012/01/quadtree2-300x300.png" alt="A Simple Quadtree Example" title="A Quadtree Example" width="300" height="300" class="aligncenter size-medium wp-image-466" /></a>
</div>
<p>Therefore, we can search the space fairly easily and quickly.  We can even plot non-spacial things in a spacial metric to make use of the data structure.  For computer science-minded people, these cells are organized in a tree (why its called a quadtree), compressed for cells that don&#8217;t contain any points, and thus each leaf node contains one point.  Searching the quadtree is thus fairly fast.  The properties and uses of quadtrees, and its many variants, such as how accurate it is for nearest neighbor searches, are extensive and, again, can be read in Professor Har-Peled&#8217;s notes among other places. </p>
<h4>Well-Separated Pairs Decomposition</h4>
<p>The well-separated pairs decomposition provides a more specific method than quadtrees of characterizing the general distance between points in a large set of points without storing the distance for each of the \( {n \choose 2} \) combinations.  Broadly, it does this by clustering points that are close together and only describing the distance between such clusters.  The conditions for a WSPD are relatively simple, but require some mathematical notation. I will try to give a simple description below.</p>
<p>We say that the points are clustered into sets.  The diameter of a set \(Q\) is $$\mathrm{diam}(Q) = \max_{p,q \in Q} \| p &#8211; q \|$$ where \( \|p-q\| \) is the distance between \(p\) and \(q\).  In English, the diameter is the distance between the two points furthest from each other in the set.  Two sets \(Q\) and \(R\) are \(1/\epsilon\)-separated if $$\max({\rm diam}(Q),{\rm diam}(R)) \leq \epsilon \cdot d(Q,R).$$Here $$d(Q,R) = \min_{q\in Q, s\in R} \|q-s\|,$$or \(d(Q,R)\) is the smallest distance between any pair of points from \(Q\) and \(R\), intuitively giving how close the two clusters are.  Therefore, if two sets are \(1/\epsilon\)-separated then all of the points in one set are roughly the same distance from all of the same points in the other set, with some error relative to \(\epsilon\).  Finally, a pair decomposition is a set of set pairs: $$\mathscr{W} = \{ \{A_1,B_1\}, \ldots \{A_s, B_s\} \}$$ such that:</p>
<ol>
<li> All points in any \(A_i\) or \(B_i\) are part of the original set of data points, \(P\): $$A_i,B_i \subset P$$</li>
<li> For any pair \(\{A_i,B_i\}\) there is no overlap in points between the two sets $$A_i \cap B_i = \emptyset$$</li>
<li> For any pair of <i>points</i> \(p,q \in P\) there is at least one pair \(\{A_i,B_i\}\) such that \(p\) is in  \(A_i\) and \(q\) is in \(B_i\)</li>
</ol>
<p>Therefore, if we have a well-separated pair decomposition, then we have a pair decomposition where each pair of sets \(\{A_i,B_i\}\) are \(1/\epsilon\)-separated.  The third criteria for a pair decomposition here is most interesting, simply stating that for any pair of points we can estimate their distance apart with the WSPD.</p>
<div style='text-align: center; width: 100%;'>
<a href="http://blog.alexbeutel.com/wp-content/uploads/2012/01/wspd.png" class='thickbox' rel='wspd'><img src="http://blog.alexbeutel.com/wp-content/uploads/2012/01/wspd-300x300.png" alt="A Simple Quadtree Example" title="A Quadtree Example" width="300" height="300" class="aligncenter size-medium wp-image-466" /></a>
</div>
<p>One algorithm to construct the WSPD climbs down the quadtree and uses the cells of the quadtree as possible set pairs in the WSPD.  This is the algorithm I used in my implementation, as is shown in the Javascript [pseudocode] below:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p445code2'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p4452"><td class="code" id="p445code2"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> ConstructWSPD<span style="color: #009900;">&#40;</span>cell1<span style="color: #339933;">,</span> cell2<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> arr <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>cell1.<span style="color: #660066;">diam</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> cell2.<span style="color: #660066;">diam</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
		<span style="color: #006600; font-style: italic;">// Swap cell1 and cell2</span>
		<span style="color: #003366; font-weight: bold;">var</span> temp <span style="color: #339933;">=</span> cell1<span style="color: #339933;">;</span>
		cell1 <span style="color: #339933;">=</span> cell2<span style="color: #339933;">;</span>
		cell2 <span style="color: #339933;">=</span> temp<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>	
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>cell1.<span style="color: #660066;">diam</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> epsilon <span style="color: #339933;">*</span> d<span style="color: #009900;">&#40;</span>cell1<span style="color: #339933;">,</span>cell2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
                <span style="color: #006600; font-style: italic;">//The two cell's points are 1/epsilon-separated</span>
&nbsp;
                <span style="color: #006600; font-style: italic;">// This is a theoretical class SetPair which would link the two sets</span>
                arr.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> SetPair<span style="color: #009900;">&#40;</span>cell1.<span style="color: #660066;">points</span><span style="color: #339933;">,</span> cell2.<span style="color: #660066;">points</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
                <span style="color: #006600; font-style: italic;">//My code actually uses the following statement to draw the relationship, rather than store it efficiently</span>
		arr.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> Dumbell<span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">new</span> PBall<span style="color: #009900;">&#40;</span>cell1.<span style="color: #660066;">points</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">new</span> PBall<span style="color: #009900;">&#40;</span>cell2.<span style="color: #660066;">points</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> arr<span style="color: #339933;">;</span> 
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>cell1.<span style="color: #660066;">children</span> <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			arr <span style="color: #339933;">=</span> arr.<span style="color: #660066;">concat</span><span style="color: #009900;">&#40;</span>ConstructWSPD<span style="color: #009900;">&#40;</span>cell1.<span style="color: #660066;">children</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> cell2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> arr<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">// Here QuadTreeHead is the top cell in the quadtree:</span>
<span style="color: #003366; font-weight: bold;">var</span> wspd <span style="color: #339933;">=</span> ConstructWSPD<span style="color: #009900;">&#40;</span>QuadTreeHead<span style="color: #339933;">,</span>QuadTreeHead<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>The code above recursively steps through the quadtree attempting to use different cells from the quadtree as sets for the WSPD.  <b>Check out my small web application <a href='http://alexbeutel.com/geom/wspd.html' target='_blank'>here</a> to get some more intuition about how WSPDs relate to quadtrees as well as the impact of \(\epsilon\) on the WSPD.</b>  There are many interesting properties and uses of quadtrees and WSPDs that I encourage you to read about further online or in <a href='http://www.amazon.com/gp/product/0821849115/ref=as_li_ss_tl?ie=UTF8&#038;tag=alebeu-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0821849115' target='_blank'>Professor Har-Peled&#8217;s book</a>.  </p>
<div style='padding-top:30px; padding-bottom: 10px;'>
On a completely separate note, this blog post was my first chance to use <a href='http://www.mathjax.org/' target='_blank'>MathJax</a>, which is awesome.
</div>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/KAke-IMwmcI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/445/interactive-quadtrees-and-well-separated-pairs-decomposition/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/445/interactive-quadtrees-and-well-separated-pairs-decomposition/</feedburner:origLink></item>
		<item>
		<title>Announcing TerraNNI</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/EllTzctCYXE/</link>
		<comments>http://blog.alexbeutel.com/432/announcing-terranni/#comments</comments>
		<pubDate>Wed, 09 Nov 2011 20:14:25 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[C++]]></category>
		<category><![CDATA[Duke]]></category>
		<category><![CDATA[OpenGL]]></category>

		<guid isPermaLink="false">http://blog.alexbeutel.com/?p=432</guid>
		<description><![CDATA[I am excited to announce that TerraNNI, the project from my undergraduate senior thesis, is being open-sourced. For those who have not heard of the project, TerraNNI is a tool for taking LIDAR data, common for geographic information systems (GIS), and creating high-resolution grid digital elevation models (DEMs).  Most GIS take DEMs as an input [...]]]></description>
			<content:encoded><![CDATA[<p>I am excited to announce that <a title="TerraNNI" href="https://github.com/thomasmoelhave/TerraNNI" target="_blank">TerraNNI</a>, the project from my undergraduate senior thesis, is being open-sourced.</p>
<p>For those who have not heard of the project, TerraNNI is a tool for taking LIDAR data, common for geographic information systems (GIS), and creating high-resolution grid digital elevation models (DEMs).  Most GIS take DEMs as an input and can perform a wide range of tasks, such as flood mapping, line-of-sight computations, and city planning.  The amount of LIDAR data available is growing quite fast.  TerraNNI makes full use of this large quantity of data to efficiently produce large-scale, high-resolution DEMs.</p>
<p>In most of these cases, LIDAR data is 3D spatial data and we produced a 2D grid DEM where each grid point has some estimated elevation.  Looking forward, we are beginning to see the rise of  spatial-temporal data (4D) which offers the opportunity to perform more complex geographic studies such as change detection on terrains.  Making use of new spatial-temporal data, TerraNNI provides efficient, scalable, high-resolution <em>volumetric</em> grid DEM construction.  In this case, we produce a 3D grid, with axes <em>x,y</em> in space and <em>t</em> time; again each grid point has an estimated elevation.  We expect this tool to become increasingly useful as LIDAR data becomes even more prevalent.</p>
<p>On a technical level, TerraNNI was an interesting project, incorporating computational geometry, GPU programming, and I/O efficient computing.  The program performs an approximation of <a title="NNI" href="http://en.wikipedia.org/wiki/Natural_neighbor" target="_blank">natural neighbor interpolation</a> (NNI), which is based on the <a title="Voronoi Diagram" href="http://en.wikipedia.org/wiki/Voronoi_diagram" target="_blank">Voronoi diagram</a>.  It makes heavy use of the graphics card for most of the computations, using both OpenGL and CUDA.  We also use <a title="TPIE" href="https://github.com/thomasmoelhave/tpie" target="_blank">TPIE</a> for efficient disk access, since data sets can be much larger than the computer&#8217;s memory.  TerraNNI is one of the fastest programs for producing high-resolution grid DEMs and one of the first to be able to perform 3D natural neighbor interpolation.</p>
<p>Please download <a title="TerraNNI" href="https://github.com/thomasmoelhave/TerraNNI" target="_blank">TerraNNI from Github</a> and give it a try for yourself.  Let me know if you run into any problems.  Also feel free to look at our two papers about the project</p>
<ul>
<li><a title="NNI Based Grid DEM Construction using a GPU" href="http://alexbeutel.com/papers/acmgis10.nni.pdf">Natural Neighbor Interpolation Based Grid DEM Construction Using a GPU</a> (from ACM GIS 2010)</li>
<li><a title="TerraNNI: Natural Neighbor Interpolation on a 3D Grid Using a GPU" href="http://alexbeutel.com/papers/TerraNNI.acmgis11.pdf" target="_blank">TerraNNI: Natural Neighbor Interpolation on a 3D Grid Using a GPU</a> (from ACM GIS 2011)</li>
</ul>
<div>or at <a title="Interactive Voronoi Diagrams with WebGL" href="http://blog.alexbeutel.com/332/interactive-voronoi-diagrams-with-webgl/">my previous blog post</a> about computing Voronoi diagrams on the GPU.</div>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/EllTzctCYXE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/432/announcing-terranni/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/432/announcing-terranni/</feedburner:origLink></item>
		<item>
		<title>WiseResume</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/i3emZxqjWOk/</link>
		<comments>http://blog.alexbeutel.com/428/wiseresume/#comments</comments>
		<pubDate>Fri, 06 May 2011 01:12:43 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Miscellanious]]></category>

		<guid isPermaLink="false">http://blog.alexbeutel.com/?p=428</guid>
		<description><![CDATA[I haven&#8217;t posted in a while and will give and update on my life in another post, but for this post I wanted to give a shout out to my friend Marc who recently helped launch a new startup called WiseResume. The site is used to both get and give feedback on aspects of a [...]]]></description>
			<content:encoded><![CDATA[<p>I haven&#8217;t posted in a while and will give and update on my life in another post, but for this post I wanted to give a shout out to my friend <a href="http://mediabymrb.com/" target="_blank">Marc</a> who recently helped launch a new startup called <a href="http://wiseresume.com/" target="_blank">WiseResume</a>.  The site is used to both get and give feedback on aspects of a person&#8217;s resume: social resume critiquing.  He has been working hard on it for a while now and its looking good so <a href="http://wiseresume.com/register.html">go give it a spin</a>.</p>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/i3emZxqjWOk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/428/wiseresume/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/428/wiseresume/</feedburner:origLink></item>
		<item>
		<title>Interactive Voronoi Diagrams with WebGL</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/UFs2wwdS38k/</link>
		<comments>http://blog.alexbeutel.com/332/interactive-voronoi-diagrams-with-webgl/#comments</comments>
		<pubDate>Mon, 02 Aug 2010 06:20:49 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Mathematics]]></category>
		<category><![CDATA[OpenGL]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://blog.alexbeutel.com/?p=332</guid>
		<description><![CDATA[Within computational geometry, the Voronoi diagram is a relatively simple concept with a wide-range of applications.  Everything from physics research to the &#8220;snap-to&#8221; feature in GUI-design uses Voronoi diagrams as a simple underlying data structure to decompose space. I have been working with Voronoi diagrams for the past few months, as my research has focused [...]]]></description>
			<content:encoded><![CDATA[<div style='padding-bottom: 8px;'>Within computational geometry, the <a href='http://en.wikipedia.org/wiki/Voronoi_diagram' target='_blank'>Voronoi diagram</a> is a relatively simple concept with a wide-range of applications.  Everything from physics research to the &#8220;snap-to&#8221; feature in GUI-design uses Voronoi diagrams as a simple underlying data structure to decompose space.  I have been working with Voronoi diagrams for the past few months, as my research has focused on interpolation, specifically scalable <a href='http://en.wikipedia.org/wiki/Natural_neighbor' target='_blank'>natural neighbor interpolation</a>.  Because the interpolation I have been doing (and the demo I have created) focuses on Voronoi diagrams in a plane, I will only discuss the Voronoi diagrams in 2D space.  However, the mathematical concepts can be extended to higher dimensions.</div>
<div style="padding-top: 10px; font-weight: bold;">If you already know all about Voronoi diagrams or simply don&#8217;t care about the math and just want to play, jump to <a href="#play">here</a> or go straight to <a href="http://alexbeutel.com/webgl/voronoi.html" target="_blank">my Voronoi diagram generator application</a>.</div>
<h3>The Voronoi Diagram</h3>
<div>
I would first like to briefly describe what precisely the Voronoi diagram is, along with how nearest neighbor and natural neighbor interpolation make use of this data structure.  The Voronoi diagram is the division of plane into discrete Voronoi cells.  Given a set of input points <em>S</em>, we would like to divide the plane such that for any given position in the plane, we know the nearest input point.  This is the nearest neighbor problem.  A Voronoi cell <em>Vor(p,S)</em> represents the region of the plane for which the given point <em>p</em> is the closest input point from the set of input points <em>S</em>.  Mathematically the Voronoi cell <em>Vor(p,S)</em> is defined as</p>
<div style='height: 60px; width: 430px; margin-left: auto; margin-right: auto; margin-top: -20px; padding-bottom: 5px;'><img src="/voronoi/Vps.png" title='Voronoi definition' /></div>
<p>In the Voronoi diagram below, we color each Voronoi cell with a unique color.  For the entire region covered by each cell, the input point within the cell is the closest point from the set of input points.  You can also easily observe that the boundaries between neighboring cells is the set of points equidistant between two nearby input points.</p>
<div style='width: 400px; margin-left: auto; margin-right: auto; padding-bottom: 10px; margin-top: -10px;'><img style='width: 400px;' src="/voronoi/basic-vor.png" title='Basic Voronoi diagram' /></div>
</div>
<h4>Interpolation with the Voronoi Diagram</h4>
<div style='padding-bottom: 8px;'>Given this understanding of the Voronoi diagram, we can easily answer a nearest neighbor query.  Given a point <em>q</em> at position <em>(x,y)</em> we need only check which Voronoi cell it is within to see which input point is closest to it.  Thus, if each input point also has some height <em>z</em> we could roughly interpolate the height of <em>q</em> by taking the height of its nearest neighbor.</div>
<div>A more complex interpolation scheme, known as natural neighbor interpolation, is to take a weighted average of all of the nearby input points.  This is done by inserting the query point into the Voronoi diagram and observing how much area the Voronoi cell of the query point steals from the neighboring Voronoi cells in the original Voronoi diagram.  Specifically, the fractional weight assigned to each natural neighbor is the area stolen from that nearest neighbor&#8217;s original Voronoi cell divided by the total area of the Voronoi cell of the query point.  Mathematically this interpolation can be defined as:</p>
<div style='height: 80px; width: 500px; margin-left: auto; margin-right: auto; margin-top: -20px; padding-bottom: 5px;' ><img src="/voronoi/nni.png" title='Natural neighbor interpolation definition' /></div>
<p>While more complicated than nearest neighbor interpolation, natural neighbor interpolation offers a higher quality interpolation and produces smooth results.
</p></div>
<h4>Approximating the Voronoi Diagram in OpenGL</h4>
<div style='padding-bottom: 8px;'>As explained briefly in the <a href="http://www.glprogramming.com/red/chapter14.html#name19" target="_blank">OpenGL Red Book</a>, we can compute the Voronoi diagram easily in OpenGL by rendering cones at each input point and using the depth buffer to figure out the boundaries between Voronoi cells.  Specifically, if we place a right angle cone with the apex at a point, the height of the cone at a given position is equal to the distance form the point in the <i>x,y</i> plane.  As such, if we place all the cones in the plane and look at them from below, we will only see the lowest cone at any given point and thus only the cone for which the point it represents is closest.  This is known as taking the lower envelope.  (For more information, you can read <a href="http://portal.acm.org/citation.cfm?id=311567" target="_blank">Hoff et. al.&#8217;s paper</a> on how this works.)</div>
<div style='padding-bottom: 8px;'>Therefore, by merely drawing the cones and placing the viewpoint appropriately within OpenGL, the framebuffer will store the Voronoi diagram.  Naturally, when doing computations with OpenGL, the diagram will be discretized into pixels.  Additionally, OpenGL can not draw cones, only triangles.  Therefore, we approximate a cone with a <em>f</em>-sided pyramid.  With a reasonably large value for <em>f</em>, we will not notice the effect of the discretization, but making <em>f</em> a small value like 4-10 can be interesting.  Both of these discretizations of course create some deviation from the previously defined Voronoi diagram.</div>
<div>I have used this method, implemented in <a href='https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html' target='_blank'>WebGL</a>, the Javascript API to OpenGL, to create the following interactive Voronoi diagram generator.</div>
<h3><a name="play"></a>Enough Math</h3>
<div>While math is necessary to precisely describe these concepts, it is not always the best way to convey some of the nuances of the geometric behavior.  As a result, one night, both to play with WebGL and to better understand Voronoi diagrams, I implemented some of these concepts in the browser.  Below is a short screencast of me playing with the tool, which may be useful if either you don&#8217;t have a WebGL-enabled browser or you want to learn some of the features of tool; or just <a href="http://alexbeutel.com/webgl/voronoi.html" style='font-weight: bold;'>play with it for yourself</a>.</div>
<div style='padding-bottom: 10px; padding-top: 10px;'>
<object width="640" height="505"><param name="movie" value="http://www.youtube.com/v/Aljbw9PQlck&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Aljbw9PQlck&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed></object>
</div>
<h3>On Code</h3>
<div style='padding-bottom: 8px;'>
Not much to say here.  To make this small application, I used two canvases overlaid, one with WebGL and one with just the 2D-context.  This allowed me to draw over the Voronoi diagram (such as the points).  Following the <a href='' target='_blank'>learningwebgl.com</a> tutorials, I used the <a href='http://sylvester.jcoglan.com/' target='_blank'>Sylvester library</a> for Matrix math as well as the glUtils library from the tutorials.
</div>
<div>
WebGL is still a little buggy and memory management can be an issue, among other things.  But overall, it samples a good portion of OpenGL.  Unfortunately, getting started can take a little effort.  For example, unlike OpenGL in C++, you <i>must</i> write your own shader programs; I suggest using samples from <a href='http://learningwebgl.com/blog/?page_id=1217' target='_blank'>learningwebgl.com</a> at least to get started.  However, once you have a functioning WebGL canvas, it is easy to pick up speed.  I also went slightly overboard on the movement functions, but it was a good chance to play with Javascript closures.
</div>
<h3>Some cool Voronoi diagrams</h3>
<div>And finally, here are some Voronoi diagrams I have generated that I find interesting, cool, or merely pretty.</div>
<div style='padding-bottom: 20px;'>
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/ih-kcHYciSo&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ih-kcHYciSo&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</div>
<div style='padding-bottom: 10px;'>Similar kinetic Voronoi diagram but with only 6-sided pyramids used.</div>
<div style='padding-bottom: 20px;'>
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/C2OGI1cevm8&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/C2OGI1cevm8&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</div>
<div style='padding-bottom: 8px;' >Below, the same set of input points are plotted with two different types of cones.  The first uses a 50-sided pyramid.  The second only uses 6-sided pyramids, creating the jagged effect between neigboring Voronoi cells.</div>
<div style='padding-bottom: 20px;'><img src='/voronoi/v4.png' style='float: left; width: 49%; padding-right: 10px;' /><img src='/voronoi/v3.png' style='float: left; width: 49%;' /></div>
<div style='clear: both; width: 100%; height: 2px;'></div>
<div style='padding-bottom: 8px;' >The following two Voronoi diagrams show the Voronoi cells and area stolen for a natural neighbor query.</div>
<div style='padding-bottom: 20px; '><img src='/voronoi/v1.png'  style='width: 550px;' /></div>
<div style='padding-bottom: 15px;'><img src='/voronoi/v2.png' style='width: 550px;' /></div>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/UFs2wwdS38k" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/332/interactive-voronoi-diagrams-with-webgl/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/332/interactive-voronoi-diagrams-with-webgl/</feedburner:origLink></item>
		<item>
		<title>CMake, OpenGL, and GLX on OS X</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/V8nFJ7kaRY0/</link>
		<comments>http://blog.alexbeutel.com/285/cmake-opengl-and-glx-on-os-x/#comments</comments>
		<pubDate>Wed, 28 Jul 2010 23:24:32 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[C++]]></category>
		<category><![CDATA[OpenGL]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://blog.ambmediadesign.com/?p=285</guid>
		<description><![CDATA[As you may know, I am staying at Duke this summer for research.  My research, which I started last semester and am going to be doing for a while, focuses on scalable algorithms.  While that is pretty broad, I am currently working on using the graphics card to speed up processing. Again, here are some [...]]]></description>
			<content:encoded><![CDATA[<p>As you may know, I am staying at Duke this summer for research.  My research, which I started last semester and am going to be doing for a while, focuses on scalable algorithms.  While that is pretty broad, I am currently working on using the graphics card to speed up processing.  Again, here are some technical notes on code.</p>
<p>In doing my work I have come to have to write and run C++ OpenGL code on both OS X and Ubuntu.  To make this easier, <a title="CMake" href="http://www.cmake.org/" target="_blank">CMake</a> has been great for both  having readable make files and for being able to keep the files consistent across both platforms.  Additionally, while <a href='http://www.opengl.org/resources/libraries/glut/' target='_blank'>GLUT</a> is great for cross-platform OpenGL coding, I needed more control over the environment.  Being able to run X11 on OS X has allowed me to test GLX natively without always testing on Linux.  However, to get this set up on OS X without XCode can be a little tricky.  So, two snippets of CMake files for using OpenGL on OS X and Linux.</p>
<p>If you want to run OpenGL with the standard OS X libraries, CMake generally finds the correct frameworks, but it can&#8217;t hurt to specify them more precisely.  A basic example of the CMakeLists is shown below:</p>
<pre>
IF(APPLE)
   INCLUDE_DIRECTORIES ( /System/Library/Frameworks )
   FIND_LIBRARY(COCOA_LIBRARY Cocoa)
   FIND_LIBRARY(GLUT_LIBRARY GLUT )
   FIND_LIBRARY(OpenGL_LIBRARY OpenGL )
   MARK_AS_ADVANCED (COCOA_LIBRARY
                     GLUT_LIBRARY
                     OpenGL_LIBRARY)
   SET(EXTRA_LIBS ${COCOA_LIBRARY} ${GLUT_LIBRARY} ${OpenGL_LIBRARY})
ENDIF (APPLE)
target_link_libraries(main ${EXTRA_LIBS})
</pre>
<p>With this, your C++ should have the following includes:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p285code5'); return false;">View Code</a> CPP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p2855"><td class="code" id="p285code5"><pre class="cpp" style="font-family:monospace;"><span style="color: #339900;">#include &lt;GLUT/glut.h&gt;</span>
<span style="color: #339900;">#include &lt;OpenGL/glext.h&gt;</span>
<span style="color: #339900;">#include &lt;OpenGL/gl.h&gt;</span>
<span style="color: #339900;">#include &lt;OpenGL/glu.h&gt;</span></pre></td></tr></table></div>

<p>If, however, you are looking to run your code also on a Linux machine or simply want to use <a title="GLX" href="http://www.google.com/search?hl=en&amp;q=glx+opengl" target="_blank">GLX</a> rather than <a title="CGL Reference" href="http://developer.apple.com/mac/library/documentation/GraphicsImaging/Reference/CGL_OpenGL/Reference/reference.html" target="_blank">CGL</a>, you will need to have X11 installed (which your OS X installation disk contains) and specifically point CMake at the X11 libraries.  The CMake code for this is shown below:</p>
<pre>include_directories(/usr/X11R6/include/)
link_directories(/usr/X11R6/lib)
SET(EXTRA_LIBS GL X11 GLU glut)
target_link_libraries(main ${EXTRA_LIBS})
</pre>
<p>When using the X11 libraries, you must also change the includes as the folder structure for X11 is different than that natively for OS X:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p285code6'); return false;">View Code</a> CPP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p2856"><td class="code" id="p285code6"><pre class="cpp" style="font-family:monospace;"><span style="color: #339900;">#include &lt;GL/glew.h&gt;</span>
<span style="color: #339900;">#include &lt;GL/glut.h&gt;</span>
<span style="color: #339900;">#include &lt;GL/glext.h&gt;</span>
<span style="color: #339900;">#include &lt;GL/gl.h&gt;</span>
<span style="color: #339900;">#include &lt;GL/glu.h&gt;</span>
<span style="color: #339900;">#include &lt;GL/glx.h&gt;</span></pre></td></tr></table></div>

<p>That is all.  Not terribly complicated, but hopefully this saves you some time if you are doing development with CMake, OpenGL, or X11.  Look for some new slightly more exciting posts soon.</p>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/V8nFJ7kaRY0" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/285/cmake-opengl-and-glx-on-os-x/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/285/cmake-opengl-and-glx-on-os-x/</feedburner:origLink></item>
		<item>
		<title>Convert Quicktime Screencasts with FFmpeg</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/dBClfKKMXHM/</link>
		<comments>http://blog.alexbeutel.com/302/convert-quicktime-screencasts-with-ffmpeg/#comments</comments>
		<pubDate>Wed, 28 Jul 2010 00:42:05 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Miscellanious]]></category>

		<guid isPermaLink="false">http://blog.alexbeutel.com/?p=302</guid>
		<description><![CDATA[I was trying to convert a Quicktime screencast (saved as .mov) to a format my professor could more readily use. For those who don&#8217;t know, FFmpeg is an amazing tool with a wide range of applications, including converting between video formats and ripping audio from a video. Anyway, this took me a little to get [...]]]></description>
			<content:encoded><![CDATA[<p>I was trying to convert a Quicktime screencast (saved as .mov) to a format my professor could more readily use.  For those who don&#8217;t know, <a href='http://www.ffmpeg.org/' target="_blank">FFmpeg</a> is an amazing tool with a wide range of applications, including converting between video formats and ripping audio from a video.  Anyway, this took me a little to get quite right (and maintain output quality) so I thought I&#8217;d post it here both for others and a place to save it for myself.  Although it looks really simple in hindsight:</p>
<pre>ffmpeg -i screencast.mov -f avi -vcodec mpeg4 -sameq -ac 2 -ab 128k screencast.avi</pre>
<p>It is necessary to specify a video codec because AVI can be used with multiple codecs.  To maintain video quality use -sameq.  When converting screencasts, it may also be useful to crop out parts of the screen since Quicktime only does full screen capture.  For this, you can use the -croptop, -cropbottom, -cropright, and -cropleft arguments.  Last, make sure the arguments come <i>before</i> the output file; otherwise they are not applied.</p>
<p>Maybe I will later do a more full post of the different ways I use FFmpeg.  But for now, that is all.</p>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/dBClfKKMXHM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/302/convert-quicktime-screencasts-with-ffmpeg/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/302/convert-quicktime-screencasts-with-ffmpeg/</feedburner:origLink></item>
		<item>
		<title>Rankophilia and Rankophiliacs</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/BJpX83wVN14/</link>
		<comments>http://blog.alexbeutel.com/275/rankophilia-and-rankophiliacs/#comments</comments>
		<pubDate>Thu, 28 Jan 2010 03:24:26 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Duke]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://blog.ambmediadesign.com/?p=275</guid>
		<description><![CDATA[For my CPS 182S class, we have an assignment which is a competition among groups of students (and the professor) to have the highest ranking page on Google for the terms rankophilia and rankophiliac.  As such, I have created a page at rankophilia.dorm.duke.edu to be my group&#8217;s main page on Google. For now, there is [...]]]></description>
			<content:encoded><![CDATA[<p>For my CPS 182S class, we have an assignment which is a competition among groups of students (and the professor) to have the highest ranking page on Google for the terms rankophilia and rankophiliac.  As such, I have created a page at <a href='http://rankophilia.dorm.duke.edu/' target='_blank' title='rankophilia, rankophiliac, rankphilia, rankphiliac'>rankophilia.dorm.duke.edu</a> to be my group&#8217;s main page on Google.  For now, there is not much interesting on there, and I am merely posting it here in an attempt to increase the PageRank.  I am considering adding more interesting content and submitting it around online rather than just spamming.  I will post updates (probably at least a few for links) as the contest goes on.</p>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/BJpX83wVN14" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/275/rankophilia-and-rankophiliacs/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/275/rankophilia-and-rankophiliacs/</feedburner:origLink></item>
		<item>
		<title>SQL Injection at Duke TechExpo 2009</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/O69P9OSQL64/</link>
		<comments>http://blog.alexbeutel.com/265/sql-injection-at-duke-techexpo-2009/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 19:56:07 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Duke]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://blog.ambmediadesign.com/?p=265</guid>
		<description><![CDATA[I gave my first public talk today at Duke&#8217;s TechExpo 2009. I along with my coworker Artem Kazantsev discussed the risks of SQL Injection. The presentation gives a good overview of the capabilities of SQL injection along with how to prevent such vulnerabilities. I also gave a demo of performing a SQL injection attack on [...]]]></description>
			<content:encoded><![CDATA[<p>I gave my first public talk today at <a href="http://techexpo.oit.duke.edu/" target="_blank">Duke&#8217;s TechExpo 2009</a>.  I along with my coworker Artem Kazantsev discussed the risks of SQL Injection.  The presentation gives a good overview of the capabilities of SQL injection along with how to prevent such vulnerabilities.  I also gave a demo of performing a SQL injection attack on a vulnerable site during the talk.  For any web programmers who aren&#8217;t familiar with SQL injection, take a look at the code for the demo to see exactly how and why it is vulnerable, along with how to fix these vulnerabilities.</p>
<p><a href="http://alexbeutel.com/SQLInjection.pdf">SQL Injection Presentation</a></p>
<p><a href="http://alexbeutel.com/SQLInjectionDemo.zip">SQL Injection Demo</a></p>
<p>Additionally, earlier in the year I worked with Duke&#8217;s ITSO to write up examples of good coding practices to protect against a variety of web application security issues.  This referenced is linked on Duke ITSO&#8217;s site here: <a href="http://www.security.duke.edu/ITSO_Web_Application_Security_Standard_v1.pdf">http://www.security.duke.edu/ITSO_Web_Application_Security_Standard_v1.pdf</a></p>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/O69P9OSQL64" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/265/sql-injection-at-duke-techexpo-2009/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/265/sql-injection-at-duke-techexpo-2009/</feedburner:origLink></item>
		<item>
		<title>Drag and Drop off the Desktop in Duke Webfiles</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/C0o44bAb1LQ/</link>
		<comments>http://blog.alexbeutel.com/255/drag-and-drop-off-the-desktop-in-duke-webfiles/#comments</comments>
		<pubDate>Mon, 05 Oct 2009 23:07:39 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Duke]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://blog.ambmediadesign.com/?p=255</guid>
		<description><![CDATA[While on break, I&#8217;ve been playing around with Mozilla&#8217;s File API and integrating it with Duke Webfiles, which I work on for OIT. This is only a proof of concept since the spec has not been completed and I only implemented it in the icon view of Webfiles. Regardless, I think it is pretty cool [...]]]></description>
			<content:encoded><![CDATA[<p>While on break, I&#8217;ve been playing around with Mozilla&#8217;s File API and integrating it with <a href="http://webfiles.duke.edu" target="_blank">Duke Webfiles</a>, which I work on for OIT.  This is only a proof of concept since the spec has not been completed and I only implemented it in the icon view of Webfiles.  Regardless, I think it is pretty cool and makes the application much easier to use.  Here is a screencast to see it in action:</p>
<p><object width="640" height="505"><param name="movie" value="http://www.youtube.com/v/9RBfyC60ADI&#038;hl=en&#038;fs=1&#038;hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/9RBfyC60ADI&#038;hl=en&#038;fs=1&#038;hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed></object></p>
<p>To do this I used examples from <a href="http://www.thecssninja.com/javascript/drag-and-drop-upload" target="_blank">here</a> for the new File API and <a href="http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html" target="_blank">here</a> for the AJAX upload.  Obviously this could be expanded upon by implementing it in all three file views in Webfiles and by showing progress bars for each file.  Additionally, there are some small bugs with uploading large files.  However, if you are a Duke student and want to give it a try, follow the instructions below.   Please note, this is a alpha version of the software, and you may run into some bugs when using it.</p>
<ul>
<li>Make sure you are using <a href="https://developer.mozilla.org/devnews/index.php/2009/08/07/firefox-3-6-alpha-1-now-available-for-download/">Firefox 3.6 Alpha &#8211; Namoroka</a>.</li>
<li>Go to our <a href="http://pnsdev.oit.duke.edu" target="_blank">development version of Webfiles</a> and log in.</li>
<li><em>After</em> you are logged in, go <a href="http://pnsdev.oit.duke.edu/#beta" target="_blank">here</a> to turn on the new drag and drop feature.</li>
</ul>
<p>Please, give it a try and let me know your thoughts.  Thanks.</p>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/C0o44bAb1LQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/255/drag-and-drop-off-the-desktop-in-duke-webfiles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/255/drag-and-drop-off-the-desktop-in-duke-webfiles/</feedburner:origLink></item>
		<item>
		<title>Hilbert Curve with the Canvas element</title>
		<link>http://feedproxy.google.com/~r/AlexBeutel/~3/qRA6yDbHAkY/</link>
		<comments>http://blog.alexbeutel.com/247/hilbert-curve-with-the-canvas-element/#comments</comments>
		<pubDate>Thu, 01 Oct 2009 22:56:48 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Miscellanious]]></category>

		<guid isPermaLink="false">http://blog.ambmediadesign.com/?p=247</guid>
		<description><![CDATA[For my discrete math course (CPS 102) this semester, I had to create a space-filling curve for one of my homework assignments. I decided to take this as an opportunity to play with HTML5&#8242;s canvas element since I&#8217;ve yet to had a legitimate use for it in any programming yet. I think it came out [...]]]></description>
			<content:encoded><![CDATA[<p>For my discrete math course (CPS 102) this semester, I had to create a space-filling curve for one of my homework assignments.  I decided to take this as an opportunity to play with HTML5&#8242;s canvas element since I&#8217;ve yet to had a legitimate use for it in any programming yet.  I think it came out decently well (and it&#8217;s kind of fun to play with), so I thought I&#8217;d post it.  Here is a link to it: <a href="http://alexbeutel.com/hilbert-canvas.html" target="_blank">http://alexbeutel.com/hilbert-canvas.html</a> Like I said, nothing huge but fun to program and cool to watch.</p>
<p>I am on fall break now, and will be spending the weekend at home.  Hopefully I&#8217;ll do something cool while I&#8217;m home and will post if anything comes out good.</p>
<img src="http://feeds.feedburner.com/~r/AlexBeutel/~4/qRA6yDbHAkY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.alexbeutel.com/247/hilbert-curve-with-the-canvas-element/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.alexbeutel.com/247/hilbert-curve-with-the-canvas-element/</feedburner:origLink></item>
	</channel>
</rss>

