Category: pixel manipulation

[SWF(width = 600, height=600, backgroundColor=0xCCCCCC, frameRate=24)]
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
var blur:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
addChild(new Bitmap(canvas, "auto", true));

var w:int = canvas.width 
var hw:int = w / 2;
var size:int = w * w;
var seed:Number = Math.random()*100;
var pnt:Point = new Point();
var dy:Number = 0, dx:Number = 0;
var blr:BlurFilter = new BlurFilter(10,10,1);
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	
	dx += (mouseX - dx) / 4;
	dy += (mouseY - dy) / 4;
	canvas.lock();
	canvas.perlinNoise(hw,hw,2,seed,false, false, 1, true, [new Point(dx, dy), new Point(-dx, -dy)]);
	var pix:Vector.<uint> = canvas.getVector(canvas.rect);
	for (var i:int = 0; i<size; i++){
		var col:uint = 255 - pix[i] << 4 & 0x00FF00;
		pix[i] = col << 8 | col | col >> 8;
	}
	canvas.setVector(canvas.rect, pix);
	blur.copyPixels(canvas, canvas.rect, pnt);
	blur.applyFilter(blur, blur.rect, pnt, blr);
	canvas.draw(blur, null, null, BlendMode.DIFFERENCE);
	canvas.draw(canvas, null, null, BlendMode.INVERT);
	canvas.unlock();
}

This is actually an optimized variation on some recent posts that made use of perlin noise. You can get a wide range of effects by changing just the BlendMode values alone…. I particularly like this combination of BlendModes because it reminds me a bit of a terrain map…

Have a look at the swf…

[SWF(width=500, height=500)]
var canvasSize:int=stage.stageWidth;
var canvas:BitmapData=new BitmapData(canvasSize,canvasSize,false,0x000001);
addChild(new Bitmap(canvas, "auto", true));
var size:int=canvas.width*canvas.height - canvasSize;
var pixels:Vector.<uint>=canvas.getVector(canvas.rect);
for (var i:int = 0; i<canvasSize; i++) {
	var xp:int=int(Math.random()*canvasSize);
	var yp:int=int(Math.random()*canvasSize);
	pixels[xp+yp*canvasSize]=0xFF000000;
}
var targetCol:uint=0xFF000000;
var buffer:Vector.<uint>=pixels.concat();
var fade:uint=1;

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	var curr:uint=targetCol;
	var r:int = (curr >> 16) & 0xFF;
	var g:int = (curr >> 8) & 0xFF;
	var b:int=curr&0xFF;
	r+=fade;
	g+=fade;
	b+=fade;
	if (r>255) r=255;
	if (g>255) g=255;
	if (b>255) b=255;
	var darker:uint=0xFF000000|r<<16|g<<8|b;
	if (darker==0xFFFFFFFF) {
		removeEventListener(Event.ENTER_FRAME, onLoop);
	}
	for (var i:int = canvasSize; i<size; i++) {
		curr=pixels[i];
		if (curr==targetCol) {
			var index:int=i-canvasSize+int(Math.random()*3) - 1;
			if (index>0) buffer[index]=darker;
			if (int(Math.random()*50)==1) {
				index=i-canvasSize+int(Math.random()*3)-1;
				if (index>0) buffer[index]=darker;
			}
		}
	}
	targetCol=darker;
	canvas.lock();
	canvas.setVector(canvas.rect, buffer);
	pixels=buffer.concat();
	canvas.unlock();
}

This snippet uses setVector() to draw something that looks like this:

This is a cellular automaton. It has kind of a strange rule set – but you could easily use this snippet to do more traditional cellular automata.