Distance Line Gradient

[SWF(width=600,height=500,frameRate=30)]
var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
addChild(new Bitmap(canvas));

var size:Number=canvas.width*canvas.height;
var w:Number=canvas.width;
var pix:Vector.<uint> = new Vector.<uint>(size);
 
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	canvas.lock();
		
 	var i:int = size;
	var x1:Number=mouseX;
	var y1:Number=mouseY;
	var x2:Number=250;
	var y2:Number=250;
	var dx:Number=x2-x1;
	var dy:Number=y2-y1;
	var denom:Number =  1/(dx * dx + dy * dy);
	if (dx==0&&dy==0) {
			x2+=1;
			y2+=1;
			dx=dy=1;
	}

	while( --i > -1 ){
		var xp:int= i % w;
		var yp:int = i / w;
		var u:Number = ((xp - x1) * dx + (yp - y1) * dy) * denom;

		var closestX:Number;
		var closestY:Number;
		if (u<0) {
			closestX=x1;
			closestY=y1;
		} else if (u > 1) {
			closestX=x2;
			closestY=y2;
		} else {
			closestX=x1+u*dx;
			closestY=y1+u*dy;
		}
		var dfx:Number=closestX-xp;
		var dfy:Number=closestY-yp;
		var d:Number=255-Math.sqrt(dfx*dfx+dfy*dfy);
		if (d<0) d=0;
		 pix[i]=uint(d);
	}
	canvas.setVector(canvas.rect, pix);
	canvas.unlock();
}

This didn’t come out as interesting as I thought it would for some reason – just used the technique from the last two posts to draw a gradient. Event though it’s visually boring, it does show how I went about inlining the function from yesterday… so I figured I’d post it.

Leave a Reply

Your email address will not be published. Required fields are marked *