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;
			}
		}
	}

I have not posted the code to this one because the two are so similar, but if anyone want me to, just leave a comment and I’ll get right on posting it:) or send it to you.

]]> http://www.rickigregersen.com/2009/06/20/perlin-noise-used-to-drive-vector-flow-field/feed/ 1 http://www.rickigregersen.com/2009/06/16/more-camera-flow-field-fun/ http://www.rickigregersen.com/2009/06/16/more-camera-flow-field-fun/#comments Tue, 16 Jun 2009 20:10:06 +0000 Ricki http://www.rickigregersen.com/?p=159 Apparently I have not finished my little Flow Field craze, In one of my math books I saw a picture of a flow field
as it is depicted in math terms, as a little grid of arrows. I thought it could be fun to play around with this idea.

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.

Now I know how Neo felt..

Which makes this Keanu Reeves..

I was writing a vector library for a particle engine Im going to publish here some day and thought that implementing theSoulwire flow field would be nice. Justin has been so kind as to put out the source, which is awesome  when your code is that good and visually stunning. As I played around with the code I got an idea, I think it is inspired by something I saw on the Processing site the idea was to use the input from my webcam as the noise map, instead of the MPerlin noise. I made a quick mockup, that actually looks quite promising. It needs some sort of effect, maybe an IR webcam, a 5×5 meter black wall to project it on, before it is ready, also the manipulation of the webcam image before it get’s read by the particles could give it a little extra. It is ticking along quite well on my Macbook Air, running the webcam and 5000 vectors.

For now I’ll just put the source code up here:

(It is build using Eclipse (Flex Builder Plugin), so it extends UIComponent, not something I would recommend, but if someone can tell me how to add Sprites to the stage of an AIR app, I will surley change it)

package
{
	import com.rickigregersen.flow_bump.Arrow;

	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.filters.ColorMatrixFilter;
	import flash.geom.ColorTransform;
	import flash.media.Camera;
	import flash.media.Video;

	import mx.core.UIComponent;

	public class Main extends UIComponent
	{
		//theese are the values I had fun playing with, but you might want something a bit more crazy:)

		private static const TRAIL : Number = 0.95;
		private static const BOOST : int = 110;
		private static const VECTORS : int = 1000;
		private static const BLUR : int = 4;
		private static const SCALE : Number = 6.0;
		private static const BACKGROUND : uint = 0x000000;
		;

		private static var fading : ColorTransform = new ColorTransform( 1, 1, 1, TRAIL );
		private static var blurFilter : BlurFilter = new BlurFilter( BLUR, BLUR, 3 )
		private static var grayMatrix : Array = [                       0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0 ];
		private var grayFilter : ColorMatrixFilter = new ColorMatrixFilter( grayMatrix );
		private var brightMatrix : Array = [                      1, 0, 0, 0, BOOST, 0, 1, 0, 0, BOOST, 0, 0, 1, 0, BOOST, 0, 0, 0, 1, 0 ]
		private var brightFilter : ColorMatrixFilter = new ColorMatrixFilter( brightMatrix );

		private var camBMD : BitmapData;
		private var camBMP : Bitmap;
		private var renderBMD : BitmapData;
		private var renderBMP : Bitmap;
		private var vid : Video;
		private var cam : Camera;
		private var w : int, h : int;
		private var flowImage : Sprite;

		public function Main( _w : int, _h : int )
		{
			//width and height, also a sprite for holding the little particles;
			w = _w;
			h = _h;
			flowImage = new Sprite();
			//get the video;
			cam = Camera.getCamera();
			vid = new Video( w, h );
			vid.attachCamera( cam );

			//make a bitmap for drawing the video into
			camBMD = new BitmapData( w, h, false, BACKGROUND );
			camBMP = new Bitmap( camBMD );

			//a bitmap to stuff it all into and give some sort of effect
			renderBMD = new BitmapData( w, h, false, BACKGROUND );
			renderBMP = new Bitmap( renderBMD );

			//add the cam bmp and the rendered bmp
			addChild( camBMP );
			camBMP.y = h;

			addChild( renderBMP );
			//build the little vectors
			buildVectors();
		}

		private function buildVectors() : void
		{
			//place, rotate and scale them randomly
			var a : Arrow;

			for ( var i : int = 0; i < VECTORS; i++ )
			{
				a = new Arrow();
				a.x = Math.random() * w;
				a.y = Math.random() * h;
				a.rotation = Math.random() * 360;
				a.scaleX = a.scaleY = Math.random() + 0.1;
				flowImage.addChild( a );
			}
			addEventListener( Event.ENTER_FRAME, update, false, 0, true );
		}

		private function update( event : Event ) : void
		{
			//draw the cam to the stage, appy the grayscale Matrix, sometimes blur and brightfilters too
			camBMD.draw( vid );
			camBMP.filters = [                         grayFilter /*, blurFilter, brightFilter */  ];

			var a : Arrow;
			var brightness : Number;
			var radians : Number;
			var angle : Number;
			var speed : Number;
			var pixel : int;

			for ( var i : int = 0; i < VECTORS; i++ )
			{
				a = flowImage.getChildAt( i ) as Arrow;
				//get the brightness values of the pixel positioned directly under the vector
				pixel = camBMD.getPixel( a.x, a.y );
				brightness = pixel / 0xFFFFFF;
				//adjust spped and angle acording to the brightness
				speed = 0.1 + brightness * a.speed;
				angle = 360 * brightness * a.wander;
				radians = angle * Math.PI / 180;
				//make sure the vector is moving in the same direction as it's velocity
				a.x += Math.cos( radians ) * a.speed;
				a.y += Math.sin( radians ) * a.speed;
				//scale and rotate the vector according to brightness and
				a.rotation = angle;
				a.scaleX = a.scaleY = 0.1 + brightness * SCALE;
				//wrap around
				if ( a.x > w )
					a.x = 0;
				else if ( a.x < 0 )
					a.x = w;
				if ( a.y > h )
					a.y = 0;
				else if ( a.y < 0 )
					a.y = h;

			}

			//apply the colortransform, it determines the transparency of the bitmaps being stacked
			renderBMD.colorTransform( renderBMD.rect, fading );
			//draw the Sprite that hold all the vectors.
			renderBMD.draw( flowImage );

		}
	}
}

Here is the Arrow Class:

package com.rickigregersen.flow_bump
{
	import flash.display.Shape;

	public class Arrow extends Shape
	{
		public var speed : Number = Math.random() * 3;
		public var wander : Number = Math.random() * 0.5;

		public function Arrow()
		{
			draw();
		}

		private function draw() : void
		{
			/* 			graphics.clear();
			   graphics.lineStyle( 0, 0xFF0000, 0.4 );
			   graphics.moveTo( 0, 0 );
			   graphics.lineTo( 3, 0 );
			   graphics.moveTo( 2, -1 );
			   graphics.lineTo( 3, 0 );
			 graphics.lineTo( 2, 1 ); */

			/* 			graphics.beginFill( 0xFF0000, 0.9 );
			   graphics.drawEllipse( 0, 0, 6, 2 );
			 graphics.endFill(); */

			/*
			   graphics.beginFill( 0x00FF00, 0.9 );
			   graphics.drawCircle( 0, 0, 5 );
			   graphics.endFill();
			 */
			graphics.clear();
			graphics.beginFill( 0xff6600, 1.0 );
			graphics.moveTo( -1, -0.5 );
			graphics.lineTo( 1, 0 );
			graphics.lineTo( -1, 0.5 );
			graphics.lineTo( -1, -0.5 );
			graphics.endFill();
		}
	}
}

1. declare loader, url and eventListener.
2. write listener method
3. start loading
4. catch complete event and add the loader to the displayList

Ok, not that much work and only a bit of clutter, however I am programming these AIR apps for a 52″ touch screen, meaining no mouse or keyboard, and any exception not caught will result in the UI being rendered useless and me having to VPN into the system and restart it. I really do not want to do this so here is the list that everyone should abide by when loading anything

1. declare loader, url and eventListener for ProgressEvent, IOErrorEvent and CompleteEvent
2. write listener methods for all of the above events
3. wrap the loader into a try/catch block to catch exceptions
4. catch complete or error event and remove all the EventListeners
5. cast the content of the loader into the appropriate type
6. copy this new content into a new object so that the loader can be null’ed and memory freed up

Ok, suddenly a lot of work and subsequently heaps of clutter. This is a result of the Event driven way of ActionScript 3.0 but a small price for the OOP architecture it now builds upon. I wished to encapsulate all the Event logic into the loader and have that deal with it, the Event code adds clutter. The solution uses the same approach as the Proxy Class so if You tried extending that this will make perfect sense. The main idea is to instantiate a PictureLoader object and pass it the methods that should be executed when events happen and let the PictureLoader handle all garbage collection and event clutter (Ok I’ll stop using the word clutter now, promise).

/**
* Author: Ricki Gregersen www.rickigregersen.com
* GPL: All code is snatch and grab
*/
package com.rickigregersen.loaders
{
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.net.URLRequest;

	public class PictureLoader extends Loader
	{
		private var pic:Bitmap;
		private var loader:Loader
		private var percent:int;
		private var failFunction:Function;
		private var progressFunction:Function;
		private var successFunction:Function;

		public function PictureLoader()
		{
			//the worlds blankiest blank...
		}
		public function loadPicture(url:String, success:Function = null,  progress:Function = null, fail:Function = null):void
		{
			//set the local functions to your global functions
			failFunction = fail;
			progressFunction = progress;
			successFunction	= success;
			//make the needed objects ready
			pic = new Bitmap();
			loader = new Loader();
			//Add a listener for all the different events the could be fired
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, pictureProgress, false, 0, true);
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, pictureFailed, false, 0, true);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureLoaded, false, 0, true);
			//Wrap the load method in a try-catch to catch any wildcard errors that could break the VM
			try{
				loader.load(new URLRequest(url));
			}catch(error:Error){
				pictureFailed();
			}
		}
		//getters for the percent loaded and the picture
		public function get progress():int
		{
			return percent;
		}
		public function get picture():Bitmap
		{
			return pic;
		}
		//Functions to catch the events
		private function pictureProgress(event:Event):void
		{
			percent = (loader.contentLoaderInfo.bytesLoaded / loader.contentLoaderInfo.bytesTotal) * 100;
			//call the parents progressFunction to alert it that a loadProgress has happend
			progressFunction();
		}

		private function pictureLoaded(event:Event):void
		{
			//cast the picture into a bitmap, before this the picture is of type "loader.content"
			pic = (Bitmap)(event.target.content);
			//remove the eventlistener
			loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, pictureLoaded);
			loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, pictureFailed);
			loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, pictureProgress);
			//make sure to free the memory and null the loader
			loader.unloadAndStop(true);
			loader = null;
			//call the parents pictureLoaded function to alert it the picture was loaded and ready to be picked up
			successFunction();
			//successFunction(pic); could have been used, just send the parent function a reference to the picture.
			//But I like getter/setters. As long as the method in the parent accepts a bitmap as input you don't have to worry about it
			//in here.
		}
		private function pictureFailed(event:Event = null):void
		{
			//Loading failed, so clean the loader and alert the parent
			loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, pictureLoaded);
			loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, pictureFailed);
			loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, pictureProgress);
			loader.unloadAndStop(true);
			loader = null;
			failFunction();
		}
	}
}

This is how it is used, notice that this is complete with all the logic for listening for the complete, progress and error events.

			import com.rickigregersen.loaders.PictureLoader;

			private var picLoader:PictureLoader;
			private var pic:Bitmap;
			private var container:Sprite;

			private function init():void
			{
				picLoader = new PictureLoader();
				picLoader.loadPicture("assets/picture.png", picLoaded, picProgress, picFailed);
			}

			private function picProgress():void
			{
				trace(picLoader.progress);
			}
			private function picLoaded():void
			{
				pic = picLoader.picture;
				rawChildren.addChild(pic);
			}
			private function picFailed():void
			{
				trace("error loading picture");
			}

The functions passed to the PictureLoader are not mandatory, they are all set to null as default.

This means that the really short version of using this Class is like this:

			import com.rickigregersen.loaders.PictureLoader;

			private var picLoader:PictureLoader;
			private var pic:Bitmap;
			private var container:Sprite;

			private function init():void
			{
				picLoader = new PictureLoader();
				picLoader.loadPicture("assets/picture.png", picLoaded);
			}

			private function picLoaded():void
			{
				rawChildren.addChild(picLoader.picture);
			}

The use of rawChildren.addChild(picLoader.picture) is because this originates from a UIComponent in Flex so all other places you would use addChild.

So when building Components or just Classes that handle lots of Events and loading of external assets, this approach is something to consider.