<?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>Floorplanner Tech Blog &#187; Development</title>
	<atom:link href="http://techblog.floorplanner.com/category/development/feed/" rel="self" type="application/rss+xml" />
	<link>http://techblog.floorplanner.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 19 Nov 2009 04:00:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Performance tweaking of Ruby algorithms</title>
		<link>http://techblog.floorplanner.com/2009/09/27/performance-tweaking-of-ruby-algorithms/</link>
		<comments>http://techblog.floorplanner.com/2009/09/27/performance-tweaking-of-ruby-algorithms/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 06:02:42 +0000</pubDate>
		<dc:creator>Willem van Bergen</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[algorithms]]></category>
		<category><![CDATA[analysis]]></category>
		<category><![CDATA[blocks]]></category>
		<category><![CDATA[parallelization]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[profiling]]></category>
		<category><![CDATA[regular expressions]]></category>
		<category><![CDATA[request-log-analyzer]]></category>
		<category><![CDATA[ruby]]></category>
		<category><![CDATA[ruby-prof]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=716</guid>
		<description><![CDATA[I have been working on request-log-analyzer quite a lot recently. One of the things I focused on was improving the parsing performance: because it parses log files that often are very big, processing times tend to be long. So all savings are very welcome.
Improving the performance of a command line application that does a lot [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F09%2F27%2Fperformance-tweaking-of-ruby-algorithms%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F09%2F27%2Fperformance-tweaking-of-ruby-algorithms%2F" height="61" width="51" /></a></div><p>I have been working on <a href="http://github.com/wvanbergen/request-log-analyzer">request-log-analyzer</a> quite a lot recently. One of the things I focused on was improving the parsing performance: because it parses log files that often are very big, processing times tend to be long. So all savings are very welcome.</p>
<p>Improving the performance of a command line application that does a lot of processing is very different from optimizing the performance of a web application. Request-log-analyzer basically reads a file line by line and processes it, so small performance improvements in the line processing algorithm can really add up when the file has a lot of lines. I used <a href="http://ruby-prof.rubyforge.org/">ruby-prof</a> to get information about the performance of our algorithms split out by method to focus my tweaking efforts. I have written down some of my findings below; hopefully they can be helpful.</p>
<h3>Parallelization</h3>
<p>My first thought for improving performance was parallelization: parse multiple lines at the same time. Unfortunately, this did not yield the results I was hoping for: it instead become slower. Probably, this is because Ruby implements its own in-process threading and thus only uses one core of my processor.</p>
<h3>Block overhead</h3>
<p>The overhead of using a block should not be underestimated. Consider the following simple change, which improved the performance of request-log-analyzer by 1.5-2% on large log files:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#008000; font-style:italic;"># with block</span>
io.<span style="color:#9900CC;">each_line</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#006600; font-weight:bold;">|</span>line<span style="color:#006600; font-weight:bold;">|</span> process_line<span style="color:#006600; font-weight:bold;">&#40;</span>line<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
&nbsp;
<span style="color:#008000; font-style:italic;"># without block</span>
process_line<span style="color:#006600; font-weight:bold;">&#40;</span>line<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#9966CC; font-weight:bold;">while</span> line = io.<span style="color:#CC0066; font-weight:bold;">gets</span></pre></div></div>

<h3>Regular expressions</h3>
<p>If you&#8217;re using complex regular expressions, and you do not expect that every string will match it successfully, it can be beneficial to test the string with a simpler regexp first. For example, request-log-analyzer uses a complex regexp to see if a line in a log file is a &#8220;Completed in&#8230;&#8221; line with the request duration in it:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#008000; font-style:italic;"># Check every line to see if it is a &quot;completed&quot; line and capture the values</span>
<span style="color:#9966CC; font-weight:bold;">if</span> line =~ <span style="color:#006600; font-weight:bold;">/</span>Completed <span style="color:#9966CC; font-weight:bold;">in</span> <span style="color:#006600; font-weight:bold;">&#40;</span>\d<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>ms \<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#40;</span>?:View: <span style="color:#006600; font-weight:bold;">&#40;</span>\d<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#006600; font-weight:bold;">&#41;</span>?DB: <span style="color:#006600; font-weight:bold;">&#40;</span>\d<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>\<span style="color:#006600; font-weight:bold;">&#41;</span> \<span style="color:#006600; font-weight:bold;">|</span> <span style="color:#006600; font-weight:bold;">&#40;</span>\d\d\d<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#006600; font-weight:bold;">+</span>\<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">&#40;</span>http.<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>\<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">/</span>
  <span style="color:#008000; font-style:italic;"># do something with the captured values</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>I improved this by first checking for a superficial regexp that tells me with 99% certainty that the complex regexp will match the line successfully as well:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#9966CC; font-weight:bold;">if</span> line =~ <span style="color:#006600; font-weight:bold;">/</span>Completed <span style="color:#9966CC; font-weight:bold;">in</span><span style="color:#006600; font-weight:bold;">/</span>
  <span style="color:#9966CC; font-weight:bold;">if</span> line =~ <span style="color:#006600; font-weight:bold;">/</span>Completed <span style="color:#9966CC; font-weight:bold;">in</span> <span style="color:#006600; font-weight:bold;">&#40;</span>\d<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>ms \<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#40;</span>?:View: <span style="color:#006600; font-weight:bold;">&#40;</span>\d<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#006600; font-weight:bold;">&#41;</span>?DB: <span style="color:#006600; font-weight:bold;">&#40;</span>\d<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>\<span style="color:#006600; font-weight:bold;">&#41;</span> \<span style="color:#006600; font-weight:bold;">|</span> <span style="color:#006600; font-weight:bold;">&#40;</span>\d\d\d<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#006600; font-weight:bold;">+</span>\<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">&#40;</span>http.<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#41;</span>\<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">/</span>
    <span style="color:#008000; font-style:italic;"># do something with the captured values</span>
  <span style="color:#9966CC; font-weight:bold;">else</span>
    <span style="color:#ff6633; font-weight:bold;">$stderr</span>.<span style="color:#CC0066; font-weight:bold;">puts</span> <span style="color:#996600;">&quot;#{line.inspect} expected to match 'Completed' regexp!&quot;</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Depending on the log file, this can increase performance by ~3%. Another benefit of this approach is that it will give feedback on lines that matched the simple regexp, but not the complex one. This information can be used to correct the regular expressions.</p>
<h3>Calculate things that do not change only once</h3>
<p>Calculate things that do not change only once is easier said than done. For instance, request-log analyzer can aggregate durations in a category. A category can be based on a request field that is parsed from the log, or a <code>Proc</code> that calculates it:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#008000; font-style:italic;"># during parsing:</span>
<span style="color:#9966CC; font-weight:bold;">if</span> categorizer.<span style="color:#9900CC;">respond_to</span>?<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:call</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  category = categorizer.<span style="color:#9900CC;">call</span><span style="color:#006600; font-weight:bold;">&#40;</span>request<span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">else</span>
  category = request<span style="color:#006600; font-weight:bold;">&#91;</span>categorizer<span style="color:#006600; font-weight:bold;">&#93;</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
categories<span style="color:#006600; font-weight:bold;">&#91;</span>category<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">aggregate_request</span><span style="color:#006600; font-weight:bold;">&#40;</span>request<span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>

<p>With this implementation, <code>categorizer</code> will be checked to be a <code>Proc</code> for every request, but as the value of <code>categorizer</code> will not change, the result of the check will be constant as well. I solved this my making sure that it is always a <code>Proc</code> beforehand, so the check is no longer necessary during parsing:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#008000; font-style:italic;"># before parsing:</span>
<span style="color:#9966CC; font-weight:bold;">if</span> categorizer.<span style="color:#9900CC;">respond_to</span>?<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:call</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  categorizer_proc = categorizer
<span style="color:#9966CC; font-weight:bold;">else</span>
  categorizer_proc = <span style="color:#CC0066; font-weight:bold;">lambda</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#006600; font-weight:bold;">|</span>request<span style="color:#006600; font-weight:bold;">|</span> request<span style="color:#006600; font-weight:bold;">&#91;</span>categorizer<span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#008000; font-style:italic;"># during parsing:</span>
category = categorizer_proc.<span style="color:#9900CC;">call</span><span style="color:#006600; font-weight:bold;">&#40;</span>request<span style="color:#006600; font-weight:bold;">&#41;</span>
categories<span style="color:#006600; font-weight:bold;">&#91;</span>category<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">aggregate_request</span><span style="color:#006600; font-weight:bold;">&#40;</span>request<span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>

<p>Performance gain: ~1%! And because on several instances a similar technique could be applied, the performance got improved by about 4% in total.</p>
<h3>Check the most common case first</h3>
<p>Consider the following example, which converts a number in any traffic unit (kilobytes, MB, etc) to bytes:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> convert_traffic<span style="color:#006600; font-weight:bold;">&#40;</span>value, unit<span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#9966CC; font-weight:bold;">case</span> unit
  <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:GB</span>, <span style="color:#ff3333; font-weight:bold;">:G</span>, <span style="color:#ff3333; font-weight:bold;">:gigabyte</span>      <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006600; font-weight:bold;">&#40;</span>value.<span style="color:#9900CC;">to_f</span> <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">1000</span>_000_000<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">round</span>
  <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:MB</span>, <span style="color:#ff3333; font-weight:bold;">:M</span>, <span style="color:#ff3333; font-weight:bold;">:megabyte</span>      <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006600; font-weight:bold;">&#40;</span>value.<span style="color:#9900CC;">to_f</span> <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">1000</span>_000<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">round</span>
  <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:KB</span>, <span style="color:#ff3333; font-weight:bold;">:K</span>, <span style="color:#ff3333; font-weight:bold;">:kilobyte</span>, <span style="color:#ff3333; font-weight:bold;">:kB</span> <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006600; font-weight:bold;">&#40;</span>value.<span style="color:#9900CC;">to_f</span> <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">1000</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">round</span>
  <span style="color:#008000; font-style:italic;"># ... even more units here</span>
  <span style="color:#9966CC; font-weight:bold;">else</span> value.<span style="color:#9900CC;">to_i</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>In most cases, the value will simply given in bytes, which will be returned by the final <code>else</code> after all possibilities have been checked. This can be improved by checking for this possibility first:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#008000; font-style:italic;"># Converts traffic in any unit to bytes.</span>
<span style="color:#9966CC; font-weight:bold;">def</span> convert_traffic<span style="color:#006600; font-weight:bold;">&#40;</span>value, unit<span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#9966CC; font-weight:bold;">case</span> unit
  <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#0000FF; font-weight:bold;">nil</span>, <span style="color:#ff3333; font-weight:bold;">:B</span>, <span style="color:#ff3333; font-weight:bold;">:byte</span>          <span style="color:#9966CC; font-weight:bold;">then</span> value.<span style="color:#9900CC;">to_i</span>
  <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:GB</span>, <span style="color:#ff3333; font-weight:bold;">:G</span>, <span style="color:#ff3333; font-weight:bold;">:gigabyte</span>      <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006600; font-weight:bold;">&#40;</span>value.<span style="color:#9900CC;">to_f</span> <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">1000</span>_000_000<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">round</span>
  <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:MB</span>, <span style="color:#ff3333; font-weight:bold;">:M</span>, <span style="color:#ff3333; font-weight:bold;">:megabyte</span>      <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006600; font-weight:bold;">&#40;</span>value.<span style="color:#9900CC;">to_f</span> <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">1000</span>_000<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">round</span>
  <span style="color:#9966CC; font-weight:bold;">when</span> <span style="color:#ff3333; font-weight:bold;">:KB</span>, <span style="color:#ff3333; font-weight:bold;">:K</span>, <span style="color:#ff3333; font-weight:bold;">:kilobyte</span>, <span style="color:#ff3333; font-weight:bold;">:kB</span> <span style="color:#9966CC; font-weight:bold;">then</span> <span style="color:#006600; font-weight:bold;">&#40;</span>value.<span style="color:#9900CC;">to_f</span> <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">1000</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">round</span>
  <span style="color:#008000; font-style:italic;"># ... even more units here</span>
  <span style="color:#9966CC; font-weight:bold;">else</span> <span style="color:#CC0066; font-weight:bold;">raise</span> <span style="color:#996600;">&quot;Unknown unit: #{unit.inspect}!&quot;</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Again this change adds up to a ~1% performance increase if this method is called very often.</p>
<p>These kinds of changes really improved the performance of request-log-analyzer by quite a bit, so upgrade to the latest version to get some of your valuable time back! <img src='http://techblog.floorplanner.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/09/27/performance-tweaking-of-ruby-algorithms/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Build ActionScript3 projects with TextMate in 5 easy steps</title>
		<link>http://techblog.floorplanner.com/2009/09/05/build-actionscript3-projects-with-textmate-in-5-easy-steps/</link>
		<comments>http://techblog.floorplanner.com/2009/09/05/build-actionscript3-projects-with-textmate-in-5-easy-steps/#comments</comments>
		<pubDate>Sat, 05 Sep 2009 11:51:34 +0000</pubDate>
		<dc:creator>Gert-Jan</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Flash+ActionScript]]></category>
		<category><![CDATA[textmate actionscript flex sdk]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=704</guid>
		<description><![CDATA[The text editor of choice of our Rails team is TextMate. Our Flash team is a bit divided between Eclipse+FDT and FlexBuilder. I wanted to see if TextMate is a good alternative for building Flash/ActionScript projects.
There are a couple of good sources on using TexMate for ActionScript projects, but it&#8217;s a little fragmented and sometimes [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F09%2F05%2Fbuild-actionscript3-projects-with-textmate-in-5-easy-steps%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F09%2F05%2Fbuild-actionscript3-projects-with-textmate-in-5-easy-steps%2F" height="61" width="51" /></a></div><p>The text editor of choice of our Rails team is TextMate. Our Flash team is a bit divided between Eclipse+FDT and FlexBuilder. I wanted to see if TextMate is a good alternative for building Flash/ActionScript projects.</p>
<p>There are a couple of good sources on using TexMate for ActionScript projects, but it&#8217;s a little fragmented and sometimes outdated. I found <a href="http://www.pixelate.de/blog/setting-up-a-as3-project-in-textmate">pixelate&#8217;s blog post</a> and <a href="http://blog.simongregory.com/">Simon&#8217;s blog</a> very useful.</p>
<h3>1. TextMate</h3>
<p>First of all, you need have MacroMates&#8217; <a href="http://macromates.com/">TexMate</a> of course. If you don&#8217;t already own a copy, you can download a <a href="http://download-b.macromates.com/TextMate_1.5.9.dmg">30-day-trial</a>.</p>
<h3>2. ActionScript3 bundle</h3>
<p><a href="http://blog.simongregory.com/">Simon Gregory</a> did some fine work by creating a TextMate bundle for ActionScript3. The most important things that the bundle handles are <a href="http://blog.simongregory.com/09/as3-autocompletion-in-textmate/">auto-completion</a> and <a href="http://blog.simongregory.com/02/improved-auto-import-for-actionscript-3-in-textmate/">auto-import</a>.  You can <a href="http://blog.simongregory.com/wp-content/assets/bundles/ActionScript%203.tmbundle.zip">download it</a> directly from his blog, or fetch it with Git or SVN.</p>
<p>To install via Subversion:</p>

<div class="wp_syntax"><div class="code"><pre class="console" style="font-family: Monaco,monospace;">export LC_CTYPE=en_US.UTF-8
cd ~/&quot;Library/Application Support/TextMate/Bundles/&quot;
svn co http://svn.textmate.org/trunk/Review/Bundles/ActionScript\ 3.tmbundle
osascript -e 'tell app &quot;TextMate&quot; to reload bundles'</pre></div></div>

<p>To install via Git:</p>

<div class="wp_syntax"><div class="code"><pre class="console" style="font-family: Monaco,monospace;">cd ~/&quot;Library/Application Support/TextMate/Bundles/&quot;
git clone git://github.com/simongregory/actionscript3-tmbundle.git &quot;ActionScript 3.tmbundle&quot;
osascript -e 'tell app &quot;TextMate&quot; to reload bundles'</pre></div></div>

<h3>3. Flex SDK</h3>
<p>The actual building of your project is done by the free <a href="http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3&#038;promoid=DJGYF">Flex 3 SDK</a>. Download it and move the extracted folder into your /Developer/SDKs/ folder. The SDK has to be accessible throughout your whole system. You can do this by adding it to the PATH variable in the /etc/profile file. Open terminal and type:</p>

<div class="wp_syntax"><div class="code"><pre class="console" style="font-family: Monaco,monospace;">sudo mate /etc/profile</pre></div></div>

<p>Then add the folder &#8220;/Developers/SDKs/flex_sdk_3/bin&#8221; to the file and save it. It should look something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="console" style="font-family: Monaco,monospace;">PATH=&quot;/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/mysql/bin:/Developer/SDKs/flex_sdk_3/bin&quot;</pre></div></div>

<h3>4. TextMate settings</h3>
<p>Before we can start the ActionScript fun we have to setup a few things in TextMate. Open TextMate and select File→New Project. Click on the info button located in the bottom of the Project Drawer. Add two shell variables so that the ActionScript Bundle knows where to look for your files:</p>

<div class="wp_syntax"><div class="code"><pre class="console" style="font-family: Monaco,monospace;">TM_FLEX_FILE_SPECS    src/Main.as
TM_FLEX_OUTPUT        bin/Main.swf</pre></div></div>

<p>We also need to let TextMate know where the Flex SDK is located. Go to TextMate→Preferences→Advanced→Shell Variables and add a new global variable:</p>

<div class="wp_syntax"><div class="code"><pre class="console" style="font-family: Monaco,monospace;">TM_FLEX_PATH    Developer/SDKs/flex_sdk_3</pre></div></div>

<h3>5. Hello World</h3>
<p>With all that out of the way, we can finally start working on a ActionScript project: Hello World. Create a folder on your system that will hold this project. Drag this folder to TextMate&#8217;s Project Drawer. Create two new folders named bin and src in your project folder. Then create a new file in the src folder and name it Main.as. It should look something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family: Monaco,monospace;">package <span style="color: #66cc66;">&#123;</span>        
    <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
    <span style="color: #0066CC;">import</span> flash.<span style="color: #0066CC;">text</span>.<span style="color: #0066CC;">TextField</span>;
&nbsp;
    <span style="color: #66cc66;">&#91;</span>SWF<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">backgroundColor</span>=<span style="color: #ff0000;">'0xFFFFFF'</span>, frameRate=<span style="color: #ff0000;">'30'</span>, <span style="color: #0066CC;">width</span>=<span style="color: #ff0000;">'200'</span>, <span style="color: #0066CC;">height</span>=<span style="color: #ff0000;">'200'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
&nbsp;
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> Main <span style="color: #0066CC;">extends</span> Sprite <span style="color: #66cc66;">&#123;</span>
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">textField</span>: <span style="color: #0066CC;">TextField</span>;
&nbsp;
        <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> Main<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
            <span style="color: #0066CC;">textField</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextField</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
            <span style="color: #0066CC;">textField</span>.<span style="color: #0066CC;">text</span> = <span style="color: #ff0000;">&quot;Hello World.&quot;</span>;
&nbsp;
            addChild<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">textField</span><span style="color: #66cc66;">&#41;</span>;
        <span style="color: #66cc66;">&#125;</span>        
    <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Choose Bundles→ActionScript 3→Build to build your project. A terminal window pops up which runs the Flex SDK to build your project. You can find the resulting Main.swf file in your bin folder. Yay!</p>
<h3>Notes</h3>
<p>If you want to build Flash Player 10 specific stuff (like me) you have to let the Flex SDK know. Open /Developer/SDKs/flex_sdk_3/frameworks/flex-config.xml and set the target-player tag to 10.0.0</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family: Monaco,monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;target-player<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>10.0.0<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/target-player<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>The easiest way to work with libraries, the so called SWC files, in this setup is to drop them directly into /Developer/SDKs/flex_sdk_3/frameworks/libs folder. That way the Flex SDK has no problem finding them.</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/09/05/build-actionscript3-projects-with-textmate-in-5-easy-steps/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Papervision3D 2.1 &#8211; alpha</title>
		<link>http://techblog.floorplanner.com/2009/05/26/papervision3d-21-alpha/</link>
		<comments>http://techblog.floorplanner.com/2009/05/26/papervision3d-21-alpha/#comments</comments>
		<pubDate>Tue, 26 May 2009 20:57:53 +0000</pubDate>
		<dc:creator>Tim</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Flash+ActionScript]]></category>
		<category><![CDATA[Papervision3D]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=659</guid>
		<description><![CDATA[Just committed rev. 911 to the Papervision3D SVN trunk. Rev. 911 and upwards will become Papervision3D 2.1 because the changes made are quite big.
Major changes where made to the DAE, MD2 and animation classes.
NOTE:
This revision is considerably different then previous revisions. Use with care!
At this point its not advised to use rev. 911 for production.
This [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F05%2F26%2Fpapervision3d-21-alpha%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F05%2F26%2Fpapervision3d-21-alpha%2F" height="61" width="51" /></a></div><p>Just committed rev. 911 to the <a href="http://code.google.com/p/papervision3d/">Papervision3D SVN trunk</a>. Rev. 911 and upwards will become Papervision3D 2.1 because the changes made are quite big.<br />
Major changes where made to the DAE, MD2 and animation classes.</p>
<p>NOTE:<br />
This revision is considerably different then previous revisions. Use with care!<br />
At this point its not advised to use rev. 911 for production.</p>
<p>This revision fixes several issues regarding the <a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/objects/parsers/DAE.as?r=911">DAE class</a>:</p>
<ol>
<li>vertex-animation</li>
<li>nested animations</li>
<li>Cinema4D support</li>
<li>morph-weight animation</li>
<li>splines</li>
<li>cloning</li>
<li>play(), play(&#8221;clipName&#8221;), stop(), pause(), resume()</li>
<li>more&#8230;</li>
</ol>
<p>The whole <a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/?r=911#papervision3d/core/animation">org.papervision3d.core.animation.*</a> package has been revamped <strong>completely</strong> to allow for the changes in the <a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/objects/parsers/DAE.as?r=911">DAE class</a>.</p>
<p><strong>DAE Example</strong>:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family: Monaco,monospace;"><span style="color: #000000; font-weight: bold;">var</span> autoPlay : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>; <span style="color: #808080; font-style: italic;">// don't play animations automatically</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> dae : DAE = <span style="color: #000000; font-weight: bold;">new</span> DAE<span style="color: #66cc66;">&#40;</span> autoPlay, <span style="color: #ff0000;">&quot;myCollada&quot;</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
dae.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>FileLoadEvent.<span style="color: #006600;">LOAD_COMPLETE</span>, onDaeComplete<span style="color: #66cc66;">&#41;</span>;
dae.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>FileLoadEvent.<span style="color: #006600;">LOAD_PROGRESS</span>, onDaeLoadProgress<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// optionally pass materials to DAE</span>
<span style="color: #808080; font-style: italic;">// NOTE: here's a change with previous revs :</span>
<span style="color: #808080; font-style: italic;">// 1. lookup the &lt;material&gt; elements in the COLLADA file (inside &lt;library_materials&gt;).</span>
<span style="color: #808080; font-style: italic;">// 2. write down / remember the @id attribute of the &lt;material&gt; element.</span>
<span style="color: #808080; font-style: italic;">// 3. materials.addMaterial( myMaterial, materialElementID ).</span>
<span style="color: #808080; font-style: italic;">// ==&gt; this will probably change in future revs</span>
<span style="color: #000000; font-weight: bold;">var</span> materials : MaterialsList = <span style="color: #000000; font-weight: bold;">new</span> MaterialsList<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// If textures fail to load optionally add some search-paths </span>
<span style="color: #808080; font-style: italic;">// (relative to the swf):</span>
dae.<span style="color: #006600;">addFileSearchPath</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;images&quot;</span> <span style="color: #66cc66;">&#41;</span>;
dae.<span style="color: #006600;">addFileSearchPath</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;textures&quot;</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// set to true if you get a script-timeout error</span>
<span style="color: #000000; font-weight: bold;">var</span> asyncParsing : <span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// load it!</span>
dae.<span style="color: #0066CC;">load</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;/path/to/dae&quot;</span>, materials, asyncParsing <span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">/**
 * The DAE has loaded completely
 */</span>
<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onDaeComplete<span style="color: #66cc66;">&#40;</span>event : FileLoadEvent<span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
     <span style="color: #000000; font-weight: bold;">var</span> dae : DAE = event.<span style="color: #0066CC;">target</span> as DAE;
&nbsp;
     <span style="color: #808080; font-style: italic;">// add to scene</span>
     scene.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span> dae <span style="color: #66cc66;">&#41;</span>;
&nbsp;
     <span style="color: #808080; font-style: italic;">// start playing animation (if any available)</span>
     <span style="color: #808080; font-style: italic;">// other animation controls include :</span>
     <span style="color: #808080; font-style: italic;">// 1. play( &quot;clipName &quot;)</span>
     <span style="color: #808080; font-style: italic;">// 2. stop()</span>
     <span style="color: #808080; font-style: italic;">// 3. pause()</span>
     <span style="color: #808080; font-style: italic;">// 4. resume()</span>
     <span style="color: #808080; font-style: italic;">// 5. playing (getter: bool indicating if playing)</span>
     dae.<span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
     <span style="color: #808080; font-style: italic;">// lets create a clone</span>
     <span style="color: #808080; font-style: italic;">// NOTE: DAE#clone() is somewhat bugged still, </span>
     <span style="color: #808080; font-style: italic;">// but seems to work in most cases</span>
     <span style="color: #000000; font-weight: bold;">var</span> clone : DAE = dae.<span style="color: #006600;">clone</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> as DAE;
&nbsp;
     <span style="color: #808080; font-style: italic;">// add clone to scene</span>
     scene.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span> clone <span style="color: #66cc66;">&#41;</span>;
&nbsp;
     <span style="color: #808080; font-style: italic;">// move it a bit</span>
     clone.<span style="color: #006600;">x</span> = <span style="color: #cc66cc;">200</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onDaeLoadProgress<span style="color: #66cc66;">&#40;</span>event : FileLoadEvent<span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
&nbsp;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p><strong>MD2 Example</strong>:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family: Monaco,monospace;"><span style="color: #000000; font-weight: bold;">var</span> md2 : MD2 = <span style="color: #000000; font-weight: bold;">new</span> MD2<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> material : MaterialObject3D = <span style="color: #000000; font-weight: bold;">new</span> WireframeMaterial<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
md2.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>FileLoadEvent.<span style="color: #006600;">LOAD_COMPLETE</span>, onMD2Complete<span style="color: #66cc66;">&#41;</span>;
&nbsp;
md2.<span style="color: #0066CC;">load</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;/path/to/md2&quot;</span>, material<span style="color: #66cc66;">&#41;</span>;
&nbsp;
scene.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>md2<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onMD2Complete<span style="color: #66cc66;">&#40;</span>event : FileLoadEvent<span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
       <span style="color: #000000; font-weight: bold;">var</span> md2 : MD2 = event.<span style="color: #0066CC;">target</span> as MD2;
&nbsp;
       md2.<span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
       <span style="color: #808080; font-style: italic;">// or play some clip :</span>
       <span style="color: #808080; font-style: italic;">// md2.play( &quot;run&quot; )</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p><strong>Animation</strong>:</p>
<p>Click the image below to show an example of the new animation controls.<br />
<a href="http://lab.floorplanner.com/pv3d/21/animation/"><img src="http://techblog.floorplanner.com/wp-content/uploads/2009/05/picture-3.png" alt="Animation Test" title="Animation Test" width="511" height="371" class="alignnone size-full wp-image-686" /></a><br />
Download the source of this example <a href="http://lab.floorplanner.com/pv3d/21/animation/AnimationTest.as">here</a>.</p>
<p>The DAE and MD2 class implement <a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/core/animation/IAnimatable.as">IAnimatable</a>, <a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/core/animation/IAnimationProvider.as">IAnimationProvider</a> and <a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/core/controller/IControllerProvider.as">IControllerProvider</a>, which can be found in the org.papervision3d.core.animation.* package.</p>
<ul>
<li>IAnimatable provides the play(), stop(), pause() and resume() methods.</li>
<li>IAnimationProvider provides a getter / setter #animation for low level access to <a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/core/controller/AnimationController.as">org.papervision3d.core.controllers.AnimationController</a></li>
<li>IControllerProvider provides a getter / setter #controllers for low level access to the different controllers:
<ul>
<li><a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/core/controller/MorphController.as">org.papervision3d.core.controllers.MorphController</a></li>
<li><a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/core/controller/SkinController.as">org.papervision3d.core.controllers.SkinController</a></li>
<li><a href="http://code.google.com/p/papervision3d/source/browse/trunk/as3/trunk/src/org/papervision3d/core/controller/AnimationController.as">org.papervision3d.core.controllers.AnimationController</a></li>
</ul>
</li>
</ul>
<p>As so much has changed I&#8217;m sure some bugs are introduced. Please let me know!</p>
<p>PS: I&#8217;ll be on vacation until june 8th, so its unlikely I&#8217;ll be able to fix any bugs before that time.<br />
PS2: Many people have helped by submitting code-snips, reporting bugs etc. I&#8217;ll credit you all when I&#8217;m back <img src='http://techblog.floorplanner.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/05/26/papervision3d-21-alpha/feed/</wfw:commentRss>
		<slash:comments>38</slash:comments>
		</item>
		<item>
		<title>Unproject with useProjectionMatrix = true</title>
		<link>http://techblog.floorplanner.com/2009/04/29/unproject-with-useprojectionmatrix-true/</link>
		<comments>http://techblog.floorplanner.com/2009/04/29/unproject-with-useprojectionmatrix-true/#comments</comments>
		<pubDate>Wed, 29 Apr 2009 00:45:40 +0000</pubDate>
		<dc:creator>Tim</dc:creator>
				<category><![CDATA[Collaboration]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Flash+ActionScript]]></category>
		<category><![CDATA[Floorplanner]]></category>
		<category><![CDATA[OS X]]></category>
		<category><![CDATA[Papervision3D]]></category>
		<category><![CDATA[camera]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[unproject]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=580</guid>
		<description><![CDATA[I just updated Papervision3D to allow the CameraObject3D#unproject method to work when CameraObject3D#useProjectionMatrix = true.
Papervision3D has two methods of &#8216;projecting&#8217; vectors onto the screen:

useProjectionMatrix = false, this is the default &#8216;fast&#8217; method
useProjectionMatrix = true, this is the method where projection is done by a matrix

Note that Papervision3D switches to method #2 in &#8216;ortho mode&#8217;.
So what [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F04%2F29%2Funproject-with-useprojectionmatrix-true%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F04%2F29%2Funproject-with-useprojectionmatrix-true%2F" height="61" width="51" /></a></div><p>I just updated <a href="http://blog.papervision3d.org">Papervision3D</a> to allow the CameraObject3D#unproject method to work when CameraObject3D#useProjectionMatrix = true.</p>
<p>Papervision3D has two methods of &#8216;projecting&#8217; vectors onto the screen:</p>
<ol>
<li>useProjectionMatrix = false, this is the default &#8216;fast&#8217; method</li>
<li>useProjectionMatrix = true, this is the method where projection is done by a matrix</li>
</ol>
<p>Note that Papervision3D switches to method #2 in &#8216;ortho mode&#8217;.</p>
<p>So what is the difference exactly between these two kinds of projection? First we need to define what projection is. Projection is what adds &#8216;perspective&#8217; to a scene and makes sure your scene fits to the viewport. Its the last step in the so-called &#8216;render pipeline&#8217;. </p>
<p>We can derive the &#8216;fore shortening&#8217; effect of perspective in several ways. Method #1 is simple, effective and fast. It uses the camera&#8217;s focus and zoom values. Method #2 uses a more classic way of projection : it uses a dedicated matrix. Tech buffs: very much like OpenGL&#8217;s <a href="http://www.opengl.org/sdk/docs/man/xhtml/gluPerspective.xml">gluPerspective</a>.</p>
<p><a href="http://blog.zupko.info/">Andy Zupko</a> has a great <a href="http://blog.zupko.info/?p=143">post</a> on unproject using method #1.</p>
<p>We will discuss unproject using method #2, which works slightly different.</p>
<p>The difference is that when #useProjectionMatrix is set to true, then CameraObject3D#unproject  returns a point in world-space, rather then a ray. Let me explain with some code:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre class="actionscript3" style="font-family: Monaco,monospace;"><span style="color: #009900;">// we want to use a projection matrix</span>
camera.useProjectionMatrix = <span style="color: #0033ff; font-weight: bold;">true</span>;
&nbsp;
<span style="color: #009900;">// '0' indicates we want a point on the near plane</span>
<span style="color: #6699cc; font-weight: bold;">var</span> pointOnNearPlane <span style="color: #000000; font-weight: bold;">:</span> Number3D = camera.unproject<span style="color: #000000;">&#40;</span> screenX, screenY, <span style="color: #000000; font-weight:bold;">0</span> <span style="color: #000000;">&#41;</span>;
&nbsp;
<span style="color: #009900;">// '1' indicates we want a point on the far plane</span>
<span style="color: #6699cc; font-weight: bold;">var</span> pointOnFarPlane <span style="color: #000000; font-weight: bold;">:</span> Number3D = camera.unproject<span style="color: #000000;">&#40;</span> screenX, screenY, <span style="color: #000000; font-weight:bold;">1</span> <span style="color: #000000;">&#41;</span>;
&nbsp;
<span style="color: #009900;">// Construct the ray's direction</span>
<span style="color: #6699cc; font-weight: bold;">var</span> dir <span style="color: #000000; font-weight: bold;">:</span> Number3D = Number3D.sub<span style="color: #000000;">&#40;</span> pointOnFarPlane, pointOnNearPlane <span style="color: #000000;">&#41;</span>;
&nbsp;
<span style="color: #009900;">// Normalize</span>
dir.<span style="color: #004993;">normalize</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
&nbsp;
<span style="color: #009900;">// So, now you have a ray with its origin at 'pointOnNearPlane',</span>
<span style="color: #009900;">// and direction 'dir'</span></pre></td></tr></table></div>

<p>Optimization: could save some cycles by doing (*not* in ortho mode!, see below):</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="actionscript3" style="font-family: Monaco,monospace;"><span style="color: #6699cc; font-weight: bold;">var</span> camPosition <span style="color: #000000; font-weight: bold;">:</span> Number3D = <span style="color: #0033ff; font-weight: bold;">new</span> Number3D<span style="color: #000000;">&#40;</span> camera.<span style="color: #004993;">x</span>, camera.<span style="color: #004993;">y</span>, camera.z <span style="color: #000000;">&#41;</span>;
<span style="color: #009900;">// Construct the ray's direction</span>
<span style="color: #6699cc; font-weight: bold;">var</span> dir <span style="color: #000000; font-weight: bold;">:</span> Number3D = Number3D.sub<span style="color: #000000;">&#40;</span> pointOnFarPlane, camPosition <span style="color: #000000;">&#41;</span>;
<span style="color: #009900;">// Normalize</span>
dir.<span style="color: #004993;">normalize</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
<span style="color: #009900;">// So, now you have a ray with its origin at the camera's position</span>
<span style="color: #009900;">// and direction 'dir'</span></pre></td></tr></table></div>

<p>Why can&#8217;t we use above optimization in ortho mode?<br />
In perspective mode all &#8216;rays&#8217; originate from the camera&#8217;s position: the &#8216;view cone&#8217; has shape of a pyramid. Hence we can assume &#8216;pointOnNearPlane&#8217; to coincide with the camera&#8217;s position.<br />
In ortho mode however the &#8216;view cone&#8217; has the shape of a cube, all rays are parallel. Hence we need to unproject *two* points to construct our ray.</p>
<p>Now simply follow <a href="http://blog.zupko.info/?p=143">Andy Zupko &#8217;s post</a> to drag objects around.<br />
Or perform &#8216;picking&#8217;, or&#8230;</p>
<p>Update:<br />
Created a little demo to visualize what I&#8217;m ranting about, check it out <a href='http://techblog.floorplanner.com/wp-content/uploads/2009/04/unprojecttest1.swf'>here</a></p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/04/29/unproject-with-useprojectionmatrix-true/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Counter feedback</title>
		<link>http://techblog.floorplanner.com/2009/03/28/counter-feedback/</link>
		<comments>http://techblog.floorplanner.com/2009/03/28/counter-feedback/#comments</comments>
		<pubDate>Sat, 28 Mar 2009 16:32:14 +0000</pubDate>
		<dc:creator>Willem van Bergen</dc:creator>
				<category><![CDATA[Collaboration]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[counter]]></category>
		<category><![CDATA[flickr]]></category>
		<category><![CDATA[Floorplanner]]></category>
		<category><![CDATA[github]]></category>
		<category><![CDATA[quality improvement]]></category>
		<category><![CDATA[request-log-analyzer]]></category>
		<category><![CDATA[web 2.0]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=561</guid>
		<description><![CDATA[
This week, request-log-analyzer obtained its 100th watcher on GitHub!
Bart and I have worked hard to make r-l-a a useful product for many people in various situations. The fact that more than 100 people are following the project&#8217;s progress and that at this moment, the gem has been download almost 200 times, shows that we are [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F03%2F28%2Fcounter-feedback%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F03%2F28%2Fcounter-feedback%2F" height="61" width="51" /></a></div><p><a style="float: right" href="http://github.com/wvanbergen/request-log-analyzer/watchers"><img class="size-full wp-image-568 alignright" style="border: 1px solid black;" title="102 request-log-analyzer watchers on Github and counting!" src="http://techblog.floorplanner.com/wp-content/uploads/2009/03/picture-2.png" alt="Request-log-analyzer watchers on Github" width="161" height="26" /></a></p>
<p>This week, <a href="http://github.com/wvanbergen/requets-log-analyzer">request-log-analyzer</a> obtained <a href="http://github.com/wvanbergen/request-log-analyzer/watchers">its 100th watcher on GitHub</a>!</p>
<p>Bart and I have worked hard to make r-l-a a useful product for many people in various situations. The fact that more than 100 people are following the project&#8217;s progress and that at this moment, <a href="http://gems.rubyforge.org/stats.html">the gem has been download almost 200 times</a>, shows that we are somewhat successful in this regard. Numbers like these, in combination with the e-mail messages we have received, motivate us to keep spending time on the project and keep improving it, even if these improvements are not directly useful for our own projects. It has grown beyond <em>scratching our own itch</em>. </p>
<p>On a related note, <a href="http://www.flickr.com/photos/willemvanbergen">my Flickr photostream</a> recently welcomed its 10,000th visitor.</p>
<p style="text-align: center; "><a href="http://www.flickr.com/photos/willemvanbergen"><img class="size-full wp-image-562 aligncenter" style="border: 1px solid black;" title="10,000 visitors on my Flickr photostream!" src="http://techblog.floorplanner.com/wp-content/uploads/2009/03/picture-1.png" alt="10,000 visitors on my Flickr photostream!" width="502" height="84" /></a></p>
<p>What started as a convenient utility to backup and share <a href="http://www.flickr.com/photos/willemvanbergen/collections/72157600336728559/">my holiday photos</a> with my family and friends, now has become somewhat of a showcase of <a href="http://www.flickr.com/photos/willemvanbergen/sets/72157601618255001/">what I</a> <a href="http://www.flickr.com/photos/willemvanbergen/sets/72157594253547759/">am about</a> and <a href="http://www.flickr.com/photos/willemvanbergen/collections/72157607936471141/">what I</a> <a href="http://www.flickr.com/photos/willemvanbergen/sets/72157613466104360/">am up to</a>. I would not consider myself a &#8220;professional&#8221; photographer and I am not an active member of the Flickr community, but still I get feedback on my photographs by visitors, because their visits increase the view counters of my photos.</p>
<p>These counters have really motivated me to make more of an effort when I put photos on Flickr. I started by adding titles, descriptions and tags, so that my photos are easier to find. I also became much more critical of the pictures I upload to Flickr: new uploads have to add something significant to my collection. Analyzing why some pictures got more attention than others made me a better photographer, although there still is a lot of room for improvement. <img src='http://techblog.floorplanner.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  </p>
<h3>Ignite the lazyweb, kick-start a quality improvement loop</h3>
<p>What interests me in these examples is that simple counters like watchers on GitHub or views on Flickr can be valuable feedback and can motivate people to put in effort. The end result is quality improvement: write better software, make better pictures, etc.. Even an inherently lazy person like me can get motivated to keep putting in effort and to keep improving myself, because of such a simple feedback loop! <img src='http://techblog.floorplanner.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>Additionally, it creates a dependence on the website in question. I look at my Flickr stats page every day, and I am subscribed to my activity feed on GitHub to get notified when new people start watching my projects. I now<em> </em>simply have to publish tools I write on GitHub to boost its quality, immediately and in the long run. And I have to upload pictures to Flickr as it is vital for my photography learning curve.</p>
<p>I guess I finally figured out what Web 2.0 is all about! <img src='http://techblog.floorplanner.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  Can we use a similar technique on Floorplanner to boost the quality of the designs our visitors make?</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/03/28/counter-feedback/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Write JAVA, publish SWF</title>
		<link>http://techblog.floorplanner.com/2009/02/15/write-java-publish-swf/</link>
		<comments>http://techblog.floorplanner.com/2009/02/15/write-java-publish-swf/#comments</comments>
		<pubDate>Sun, 15 Feb 2009 20:27:16 +0000</pubDate>
		<dc:creator>Gert-Jan</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Flash+ActionScript]]></category>
		<category><![CDATA[eclipse]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[flex builder]]></category>
		<category><![CDATA[java]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=474</guid>
		<description><![CDATA[Ted Patrick (Senior Manager Developer Communities at Adobe Systems) has posted an interesting article about the first milestone of the Eclipse E4 project.
It seems that the SWT project has added compilation support for SWF from JAVA. Write your app in JAVA and publish as SWF to Flash Player. The cool part is that you get full [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F02%2F15%2Fwrite-java-publish-swf%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F02%2F15%2Fwrite-java-publish-swf%2F" height="61" width="51" /></a></div><p>Ted Patrick (Senior Manager Developer Communities at Adobe Systems) has posted <a title="Write JAVA, publish SWF" href="http://onflash.org/ted/2009/02/publish-swt-to-flash-player.php" target="_blank">an interesting article</a> about the first milestone of the <a title="Ecilpse E4 project" href="http://download.eclipse.org/e4/downloads/drops/S-0.9M1-200902061045/e4-news-M1.html" target="_blank">Eclipse E4 project</a>.</p>
<blockquote><p><em>It seems that the SWT project has added compilation support for SWF from JAVA. Write your app in JAVA and publish as SWF to Flash Player. The cool part is that you get full JAVA development in Eclipse with all debugging and tooling but you get a SWF file on publish. </em></p></blockquote>
<p>We&#8217;re using Flex Builder for our Flex/AS3 stuff, but this could become a very interesting option since the JAVA development in Eclipse is a lot more sophisticated than Flex Builder at the moment.</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/02/15/write-java-publish-swf/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Working with git branches</title>
		<link>http://techblog.floorplanner.com/2008/12/14/working-with-git-branches/</link>
		<comments>http://techblog.floorplanner.com/2008/12/14/working-with-git-branches/#comments</comments>
		<pubDate>Sun, 14 Dec 2008 17:33:16 +0000</pubDate>
		<dc:creator>Willem van Bergen</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[bash colors]]></category>
		<category><![CDATA[branches]]></category>
		<category><![CDATA[checkout]]></category>
		<category><![CDATA[git]]></category>
		<category><![CDATA[origin]]></category>
		<category><![CDATA[pull]]></category>
		<category><![CDATA[push]]></category>
		<category><![CDATA[remote]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=321</guid>
		<description><![CDATA[Because Jaap finally convinced Gert-Jan, we have moved to the Git version control system for the main Floorplanner repository. Now we can use branches for different functionality far more easily. As an easy reminder to some common Git tasks I will need regularly, I have written down some Git recipes. This is basically meant for [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F12%2F14%2Fworking-with-git-branches%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F12%2F14%2Fworking-with-git-branches%2F" height="61" width="51" /></a></div><p>Because <a href="http://techblog.floorplanner.com/2008/12/09/git-vs-svn-for-bosses">Jaap finally convinced Gert-Jan</a>, we have moved to the Git version control system for the main Floorplanner repository. Now we can use branches for different functionality far more easily. As an easy reminder to some common Git tasks I will need regularly, I have written down some Git recipes. This is basically meant for me and my fellow developers, but maybe it can help you as well. Suggestions to improve my workflow are welcome!</p>
<h3>Displaying the current branch in your prompt</h3>
<p>Because I will be using branches more regularly now, it is nice to know what branch I am currently working in. <code>git branch</code> will provide this information, but it can be more direct by including the current branch in your terminal prompt. </p>
<p>To display the current git branch in my terminal prompt, I have added <a href="http://gist.github.com/5017"> the following</a> to my Bash configuration file <code>~/.profile</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="sh" style="font-family: Monaco,monospace;">parse_git_branch() {
  git branch 2&gt; /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ \[\1\]/'
}
&nbsp;
PS1='\[\033[01;37m\]\w\[\033[00;35m\]$(parse_git_branch)\[\033[00m\] \$ '</pre></div></div>

<p>I use a black, semi-transparent terminal with white text, and pink branch names. <a href="http://www.systhread.net/texts/200703bashish.php">Change the colors</a> to your own liking!</p>
<p><img src="http://techblog.floorplanner.com/wp-content/uploads/2008/12/picture-4.png" alt="Git - branch in terminal" title="Git - branch in terminal" width="574" height="395" class="alignnone size-full wp-image-349" /></p>
<h3>Working on a remote branch that is not available locally yet</h3>
<p>If you want to help out on a branch that somebody else started and has pushed it to the remote repository, you can checkout this branch and make it &#8220;track&#8221; the remote branch.</p>

<div class="wp_syntax"><div class="code"><pre class="shell" style="font-family: Monaco,monospace;">$ git checkout -b newbranch origin/newbranch</pre></div></div>

<p>In this example, <strong>origin/newbranch</strong> is the branch in the remote repository. Locally, this branch will be called <strong >newbranch</strong >. A simple <code>git pull</code> will update my branch with the latest changes from the remote branch later on, <code>git push</code> will send my changes to the remote server. </p>
<p><img src="http://techblog.floorplanner.com/wp-content/uploads/2008/12/picture-1.png" alt="Git - track remote branch" title="Git - track remote branch" width="574" height="395" class="alignnone size-full wp-image-336" /></p>
<h3>Creating a new branch and pushing it to the remote server</h3>
<p>Sometimes I want to start a new branch myself if I want to work on a new feature or on disruptive refactoring of the main codebase.</p>

<div class="wp_syntax"><div class="code"><pre class="sh" style="font-family: Monaco,monospace;">$ git checkout -b feature</pre></div></div>

<p>The <em>feature</em> branch is now available locally. After some time, I want to share my current changes in this branch with other developers. I should make the branch available in the remote repository so other can access it like I described above.</p>

<div class="wp_syntax"><div class="code"><pre class="sh" style="font-family: Monaco,monospace;">$ git commit -m &quot;Added initial version of %feature%&quot;
$ git push origin feature</pre></div></div>

<p><img src="http://techblog.floorplanner.com/wp-content/uploads/2008/12/picture-2.png" alt="Git - push local branch to remote" title="Git - push local branch to remote" width="574" height="395" class="alignnone size-full wp-image-341" /></p>
<p>The feature branch will now be available to other developers as well. Note that the local <em>feature</em>-branch is <strong>not</strong> tracking the remote branch of the same name. This can be enabled by <a href="http://graysky.org/2008/12/git-branch-auto-tracking/">changing the configuration</a> of the repository.</p>
<h3>Merging a branch</h3>
<p>After work is completed on my <em>feature</em>-branch and it is tested thoroughly, I want to merge the branch with the master branch of the project. To make sure the merge with the master branch is seamless and all possible merge conflicts are handled beforehand, we first run <code>git rebase</code>. This ensures that the changes in the <em>feature</em> branch are relative to the latest commit to the master branch and can therefore be applied by a &#8220;fast forward&#8221;. It is best to run <code>git rebase</code> from time time to time while you are developing in the <em>feature</em> branch to make sure your work does not divert to much from the main development in the master branch.</p>

<div class="wp_syntax"><div class="code"><pre class="sh" style="font-family: Monaco,monospace;">  # make sure that the current branch is seamlessly
  # mergeable with the master branch
$ git rebase master
  # switch to the master branch
$ git checkout master
  # now, merge the feature branch
$ git merge feature
  # publish the merge to the remote server
$ git push origin master</pre></div></div>

<p><img src="http://techblog.floorplanner.com/wp-content/uploads/2008/12/picture-3.png" alt="Git - merge branch" title="Git - merge branch" width="574" height="395" class="alignnone size-full wp-image-343" /></p>
<p>I can now delete the local and remote feature branch, as the changes have been incorporated in the master branch:</p>

<div class="wp_syntax"><div class="code"><pre class="sh" style="font-family: Monaco,monospace;">$ git branch -d feature
$ git branch -d -r origin/feature</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2008/12/14/working-with-git-branches/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Rails 2.2 support for request-log-analyzer</title>
		<link>http://techblog.floorplanner.com/2008/12/11/rails-22-support-for-request-log-analyzer/</link>
		<comments>http://techblog.floorplanner.com/2008/12/11/rails-22-support-for-request-log-analyzer/#comments</comments>
		<pubDate>Thu, 11 Dec 2008 12:03:31 +0000</pubDate>
		<dc:creator>Willem van Bergen</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[log files]]></category>
		<category><![CDATA[merb]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[request-log-analyzer]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=316</guid>
		<description><![CDATA[I just released version 0.2.0 of request-log-analyzer, our tool to analyze request log files that are generated by Rails and Merb for performance tweaking. This new version supports the new log format of Rails 2.2, which has changed slightly.
An updated gem should be available any minute now. Run sudo gem update to upgrade the newest [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F12%2F11%2Frails-22-support-for-request-log-analyzer%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F12%2F11%2Frails-22-support-for-request-log-analyzer%2F" height="61" width="51" /></a></div><p>I just released version 0.2.0 of <a href="http://github.com/wvanbergen/request-log-analyzer">request-log-analyzer</a>, our tool to analyze request log files that are generated by Rails and Merb for performance tweaking. This new version supports the new log format of Rails 2.2, which has changed slightly.</p>
<p>An updated gem should be available any minute now. Run <code>sudo gem update</code> to upgrade the newest version.</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2008/12/11/rails-22-support-for-request-log-analyzer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Papervision3D wins Innovation Of The Year award</title>
		<link>http://techblog.floorplanner.com/2008/12/09/papervision3d-wins-innovation-of-the-year-award/</link>
		<comments>http://techblog.floorplanner.com/2008/12/09/papervision3d-wins-innovation-of-the-year-award/#comments</comments>
		<pubDate>Tue, 09 Dec 2008 20:15:17 +0000</pubDate>
		<dc:creator>Tim</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Flash+ActionScript]]></category>
		<category><![CDATA[Floorplanner]]></category>
		<category><![CDATA[Papervision3D]]></category>
		<category><![CDATA[award]]></category>
		<category><![CDATA[papervisi]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=309</guid>
		<description><![CDATA[Papervision3D has won the INNOVATION OF THE YEAR in this year’s .net Awards!
Other nominees included Google Android and App Engine, Microsoft Telescope, Open Social and Silverlight 2. I&#8217;m very proud to be part of the Papervision3D team!

Read more on the Papervision3D blog.
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F12%2F09%2Fpapervision3d-wins-innovation-of-the-year-award%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F12%2F09%2Fpapervision3d-wins-innovation-of-the-year-award%2F" height="61" width="51" /></a></div><p>Papervision3D has won the INNOVATION OF THE YEAR in this year’s <a href="http://www.thenetawards.com/">.net Awards</a>!<br />
Other nominees included Google Android and App Engine, Microsoft Telescope, Open Social and Silverlight 2. I&#8217;m very proud to be part of the Papervision3D team!</p>
<p><img title="dotnet innovation award 2008" src="http://papervision3d.files.wordpress.com/2008/12/web_rgb_logo2.gif?w=240&amp;h=198" alt="dotnet innovation award 2008" width="240" height="198" /></p>
<p>Read more on the <a href="http://blog.papervision3d.org/2008/12/09/innovation-of-the-year/">Papervision3D blog</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2008/12/09/papervision3d-wins-innovation-of-the-year-award/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Printing &amp; Big Bitmaps</title>
		<link>http://techblog.floorplanner.com/2008/10/22/printing-and-big-bitmaps/</link>
		<comments>http://techblog.floorplanner.com/2008/10/22/printing-and-big-bitmaps/#comments</comments>
		<pubDate>Wed, 22 Oct 2008 20:28:27 +0000</pubDate>
		<dc:creator>Rinde van Lon</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Flash+ActionScript]]></category>
		<category><![CDATA[Floorplanner]]></category>
		<category><![CDATA[bitmapdata]]></category>
		<category><![CDATA[printing]]></category>
		<category><![CDATA[printjob]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=219</guid>
		<description><![CDATA[Last week I started working on a new version of the print functionality in Floorplanner. The problem with the previous version was that it didn&#8217;t print shadows, it was impossible to rotate the plan to landscape and textures didn&#8217;t look very well. Overall it produced a very mediocre image compared to the visual quality of [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F10%2F22%2Fprinting-and-big-bitmaps%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2008%2F10%2F22%2Fprinting-and-big-bitmaps%2F" height="61" width="51" /></a></div><p>Last week I started working on a new version of the print functionality in Floorplanner. The problem with the previous version was that it didn&#8217;t print shadows, it was impossible to rotate the plan to landscape and textures didn&#8217;t look very well. Overall it produced a very mediocre image compared to the visual quality of a plan on the screen. As can be seen below:</p>
<div id="attachment_223" class="wp-caption alignleft" style="width: 221px"><a href="http://techblog.floorplanner.com/wp-content/uploads/2008/10/huidig1.png" target="_blank"><img class="size-medium wp-image-223" style="border: 1px solid black;" title="Old print output" src="http://techblog.floorplanner.com/wp-content/uploads/2008/10/huidig1-211x300.png" alt="Old print output" width="211" height="300" /></a><p class="wp-caption-text">Old print output</p></div>
<p>For printing we use the <a href="http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00002065.html" target="_blank">AS2 PrintJob class</a>, which works really easy, with a small disadvantage: <em>it doesn&#8217;t print Floorplans properly</em>. I tried all kinds of settings for this class, with as input just a MovieClip with a drawing of the plan on it. I tried setting the printAsBitmap to true and false, both giving the exact same result. So although being stuck with it, the printAsBitmap boolean inspired me to investigate the Bitmap thing. We already had an image export utility, which produces images of a Floorplan with the same quality as it is shown in the FlashPlayer. The funny thing is that when I printed this exported image, the print quality was really good, at least a lot better than our own printing functionality. So for some reason, even if I used the printAsBitmap functionality, it still didn&#8217;t produce the same quality as using a real bitmap.<br />
Of course we could have stopped here and just tell the users of Floorplanner to print the exported image. But since we are Floorplanner, we didn&#8217;t want to introduce another step requiring user action in the printing process, after all, we are the &#8220;easiest way&#8221; <img src='http://techblog.floorplanner.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> .<br />
So I decided to use the same BitmapData created for the image export as basis for the printing. The first results where rather disappointing, I attached the created BitmapData to a MovieClip which in turn was given to the PrintJob. The produced print was of really low quality, you could easily see pixels all over the place. I tried using more pixels but now I bumped into the pixel limit of BitmapData (2880&#215;2880 pixels). To work around this I invented the BigBitmapData class, this is a wrapper class that mimics the functionality of the BitmapData class, but which doesn&#8217;t have an upper limit of the number of pixels which can be used. When an instance of BitBitmapData is created which is bigger than 2880 by 2880, it creates additional BitmapDatas to store the additional pixels needed. So in fact the BigBitmapData internally stores an two dimensional array of BitmapDatas to bypass the pixel limit.<br />
So with this new class I was able to scale up the created image to unprecedented sizes. I did a lot of printing experiments with scaling of the input, I tried scaling settings from 2 times to more than 10 times! This huge bitmap was attached to a MovieClip which in turn had to be scaled to fit on one single page of the printer. These values did give a better result, but still not good enough. It turned out that I had to take the <a href="http://en.wikipedia.org/wiki/Dots_per_inch" target="_blank">DPI</a> of the printer into account. The optimal scale factor turned out to be (1 / 72) * 300. The 72 is the DPI of the screen, and the 300 is the DPI of the printer. Furthermore a &#8216;point&#8217; (print unit of measurement) is 1/72 inch, while the size of a pixel (screen unit of measurement) is dependent on the resolution of the screen.<br />
So what this method actually does is creating a big image (which is resized to the paper contents) with enough quality to be printable on a 300 DPI printer.</p>
<div id="attachment_227" class="wp-caption alignleft" style="width: 310px"><a href="http://techblog.floorplanner.com/wp-content/uploads/2008/10/new.png" target="_blank"><img class="size-medium wp-image-227" style="border: 1px solid black;" title="New print output" src="http://techblog.floorplanner.com/wp-content/uploads/2008/10/new-300x231.png" alt="New print output" width="300" height="231" /></a><p class="wp-caption-text">New print output</p></div>
<p>So as you can see in the second image above, the new print looks a lot better, and since the new print uses bitmaps it is really easy to rotate it to always produce a print that tries to fill the entire paper.</p>
<p>A disadvantage of this method is that it takes quite some computational power to compute all the pixels for the bitmap that is created in memory, so as a result the FlashPlayer and sometimes even the browser freezes for a moment. Although this isn&#8217;t very good, we thought this behavior is acceptable since the quality of the prints is much better than the previous ones and the freeze time is actually really short. If you are not convinced by the images (which is understandable since the quality difference can only be seen on paper), just <a href="http://beta.floorplanner.com/demo" target="_blank">check it out</a>!</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2008/10/22/printing-and-big-bitmaps/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
