Contact
Subscribe


Actionscript 3 blobs / lava lamp effect

December 28, 2007
Pierluigi Pesenti
BitmapData, actionscript 3, perlinNoise, threshold

Here we are with a new as3 experiment.
This time I wanted to try to simulate some mercury-like fluid with its blobby aspect that resembles some sort of lava lamp.

Off course everything animated.


See this in action

This tecnique is quite simple, you just need some fantasy to reach the final effect:

  1. Create two BitmapData
  2. Create a Bitmap object linked to one of the BitmapData and add to the display list
  3. Apply a PerlinNoise with two octaves to the first (hidden) BitmapData
  4. Use the threshold method on the second (displayed) BitmapData
  5. Add some ubercool filters
  6. Animate everything on a frame based event
  7. Enjoy the magic

Here is the code:
(I will post the FrameRater class soon, until that just comment relatives lines and as usually remember to drop an instance of the components used (checkBox, slider) to the library before compiling or flash won’t be able to attach them dinamically)

import flash.display.Shape;
import flash.events.Event;
import flash.display.Bitmap;
import flash.display.BitmapData;
import fl.controls.Slider;
import fl.controls.CheckBox;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.filters.BevelFilter;
import flash.filters.BlurFilter;
import flash.filters.GlowFilter;
import com.oaxoa.components.FrameRater;
 
var w:Number=300;
var rect:Rectangle=new Rectangle(0,0,w,w);
var point:Point=new Point(0,0);
var a:Array=[new Point(1,1), new Point(3,3)];
 
var bd:BitmapData;
var bd2:BitmapData;
var bmp:Bitmap;
 
var bevel:BevelFilter;
var blur:BlurFilter;
var glow:GlowFilter;
 
var shape:Shape;
var ns:Slider;
var cb:CheckBox;
var fr:FrameRater;
 
initFilters();
initBmp();
initInterface();
 
function onframe(event:Event):void {
	a[0].x+=1;
	a[0].y+=1;
	a[1].x+=2;
	a[1].y+=0;
	bd.perlinNoise(105,105,2,0,false,true, 7, true, a);
	bd2.fillRect(rect, 0x00000000);
	bd2.threshold(bd, rect, point, ">", ns.value/255*0xffffff, 0xffff8000, 0x00ffffff, false);
}
 
function initBmp():void {
	bd=new BitmapData(w,w);
	bd2=new BitmapData(w,w);
	bmp=new Bitmap(bd2);
	bmp.filters=[blur, bevel, glow];
	addChild(bmp);
	addEventListener(Event.ENTER_FRAME, onframe);
}
 
function initFilters():void {
	bevel=new BevelFilter();
	bevel.blurX=bevel.blurY=20;
	bevel.distance=10;
	bevel.highlightColor=0xffffff;
	bevel.shadowColor=0xCC0000;
	blur=new BlurFilter(2,2);
	glow=new GlowFilter(0xFFAA00, 1, 20, 20, 2, 1, false, false);
}
function initInterface():void {
	// draw the white bar
	shape=new Shape();
	shape.graphics.beginFill(0xffffff, .75);
	shape.graphics.drawRect(0,0,w,30);
	shape.graphics.endFill();
	shape.y=w-30;
	// create slider
	ns=new Slider();
	ns.x=80;
	ns.y=w-18;
	ns.minimum=0;
	ns.maximum=255;
	ns.value=150;
	ns.snapInterval=1;
	ns.liveDragging=true;
	// create checkbox
	cb=new CheckBox();
	cb.label="Use filters";
	cb.selected=true;
	cb.x=200;
	cb.y=w-27;
	cb.addEventListener(Event.CHANGE, switchFilters);
	// create FrameRater
	fr=new FrameRater();
	fr.y=w-30;
	// add iutems to display list
	addChild(shape);
	addChild(ns);
	addChild(cb);
	addChild(fr);
}
 
function switchFilters(event:Event):void {
	event.currentTarget.selected ? bmp.filters=[blur, bevel, glow] : bmp.filters=[blur];
}

Important: don’t know why but i found a little bug in the flash CS3 actionscript editor. If you try to autoformat the above code the function switchFilters will be messied up. The line using the ternary operator (just a simpler way to write an if) will be pushed out of the curly brace so pay attention.

9 Responses

  1. Dave  •  December 18, 2008 @2:21 am

    Thanks, pointed me in the right direction!

  2. Sidney de Koning  •  January 6, 2009 @5:43 pm

    Hi,
    I just went through your site and just love your experiments! They really kick ass! The ASCII stuff is mad so is this lava lamp. Anyway, i looked through your code and everywhere you instanciate the FrameRater() and could not find a download anywhere. Here you say you will post it soon. Are you still thinking about posting it? Id really like to see how you make that graph.

    I hope you post the source for it :),

    Kind regards,

    Sidney

  3. Pierluigi Pesenti  •  January 6, 2009 @7:37 pm

    Tnx man, however you just did miss the right post ;), the class is right here:
    http://blog.oaxoa.com/2008/01/21/actionscript-3-framerater-class/

  4. Pierluigi Pesenti  •  January 7, 2009 @8:03 am

    Hey Sidney, I just looked at your blog and subscribed to the rss.
    Nice and informative stuff :) keep on going

  5. Popinjay  •  December 19, 2009 @7:26 am

    This is a great demo, but I was wondering if you could explain how/why this is working in more detail. How as the bitmaps affecting each other?

  6. Pierluigi Pesenti  •  December 19, 2009 @9:37 am

    There are no multiple bitmpas, only one. Simply try (you can do it in photoshop, it is the same process):
    - Apply a perlinNoise (clouds filter in photoshop)
    - Apply a BlurFilter (Gaussian blur in photoshop) [optional]
    - Apply a threshold

    In two words the threshold selects the pixels that are brighter than a certain value. Doing this on a perlinNoise/clouds image you already have a fancy pattern, but too jagged to look like blobs, so simply blur it before applying a threshold smooths the noise and subsequently the edges of the blobs.

  7. mimetikxs  •  December 24, 2009 @5:35 pm

    Wow! Quality visual stuff in your site!
    Thank you for sharing your knowledge.

  8. LavaLavaLamps  •  January 12, 2010 @11:03 am

    Hey I caught your blog and you mentioned lava lamps, which kind of lit a lightbulb in my head. Man, I love lavalamps and I bet others besides me among your readers would benefit from something I’ve been working on for awhile. The is URL attached to my comment for my site, LavaLavaLamps. I’ve had a site up for awhile and we offer lava lampsf or sale. So, if anyone wants to buy a new lavalamp that’s lost or misses their old one from the 70s, please do. Enjoy!

  9. Ronzy  •  July 28, 2010 @10:06 am

    Hey!!! Werry good job!

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>