<?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>Soulwire &#187; Experiments</title>
	<atom:link href="http://blog.soulwire.co.uk/tag/experiments/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.soulwire.co.uk</link>
	<description>Art + Technology</description>
	<lastBuildDate>Thu, 27 May 2010 16:18:19 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Recursive Polygon Subdivision</title>
		<link>http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision</link>
		<comments>http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision#comments</comments>
		<pubDate>Thu, 27 May 2010 12:51:48 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Generative]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Algorithm]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Experiments]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=1131</guid>
		<description><![CDATA[
This is a little algorithm I sketched in my moleskin on the train and for once had the free time to build. The idea is to split a convex polygon between two line segments, creating two new polygons. Each shape is pushed into a queue ready to be subdivided itself. Despite the simplicity of the [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/2d-cellular-automata' rel='bookmark' title='Permanent Link: 2D Cellular Automata'>2D Cellular Automata</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu' rel='bookmark' title='Permanent Link: AS3 Shuffle Grid Class'>AS3 Shuffle Grid Class</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/05/SD001.swf"  rel="lightbox;width=900;height=650;" ><img src="http://blog.soulwire.co.uk/wp-content/uploads/2010/05/SD001_001.jpg" alt="Recursive Subdivision" title="Recursive Subdivision" width="710" height="360" class="alignnone size-medium wp-image-1134" /></a></p>
<p>This is a little algorithm I sketched in my <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.moleskine.co.uk/products/"  target="_blank">moleskin</a> on the train and for once had the free time to build. The idea is to split a convex polygon between two line segments, creating two new polygons. Each shape is pushed into a queue ready to be subdivided itself. Despite the simplicity of the algorithm, the results are quite nice and with certain configurations often far removed from what I would have expected &#8211; surprise is always good.<span id="more-1131"></span></p>
<h3>The Subdivide Algorithm</h3>
<p>Here are the basic steps used to create the <a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/05/SD001.swf"  rel="lightbox;width=900;height=650;" >sketch</a> above:</p>
<ul>
<li>Create the first polygon</li>
<li>Pick two adjacent vertices at random</li>
<li>Use linear interpolation to find a point between them <em>(P1)</em></li>
<li>You now have a point on one line segment connecting the two vertices</li>
<li>Choose another line segment from the polygon</li>
<li>Find a point along this line segment <em>(P2)</em></li>
<li>Build a new polygon by moving clockwise from <em>P1</em> to <em>P2</em></li>
<li>Build a second polygon by moving clockwise from <em>P2</em> back to <em>P1</em></li>
<li>Splice the original polygon from the list and insert the two new ones</li>
<li>Choose a polygon from the list and <em>(&uarr;repeat)</em></li>
</ul>
<p>Very simple, but you can start to have fun with each of these steps to produce different results. Here are some of the variations which can be created with the <a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/05/SD001.swf"  rel="lightbox;width=900;height=650;" >demo</a>.</p>
<ul>
<li>Choose line segments to cut at random</li>
<li>Always subdivide between the two longest line segments</li>
<li>Always interpolate (choose points) half way along segments</li>
<li>Choose points at random positions along line segments</li>
<li>Only mark some polygons eligible for subdivision</li>
<li>Vary the minimum area of divisible polygons</li>
</ul>
<h3>Source Code</h3>
<p>The <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://code.google.com/p/soulwire/source/browse/trunk/projects/Subdivide/SD001/src/geom/Polygon.as"  target="_blank">Polygon</a> class is a DisplayObject (it extends Sprite) and implements it&#8217;s own draw method. I&#8217;ve had a lot of fun filling the shapes with textures, but kept it minimal for the example. One technique which I found worked well was to choose two vertices and compute the angle between them. From this I created a transformation matrix to use with <em>Graphics.beginBitmapFill</em>, giving the sketch a more 3 dimensional feel as if the collection of polygons was a 3D mesh with textures mapped to it. I&#8217;ll put these examples on Flickr soon.</p>
<p>If you&#8217;re interested in the source code, it&#8217;s available in my <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://code.google.com/p/soulwire/"  target="_blank">code repository</a> or you can download the archive below (for the demo GUI, I am using <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://minimalcomps.com/"  target="_blank">minimal comps</a> courtesy of Keith Peters and for image encoding, Ian McLean&#8217;s <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.auricom.com/devote/an-asynchronous-vector-optimized-jpeg-encoder"  target="_blank">asynchronous JPEG encoder</a> &#8211; thanks guys :).</p>
<a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=Subdivision.zip" class="download" title="Recursive Subdivision: Recursive Polygon Subdivision demo and source code"  rel="nofollow"><strong>Download:</strong> Recursive Subdivision</a>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/2d-cellular-automata' rel='bookmark' title='Permanent Link: 2D Cellular Automata'>2D Cellular Automata</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu' rel='bookmark' title='Permanent Link: AS3 Shuffle Grid Class'>AS3 Shuffle Grid Class</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Generative Prints for Ishihara</title>
		<link>http://blog.soulwire.co.uk/art-design/illustration/generative-illustrations-for-ishihara</link>
		<comments>http://blog.soulwire.co.uk/art-design/illustration/generative-illustrations-for-ishihara#comments</comments>
		<pubDate>Fri, 12 Feb 2010 00:28:10 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Generative]]></category>
		<category><![CDATA[Illustration]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Sketchbook]]></category>
		<category><![CDATA[Algorithm]]></category>
		<category><![CDATA[Drawing]]></category>
		<category><![CDATA[Experiments]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=1042</guid>
		<description><![CDATA[
These are some old prints that I made for an exhibition called Ishihara, back in 2008. They&#8217;re created using a tool I built called Rotator, which degrades vector drawings as they are printed to a bitmap, whilst following the path of a random wander. I found them on an old hard drive and thought I&#8217;d [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision' rel='bookmark' title='Permanent Link: Recursive Polygon Subdivision'>Recursive Polygon Subdivision</a></li>
<li><a href='http://blog.soulwire.co.uk/art-design/illustration/illustrated-iching-hexagrams' rel='bookmark' title='Permanent Link: Illustrated IChing'>Illustrated IChing</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1043" title="Ishihara Drawing 1" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara-cover.jpg" alt="Ishihara Drawing 1" width="710" height="360" /></p>
<p>These are some old prints that I made for an exhibition called <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.facebook.com/group.php?gid=35280706927" >Ishihara</a>, back in 2008. They&#8217;re created using a tool I built called <em>Rotator</em>, which degrades vector drawings as they are printed to a bitmap, whilst following the path of a random wander. I found them on an old hard drive and thought I&#8217;d share.<span id="more-1042"></span></p>
<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara001.jpg"  rel="shadowbox[post-1042];player=img;"><img class="alignnone size-medium wp-image-1044" title="Ishihara Rotator Print 001" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara001-710x471.jpg" alt="Ishihara Rotator Print 001" width="710" height="471" /></a></p>
<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara002.jpg"  rel="shadowbox[post-1042];player=img;"><img class="alignnone size-medium wp-image-1044" title="Ishihara Rotator Print 002" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara002-710x471.jpg" alt="Ishihara Rotator Print 002" width="710" height="471" /></a></p>
<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara003.jpg"  rel="shadowbox[post-1042];player=img;"><img class="alignnone size-medium wp-image-1044" title="Ishihara Rotator Print 003" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara003-710x471.jpg" alt="Ishihara Rotator Print 003" width="710" height="471" /></a></p>
<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara004.jpg"  rel="shadowbox[post-1042];player=img;"><img class="alignnone size-medium wp-image-1044" title="Ishihara Rotator Print 004" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara004-710x471.jpg" alt="Ishihara Rotator Print 004" width="710" height="471" /></a></p>
<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara005.jpg"  rel="shadowbox[post-1042];player=img;"><img class="alignnone size-medium wp-image-1044" title="Ishihara Rotator Print 005" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara005-710x471.jpg" alt="Ishihara Rotator Print 005" width="710" height="471" /></a></p>
<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara006.jpg"  rel="shadowbox[post-1042];player=img;"><img class="alignnone size-medium wp-image-1044" title="Ishihara Rotator Print 006" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/ishihara006-710x471.jpg" alt="Ishihara Rotator Print 006" width="710" height="471" /></a></p>
<p>On reflection, the morphing shapes mixed with simple line drawings remind me of James Paterson&#8217;s work over at <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.presstube.com" >presstube</a> or Victor Taba&#8217;s <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.victortaba.com/" >animations</a> (but not as good as either). I&#8217;ll see if the hard drive has the Rotator AIR app these were made with on there somewhere too, it could be fun to play around with adding some colour and using more complicated vectors.</p>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision' rel='bookmark' title='Permanent Link: Recursive Polygon Subdivision'>Recursive Polygon Subdivision</a></li>
<li><a href='http://blog.soulwire.co.uk/art-design/illustration/illustrated-iching-hexagrams' rel='bookmark' title='Permanent Link: Illustrated IChing'>Illustrated IChing</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/art-design/illustration/generative-illustrations-for-ishihara/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>Smack My Glitch Up</title>
		<link>http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator</link>
		<comments>http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator#comments</comments>
		<pubDate>Wed, 03 Feb 2010 21:37:51 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Generative]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Transmissions]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Colour]]></category>
		<category><![CDATA[Experiments]]></category>
		<category><![CDATA[Glitch]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=1003</guid>
		<description><![CDATA[
Sometimes it&#8217;s good to break things&#8230;
During a recent project I needed to find a way of simulating digital interference on an image / video stream. At first, it seemed the best approach might be to use the graphics API or Bitmap effects, but why imitate when you can have the real thing.
The principle is incredibly [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/art-design/generative/webcam-glitch-art' rel='bookmark' title='Permanent Link: Webcam Glitch Art'>Webcam Glitch Art</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/as3-ase-adobe-swatch-exchange-encoder' rel='bookmark' title='Permanent Link: ASE (Adobe Swatch Exchange) Encoder'>ASE (Adobe Swatch Exchange) Encoder</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision' rel='bookmark' title='Permanent Link: Recursive Polygon Subdivision'>Recursive Polygon Subdivision</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/glitchmap.swf" title="AS3 Glitch Generator" rel="lightbox;width=900;height=650;" ><img class="alignnone size-full wp-image-1006" title="Glitchmap - AS3 Glitch Generator" src="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/glitch-generator.jpg" alt="Glitchmap - AS3 Glitch Generator" width="710" height="360" /></a></p>
<p><em>Sometimes it&#8217;s good to break things&#8230;</em></p>
<p>During a recent project I needed to find a way of simulating digital interference on an image / video stream. At first, it seemed the best approach might be to use the graphics API or Bitmap effects, but why imitate when you can have the real thing.<span id="more-1003"></span></p>
<p>The principle is incredibly simple. Corrupt / alter a byte (or several bytes) in the ByteArray of a JPEG and then load this back into a DisplayObject using <em>Loader.loadBytes()</em>. Because of the way in which <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://en.wikipedia.org/wiki/JPEG#Syntax_and_structure" >JPEGs work</a>, the image will still display but the corrupt bytes will mangle the output to varying degrees, depending on how many bytes have been corrupted. The result is an interesting glitch pattern, a bit like those which were accidentally created <a href="http://blog.soulwire.co.uk/art-design/generative/webcam-glitch-art" title="Webcam glitch images" >when my webcam drivers lost the plot</a>.</p>
<p>It is also possible to corrupt other image formats (png, gif etc) in the same way, by first passing the image ByteArray through a <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://code.google.com/p/as3corelib/source/browse/trunk/src/com/adobe/images/JPGEncoder.as" >JPEGEncoder</a>.</p>
<p>I&#8217;ve implemented this technique in the <strong>Glitchmap</strong> class, which you can download and play with at the bottom of this post. I hope that it will provide a few moments of fun, if not a practical use <em>(I&#8217;m thinking image gallery transitions or <a href="http://blog.soulwire.co.uk/laboratory/flash/actionscript3-dynamic-sound-visualisation" >music </a><a href="http://blog.soulwire.co.uk/art-design/portfolio/more-bandcamp-music-visualisations" >visualisations</a>)</em>.</p>
<p>The small gottcha is that it isn&#8217;t desirable to mess with the JPEG headers, so when the clean ByteArray is passed to the <em>Glitchmap</em> class, it will determine the length of the header by reading through the bytes until it finds the <em>SOS (start of scan)</em> declaration <em>(0xFFDA)</em>. The next two bytes represent the length of the <em>SOS</em>, so it skips forward by this amount &#8211; the resulting position in the ByteArray should be the end of the header, and so between this point and the <em>EOI (end of image)</em> the data corruption takes place. I&#8217;m not sure whether this is the best way of determining the JPEG header size; <em>perhaps any CS graduates / students out there can help me out?</em></p>
<p>After I posted the <a href="http://blog.soulwire.co.uk/art-design/generative/webcam-glitch-art" >webcam glitch images</a>, Jon used them in his title sequences for the <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.youtube.com/watch?v=k5scRdXr7wU"  rel="shadowbox[post-1003];player=swf;width=640;height=385;">48 hour film gala</a>. If you find a similar creative use for this script or the <a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/glitchmap.swf" title="AS3 Glitch Generator" rel="lightbox;width=900;height=650;" >glitch generator</a> then please let us all know.</p>
<p>I think the next step is to experiment with merging the bytes of multiple glitched images in order to create transition effects. I may also build an AIR app and see what the best way of outputting video might be (using NativeProcess for screen capture perhaps?).</p>
<a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=Glitchmap.zip" class="download" title="AS3 BitmapData Glitch Generator (Glitchmap): Glitchmap is a class for generating glitch imagery from AS3 BitmapData"  rel="nofollow"><strong>Download:</strong> AS3 BitmapData Glitch Generator (Glitchmap)</a>
<p><em>You can also download the Glitchmap Class and the <a href="http://blog.soulwire.co.uk/wp-content/uploads/2010/02/glitchmap.swf" title="AS3 Glitch Generator" rel="lightbox;width=900;height=650;" >Glitch Generator</a> source code from the <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://code.google.com/p/soulwire/" title="Soulwire code repository" >soulwire code repository</a>.</em></p>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/art-design/generative/webcam-glitch-art' rel='bookmark' title='Permanent Link: Webcam Glitch Art'>Webcam Glitch Art</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/as3-ase-adobe-swatch-exchange-encoder' rel='bookmark' title='Permanent Link: ASE (Adobe Swatch Exchange) Encoder'>ASE (Adobe Swatch Exchange) Encoder</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision' rel='bookmark' title='Permanent Link: Recursive Polygon Subdivision'>Recursive Polygon Subdivision</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator/feed</wfw:commentRss>
		<slash:comments>31</slash:comments>
		</item>
		<item>
		<title>Technical Tentacles</title>
		<link>http://blog.soulwire.co.uk/laboratory/flash/pixel-bender-growing-tentacles</link>
		<comments>http://blog.soulwire.co.uk/laboratory/flash/pixel-bender-growing-tentacles#comments</comments>
		<pubDate>Tue, 26 May 2009 19:08:17 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Generative]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Experiments]]></category>
		<category><![CDATA[Flash Player 10]]></category>
		<category><![CDATA[Pixel Bender]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=360</guid>
		<description><![CDATA[
I’ve been revisiting one of my favourite topics lately &#8211; recursion &#8211; and have been getting together a bunch of sketches for a big personal project I’m working on (more on that another time). Anyway, I inadvertently stumbled across quite a nice way of making things grow in a convincing manner, and whilst this script [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision' rel='bookmark' title='Permanent Link: Recursive Polygon Subdivision'>Recursive Polygon Subdivision</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field' rel='bookmark' title='Permanent Link: Perlin Noise Flow Field'>Perlin Noise Flow Field</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2009/05/tenticles.swf" rel="lightbox;width=900;height=760" title="Pixel Bender Generative Tentacles" ><img src="http://blog.soulwire.co.uk/wp-content/uploads/2009/05/tentacles-cropped-710x326.jpg" alt="Generative Tentacles" title="Generative Tentacles" width="710" height="326" class="alignnone size-medium wp-image-509" /></a></p>
<p>I’ve been revisiting one of my favourite topics lately &#8211; <strong><a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://en.wikipedia.org/wiki/Recursion"  target="_blank">recursion</a></strong> &#8211; and have been getting together a bunch of sketches for a big personal project I’m working on <em>(more on that another time)</em>. Anyway, I inadvertently stumbled across quite a nice way of making things grow in a convincing manner, and whilst this script doesn’t actually use recursion ‘per se’, I thought it was kind of cool so I ran with it.<span id="more-360"></span></p>
<p>It also presented a good opportunity to try out another Flash Player 10 feature that I’ve been eager to try, which is using <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://labs.adobe.com/technologies/pixelbender/"  target="_blank"><strong>Pixel Bender</strong></a> and <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://livedocs.adobe.com/flex/3/langref/flash/display/ShaderJob.html"  target="_blank"><strong>ShaderJob</strong></a>. Although I’ve used Pixel Bender before, I’ve never used it in this way.</p>
<p>Basically, the idea is to exploit Pixel Bender’s performance and ask it to do some of the heavier number crunching for you &#8211; a concept that is currently being used by the Papervision3D team to give some juice to the next release. The other great thing about this approach is that these computations can run in another thread, leaving you more resources for other tasks (like rendering a fishing boat load of tentacles)</p>
<p>So, although this isn’t the best example of using Pixel Bender’s capabilities, it was a nice opportunity to exercise the idea. Each Tentacle starts a new ShaderJob and Pixel Bender whips up some tasty trigonometry for me, before passing it back inside a <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://livedocs.adobe.com/flex/3/langref/Vector.html"  target="_blank">Vector</a> object (typed Array). From there it’s just a question of making those numbers look nice&#8230; Kind of reminds me of the illustrative style used for the <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://oreilly.com/"  target="_blank">O&#8217;Reilly</a> book covers&#8230;</p>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/recursive-polygon-subdivision' rel='bookmark' title='Permanent Link: Recursive Polygon Subdivision'>Recursive Polygon Subdivision</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field' rel='bookmark' title='Permanent Link: Perlin Noise Flow Field'>Perlin Noise Flow Field</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/laboratory/flash/pixel-bender-growing-tentacles/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Fit DisplayObject into Rectangle</title>
		<link>http://blog.soulwire.co.uk/code/actionscript-3/fit-a-displayobject-into-a-rectangle</link>
		<comments>http://blog.soulwire.co.uk/code/actionscript-3/fit-a-displayobject-into-a-rectangle#comments</comments>
		<pubDate>Mon, 25 May 2009 17:20:20 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Experiments]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=362</guid>
		<description><![CDATA[
We’ve all been there. You’re building an image gallery and you need to create consistently sized thumbnails from a set of images, of various sizes and orientations and with differing aspect ratios &#8211; or you need a fullscreen background which always fills the stage, regardless of a user’s screen resolution and browser window size &#8211; [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors' rel='bookmark' title='Permanent Link: Flipping you the Boid'>Flipping you the Boid</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2009/05/displayutils.swf" rel="lightbox;width=800;height=550" title="DisplayUtils Demonstration" ><img title="DisplayUtils" src="http://blog.soulwire.co.uk/wp-content/uploads/2009/05/displayutils.jpg" alt="DisplayUtils" /></a></p>
<p>We’ve all been there. You’re building an image gallery and you need to create consistently sized thumbnails from a set of images, of various sizes and orientations and with differing aspect ratios &#8211; or you need a fullscreen background which always fills the stage, regardless of a user’s screen resolution and browser window size &#8211; or maybe you just need to fit a DisplayObject into a rectangular area whilst maintaining the correct proportions of the original image.<span id="more-362"></span></p>
<h3>Introducing DisplayUtils</h3>
<p>Since this is a common task, one that I find myself coding over and over, I&#8217;ve whipped up a little class called <strong>DisplayUtils</strong> which will help with the scenarios mentioned above and more.</p>
<p>The main method in <em>DisplayUtils</em> is <strong>FitIntoRect</strong>. <em>FitIntoRect</em> can work in several ways. You can use it to resize a DisplayObject to fit inside a rectangle, or you can use it to generate a <em>transformation matrix</em>, which can be applied to an object or used with the <em>BitmapData.draw</em> method to create thumbnail previews, or both. There is also another method called <strong>createThumb</strong>, which uses <em>fitIntoRect</em> to quickly and easily create nicely cropped and scaled thumbnails from a source image with any aspect ratio.</p>
<p>Have a play with the demo above to see what you can do with these methods.</p>
<h3>Using DisplayUtils and fitIntoRect</h3>
<p>There are several parameters to control how fitIntoRect works. Here’s what you can pass to the method:</p>
<ul>
<li><strong>displayObject</strong> : The DisplayObject to resize</li>
<li><strong>rectangle</strong> : A Rectangle object representing the space the DisplayObject should fit into.</li>
<li><strong>fillRect</strong> : Whether the DisplayObject should be transformed to fill the entire  rectangle, or whether it should fit completely within it.</li>
<li><strong>align</strong> : The alignment of the DisplayObject within the rectangle, for example Top Left or Middle.</li>
<li><strong>applyTransform</strong> : Whether the calculated transformation matrix should be applied to the DisplayObject within the fitIntoRect method. If false, the DisplayObject will not be modified, but the Matrix returned by the fitIntoRect method can be used to transform objects or modify the draw command on a BitmapData object.</li>
</ul>
<p>The download includes all necessary classes as well as several examples of how to use the <strong>fitIntoRect</strong> method. Here are some code snippets for getting started with&#8230;</p>
<h3>Example Usage</h3>
<p><strong>Fit a DisplayObject into a Rectangle</strong></p>
<pre lang="actionscript">var area:Rectangle = new Rectangle( 0, 0, 200, 100 );
DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );</pre>
<p><strong>Create a fullscreen background image</strong></p>
<pre lang="actionscript">stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

function onStageResized( event:Event = null ):void
{
	var area:Rectangle = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
	DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );
}

stage.addEventListener( Event.RESIZE, onStageResized );
onStageResized();</pre>
<p><strong>Create a thumbnail</strong></p>
<pre lang="actionscript">var thumb:Bitmap = DisplayUtils.createThumb( myBitmap.bitmapData, 100, 100, Alignment.MIDDLE, true );
addChild( thumb );</pre>
<h3 id="download">Download</h3>
<p>You can download the <strong>DisplayUtils</strong> class, as well as the <strong>Alignment</strong> class, which simply contains enumeration for the various alignment options when using <em>fitIntoRect</em> and <em>createThumb</em>.</p>
<p>A example of some of the uses discussed above is also available in the zip.</p>
<a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=displayutils.zip" class="download" title="DisplayUtils: Utilities for Creating Thumbnails & Resizing DisplayObjects"  rel="nofollow"><strong>Download:</strong> DisplayUtils</a>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors' rel='bookmark' title='Permanent Link: Flipping you the Boid'>Flipping you the Boid</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/code/actionscript-3/fit-a-displayobject-into-a-rectangle/feed</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
		<item>
		<title>Flipping you the Boid</title>
		<link>http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors</link>
		<comments>http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors#comments</comments>
		<pubDate>Tue, 05 May 2009 15:12:45 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Autonomous]]></category>
		<category><![CDATA[Emergence]]></category>
		<category><![CDATA[Experiments]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=320</guid>
		<description><![CDATA[
I’ve uploaded the Boid source code. Sorry for the delay. I’ve also included some basic examples of how you can create nice behaviors using the Boid class. If you set Main.as as your document class then you’ll see that within that you can specify the demo to run when you compile.
The basic demos included are:

Chase [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field' rel='bookmark' title='Permanent Link: Perlin Noise Flow Field'>Perlin Noise Flow Field</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu' rel='bookmark' title='Permanent Link: AS3 Shuffle Grid Class'>AS3 Shuffle Grid Class</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2009/05/boids.swf" title="AS3 Steering Behaviors" rel="lightbox;width=800;height=760" ><img class="alignnone size-full wp-image-519" title="Boids AS3 Demo" src="http://blog.soulwire.co.uk/wp-content/uploads/2009/05/boids.jpg" alt="Boids AS3 Demo" width="710" height="326" /></a></p>
<p>I’ve uploaded the Boid source code. Sorry for the delay. I’ve also included some basic examples of how you can create nice behaviors using the Boid class. If you set <em>Main.as</em> as your document class then you’ll see that within that you can specify the demo to run when you compile.</p>
<p>The basic demos included are:</p>
<ul>
<li><strong>Chase</strong> &#8211; Boids chase each other</li>
<li><strong>Flock</strong> &#8211; Boids flock together with some wander</li>
<li><strong>Graphics</strong> &#8211; How to use custom graphics with a Boid instance</li>
<li><strong>Seek</strong> &#8211; Boids seek the mouse position</li>
<li><strong>Wander</strong> &#8211; You guessed it, they wander</li>
</ul>
<p>I’ve commented all of the methods and properties and there is also documentation (open <strong><em>index.html</em></strong> in the docs folder) to get you started. Before you mention it, yes, there is some redundant code ;) (such as the <em>constrainToRect</em> method which doesn&#8217;t really work) but I need to do some optimisations anyway so I just left it as is for now, rough and ready.</p>
<p><a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=boids.zip" class="download" title="AS3 Boid Class & Demos: AS3 Boid class for creating flocking behavior, with a variety of steering behaviors and examples of how to use the Boid class."  rel="nofollow"><strong>Download:</strong> AS3 Boid Class & Demos</a><span id="more-320"></span></p>
<p>It’s been a little while since I posted! I’m in the process of moving house and office, plus I’ve been repeatedly slammed at work. Apologies to those of you who’ve left comments and haven’t got much by way of reply. I’ll hopefully be visible again over the next few weeks.</p>
<p>I actually coded this experiment back in November, but only recently decided that enough was enough and hijacked an evening so I could tidy up the code and build a UI for the demo.</p>
<p>Since coming across Craig Reynold’s paper; “<a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.red3d.com/cwr/steer/gdc99/"  target="_blank">Steering Behaviors for Autonomous Characters</a>” whilst I was researching complexity theory for a university project (it wasn’t as academic as it sounds!), I’ve found myself becoming fascinated by flocking and swarm beahviors and the notion that you can create complex systems from relatively simple components. Much like the <a href="http://blog.soulwire.co.uk/laboratory/flash/2d-cellular-automata" title="2D Cellular Automata"  target="_blank">Cellular Automata</a>, you can program an agent to have only a limited set of abilities and awareness, define a set rules for it to follow, and then create a multitude of instances of the agent to see what patterns begin to emerge through their interactions.</p>
<p><a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.red3d.com/cwr/boids/" title="Flocking"  target="_blank">Flocking</a> is a great example of this, as Reynolds demonstrated. His agents, or “<a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://en.wikipedia.org/wiki/Boids" title="Boids"  target="_blank">Boids</a>”, could perform certain maneuvers, such as <em>seeking</em> a target, <em>fleeing</em> from a predator, <em>avoiding obstacles</em> or <em>wandering</em> randomly. Combine these behaviors though, and allow each Boid to consider it’s neighbors when deciding on its locomotion, and complex behaviors begin to emerge.</p>
<p>The most infamous of these combinations is that of <em>separation</em>, <em>cohesion</em> and <em>alignment</em>, as it can produce a swarm behavior reminiscent of flocking birds or shoals of fish.</p>
<p><strong>Separation</strong> means that each Boid attempts to maintain a certain distance from its immediate neighbors, <strong>Cohesion</strong> ensures that each Boid attempts to stay close to the centre of the immediate flock and <strong>Alignment</strong> will calculate the average heading of the flock and steer towards this vector.</p>
<p>Each of these behaviors is fairly simple in isolation, but the results can give the impression that some significant AI is at work, when all that’s really going on is some simple vector math.</p>
<p><a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.flight404.com/blog/" title="Flight 404"  target="_blank">Robert Hodgin</a> has done some <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.flight404.com/blog/?p=99"  target="_blank">amazing work with flocking behaviors</a>, so too has <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.psyop.tv/o.php?id=51|0"  target="_blank">Psyop</a>, and of course <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.red3d.com/cwr/"  target="_blank">Reynolds</a> is the daddy of all this stuff. There are some good libraries out there too, such as <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://opensteer.sourceforge.net/"  target="_blank">OpenSteer</a>, and <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.bit-101.com/blog/"  target="_blank">Keith Peters</a> talks about this too in <em>Advanced Actionscript Animation</em>.</p>
<p>I’ve been trying to sharpen up my mathematical skills lately though, and was eager to play around with the new (new when I created this experiment anyway!) Flash Player 10 API &#8211; the 3D aspects in particular. So at the core of the Boid class are the native <em>Vector3D</em>, <em>Matrix3D</em> and <em>PerspectiveProjection</em> classes. Ok, so we’ve all got our own Vector3D and Matrix3D class in our library, but I thought it’d be good to use Adobe’s, especially seeing you can then apply the Matrix3D <em>directly to a DisplayObject’s transform property</em>.</p>
<p>Another cool feature I came across was the <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://livedocs.adobe.com/flex/3/langref/flash/geom/Matrix3D.html#pointAt()"  target="_blank">Matrix3D.pointAt()</a> method, which will rotate a Matrix around a given axis and in this case can be used to orientate the Boid to it’s heading vector… Nice!</p>
<p>I’ve had a lot of fun putting together the Boid demo anyway &#8211; tweaking various settings on the individual Boids as well as the group behaviors (my personal favorite is ‘<em>Chase</em>’ mode with ‘<em>Number of Boids</em>’ cranked right up!).</p>
<p>If you have a play with the settings though, you’ll quickly see what I mean about the plethora of different effects that can be accomplished, even by simply adjusting the locomotive abilities of the Boids.</p>
<p>Due to said lack of free time as of late, I haven’t documented the code fully, though I have started and so if anyone is interested in the source code <em>then please say so</em> in the comments and I’ll try and finish the job (after a mere 6 months!) and put it up for download.</p>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field' rel='bookmark' title='Permanent Link: Perlin Noise Flow Field'>Perlin Noise Flow Field</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu' rel='bookmark' title='Permanent Link: AS3 Shuffle Grid Class'>AS3 Shuffle Grid Class</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors/feed</wfw:commentRss>
		<slash:comments>54</slash:comments>
		</item>
		<item>
		<title>AS3 Shuffle Grid Class</title>
		<link>http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu</link>
		<comments>http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu#comments</comments>
		<pubDate>Wed, 04 Mar 2009 00:50:47 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Experiments]]></category>
		<category><![CDATA[Interactive]]></category>
		<category><![CDATA[Interface]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=311</guid>
		<description><![CDATA[
Drag &#38; Drop the images to shuffle them around&#8230;
A friend of mine, Dale Sattler over at No Ponies recently posted a grid sorting class. He said it was based on my old dynamic stacking menu; but that was pure modesty as his script is based on a 2D grid and much more sophisticated.
Anyway &#8211; it [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/2d-cellular-automata' rel='bookmark' title='Permanent Link: 2D Cellular Automata'>2D Cellular Automata</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2009/03/shuffle-grid.swf" title="Drag the images to shuffle grid" rel="lightbox;width=800;height=500" ><img class="alignnone size-full wp-image-534" title="Shuffle Grid Demo" src="http://blog.soulwire.co.uk/wp-content/uploads/2009/03/shuffle-grid.jpg" alt="Shuffle Grid Demo" width="710" height="325" /></a></p>
<p><strong><em>Drag &amp; Drop</em></strong><em> the images to shuffle them around&#8230;</em><span id="more-311"></span></p>
<p>A friend of mine, <strong>Dale Sattler</strong> over at <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.blog.noponies.com/"  target="_blank">No Ponies</a> recently posted a <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.blog.noponies.com/archives/246"  target="_blank">grid sorting class</a>. He said it was based on my old <a href="http://blog.soulwire.co.uk/code/open-source/dynamic-stacking" title="Dynamic Stacking Menu" >dynamic stacking menu</a>; but that was pure modesty as his script is based on a 2D grid and much more sophisticated.</p>
<p>Anyway &#8211; it inspired me to create a <strong>grid sorting / shuffling algorithm</strong> of my own. It behaves differently to Dales but I think it works pretty well.</p>
<p>The basic logic of the algorithm works by determining how far a dragged item travels along the grid (rows and columns) and then shuffling the surrounding items in the opposite direction by these values, therefore creating space for the dragged item to slot into when released.</p>
<p>It currently only works for grids which are fully populated, but adding more flexibility for incomplete grids will only be a matter of adding a few conditions &#8211; functionality which I’ll add when I get a moment.</p>
<p>You can extend the <strong>ShuffleGridItem</strong> class to add the functionality you need. In the demo I’ve made a simple image class which grabs a photo from <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.flickr.com/"  target="_blank">Flickr</a>.</p>
<p>Creating a <strong>ShuffleGrid</strong> is very simple, and can be done like so:</p>
<pre lang="actionscript">var grid:ShuffleGrid = new ShuffleGrid(4,7,40,40,1);

for (var i : int = 0; i &lt; grid.numCells; i++)
{
	grid.addItem (new ShuffleGridItem());
}

addChild (grid);</pre>
<p>The constructor takes the following arguments:</p>
<pre lang="actionscript">new ShuffleGrid(rows, cols, cellWidth, cellHeight, spacing);</pre>
<p>Feel free to download the class and a simple demo and have a play around. I can imagine many uses for it, so hopefully it will come in handy.</p>
<a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=shuffle-grid-demo.zip" class="download" title="Shuffle Grid Class & Demo: The source code and example implementation of a grid interface with drag & drop functionality and an intelligent shuffling algorithm."  rel="nofollow"><strong>Download:</strong> Shuffle Grid Class & Demo</a>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/2d-cellular-automata' rel='bookmark' title='Permanent Link: 2D Cellular Automata'>2D Cellular Automata</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu/feed</wfw:commentRss>
		<slash:comments>51</slash:comments>
		</item>
		<item>
		<title>Double Sided 3D Plane in FP10</title>
		<link>http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10</link>
		<comments>http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10#comments</comments>
		<pubDate>Tue, 30 Dec 2008 14:15:10 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Experiments]]></category>
		<category><![CDATA[Flash Player 10]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=273</guid>
		<description><![CDATA[Easily create two sided 3D DisplayObjects and flip card effects using Flash Player 10 and the new 3D API


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/fit-a-displayobject-into-a-rectangle' rel='bookmark' title='Permanent Link: Fit DisplayObject into Rectangle'>Fit DisplayObject into Rectangle</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors' rel='bookmark' title='Permanent Link: Flipping you the Boid'>Flipping you the Boid</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/managing-runtime-loaded-dynamic-assets' rel='bookmark' title='Permanent Link: Hello Dynamic Sprite'>Hello Dynamic Sprite</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2008/12/papersprite.swf" rel="lightbox;width=800;height=550;" title="Double Sided DisplayObject in Flash Player 10" ><img title="PaperSprite Demo" src="http://blog.soulwire.co.uk/wp-content/uploads/2008/12/papersprite-710x352.jpg" alt="PaperSprite Demo" width="710" height="352" /></a></p>
<p>I’ve made a couple of small improvements to the PaperSprite class:</p>
<ol>
<li>The visible face of the plane is updated automatically only when required. This saves on processing load and also means you can just set up the PaperSprite and not have to worry about anything else, just tween the crap out of all its properties and it won’t mind one bit. (Thanks to Jesse for the pointers re. using stage.invalidate for this process)</li>
<li>The back face is now automatically flipped horizontally, so text and graphics are no longer mirrored and will display correctly</li>
<li>I’ve changed the logic which sets the dynamic registration point for the pivot. This should now correctly line up the front and back faces of the 3D plane, regardless of where their individual registration points are.</li>
</ol>
<p>Also, some people have asked how to use it, so here is a really quick example to get you up and running with PaperSprite if you are not familiar with using classes and are using the Flash IDE to compile your movie:</p>
<ol>
<li>First, <a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=papersprite.zip" title="Download the PaperSprite class for creating two sided planes using FP10" >download the PaperSprite class</a> and put the <strong>soulwire </strong>folder in the same directory as your FLA or source code.</li>
<li>Then paste this code into the main timeline of your FLA:</li>
</ol>
<p><span id="more-273"></span></p>
<pre lang="actionscript">// Import the PaperSprite class

import soulwire.display.PaperSprite;

/*
Create a new PaperSprite:

If your front and back faces already exist, you can pass them straight
into the constructor, like so:

myPaperSprite = new PaperSprite( myFrontMc, myBackMc );
*/

var myPaperSprite:PaperSprite = new PaperSprite();

/*
Optionally specify a pivot point, in this example the centre is used
(this is also the default so there is no need to set this normally).

To pivot around the top left use:
myPaperSprite.pivot = new Point(0,0);

or for bottom right:
myPaperSprite.pivot = new Point(1,1);

and so on...
*/

myPaperSprite.pivot = new Point(0.5,0.5);

// Centre it on the stage

myPaperSprite.x = stage.stageWidth / 2;
myPaperSprite.y = stage.stageHeight / 2;

/*
Set the front and back faces:

These can be any type of DisplayObject, for example, to use a MovieClip
from your library use:

myPaperSprite.front = new MyLibraryClip();
*/

myPaperSprite.front = createSprite(0x66FF00);
myPaperSprite.back = createSprite(0xFF3399);

// Add the PaperSprite to the display list

addChild ( myPaperSprite );

// This method just creates coloured boxes for the demo

function createSprite (colour:uint):Sprite
{
	var mySprite:Sprite = new Sprite();
	mySprite.graphics.beginFill ( colour );
	mySprite.graphics.drawRect (0,0,100,100);
	mySprite.graphics.endFill ();
	return mySprite;
}

// Listen for the enterFrame event

addEventListener ( Event.ENTER_FRAME, spin );

/*
Move and rotate your PaperSprite in any way you want - it will
update it's visible face automatically!
*/

function spin ( event:Event ):void
{
	var mX:Number = ((mouseX / stage.stageWidth) - 0.5) * 360;
	var mY:Number = ((mouseY / stage.stageHeight) - 0.5) * 360;

	myPaperSprite.rotationY += (mX - myPaperSprite.rotationY) / 40;
	myPaperSprite.rotationX += (mY - myPaperSprite.rotationX) / 40;
}</pre>
<p>Publish the movie and you’re all done!</p>
<h2>Background</h2>
<p>Flash Player 10’s new 3D capabilities are a much welcomed and exiting addition, and although their implementation at first seemed a little obtuse after using libraries such as Papervision3D, Adobe’s implementation is beginning to make a lot more sense to me. Rather than being handed a complete 3D library, developer’s have been given the necessary building blocks to use 3D, or 2.5D with less ‘hacks’ and arguably better performance where it matters.</p>
<p>Time will tell, but I personally think this will be a positive development for existing frameworks like Papervision and Sandy, because whilst Flash can now natively handle certain tasks like triangle drawing, 3D matrices etc &#8211; implementing cameras and shaders, loading and building meshes and so on is something which developers will still require. If this can plug neatly into Flash Player’s capabilities and possibly yield increased performance then all the better.</p>
<p>In more basic situations though, the ability to rotate a DisplayObject around its X, Y and Z axis, as well as finally having a Z property, is useful for adding basic 3D effects, even if your project doesn’t require anything more sophisticated than that.</p>
<p>But this is where some gaps begin to arise. Z sorting, for example, will be required, and <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.unitzeroone.com/" >Ralph Hauwert</a> (a member of the Papervision3D team) has already written a <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://theflashblog.com/?p=470" >useful script</a> for this.</p>
<h2>Two Sided DisplayObjects</h2>
<p>Another common use for Flash Player 10’s 3D capabilities is to create <strong>double sided sprites</strong> or planes, than can be rotated to reveal alternate content on either side. Again, I would have expected this to be a new property of DisplayObjectContainer, so that <strong><em>front </em></strong>and <strong><em>back </em></strong>could be passed to it as DisplayObjects. This isn’t the case though, so it requires some minimal work around.</p>
<p><a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://theflashblog.com/" >Lee Brimelow</a> demonstrated <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.gotoandlearn.com/play?id=91"  target="_blank">one approach</a> to this, which was to monitor the rotation of a DisplayObject, and swap the visible faces accordingly (<a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://flashartofwar.com/2008/11/16/two-sided-plane-fp-10/"  target="_blank">Jesse Freeman</a> also used this technique). This works great in many cases, however it doesn’t give the desired results when the parent DisplayObject is off centre and therefore subject to the perspective of the 3D environment. It also means that if you are rotating the DisplayObject around multiple axis then the calculations required get slightly more complex.</p>
<h2>The Solution</h2>
<p>As ever, the wise and prolific <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.senocular.com/" >Senocular</a> came to the rescue. He described a technique whereby 3 points are placed on the surface of the DisplayObject, and by determining the winding direction of these points when translated from 3D to 2D space; one is able to determine which way the DisplayObject is facing. Because this is relative to the perspective used to produce this transformation, the result is true to the point of view of the user.</p>
<p>Senocular published his helper class which will return a Boolean value indicating whether a given DisplayObject is front facing or not, and so I wish to stress that all credit is his for <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.senocular.com/?id=2.57"  target="_blank">his solution</a> and wonderfully clear <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://www.kirupa.com/forum/showthread.php?t=315821"  target="_blank">explanation of the process</a>.</p>
<p>I did feel that it might be beneficial though to wrap this up, along with other functionality, into a class which solved the double sided DisplayObject issue, and so I introduce the <strong>PaperSprite </strong>class (I chose to call it <em>PaperSprite </em>so that it isn’t confused with <em>Sprite3D</em> if you use another 3D library).</p>
<h2>How to use PaperSprite</h2>
<p>Creating a two sided Plane using PaperSprite is simple:</p>
<pre lang="actionscript">import soulwire.display.PaperSprite;

var mySprite:PaperSprite = new PaperSprite();

// Any type of DisplayObject can be used for each face
mySprite.front = new Sprite();
mySprite.back = new Bitmap( myImage );</pre>
<p>So you can use any DisplayObject for the front and reverse sides; MovieClips, Sprites, Bitmaps, Shapes, Loaders etc. <strong>These can also be set via the constructor</strong>&#8230;</p>
<p><del datetime="2009-01-02T12:53:05+00:00">Another property of PaperSprite is <strong>whether is updates it’s display automatically</strong>. If <em>true</em>, once the PaperSprite is added to the stage it will update its visible face autonomously, however if you have a more general render loop where you’re controlling your 3D scene from, you can set this to <em>false </em>and then call the <strong>update </strong>method when calculating the visible face is required:</del></p>
<blockquote><p>Thanks to <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://flashartofwar.com/"  target="_blank">Jesse Freeman</a> for suggesting a method to limit unnecessary calls to the <em>update </em>method. By overriding the setters for the position and rotation properties and using <strong>stage.invalidate()</strong>, then listening for the render event (Event.RENDER), the calculations needed to determine the visible face of the PaperSprite need only be made if one or more properties have been changed and if the PaperSprite needs to be rendered. Therefore there is no longer a need for autoUpdate, everything is handled internally by the PaperSprite class. Cheers Jesse! :)</p></blockquote>
<p>&#8230;The other useful feature is the <strong>pivot </strong>property. By default, a PaperSprite will pivot (rotate around) its <strong>centre point</strong>, which will be automatically calculated for each face depending on its respective dimensions. Alternatively, if you want the PaperSprite to rotate around the <em>top left</em> corner, <em>bottom right</em>, or indeed any point on its surface, you can set the pivot property, which is a Point object and requires 2 normalised values, representing the fraction of the width and height of the PaperSprite at which you want to place the pivot.</p>
<p>So to set the PaperSprite to rotate around its centre (this is set by default) you can use:</p>
<pre lang="actionscript">mySprite.pivot = new Point( 0.5, 0.5 );</pre>
<p>And its Top Left corner:</p>
<pre lang="actionscript">mySprite.pivot = new Point( 0.0, 0.0 );</pre>
<p>And its top centre:</p>
<pre lang="actionscript">mySprite.pivot = new Point( 0.5, 0.0 );</pre>
<p>And so on!</p>
<p>You can also access its <strong>isFrontFacing </strong>property at any time:</p>
<pre lang="actionscript">if ( mySprite.isFrontFacing )
{
	doSomethingGood();
}</pre>
<p>An finally, removing the front or back face from its display list (or indeed not defining one at all) will cause the PaperSprite to <em>display the available face at all times</em>, essentially giving it the default behaviour of a one sided Sprite.</p>
<h2>Download the PaperSprite class</h2>
<p>Again, this is really just a glorified augmentation of Senocular’s solution to finding the front facing side of a DisplayObject in 3D. All credit should go to him for creating such an elegant solution. I built this class in order to simplify its use and provide the extra functionality needed to quickly start working with a two-sided DisplayObject.</p>
<a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=papersprite.zip" class="download" title="PaperSprite Class & Demo: The PaperSprite class is a double sided DisplayObject, allowing for custom front and reverse side DisplayObjects which will appear as a 3D card when rotated in 3D space."  rel="nofollow"><strong>Download:</strong> PaperSprite Class & Demo</a>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/fit-a-displayobject-into-a-rectangle' rel='bookmark' title='Permanent Link: Fit DisplayObject into Rectangle'>Fit DisplayObject into Rectangle</a></li>
<li><a href='http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors' rel='bookmark' title='Permanent Link: Flipping you the Boid'>Flipping you the Boid</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/managing-runtime-loaded-dynamic-assets' rel='bookmark' title='Permanent Link: Hello Dynamic Sprite'>Hello Dynamic Sprite</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10/feed</wfw:commentRss>
		<slash:comments>94</slash:comments>
		</item>
		<item>
		<title>Perlin Noise Flow Field</title>
		<link>http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field</link>
		<comments>http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field#comments</comments>
		<pubDate>Sun, 14 Dec 2008 23:11:59 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Autonomous]]></category>
		<category><![CDATA[Emergence]]></category>
		<category><![CDATA[Experiments]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=263</guid>
		<description><![CDATA[
It was a rainy Sunday and I found myself playing around with perlin noise for a couple of hours.
The idea was to create a simple flow field using the BitmapData perlinNoise method, and use this to influence the movement of autonomous agents. There is no complex vector math or steering behaviours, just some simple logic [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors' rel='bookmark' title='Permanent Link: Flipping you the Boid'>Flipping you the Boid</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2008/12/flow-field.swf" rel="lightbox:width=780;height=450;" title="Perlin Noise Flow Field" ><img src="http://blog.soulwire.co.uk/wp-content/uploads/2008/12/flow-field-710x352.jpg" alt="Flow Field with Perlin Noise" title="Flow Field with Perlin Noise" width="710" height="352" class="alignnone size-medium wp-image-563" /></a></p>
<p>It was a rainy Sunday and I found myself playing around with <a rel="nofollow" href="http://blog.soulwire.co.uk/goto/http://en.wikipedia.org/wiki/Perlin_noise"  target="_blank">perlin noise</a> for a couple of hours.</p>
<p>The idea was to create a simple flow field using the BitmapData perlinNoise method, and use this to influence the movement of autonomous agents. There is no complex vector math or steering behaviours, just some simple logic for how a particle or agent reacts to the current pixel it is positioned over.<span id="more-263"></span></p>
<p>Despite its simplicity, by changing parameters such as the level of offset per frame or the x and y frequency, it is possible to create some interesting effects which resemble the movement of flocking birds, shoals of fish or indeed more fittingly for this time of year; panicking Christmas shoppers desperately hunting for gifts.</p>
<p>At each update step, an agent will grab the value of the pixel it is on top of and alter its trajectory based on the brightness of the pixel. Throw in some variance relating to how strongly an individual agent will react to this value and some interesting patterns begin to emerge.</p>
<p>The basic logic I’m using in this demo is as follows:</p>
<pre lang="actionscript">// Get the pixel the agent is over
var pixel:uint = noiseBitmap.getPixel( agent.x, agent.y );

// Find the brightness of the pixel
var brightness:Number = pixel / 0xFFFFFF;

// Set the angle and the speed according to brightness
var speed:Number = brightness * agent.speed;
var angle:Number = brightness * 360 * Math.PI / 180;

// Update the agent's position / rotation
agent.x += Math.cos( angle ) * speed;
agent.y += Math.sin( angle ) * speed;
agent.rotation = brightness * 360;</pre>
<p>Feel free to download the source code and start tweaking the many variables. Adding further life to the agents by introducing collision or allowing additional individual traits beyond simply speed and wander might be one option worth exploring.</p>
<a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=perlin-flow-field.zip" class="download" title="Perlin Noise Flow Field: An example of how to use the Perlin noise algorithm to simulate flocking behaviors."  rel="nofollow"><strong>Download:</strong> Perlin Noise Flow Field</a>
<p>Have fun!&#8230;</p>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/laboratory/flash/as3-flocking-steering-behaviors' rel='bookmark' title='Permanent Link: Flipping you the Boid'>Flipping you the Boid</a></li>
<li><a href='http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking' rel='bookmark' title='Permanent Link: AS3 Webcam Motion Tracking'>AS3 Webcam Motion Tracking</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10' rel='bookmark' title='Permanent Link: Double Sided 3D Plane in FP10'>Double Sided 3D Plane in FP10</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field/feed</wfw:commentRss>
		<slash:comments>29</slash:comments>
		</item>
		<item>
		<title>AS3 G94 Circular Menu</title>
		<link>http://blog.soulwire.co.uk/code/actionscript-3/as3-g94-circular-menu</link>
		<comments>http://blog.soulwire.co.uk/code/actionscript-3/as3-g94-circular-menu#comments</comments>
		<pubDate>Thu, 06 Nov 2008 16:29:40 +0000</pubDate>
		<dc:creator>Soulwire</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Experiments]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Interactive]]></category>
		<category><![CDATA[Interface]]></category>

		<guid isPermaLink="false">http://blog.soulwire.co.uk/?p=214</guid>
		<description><![CDATA[
I’ve received quite a few requests to update my circular group94 style menu to AS3 (I’m not really sure why I’m still calling it a &#8220;Group94 menu&#8221;, but it&#8217;s a tribute to them that this style of scrolling navigation is often referred to as a &#8220;group94 menu&#8221; and not an &#8220;offset scrolling menu&#8221; or something [...]


Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/as3-group94-style-scrolling-menu' rel='bookmark' title='Permanent Link: AS3 Group94 Menu'>AS3 Group94 Menu</a></li>
<li><a href='http://blog.soulwire.co.uk/code/circular-group94-scrolling-flash-menu' rel='bookmark' title='Permanent Link: G94 Circular Menu'>G94 Circular Menu</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu' rel='bookmark' title='Permanent Link: AS3 Shuffle Grid Class'>AS3 Shuffle Grid Class</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.soulwire.co.uk/wp-content/uploads/2008/11/circular-menu-as3.swf" title="AS3 Circular Group94 Menu" rel="lightbox;width=700;height=450;" ><img class="alignnone size-full wp-image-574" title="AS3 Circular Group94 Style Flash Menu" src="http://blog.soulwire.co.uk/wp-content/uploads/2008/11/g94-circular-menu.jpg" alt="AS3 Circular Group94 Style Flash Menu" width="710" height="223" /></a></p>
<p>I’ve received quite a few requests to update my <a href="http://blog.soulwire.co.uk/code/circular-group94-scrolling-flash-menu" title="Circular group94 style menu" >circular group94 style menu</a> to AS3 <span id="more-214"></span>(I’m not really sure why I’m still calling it a &#8220;Group94 menu&#8221;, but it&#8217;s a tribute to them that this style of scrolling navigation is often referred to as a &#8220;group94 menu&#8221; and not an &#8220;offset scrolling menu&#8221; or something of that nature).</p>
<p>Anyway, I have been thinking for some time that I should revisit this script and build a more complete version, where horizontal, vertical or circular are simply parameters for the menu, but for now, this is both an update and a massive enhancement of the <a href="http://blog.soulwire.co.uk/code/circular-group94-scrolling-flash-menu" title="Circular group94 style menu" >AS2 G94 circular menu.</a></p>
<p>If you play with the demo, you’ll notice I’ve added some new features, such as the ability to easily change (at runtime of desired) aspects of the menu like the <em>inner radius</em>, <em>item spacing</em>, <em>visible items</em> and much more.</p>
<p>The other big enhancement is that the <em>CircularMenu </em>class actually overrides the <em>addChild</em>, <em>addChildAt</em>, <em>setChildIndex</em>, <em>removeChild </em>(etc) methods, so if you treat it as a regular <em>DisplayObjectContainer </em>and add children to it, these items will be treated as menu items and automatically scroll -cool! This also means that you can easily change an items index, or insert and remove items dynamically, all using the standard <em>DisplayObjectContainer </em>API. The benefit of this is that you can use any <em>DisplayObject </em>as a menu item; <em>Bitmaps</em>, <em>Sprites </em>and <em>Movieclips</em>, so there is no limit to what you can put into the menu – you can even mix it up and add custom classes or library items.</p>
<p>There are also some easy methods for scrolling the menu. For example:</p>
<pre lang="actionscript">// Will scroll the menu to item 4
myCircleMenu.currentIndex = 4;

// Similar to above, scrolls the menu to a given index
myCircleMenu.scrollToIndex(  10  );

// Scrolls the menu to any given child DisplayObject
myCircleMenu.scrollToItem(  someDisplayObject  );

// Scrolls the menu to the next available item
myCircleMenu.next();

// Scrolls the menu to the previous item
myCircleMenu.prev();</pre>
<p>Additionally, there are getters and setters for the properties I mentioned earlier, such as <strong>innerRadius</strong>, <strong>itemSpacing</strong>, <strong>visibleItems </strong>etc, which will dynamically tween the menu to whatever you set one of these properties to.</p>
<a href="http://blog.soulwire.co.uk/wp-content/plugins/download-monitor/download.php?id=as3-g94-circular-menu.zip" class="download" title="Group94 Style Circular Menu: A circular, Group94 inspired interface with AS3 source code and examples of use."  rel="nofollow"><strong>Download:</strong> Group94 Style Circular Menu</a>
<p>Enjoy!</p>


<p>Related posts:<ol><li><a href='http://blog.soulwire.co.uk/code/actionscript-3/as3-group94-style-scrolling-menu' rel='bookmark' title='Permanent Link: AS3 Group94 Menu'>AS3 Group94 Menu</a></li>
<li><a href='http://blog.soulwire.co.uk/code/circular-group94-scrolling-flash-menu' rel='bookmark' title='Permanent Link: G94 Circular Menu'>G94 Circular Menu</a></li>
<li><a href='http://blog.soulwire.co.uk/code/open-source/as3-drag-drop-shuffle-grid-menu' rel='bookmark' title='Permanent Link: AS3 Shuffle Grid Class'>AS3 Shuffle Grid Class</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.soulwire.co.uk/code/actionscript-3/as3-g94-circular-menu/feed</wfw:commentRss>
		<slash:comments>70</slash:comments>
		</item>
	</channel>
</rss>
