<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	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/"
		>
<channel>
	<title>Comments on: Salt &amp; Pepper Utilizing BitmapData.fillRect();</title>
	<atom:link href="http://www.lextalkington.com/blog/2010/01/salt/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lextalkington.com/blog/2010/01/salt/</link>
	<description>working on mouse lunges</description>
	<lastBuildDate>Mon, 05 Dec 2011 16:05:59 +0000</lastBuildDate>
	
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: noname</title>
		<link>http://www.lextalkington.com/blog/2010/01/salt/comment-page-1/#comment-830</link>
		<dc:creator>noname</dc:creator>
		<pubDate>Tue, 23 Aug 2011 16:56:46 +0000</pubDate>
		<guid isPermaLink="false">http://www.lextalkington.com/blog/?p=156#comment-830</guid>
		<description>awesome. very pretty!</description>
		<content:encoded><![CDATA[<p>awesome. very pretty!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Sidney de Koning</title>
		<link>http://www.lextalkington.com/blog/2010/01/salt/comment-page-1/#comment-708</link>
		<dc:creator>Sidney de Koning</dc:creator>
		<pubDate>Mon, 05 Jul 2010 11:02:24 +0000</pubDate>
		<guid isPermaLink="false">http://www.lextalkington.com/blog/?p=156#comment-708</guid>
		<description>Hi Lex, 

Very cool! Source would be nice :) Any change on posting them?

cheers, Sidney</description>
		<content:encoded><![CDATA[<p>Hi Lex, </p>
<p>Very cool! Source would be nice <img src='http://www.lextalkington.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Any change on posting them?</p>
<p>cheers, Sidney</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: FJ</title>
		<link>http://www.lextalkington.com/blog/2010/01/salt/comment-page-1/#comment-707</link>
		<dc:creator>FJ</dc:creator>
		<pubDate>Tue, 15 Jun 2010 10:24:09 +0000</pubDate>
		<guid isPermaLink="false">http://www.lextalkington.com/blog/?p=156#comment-707</guid>
		<description>Nice idea!!

But what I&#039;m most interesting in, is in the second example.
I would like to be able to create some particles effects like that one or even be able to generate some visuals like in your other blog entry (&quot;Generative Visuals&quot;).
Is there any possibility to have a look to that code or to be pointed to some tutorials? ;)

Thanks.</description>
		<content:encoded><![CDATA[<p>Nice idea!!</p>
<p>But what I&#8217;m most interesting in, is in the second example.<br />
I would like to be able to create some particles effects like that one or even be able to generate some visuals like in your other blog entry (&#8220;Generative Visuals&#8221;).<br />
Is there any possibility to have a look to that code or to be pointed to some tutorials? <img src='http://www.lextalkington.com/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>Thanks.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: simone</title>
		<link>http://www.lextalkington.com/blog/2010/01/salt/comment-page-1/#comment-620</link>
		<dc:creator>simone</dc:creator>
		<pubDate>Tue, 19 Jan 2010 08:05:17 +0000</pubDate>
		<guid isPermaLink="false">http://www.lextalkington.com/blog/?p=156#comment-620</guid>
		<description>it&#039;s perfect for me.

thank you very very  much
Simone</description>
		<content:encoded><![CDATA[<p>it&#8217;s perfect for me.</p>
<p>thank you very very  much<br />
Simone</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Lex</title>
		<link>http://www.lextalkington.com/blog/2010/01/salt/comment-page-1/#comment-618</link>
		<dc:creator>Lex</dc:creator>
		<pubDate>Mon, 18 Jan 2010 19:17:13 +0000</pubDate>
		<guid isPermaLink="false">http://www.lextalkington.com/blog/?p=156#comment-618</guid>
		<description>Hi Simone,
thank you - I hesitate to post code examples for this one. But I&#039;m happy to explain how it works for the most part, that should lead you to finding a way to do something similar. 

1) I create a &lt;strong&gt;BitmapData&lt;/strong&gt; instance (let&#039;s call it &lt;em&gt;letterBmd&lt;/em&gt;) based on the width and height of the &lt;strong&gt;TextField&lt;/strong&gt; containing the letter &quot;P&quot; for example.

2) I draw the &lt;strong&gt;TextField&lt;/strong&gt; onto the &lt;strong&gt;BitmapData&lt;/strong&gt; instance using &lt;strong&gt;BitmapData.draw()&lt;/strong&gt;. 

3) I create a new empty &lt;strong&gt;BitmapData&lt;/strong&gt; (let&#039;s call it &lt;em&gt;stageBmd&lt;/em&gt;) instance and then create a new &lt;strong&gt;Bitmap&lt;/strong&gt; using new &lt;strong&gt;Bitmap(&lt;em&gt;stageBmd&lt;/em&gt;)&lt;/strong&gt; and add that to the stage. This is completely blank right now, well, all of its pixels are at zero alpha - so you can&#039;t see it yet. 

4) Then, I loop through the width and height of &lt;em&gt;letterBmd&lt;/em&gt; and store each pixel&#039;s x,y position, and it&#039;s ARGB (&lt;strong&gt;BitmapData.getPixel32()&lt;/strong&gt;) color into generic objects, and store those objects into an &lt;strong&gt;Array&lt;/strong&gt; (I use a &lt;strong&gt;Vector&lt;/strong&gt;, but array will work). It would look something like this, but there are hundreds of these objects in the &lt;strong&gt;Vector&lt;/strong&gt;, one for each pixel of the &lt;em&gt;letterBmd&lt;/em&gt;: &lt;em&gt;vect = [{originalx:1,originaly:1,clr:0x000000, x:0, y:0}, {originalx:1,originaly:2,clr:0x000000, x:0, y:0}, {originalx:1,originaly:3,clr:0x000000, x:0, y:0}...]&lt;/em&gt;. So, basically, I now have a an array containing all the pertinent image info for each pixel in the &lt;em&gt;letterBmd&lt;/em&gt;. And at this point, I no longer need &lt;em&gt;letterBmd&lt;/em&gt; or the original &lt;strong&gt;TextField&lt;/strong&gt;. The oldx, oldy, x, and y properties will be used in a bit.

5) To display the scattered pixels, I simply loop through the array of objects and draw a 1x1 pixel color to the &lt;em&gt;stageBmd&lt;/em&gt; at random x,y values. I use &lt;strong&gt;Bitmap.setPixel32()&lt;/strong&gt; to draw those pixels to &lt;em&gt;stageBmd&lt;/em&gt;. This is simply applying the stored color within the generic objects (the clr property) to the &lt;em&gt;stageBmd&lt;/em&gt; so it looks like salt/pepper. As far as getting those pixels to randomly fall in the circle, bar, or cross patterns, I&#039;m using a biased distribution algorithm. So, the x,y values are random within a certain area. Whatever these random values are, they are stored into each of the generic object&#039;s x and y properties.

6) Upon mouse over, I have an ENTER_FRAME event running. Within the event handler, I redraw the pixels on the &lt;em&gt;stageBmd&lt;/em&gt; over and over until the pixels appear to move to their original positions, hence forming the letters, or text. So, those small pixels aren&#039;t individually animated - I&#039;m simply redrawing pixels every frame until they become drawn at their original positions. This is done using a simple easing equation such as &lt;em&gt;vect[i].x += (vect[i].originalx - vect[i].x)*easeAmt&lt;/em&gt; Then I redraw that pixel, of that color, at the new x position. There are a few tricky things you&#039;ll have to figure out if you&#039;re not used to animating via drawing pixels - such as making sure the pixels end up at their interger original values, along with getting the &lt;em&gt;stageBmd&lt;/em&gt; to clear before each new pixel is drawn. Those are some of the challenges you&#039;ll face, as did I. 

Hope this helps give a bit of insight into the process!</description>
		<content:encoded><![CDATA[<p>Hi Simone,<br />
thank you &#8211; I hesitate to post code examples for this one. But I&#8217;m happy to explain how it works for the most part, that should lead you to finding a way to do something similar. </p>
<p>1) I create a <strong>BitmapData</strong> instance (let&#8217;s call it <em>letterBmd</em>) based on the width and height of the <strong>TextField</strong> containing the letter &#8220;P&#8221; for example.</p>
<p>2) I draw the <strong>TextField</strong> onto the <strong>BitmapData</strong> instance using <strong>BitmapData.draw()</strong>. </p>
<p>3) I create a new empty <strong>BitmapData</strong> (let&#8217;s call it <em>stageBmd</em>) instance and then create a new <strong>Bitmap</strong> using new <strong>Bitmap(<em>stageBmd</em>)</strong> and add that to the stage. This is completely blank right now, well, all of its pixels are at zero alpha &#8211; so you can&#8217;t see it yet. </p>
<p>4) Then, I loop through the width and height of <em>letterBmd</em> and store each pixel&#8217;s x,y position, and it&#8217;s ARGB (<strong>BitmapData.getPixel32()</strong>) color into generic objects, and store those objects into an <strong>Array</strong> (I use a <strong>Vector</strong>, but array will work). It would look something like this, but there are hundreds of these objects in the <strong>Vector</strong>, one for each pixel of the <em>letterBmd</em>: <em>vect = [{originalx:1,originaly:1,clr:0x000000, x:0, y:0}, {originalx:1,originaly:2,clr:0x000000, x:0, y:0}, {originalx:1,originaly:3,clr:0x000000, x:0, y:0}...]</em>. So, basically, I now have a an array containing all the pertinent image info for each pixel in the <em>letterBmd</em>. And at this point, I no longer need <em>letterBmd</em> or the original <strong>TextField</strong>. The oldx, oldy, x, and y properties will be used in a bit.</p>
<p>5) To display the scattered pixels, I simply loop through the array of objects and draw a 1&#215;1 pixel color to the <em>stageBmd</em> at random x,y values. I use <strong>Bitmap.setPixel32()</strong> to draw those pixels to <em>stageBmd</em>. This is simply applying the stored color within the generic objects (the clr property) to the <em>stageBmd</em> so it looks like salt/pepper. As far as getting those pixels to randomly fall in the circle, bar, or cross patterns, I&#8217;m using a biased distribution algorithm. So, the x,y values are random within a certain area. Whatever these random values are, they are stored into each of the generic object&#8217;s x and y properties.</p>
<p>6) Upon mouse over, I have an ENTER_FRAME event running. Within the event handler, I redraw the pixels on the <em>stageBmd</em> over and over until the pixels appear to move to their original positions, hence forming the letters, or text. So, those small pixels aren&#8217;t individually animated &#8211; I&#8217;m simply redrawing pixels every frame until they become drawn at their original positions. This is done using a simple easing equation such as <em>vect[i].x += (vect[i].originalx &#8211; vect[i].x)*easeAmt</em> Then I redraw that pixel, of that color, at the new x position. There are a few tricky things you&#8217;ll have to figure out if you&#8217;re not used to animating via drawing pixels &#8211; such as making sure the pixels end up at their interger original values, along with getting the <em>stageBmd</em> to clear before each new pixel is drawn. Those are some of the challenges you&#8217;ll face, as did I. </p>
<p>Hope this helps give a bit of insight into the process!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: simone</title>
		<link>http://www.lextalkington.com/blog/2010/01/salt/comment-page-1/#comment-617</link>
		<dc:creator>simone</dc:creator>
		<pubDate>Mon, 18 Jan 2010 10:19:49 +0000</pubDate>
		<guid isPermaLink="false">http://www.lextalkington.com/blog/?p=156#comment-617</guid>
		<description>Hi Lex, very cool...
There is the chance to have the source of this examples??? Is interesting how you transform the text in pixel
thank you very much
Simone</description>
		<content:encoded><![CDATA[<p>Hi Lex, very cool&#8230;<br />
There is the chance to have the source of this examples??? Is interesting how you transform the text in pixel<br />
thank you very much<br />
Simone</p>
]]></content:encoded>
	</item>
</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->
