FILTERS ON MAPS

Philip Thonbo
Creative Technologist

@Thonbo
http://thonbo.com


STARLING

[DSPLCMNTMP FLTR]


performance?




WHAT DFUG!?


PERSPECTIVE BACKGROUND FX

WHAT LIES BENIETH

some code...




DisplacementMapFilter(mapTexture:Texture, mapPoint:Point = null, componentX:uint = 0, componentY:uint = 0, scaleX:Number = 0.0, scaleY:Number = 0.0, repeat:Boolean = false)

code inc on text


// Embed the texture:
[Embed(source="../assets/bg.jpg")]
public static const BG:Class;
	
private var _bg:Image = Image.fromBitmap(new BG()); 

private var dTexture:RenderTexture;
private var dFilter:DisplacementMapFilter;

dTexture = new RenderTexture(800, 600);

dTexture.draw(mapQuad); 

dFilter = new DisplacementMapFilter(dTexture, null, BitmapDataChannel.RED, BitmapDataChannel.GREEN, 255, 255, false); content.filter = dFilter;

WATER DROP FX

ALOT MORE CODE

private var dTexture:RenderTexture;
private var dFilter:DisplacementMapFilter;
private var dropMatrix:Matrix
private var drawContainer:Sprite = new Sprite()
private var dropsArray:Array = new Array()

function start(){
	dTexture.draw(grayQuad) // DISPLACEMENTS ALWAYS NEEDS 0x808080 as "transparent" - so we start of by making shure out map is clean
	grayQuad.alpha = 0.1
	drawContainer.addChild(grayQuad)

	for(var i:int = 0; i<NUM_DROPS;i++){
		var thisDrop:Image = Image.fromBitmap(new Drop());
		dropsArray[i] = thisDrop
		drawContainer.addChild(thisDrop)
		thisDrop.alpha = 0
		// SET THE DROP IN MOTION
		TweenMax.fromTo(thisDrop, MathUtils.randRange(1, 3), {x:Math.random()*_bg.width, y:Math.random()*_bg.height, alpha:1, scaleX:MathUtils.randRange(0.1, 0.5), scaleY:MathUtils.randRange(0.1, 0.5)}, {bezier:makeBezierWiggle(), delay:MathUtils.randRange(0.5, 1), y:"+"+String(int(MathUtils.randRange(50,200))), alpha:0.00, onComplete:onDropTweened, onCompleteParams:[thisDrop], ease:Quart.easeIn})
	}
	dFilter = new DisplacementMapFilter(dTexture, null, BitmapDataChannel.RED, BitmapDataChannel.GREEN, 200, 200, false); // THIS IS WHERE THE MAGIC HAPPENS 
	content.filter = dFilter;
}
addChild(drawContainer)

private function frameHandler(event:EnterFrameEvent):void{
			dTexture.draw(drawContainer)
}

 protected function onTimer(event:TimerEvent):void{			///////////////////////
			// !!! HACK !!!
			// here i clean up.. just drawing grayquad ontop of the map
			// just to whipe the tails of the drops once in a while
			// try without and see how crazy it looks after 30 sec - interesting side-effect
			// I tried tweaking the fadeoutvalue with colormatrix filter
			// forcing everything into 808080 by a 1% pr frame - no luck
			// it wont fade comletely to gray 100% as in old days "shader bug" i guess 
			///////////////////////
			grayQuad.alpha = 1
			dTexture.draw(drawContainer)
			grayQuad.alpha = 0.1
		}
		
private function onDropTweened(thisDrop:Image):void{
	// moving the drops with a wiggle effect from bezier
	TweenMax.fromTo(thisDrop, MathUtils.randRange(1, 3), {x:Math.random()*_bg.width, y:Math.random()*_bg.height, alpha:1, scaleX:MathUtils.randRange(0.1, 0.5), scaleY:MathUtils.randRange(0.1, 0.5)}, {bezier:makeBezierWiggle(), delay:MathUtils.randRange(0.5, 1), y:"+"+String(int(MathUtils.randRange(50,200))), alpha:0.00, onComplete:onDropTweened, onCompleteParams:[thisDrop], ease:Quart.easeIn})
}


private function makeBezierWiggle():Array{
			var localArray:Array = []
			var iterations:int = MathUtils.randRange(5, 10)
			for(var i:int = 0; i < iterations; i++){
				var localObject:Object = new Object()
				var localValue:Number = MathUtils.randRange(-5, 5)
				var localString:String
				if(localValue < 0){
					localString = String(localValue)
				} else {
					localString = "+"+String(localValue)
				}
				localObject.x = localString
				localArray.push(localObject)
			}
			return localArray
		}


PLAYING WITH GRADIENTS



masking with grayscale

var Xobj:Object = {Xvalue:85};
var bmp:BitmapData = new BitmapData(_mask.width, _mask.height, false);
var offArr:Array = [new Point(0.1, -0.1),new Point(-0.1, 0.1)];
bmp.perlinNoise(30, 30, 1, int(Math.random()*100), true, true, 1, true, offArr);
var bm:Bitmap = new Bitmap(bmp);bm.blendMode = 'overlay';
_mask.addChild(bm);
_mask.blendMode = 'alpha';
var myColorFilter:ColorMatrixFilter = new ColorMatrixFilter();
_mask.addEventListener(Event.ENTER_FRAME, onFrame);
function onFrame(e:Event):void{
	offArr[0].x += 0.1;
	offArr[0].y += -0.1;
	offArr[1].x += -0.1;
	offArr[1].y += 0.1;
	bmp.perlinNoise(30, 30, 1, int(Math.random()*100), true, true, 1, true, offArr);
	myColorFilter.matrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,-28.333333333333332, -28.333333333333332, -28.333333333333332, Xobj.Xvalue,0];
	this.filters = [myColorFilter]
};
TweenMax.to(Xobj, 5, {Xvalue:85, ease:Power3.easeOut});
	myColorFilter.matrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,-28.333333333333332, -28.333333333333332, -28.333333333333332, Xobj.Xvalue,0];
	this.filters = [myColorFilter]
};
TweenMax.to(Xobj, 5, {Xvalue:85, ease:Power3.easeOut});  

the matrix is basicly what your contrast is. In this ex. 85 devided by 3(colorchannels) in negative  - and then use that as the variable turning it up and down so the variables in the whole matrix subtracts eachother (disregard the first 15 slots)
myColorFilter.matrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,-28.333333333333332, -28.333333333333332, -28.333333333333332, Xobj.Xvalue,0];

LEGOFIER

starling version

wall of code
private var dTexture:RenderTexture;
private var dFilter:DisplacementMapFilter;

// init
mapQuad = new Quad(256, 256, 0x808080, false);
dTexture.draw(mapQuad); 	

// set content ready

content.addChild(_bg)
content.addChild(heroArm.display as Sprite)
addChild(content)

// init filter
dFilter = new DisplacementMapFilter(dTexture, null, BitmapDataChannel.RED, BitmapDataChannel.GREEN, 100, 100, false);
//add filter
content.filter = dFilter;

// if update map
//draw displayobject (starling sprite)
dTexture.draw(mapsContainer)

// reset map
dFilter.mapTexture = dTexture




private function getSnapValue(arr:Vector., value:Number):Number {
			var diff:Number = 999999;
			var closest:Number = 0;
			for (var c in arr) {
				var r1:int = (value >> 16) & 0xff
				var r2:int = (arr[c] >> 16) & 0xff
				var g1:int = (value >> 8) & 0xff
				var g2:int = (arr[c] >> 8) & 0xff
				var b1:int = value & 0xff
				var b2:int = arr[c] & 0xff
				//3D pytagoras
				var d:Number = Math.sqrt(Math.pow(((r2-r1)*_red.value),2) + Math.pow(((g2-g1)*_green.value),2) + Math.pow(((b2-b1)*_blue.value),2)) //30 //59 // 11
				if (d < diff) {
					diff = d;
					closest = arr[c];
				}
			}
			return closest;
		} 
all code in this presentation is fragmented so you will have to figure the basic stuff out your self

CRAZY Filters

By Philip Thonbo

CRAZY Filters

  • 2,051