Simulating Liquid Graphical Effect

7 posts

Flag Post

I’ve been trying to replicate this…

without the physics, just to gain a simple understanding on how this bitmap effect happens.

Applying the blur is easy, but “applying the threshold to get hard edges” is what I don’t understand. I looked up thresholds, but they make no sense to me.

heres what I’ve got…

public function TarEngine() {			
	var filter:BitmapFilter = new BlurFilter(20, 20, BitmapFilterQuality.HIGH);
	var myFilters:Array = new Array();
	myFilters.push(filter);
//point is 0,0     //the "tar" bitmap is embeded in the main vars.
	tar.threshold(tar, tar.rect, point, "<=", 0xFFFFFFFF, 0xFFFFFFFF, 0xFFFFFFFF, false);

	for(var i:int = 0; i <= numTar; i++){
		canvas = new Bitmap();
		canvas.bitmapData = tar;
		canvasHolder = new CanvasHolder;
		stage.addChild(canvasHolder);
		canvasHolder.addChild(canvas);
		tar_a.push(canvasHolder);
		canvas.x = canvas.width * i - (numRow * canvas.width);
		numCollumn++;
				
		if(tar_a.length == 4 || tar_a.length == 8)numRow++;
				
		if(numRow > 0)canvas.y = canvas.height * i;
		canvas.filters = myFilters;
		canvasHolder.blendMode = BlendMode.ADD;
		canvasHolder.addEventListener(MouseEvent.MOUSE_DOWN, canvas_onMouseDown);
		canvasHolder.addEventListener(MouseEvent.MOUSE_UP, canvas_onMouseUp);
	}
}

my embedded tar.png is just a small black circle.
I’m able to drag around the bitmaps, and it does have an interesting effect, but its nowhere near the same thing I see that this guy has made.

 
Flag Post

This is a bit hard to explain. Let’s say you have a photo, and you want to highlight parts of the photo that are more red/green/blue/visible than a certain color, which is called a threshold. The method is called a threshold test, and in Flash, if the threshold test result is positive, you can change the color of the pixel to another color. This link explains more. It’d probably explain better than me too. In any case, hope I helped. :)

 
Flag Post

In this case, I feel like an extra bitmapdata would be required.
You’d apply the blur effect to the copy and threshold against that.

Something like this:
Clear bd and add particles.
Copy the bd.
Apply filter to the new bd.
tar.threshold(tarCopy...);

I’m not totally sure about this, but I think that’s the way to do it.
Applying a blur to the bd and then doing threshold with that same bd would onlypaint the blured area.

 
Flag Post

Yeah, use a second bitmap. The extra ram usage is fairly small. Heck, even do a separate bitmap for each step, then if something goes wrong, just put a different bitmap into the display list until you figure out which step is failing.

 
Flag Post

Thank you!
Also I found this very useful thread. OP asks a very similar question to mine, and 2DArray joins in and explains how he did this effect in “Spewer”.
Caution: old thread ahead. Please do not post in it.
http://www.kongregate.com/forums/4-programming/topics/136088

I’ve been messing around with it and I think I’ve got a better grasp of thresholds. Just not as used to messing with bitmaps and their related artsy programming effects : )
Heck, the first time I messed with bitmaps was about a month ago when I started getting into blitting.

 
Flag Post

Once you go bitmaps you never go back ;) have fun lol the possibilities are endless

 
Flag Post
Originally posted by Lucidius:

Once you go bitmaps you never go back ;) have fun lol the possibilities are endless

Every job has the right tool.