Forums: Flash:

// Image
var imagePath:String 	= "test4.jpg";		// path to image
var imageWidth:int 	= 800;			// image dimensions 
var imageHeight:int 	= 800;			// make the stage dimension the same

// Control variables (suugested variances)
var imageResolution:int = 50;			// create ribbon for every (n) pixels ( 10 - 100 )
var ribbonComplexityMax:int = 20;		// max number of bEnds in ribbons ( 20 - 100 )
var ribbonComplexityMin:int = 15;		// max number of bEnds in ribbons ( 10+ )
var ribbonsMax:int = 20;			// max number of bAnds in ribbons ( 8 - 30 )
var ribbonsMin:int = 1;				// min number of bAnds in ribbons ( 1 - ribbonsMax )
var ribbonSizeMax:int = 50;			// max inner size of ribbon ( 0 - 500 )
var ribbonSizeMin:int = 0;			// min inner size of ribbon ( 0 - ribbonSizeMax )
var ribbonSpreadMax:int = 2;			// max amount that bAnds on a ribbon spread apart ( 1 - 20 )
var ribbonSpreadMin:int = 1;			// min amount that bAnds on a ribbon spread apart ( 1 - ribbonSpreadMax )
var ribbonThick:Number = 0.5;			// thickness of bAnds on ribbons ( 0.1 - 2 )
var ribbonColourStep = 2;			// the pixel distance for each colour band ( 1 - 10 )
var doBlur:Boolean = true;			// mmm blur... is good ( true - false )
var blurFactor:Number = 0.05;			// how blury do you want it ( 0.05 - 1 )
var blurFocus:int = 1;				// how quickly do you want the ribbons to be in focus ( -5 - 5 )

// no need to change these
var image: DisplayObject;
var imageBitmap:BitmapData;
var imageLoader:Loader
var imagePixelArray:Array;
var imagePixelIndex:int;
var imageProcessTimer:Timer;
var renderBitmap:BitmapData;
var renderBuffer:Sprite;
var blur:BlurFilter = new flash.filters.BlurFilter();
blur.quality = 2;

// Load the image
function imageLoad() {
	imageLoader = new Loader();	
	imageLoader.load( new URLRequest( imagePath ) );  
	imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, imageProcessInit );
	image = addChildAt( imageLoader, 0 );
}

// initialise the processing
// ignore this as it is mostly setup stuff
// basically selects a grid of pixels based on the resolution setting
// stuffs them into an array then randomises them
function imageProcessInit( evt:Event ):void {
	image.width = imageWidth;
	image.height = imageHeight;
	// change the flase to ture if you want to see the seed image underneath the render
	renderBitmap = new BitmapData ( imageWidth, imageHeight, false, 0x333333); 
	imageBitmap = new BitmapData ( imageWidth, imageHeight, false, 0x333333);
	imageBitmap.draw( imageLoader );
	addChild( new Bitmap( imageBitmap ) );
	addChild( new Bitmap( renderBitmap ) );
	imagePixelArray = [];
	imagePixelIndex = 0;
	for(var x:int = 0; x < imageWidth; x += imageResolution ) {
		for(var y:int = 0; y < imageHeight; y += imageResolution ) {
			imagePixelArray.push( { x: x, y: y } );
		}
	}
	imagePixelArray.sort( arrayRandomise );
	imageProcessStart();
}

// kick start the timer ( I use a timer so I can watch it render YAY!! )
function imageProcessStart():void {
	imageProcessTimer = new Timer( 1, imagePixelArray.length );
	imageProcessTimer.addEventListener( TimerEvent.TIMER, cellRender );
    imageProcessTimer.start();
}

// Renderererer
function cellRender( evt:TimerEvent ):void {
	var pointsArray:Array = [];
	
	// start with a random number of points (ribbonComplexity) on a circle 
	// each point is allocated a random spread amount (dis)
	var points:int = Math.random() * ( ribbonComplexityMax - ribbonComplexityMin ) + ribbonComplexityMin;
	for(var i:int = 0; i < points; i++ ) {
		pointsArray.push( { ang: ( 360 / points ) * i, dis: Math.random() * ribbonSpreadMax + ribbonSpreadMin } );
	}
	
	// start with a circle
	// lay down a whole bunch of circles
	// make them wobbly based on the ribbonComplexity coupled with point spread amount
	// render them based on pixel location and colour to a buffer clip
	var baseSize = Math.random() * ( ribbonSizeMax - ribbonSizeMin ) + ribbonSizeMin
	var pixel:Object = imagePixelArray[ evt.target.currentCount -1 ]
	renderBuffer = new Sprite();
	var pixelArray = [];
	var pixelArrayLength = ( ribbonsMax - ribbonsMin ) + ribbonsMin;
	
	// Don't even begin to ask me what all this is about
	// it just fell out of my head
	for( var j:int = 0; j < pixelArrayLength; j++ ) {
		if(Math.random() > 0.02 ) {
			var col = imageBitmap.getPixel( ( pixel.x + j * ribbonColourStep ) % imageWidth, pixel.y );
			renderBuffer.graphics.lineStyle( ( pixelArrayLength - j ) * ribbonThick , col, 1 );
			for( var k:int = 0; k < points -1 ; k++ ) {
				var p1:Object = pointsArray[ k ];
				var p2:Object = pointsArray[ k + 1];
				var px1:int = Math.sin( p1.ang * Math.PI / 180 ) * ( baseSize + p1.dis * j ) + pixel.x;
				var py1:int = Math.cos( p1.ang * Math.PI / 180 ) * ( baseSize + p1.dis * j ) + pixel.y;
				var px2:int = Math.sin( p2.ang * Math.PI / 180 ) * ( baseSize + p2.dis * j ) + pixel.x;
				var py2:int = Math.cos( p2.ang * Math.PI / 180 ) * ( baseSize + p2.dis * j ) + pixel.y;
				var midx:int = ( px1 + px2 ) / 2;
				var midy:int = ( py1 + py2 ) / 2;
				if( k == 0 ) { 
					var tx = px1;
					var ty = py1;
					renderBuffer.graphics.moveTo(px1, py1);
				} else {
					renderBuffer.graphics.curveTo(px1, py1, midx, midy);
				}
			}
			renderBuffer.graphics.lineTo(tx, ty);
		}
	}
	// end brain fart
	
	// do some bluring
	if( doBlur ) {
		blur.blurX = blur.blurY = ( imagePixelArray.length - evt.target.currentCount ) * blurFactor - blurFocus;
		renderBuffer.filters = [ blur ];
	}
	
	// draw the buffer clip to our main image then get rid of it
	addChild( renderBuffer );
	renderBitmap.draw( renderBuffer );
	removeChild( renderBuffer );
}

// little util to randomise all the points
function arrayRandomise(a:Object, b:Object):Number {
	return ( Math.floor( Math.random( ) * 3 ) - 1 )
}

// go baby go
imageLoad();