This was just some “while Im doing nothing, let’s put whatever in the ‘fun’ category” but if anyone would like the code, throw me a comment and I’ll send it off. I is uncommented and messy.

]]> http://www.rickigregersen.com/2009/08/11/sporetree/feed/ 5 http://www.rickigregersen.com/2009/08/08/growing-homegrown-tentacles/ http://www.rickigregersen.com/2009/08/08/growing-homegrown-tentacles/#comments Fri, 07 Aug 2009 23:30:19 +0000 Ricki http://www.rickigregersen.com/?p=183 Well, I just got time to look into how to get the tentacles growing, i.e. start out small and have all the joints gradually increase in size, instead of the joint getting smaller all the time. (think I just tried to explain the definition of growing by using the definition of growing??).

Thanks again to Justin.

The spore Class turned out to look like this, it needs going over, but I was thinking on porting it to Processing and really get my tentacles on

The code:

package
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.geom.Point;
	import flash.utils.setTimeout;

	public class Spore extends Sprite
	{
		private static const LENGTH:int = 90;
		private var _posX:Vector.;
		private var _posY:Vector.;
		private var angStep:Number;
		private var posStep:Number;
		private var curl:Number;
		private var n:Number = 0;
		private var a:Number = Math.random() * Math.PI * 2;
		private var _index:int;
		private var _g:Graphics;

		public function Spore()
		{
			_posX = new Vector.( LENGTH, true );
			_posY = new Vector.( LENGTH, true );
			_g = graphics;
			this.generate( range( 0.01, 0.05 ), range( 2.0, 3.0 ), range( 0.2, 1.0 ) );
		}

		public function generate( aStep:Number, pStep:Number, c:Number ):void
		{
			_index = 0;
			angStep = aStep;
			posStep = pStep;
			curl = c;
			var loc:Point = new Point( 0, 0 );
			while( _index < LENGTH )
			{
				n += Math.random() * (angStep - -angStep) + -angStep;
				n *= 0.9 + curl * 0.1;
				a += n;
				loc.x += Math.cos( a ) * posStep;
				loc.y += Math.sin( a ) * posStep;
				_posX[ _index ] = loc.x;
				_posY[ _index ] = loc.y;
				_index++;
			}
			_index = 0;
		}
		public function step():void
		{
			_g.clear();
			_g.lineStyle( 0, 0x000000, 0.7 );
			var c:int = 0;
			var radius:Number;
			while( c < _index )
			{
				radius = _index / c;
				if( radius > 10 ) radius = 10;
				_g.beginFill( 0xFF6600, 0.4 );
				_g.drawCircle( _posX[ c ], _posY[ c ], radius );
				_g.endFill();
				c++;
			}
			_index++;
			if( _index >= LENGTH )
			{
				this.generate( range( 0.01, 0.05 ), range( 2.0, 3.0 ), range( 0.2, 1.0 ) );
			}
		}
		private function range(min:Number, max:Number = NaN):Number
		{
			if(isNaN(max)) {max = min; min = 0}
				return min + (Math.random() * (max - min));
		}
	}
}

The code:

The Soulwire Tentacles was an experiment in PixelBender speed and usability, so he makes it look as if the tentacles are really growing, i.e. starts out small and each “joint” grows as the tentacles grows. Mine is just a look into the random-organic way they grow. Also I was trying to see what kinds of speed I would get by using the Bitmap approach.

Here are the Soulwire Tentacles

And here are my Tentacles… that came out wrong…

The code:

/**
*
 * @BitmapSpore.as	:	inspired by http://blog.soulwire.co.uk/flash/actionscript-3/pixel-bender-growing-tentacles/
 * @Date  08/06-09
 * @Ricki Gregersen
*/

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;

	[SWF( width="512", height = "512", backgroundColor = "0x222222", frameRate = "30" )]

	public class BitmapSpore extends Sprite
	{
		private static var fading : ColorTransform = new ColorTransform( 1, 1, 1, 0.99999 );
		private static var _blur : BlurFilter = new BlurFilter( 1, 1, 2 );

		private var _bmd:BitmapData;
		private var _bmp:Bitmap;
		private var _container:Sprite;

		public function BitmapSpore()
		{
			_bmd = new BitmapData( 512, 512, true, 0x222222 );
			_bmp = new Bitmap( _bmd );
			addChild( _bmp );
			var s:Spore;
			addChild( _container = new Sprite() );
			for( var i:int = 0; i < 500; i++ )
			{
				s = new Spore( 256, 256, range( 0.01, 0.05 ), range( 2.0, 3.0 ), range( 0.2, 1.0 ));
				s.scaleX = s.scaleY = Math.random() * 2;
				_container.addChild( s );
			}
			addEventListener( Event.ENTER_FRAME, update );
		}

		private function update( event:Event ):void
		{
			var n:int = _container.numChildren;
			var s:Spore;

			for( var i:int = 0; i < n; i++ )
			{
				s = Spore( _container.getChildAt( i ));
				s.move();
				s.x = s.loc.x;
				s.y = s.loc.y;
			}
			_bmp.filters = [  _blur ];
			_bmd.colorTransform( _bmd.rect, fading );
			_bmd.draw( _container );
		}

		private function range(min:Number, max:Number = NaN):Number
		{
			if(isNaN(max)) {max = min; min = 0}
				return min + (Math.random() * (max - min));
		} 

	}
}
	import flash.geom.Point;
	import flash.display.Shape;

	class Spore extends Shape
	{
		public var loc:Point;

		private var angStep:Number;
		private var posStep:Number;
		private var curl:Number;
		private var n:Number = 0;
		private var a:Number = Math.random() * Math.PI * 2;

		function Spore( xPos:Number, yPos:Number, aStep:Number, pStep:Number, c:Number )
		{
			loc = new Point( xPos, yPos );
			angStep = aStep;
			posStep = pStep;
			curl = c;
			graphics.lineStyle( 0, 0x222222, 0.7 );
			graphics.beginFill( 0xFF6600, 0.7 );
			graphics.drawCircle( 0, 0, 5 );
			graphics.endFill();
		}
		public function move():void
		{
			n += Math.random() * (angStep - -angStep) + -angStep;
			n *= 0.9 + curl * 0.1;
			a += n;
			loc.x += Math.cos( a ) * posStep;
			loc.y += Math.sin( a ) * posStep;
			this.scaleX = this.scaleY *= 0.98;
			var s:Number = this.scaleX = this.scaleY;
			if( s < 0.1 )
			{
				loc.x = loc.y = 256;
				this.scaleX = this.scaleY = Math.random() * 2;
			}
		}
	}

The code is really sloppy this time, only took an hour or two, so I’ll post the example here along with the project (A Flash Builder Flash Project SDK 4.0 to be precise, will run in the Flash IDE, no problem).

This is your brain, and this is your brain on vectors!

(Warning, this could potentially push your browser to the limit if you are to eager with the sliders. So please save any unfinished pulitzer price article you are currently working on in Google docs, I really don’t want to piss of anyone )

Source is here, I included Bit-101′s minimalComps sine Im using that library, they are great for these things!

I have previously used Perlin noise in Processing, it is a bit different in some of the aspects of how you “access” it. In Processing you sort of get the values representing the noise iteration, whereas In Flash you actually build a noise Bitmap and read pixels from this to produce numerical noise. I Processing I guess you would do the opposite, i.e. building all the noise values into a bitmap to get something similar to the noise below.

So I build this little app to play around with the parameters and to see how much detail one can get away with, before the calculation load gets to heavy for practical use. The values that can be adjusted below are those that go into the BitmapData.perlinNoise method If you would like to put in more controls or whatever you feel like doing with this small app then: Snatch the entire Flex project here (SDK 3.3), swf included.

I recalled that when dabbling with Perlin noise, a year ago, in Processing I found Ken Perlin’s talk on… well, noise I guess It is very interesting and even though words like permutations and fractals are used to some extend it is mainly an interesting story about this invention.