<?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>Electrons libres</title>
	<atom:link href="http://electronslibres.ca/feed/" rel="self" type="application/rss+xml" />
	<link>http://electronslibres.ca</link>
	<description>Roaming inside my mind</description>
	<lastBuildDate>Sun, 12 Jun 2011 15:46:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>The evolution of Skype from the conception to the acquisition by Microsoft</title>
		<link>http://electronslibres.ca/2011/05/the-evolution-of-skype-from-the-conception-to-the-acquisition-by-microsoft/</link>
		<comments>http://electronslibres.ca/2011/05/the-evolution-of-skype-from-the-conception-to-the-acquisition-by-microsoft/#comments</comments>
		<pubDate>Thu, 19 May 2011 13:47:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Infographic]]></category>
		<category><![CDATA[acquisition]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Skype]]></category>
		<category><![CDATA[transaction]]></category>
		<category><![CDATA[value]]></category>

		<guid isPermaLink="false">http://electronslibres.ca/?p=105</guid>
		<description><![CDATA[The clever guys at  Credit Score Blog made the research and design on this brilliant infographic for Focus.com about the pros and cons of Skype&#8217;s acquisition by Microsoft last Week. There has been lost of posts about the strategy behind Microsoft&#8217;s choice, and the value of the transaction. This infographic presents an overview of the evolution of Skype, features [...]]]></description>
			<content:encoded><![CDATA[<p>The clever guys at  <a href="http://www.creditscore.net/" target="_blank">Credit Score Blog</a> made the research and design on this brilliant infographic for <a href="http://www.focus.com/" target="_blank">Focus.com</a> about the pros and cons of Skype&#8217;s acquisition by Microsoft last Week. There has been lost of posts about the strategy behind Microsoft&#8217;s choice, and the value of the transaction. This infographic presents an overview of the evolution of Skype, features added and owners through the years. It shows some financial figures as well as how Skype is positioned inside Microsoft&#8217;s Galaxy and where it stands from a competitor&#8217;s point of view.</p>
<p><a href="http://electronslibres.ca/wp-content/uploads/2011/05/Skype-From-Conception-to-Acquisition-Infographic.png"><img class="alignnone size-full wp-image-106" title="Skype: From Conception to Acquisition (Infographic)" src="http://electronslibres.ca/wp-content/uploads/2011/05/Skype-From-Conception-to-Acquisition-Infographic.png" alt="Skype: From Conception to Acquisition (Infographic)" width="600" height="1840" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2011/05/the-evolution-of-skype-from-the-conception-to-the-acquisition-by-microsoft/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Random 3D Subway Map</title>
		<link>http://electronslibres.ca/2011/05/subway-map/</link>
		<comments>http://electronslibres.ca/2011/05/subway-map/#comments</comments>
		<pubDate>Sat, 07 May 2011 01:20:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Experiments]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[map generation]]></category>
		<category><![CDATA[random]]></category>

		<guid isPermaLink="false">http://electronslibres.ca/?p=94</guid>
		<description><![CDATA[I have always been fond of subway map. love the graphic quality of it! I thought I would give it a quick try in Flash and in 3D. This experiment draws a random subway map every time you refresh the page.]]></description>
			<content:encoded><![CDATA[<p><a href="http://electronslibres.ca/wp-content/uploads/2011/05/MetroMap3D.swf"><img src="http://electronslibres.ca/wp-content/uploads/2011/05/subwayPlan3D.jpg" alt="" title="click on the picture to launch the 3D subway map experiment" width="560" height="249" class="alignnone size-full wp-image-95" /></a></p>
<p>I have always been fond of subway map. love the graphic quality of it!<br />
I thought I would give it a quick try in Flash and in 3D. This experiment draws a random subway map every time you refresh the page.</p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2011/05/subway-map/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Spheres on a plane by Dead Roman</title>
		<link>http://electronslibres.ca/2011/05/spheres-on-a-plane-by-dead-roman/</link>
		<comments>http://electronslibres.ca/2011/05/spheres-on-a-plane-by-dead-roman/#comments</comments>
		<pubDate>Fri, 06 May 2011 10:36:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Art]]></category>

		<guid isPermaLink="false">http://electronslibres.ca/?p=67</guid>
		<description><![CDATA[&#8220;Spheres on a plane&#8221; by Dead Roman &#8211; a real-time motion graphics experiment. It placed 4th in the annual demoscene competition at The Gathering 2011 in Norway. Making-of: blog.subsquare.com/​behind-the-spheres-on-the-plane]]></description>
			<content:encoded><![CDATA[<p><object width="560" height="341"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=22878274&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=22878274&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="560" height="341"></embed></object></p>
<p>&#8220;Spheres on a plane&#8221; by Dead Roman &#8211; a real-time motion graphics experiment. It placed 4th in the annual demoscene competition at The Gathering 2011 in Norway.</p>
<p>Making-of: <a rel="nofollow" href="http://blog.subsquare.com/behind-the-spheres-on-the-plane" target="_blank">blog.subsquare.com/​behind-the-spheres-on-the-plane</a></p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2011/05/spheres-on-a-plane-by-dead-roman/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>particles at YCAM an art installation by  Daito Manabe + Motoi Ishibashi</title>
		<link>http://electronslibres.ca/2011/05/particles-at-ycam-an-art-installation-by-daito-manabe-motoi-ishibashi/</link>
		<comments>http://electronslibres.ca/2011/05/particles-at-ycam-an-art-installation-by-daito-manabe-motoi-ishibashi/#comments</comments>
		<pubDate>Fri, 06 May 2011 10:15:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Art]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[art]]></category>
		<category><![CDATA[balls]]></category>
		<category><![CDATA[dots]]></category>
		<category><![CDATA[light]]></category>
		<category><![CDATA[live]]></category>

		<guid isPermaLink="false">http://electronslibres.ca/?p=61</guid>
		<description><![CDATA[This is an art installation which is able to create a visionary beautiful dots pattern of blinking innumerable illuminations ﬂoating in all directions on the air. The number of balls with a built-in LED, pass through one after another on the rail “8-spiral shape.” We see this phenomenon like “the light particle ﬂoat around” because the balls radiate in [...]]]></description>
			<content:encoded><![CDATA[<p><object style="height: 341px; width: 560px;" width="560" height="341"><param name="movie" value="http://www.youtube.com/v/gvUpkknryaY?version=3" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed type="application/x-shockwave-flash" width="560" height="341" src="http://www.youtube.com/v/gvUpkknryaY?version=3" allowfullscreen="true" allowscriptaccess="always"></embed></object></p>
<p>This is an art installation which is able to create a visionary beautiful dots pattern of blinking innumerable illuminations ﬂoating in all directions on the air.</p>
<p>The number of balls with a built-in LED, pass through one after another on the rail “8-spiral shape.” We see this phenomenon like “the light particle ﬂoat around” because the balls radiate in various timing.</p>
<p>The position of each ball is determined via total of 17 control points on the rail. Every time a ball passes through one of them, the respective ball’ s positional information is transmitted via a built-in infrared sensor. During the time the ball travels between one control points to the next, this position is calculated based on its average speed.</p>
<p>The data for regulating the balls’ luminescence are divided by the control point segments and are switched every time a ball passes on a control point.The audiences can select a shape from several patterns ﬂoating in aerial space using an interface of the display.The activation of the virtual balls on the screen are determined by the timing which a ball moving on the rail passes through a certain check point on the rail and the speed which is calculated by using average speed values.</p>
<p>The sound is generated from the ball positions and the information of LED ﬂash pattern and is played through 8ch speakers.The board inside the ball is an Arduino compatible board based on the original design from Arduino Fio v2.1.</p>
<p>more info : <a title="daito manabe website" href="http://daito.ws/">Daito Manabe</a></p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2011/05/particles-at-ycam-an-art-installation-by-daito-manabe-motoi-ishibashi/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Still recovering</title>
		<link>http://electronslibres.ca/2011/05/still-recovering/</link>
		<comments>http://electronslibres.ca/2011/05/still-recovering/#comments</comments>
		<pubDate>Fri, 06 May 2011 00:07:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://electronslibres.ca/?p=50</guid>
		<description><![CDATA[My Blog got hacked last week, and I am still recovering my files and experiments. Had not backed up my content properly, lesson learmed the hard way! So whoever is passing by, I am currently re-uploading my content, feel free to come back a little later for a full visit ;D &#160;]]></description>
			<content:encoded><![CDATA[<p>My Blog got hacked last week, and I am still recovering my files and experiments. Had not backed up my content properly, lesson learmed the hard way! So whoever is passing by, I am currently re-uploading my content, feel free to come back a little later for a full visit ;D</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2011/05/still-recovering/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The State of Mobile Development 2011</title>
		<link>http://electronslibres.ca/2011/05/the-state-of-mobile-development-2011/</link>
		<comments>http://electronslibres.ca/2011/05/the-state-of-mobile-development-2011/#comments</comments>
		<pubDate>Thu, 05 May 2011 10:46:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Infographic]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[evolution]]></category>
		<category><![CDATA[infographic]]></category>
		<category><![CDATA[mobile development]]></category>
		<category><![CDATA[statistics]]></category>
		<category><![CDATA[trends]]></category>

		<guid isPermaLink="false">http://electronslibres.ca/?p=34</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<div id="attachment_35" class="wp-caption alignleft" style="width: 534px"><a href="http://electronslibres.ca/wp-content/uploads/2011/05/sotmw2011infographic.png"><img class="size-full wp-image-35 " title="sotmw2011infographic" src="http://electronslibres.ca/wp-content/uploads/2011/05/sotmw2011infographic.png" alt="" width="524" height="823" /></a><p class="wp-caption-text">infographic showing the state of mobile web development in the first quarter of 2011</p></div>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2011/05/the-state-of-mobile-development-2011/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lilac Wine (a drawing experiment)</title>
		<link>http://electronslibres.ca/2010/05/lilac-wine-a-drawing-experiment/</link>
		<comments>http://electronslibres.ca/2010/05/lilac-wine-a-drawing-experiment/#comments</comments>
		<pubDate>Fri, 21 May 2010 14:32:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Experiments]]></category>
		<category><![CDATA[Drawing API]]></category>

		<guid isPermaLink="false">http://localhost/electronslibres/?p=14</guid>
		<description><![CDATA[I really enjoyed Grant Skinner&#8217;s drawing of a tree, and I thought, I could give it a try as well. I got some help with Duarte Peixinho&#8217;s experiment you can find on the wonderful website. I tweaked many of his variables and added a few things, like stopping the Listeners when the tree is drawn. So here [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_53" class="wp-caption alignnone" style="width: 568px"><a href="http://electronslibres.ca/wp-content/uploads/2010/05/LilaTree.swf"><img class="size-full wp-image-53   " title="click on the picture to launch the flash experiment" src="http://electronslibres.ca/wp-content/uploads/2010/05/lilacTree_1.jpg" alt="" width="558" height="248" /></a><p class="wp-caption-text">Dynamically drawing a random Lilac Tree</p></div>
<p><a href="http://electronslibres.ca/wp-content/uploads/2010/05/lilacTree_1.jpg"></a>I really enjoyed Grant Skinner&#8217;s <a href="http://www.gskinner.com/blog/archives/2008/01/elm_tree_branch.html">drawing of a tree</a>, and I thought, I could give it a try as well. I got some help with Duarte Peixinho&#8217;s experiment you can find on the <a href="http://wonderfl.net/code/85a50f39aff12da780785ed29b18feff09cc6aec">wonderful </a>website. I tweaked many of his variables and added a few things, like stopping the Listeners when the tree is drawn. So here it is !</p>
<p>Not fully optimized so I won&#8217;t release the code right now, but I think the result is worth this post ! click on the movie to refresh the tree</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2010/05/lilac-wine-a-drawing-experiment/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Great Balls Of Fire, a particle experiment with papervision 3D</title>
		<link>http://electronslibres.ca/2010/04/great-balls-of-fire-a-particle-experiment-with-papervision-3d/</link>
		<comments>http://electronslibres.ca/2010/04/great-balls-of-fire-a-particle-experiment-with-papervision-3d/#comments</comments>
		<pubDate>Sun, 04 Apr 2010 14:26:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[balls]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[papervision]]></category>

		<guid isPermaLink="false">http://localhost/electronslibres/?p=7</guid>
		<description><![CDATA[This is my creative response to the great post &#8220;Stop trying to make the Internet boring!&#8221; by Andreas about all the crap on section 3.3.1 on the apple developper&#8217;s user agreement. Watch out coz it&#8217;s pretty CPU intensive (more than 3000 particles on this one, updated on the fly) Hope you enjoy it , and [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_26" class="wp-caption alignnone" style="width: 568px"><a href="http://electronslibres.ca/wp-content/uploads/2010/04/GboF.swf"><img class="size-full wp-image-47" title="greatBallsOfFire" src="http://electronslibres.ca/wp-content/uploads/2010/04/greatBallsOfFire2.jpg" alt="" width="558" height="248" /></a><br />
<p class="wp-caption-text">colored spheres in a 3D environment</p></div>
<p>This is my creative response to the great post &#8220;<a href="http://www.doomsday.no/esn/2010/04/stop-trying-to-make-the-internet-boring/">Stop trying to make the Internet boring!</a>&#8221; by Andreas about all the crap on section 3.3.1 on the apple developper&#8217;s user agreement.<br />
Watch out coz it&#8217;s pretty CPU intensive (more than 3000 particles on this one, updated on the fly)<br />
Hope you enjoy it , and that it may inspire someone else ! You can also drag the stage if you want to explore different angles.<br />
All images are under the copyright of Tina Persson, an amazing contemporary artist, which is another great source of inspiration ! Check out her website at<a href="http://www.stinapersson.com/"> www.stinapersson.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2010/04/great-balls-of-fire-a-particle-experiment-with-papervision-3d/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tips’n&#8217;Tricks</title>
		<link>http://electronslibres.ca/2010/03/tips%e2%80%99ntricks/</link>
		<comments>http://electronslibres.ca/2010/03/tips%e2%80%99ntricks/#comments</comments>
		<pubDate>Thu, 04 Mar 2010 14:28:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Snippet]]></category>

		<guid isPermaLink="false">http://localhost/electronslibres/?p=10</guid>
		<description><![CDATA[Here some actionscript code snippets and/or tricks I stumbled upon, or found by myself. I may use it as a reminder. &#160; / (via @zeh) //count only "drawn" frames NetStream.decodedFrames //complete frame count NetStream.info.droppedFrames Here is a snippet to force the browser&#8217;s focus when leaving fullscreen mode : stage.addEventListener(MouseEvent.CLICK,toggleFullScreen); function toggleFullScreen(event:MouseEvent):void { switch (stage.displayState) { [...]]]></description>
			<content:encoded><![CDATA[<p>Here some actionscript code snippets and/or tricks I stumbled upon, or found by myself. I may use it as a reminder.</p>
<p>&nbsp;</p>
<div>
<table>
<tbody>
<tr id="p1281">
<td id="p128code1">
<pre>/ (via @zeh)
//count only "drawn" frames
NetStream.decodedFrames  

//complete frame count
NetStream.info.droppedFrames</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Here is a snippet to force the browser&#8217;s focus when leaving fullscreen mode :</p>
<div>
<table>
<tbody>
<tr id="p1282">
<td id="p128code2">
<pre>stage.addEventListener(MouseEvent.CLICK,toggleFullScreen);

function toggleFullScreen(event:MouseEvent):void
{
	switch (stage.displayState)
	{
		case "normal" :
			stage.displayState = fullScreen";
			break; 

		case "fullScreen" : 

		default :
			stage.displayState = "normal";
			ExternalInterface.call("focus");
			break;
	}
}</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Remove all childs from a DisplayObject:</p>
<div>
<table>
<tbody>
<tr id="p1283">
<td id="p128code3">
<pre>while( myDisplayObject.numChildren ) myDisplayObject.removeChildAt(0);</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Self Removal:</p>
<div>
<table>
<tbody>
<tr id="p1284">
<td id="p128code4">
<pre>this.parent.removeChild( this );</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Retreive self index</p>
<div>
<table>
<tbody>
<tr id="p1285">
<td id="p128code5">
<pre>this.parent.getChildIndex( this );</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>String Trick:<br />
appendText() is always faster than text+= ;</p>
<p>A must Read : Thibault Imbert&#8217;s white paper on <a href="http://www.bytearray.org/?p=1363">Optimizing Mobile Content for the Adobe Flash Platform</a> which contains usefull information on optimization for mobile phones, and desktop apps as well!</p>
<p>MATHS FUNCTION INLINED VERSIONS</p>
<div>
<table>
<tbody>
<tr id="p1286">
<td id="p128code6">
<pre>// almost 8 times faster than the Math.version
// benchmark can be found here : http://www.calypso88.com/?p=539
Math.pow(i, 2);
i * i; 

Math.min(i, 50000);
(i &gt; 50000) ? 50000 : i;

Math.max(i, 50000);
(i &lt; 50000) ? 50000 : i;

Math.abs(i);
(i &lt; 0) ? -i : i ;

Math.floor(i);
int( i );

Math.ceil(i);
(i % i) ? int(i) + 1 : i;

Math.round(i);
int(i + .5);</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>OTHER BITWISE OPERATIONS</p>
<div>
<table>
<tbody>
<tr id="p1287">
<td id="p128code7">
<pre>//Fast modulo operation using bitwise AND

//If the divisor is a power of 2, the modulo (%) operation can be done with:
//modulus = numerator &amp; (divisor - 1);

x = 131 % 4;
x = 131 &amp; (4 - 1);

//Check if an integer is even/uneven using bitwise AND
isEven = (i % 2) == 0;
isEven = (i &amp; 1) == 0;

//Right bit shifting to divide by any power of two:
x = x / 2;
x = x &gt;&gt; 1;

x = x / 64;
x = x &gt;&gt; 6;

//Left bit shifting to multiply by any power of two

x = x * 2;
x = x &lt;&lt; 1;</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Using MODULO GRIDS is faster than multidimensional array</p>
<div>
<table>
<tbody>
<tr id="p1288">
<td id="p128code8">
<pre>const ROWS:int = 30;
const COLUMNS:int = 88;
const ITEMS:int = ROWS * COLUMNS;

var s:Shape ;
var i:int = 0;

for(i; i &lt; ITEMS; i++)
{
   s = new Shape();
   s.x = int(i / ROWS) * 5;
   s.y = (i % ROWS) * 5;
   s.graphics.beginFill(0x666666);
   s.graphics.drawRect(0, 0, 4, 4);

    addChild(s);
}</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2010/03/tips%e2%80%99ntricks/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>What a wonderfull world</title>
		<link>http://electronslibres.ca/2010/01/what-a-wonderfull-world/</link>
		<comments>http://electronslibres.ca/2010/01/what-a-wonderfull-world/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 14:38:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[pixel]]></category>

		<guid isPermaLink="false">http://localhost/electronslibres/?p=20</guid>
		<description><![CDATA[I was surfing on the web last week when I found a map of the world drawn with separated pixels. It was static jpeg, and I thought, hey why not draw this dynamically, and animate it on mouse over ? This my first script really using flash player 10. In fact I am using the [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://electronslibres.ca/wp-content/uploads/2010/01/pixelMap.swf"><img class="alignnone size-full wp-image-57" title="click on the picture to launch the experiment" src="http://electronslibres.ca/wp-content/uploads/2010/01/pixelMap.jpg" alt="" width="558" height="248" /></a></p>
<p><a href="http://electronslibres.ca/wp-content/uploads/2010/01/pixelMap.jpg"></a>I was surfing on the web last week when I found a map of the world drawn with separated pixels.<br />
It was static jpeg, and I thought, hey why not draw this dynamically, and animate it on mouse over ?</p>
<p>This my first script really using flash player 10. In fact I am using the vector class which is a top level class inside flash player 10. The properties and methods of a Vector object are similar — in most cases identical — to the properties and methods of an Array. In any case where you would use an Array in which all the elements have the same data type, a Vector instance is preferable. It will (and should though I did not test it) increase the speed and optimize the data you are working with.</p>
<p>I first found a map in two colours : grey and white:</p>
<p>&nbsp;</p>
<p>And here is the commented code to guide you trough all the steps:</p>
<div>
<table>
<tbody>
<tr id="p1071">
<td id="p107code1">
<pre>// output bitmapData
private var _map:BitmapData;

// vector objects = typed arrays
private var _pts:Vector.&lt;Point&gt; = new Vector.&lt;Point&gt;();
private var _origin:Vector.&lt;Point&gt; = new Vector.&lt;Point&gt;();

// width and height of the map
public static const HEIGHT:int = 272;
public static const WIDTH:int = 500;

// a reference to the lenght of our vector
private var points_nb:int;

public function PixelMap()
{
	addEventListener(Event.ADDED_TO_STAGE , _init );
}

private function _init(e:Event = null):void
{
	removeEventListener(Event.ADDED_TO_STAGE , _init );
	stage.quality = "medium";

	// create an instance of Map object embed inside the library
	var map:Map = new Map(WIDTH, HEIGHT);

	// Draw map inside temp BitmapData
	var temp:BitmapData = new BitmapData(WIDTH, HEIGHT, false, 0x0);
	temp.draw(map);

	// fill our _map bitmapData with black ,
	// dimenseions ares the size of the stage = Map size
	_map = new BitmapData(WIDTH, HEIGHT, true, 0x00000000);

	// define the step to pick the pixels
	var margin:int = 3;
	var iy:int;
	var ix:int;

	// loop inside temp BitmapData for every one out of three pixels
	// if this pixel is not white, draw one black point inside our _map instance
	for(iy = 0; iy &amp;lt; HEIGHT; iy += margin)
	{
		for(ix = 0; ix &amp;lt; WIDTH; ix += margin)
		{
			// if the color being returned is not white
			if(temp.getPixel32(ix,iy) != 0xFFFFFFFF)
			{
				//color the pixel at positions ix, iy
				// with white in the _map bitmapData instance
				_map.setPixel32(ix, iy, 0xFFFFFFFF);

				// get a random position for each white pixels
				_pts.push(new Point(Math.random() * 500,Math.random() * 272));

				// keep a reference to the original
				// position of the pixel inside a Vector instance
				_origin.push(new Point(ix,iy));
			}
		}
	}

	// a reference to the length of
	// our vector instance
	points_nb = _pts.length;

	// create a new bitmap
	// with the newly organized _map bitmapData
	addChild(new Bitmap(_map));

	// add animation
	addEventListener(Event.ENTER_FRAME , _update );
}

private function _update(e:Event):void
{
	// mouse X &amp; Y positions
	var __x:int = mouseX;
	var __y:int = mouseY;
	var i:int = 0;

	// reference to the point we are moving
	// it is drawn inside the _map bitmapData
	var p <img src='http://electronslibres.ca/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> oint;

	// reference the same point
	// with the originals x &amp; y coordinates
	var o <img src='http://electronslibres.ca/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> oint;

	// vars to store the temp x &amp; y
	var px:int;
	var py:int;
	var ox:int;
	var oy:int;
	var prox:int;

	var dify:int;
	var difx:int;

	// loop inside the vector's instance which stores all our points
	while(i &amp;lt; points_nb)
	{
		// reference the pixel we are playing with
		p = _pts[int(i)];
		o = _origin[int(i)];

		// store its x &amp; y coordinates
		px = p.x;
		py = p.y;

		// get the originals x &amp; y coordinates of the point
		ox = o.x;
		oy = o.y;

		// how far is the point from the mouse position?
		prox = Math.sqrt((__x - px) * (__x - px) + (__y - py) * (__y - py));

		// if distance between the mouse and the point
		// is less than 12 pixels
		if(prox &amp;lt;= 12)
		{
			// change this point's color to black
			_map.setPixel32(px, py, 0x000000);

			// calculate the new random coordinates for that point
			// this is where we want to move the pixel
			px = px + Math.round(Math.random() * 60 - 30);
			py = py + Math.round(Math.random() * 60 - 30);

			// color the point at the new coordinates in white
			_map.setPixel32(px, py, 0xFFFFFFFF);

			// store the new coordinates inside the point instance
			// which is stored inside the vector's instance
			p.x = px;
			p.y = py;

		}
		else
		{
			// if the point's position we are looking at
			// is different from its original one
			if(p != o)
			{
				// calculates the distance between
				// the origine and the current position
				difx = px - ox;
				dify = py - oy;

				// change the point's color to black
				_map.setPixel32(px, py, 0x000000);

				// if the point is closer than 1 pixel, then use the original coordinates,
				// else ease back the point to its inital position
				difx &amp;lt; 1 ? px = ox : px = px - difx * 0.1 ;
				dify &amp;lt; 1 ? py = oy : py = py - dify * 0.1 ;

				// color the point at the new position
				_map.setPixel32(px, py, 0xFFFFFFFF);

				// and store the new point's position inside the vector's instance
				p.x = px;
				p.y = py;
			}
		}

		// increase i to loop inside the vector's instance
		i++;
	}
}</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://electronslibres.ca/2010/01/what-a-wonderfull-world/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

