<?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>lab.joelGillman.com &#187; actionscript</title>
	<atom:link href="http://lab.joelgillman.com/archives/tag/actionscript/feed" rel="self" type="application/rss+xml" />
	<link>http://lab.joelgillman.com</link>
	<description>Sketches, Code Bites and Toys</description>
	<lastBuildDate>Thu, 05 Nov 2009 23:19:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Map Function</title>
		<link>http://lab.joelgillman.com/archives/87_map-function</link>
		<comments>http://lab.joelgillman.com/archives/87_map-function#comments</comments>
		<pubDate>Mon, 29 Sep 2008 22:39:41 +0000</pubDate>
		<dc:creator>joel gillman</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[map]]></category>
		<category><![CDATA[normalize]]></category>
		<category><![CDATA[processing]]></category>

		<guid isPermaLink="false">http://lab.joelgillman.com/?p=87</guid>
		<description><![CDATA[If you&#8217;ve ever used Processing you&#8217;ve probably used the &#8216;map&#8217; function.  From the Processing Reference section it reads: &#8220;Re-maps a number from one range to another.&#8221;
Unfortunately the function doesn&#8217;t exist in Flash, so I rewrote it.  Why is this function useful?  Lets say your mouse can move within the bounds of your [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;ve ever used <a href="http://www.processing.org/">Processing</a> you&#8217;ve probably used the &#8216;map&#8217; function.  From the Processing Reference section it <a href="http://processing.org/reference/map_.html">reads</a>: &#8220;Re-maps a number from one range to another.&#8221;</p>
<p><span id="more-87"></span>Unfortunately the function doesn&#8217;t exist in Flash, so I rewrote it.  Why is this function useful?  Lets say your mouse can move within the bounds of your stage from 0 to 550 pixels along its x-axis.  You want a box to move back and forth from 100 to 200 pixels according to the position of the mouse.  So when your mouse is halfway across the stage your box should be halfway between 100 and 200 pixels.  You would simply use:</p>
<div class="codecolorer-container actionscript3 " style="overflow:auto;white-space:nowrap;width:435px"><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace">myBox.<span class="kw7">x</span> = <span class="kw7">map</span><span class="br0">&#40;</span><span class="kw7">mouseX</span>, <span class="nu0">0</span>, <span class="nu0">550</span>, <span class="nu0">100</span>, <span class="nu0">200</span><span class="br0">&#41;</span>;</div></div>
<p>Easy as that!</p>
<p>Usage:<br />
map(value, low1, high1, low2, high2);<br />
<em>low2 and high2 default to 0 and 1, respectively so you don&#8217;t have to put them in if you just want to normalize your value.</em></p>
<div class="codecolorer-container actionscript3 " style="overflow:auto;white-space:nowrap;width:435px"><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw3">function</span> <span class="kw7">map</span><span class="br0">&#40;</span><span class="kw7">value</span><span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;low1<span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;high1<span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;low2<span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a> = <span class="nu0">0</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;high2<span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a> = <span class="nu0">1</span><span class="br0">&#41;</span><span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="co1">//if the value and the 1st range low are equal to</span><br />
&nbsp; &nbsp; <span class="co1">// the new value must be low2</span><br />
&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw7">value</span> == low1<span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> low2;<br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">//normalize both sets to a 0-? range</span><br />
&nbsp; &nbsp; <span class="kw2">var</span> range1 = high1 <span class="sy0">-</span> low1;<br />
&nbsp; &nbsp; <span class="kw2">var</span> range2 = high2 <span class="sy0">-</span> low2;<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">//normalize the value to the new normalized range</span><br />
&nbsp; &nbsp; <span class="kw2">var</span> result = <span class="kw7">value</span> <span class="sy0">-</span> low1;<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">//define the range as a percentage (0.0 to 1.0)</span><br />
&nbsp; &nbsp; <span class="kw2">var</span> ratio = result <span class="sy0">/</span> range1;<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">//find the value in the new normalized-range</span><br />
&nbsp; &nbsp; result = ratio <span class="sy0">*</span> range2;<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">//un-normalize the value in the new range</span><br />
&nbsp; &nbsp; result <span class="sy0">+</span>= low2;<br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw1">return</span> result;<br />
<span class="br0">&#125;</span></div></div>
<p>And super compressed (less readable, less space, works the same):</p>
<div class="codecolorer-container actionscript3 " style="overflow:auto;white-space:nowrap;width:435px"><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw3">function</span> <span class="kw7">map</span><span class="br0">&#40;</span>v<span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a>, a<span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a>, <span class="kw7">b</span><span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a>, <span class="kw7">x</span><span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a> = <span class="nu0">0</span>, <span class="kw7">y</span><span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a> = <span class="nu0">1</span><span class="br0">&#41;</span><span class="sy0">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Number</span></a> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="kw1">return</span> <span class="br0">&#40;</span>v == a<span class="br0">&#41;</span> <span class="sy0">?</span> <span class="kw7">x</span> <span class="sy0">:</span> <span class="br0">&#40;</span>v <span class="sy0">-</span> a<span class="br0">&#41;</span> <span class="sy0">*</span> <span class="br0">&#40;</span><span class="kw7">y</span> <span class="sy0">-</span> <span class="kw7">x</span><span class="br0">&#41;</span> <span class="sy0">/</span> <span class="br0">&#40;</span><span class="kw7">b</span> <span class="sy0">-</span> a<span class="br0">&#41;</span> <span class="sy0">+</span> <span class="kw7">x</span>;<br />
<span class="br0">&#125;</span></div></div>
]]></content:encoded>
			<wfw:commentRss>http://lab.joelgillman.com/archives/87_map-function/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
