Contact
Browsing the blog archives for December, 2007.
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.

No Comments

How many HTML tags do you know?

December 27, 2007
Pierluigi Pesenti
fun, game, html

Funny quiz about how many html (4) tags you can list in five minutes.
I personally switched to XHTML strict many years ago and so I am proud that I forgot such obsolete tags as FONT and FRAMESET.

However I listed 56 tags in 5 minutes (and they are much more than I actually need in xhtml).
If you Want to ry it yourself just click on the picture to start your test.

56

Thanks to w3facile.com for the link.

If you want you can try more funny tests.

No Comments

Actionscript particles - Fountain equalizer

December 27, 2007
Pierluigi Pesenti
Particles, actionscript 3, equalizer

Here’s a new experiment.
It uses the computeSpectrum method together with a simple particles class i wrote.

I think the effect is graphically very satisfing and personally cannot stop to look at it.
The song is “Aria regina della notte” from Mozart’s “Flauto Magico”.

Tomorrow I’ll post code and sources of this.

Hope you’ll be hypnothized from this as I am.

The picture is not well explaining, you must see this in action.

EDIT:

Ok, sorry for the late but here we are with the source code:

Download the SimpleParticleGenerator and SimpleParticle class zipped togheter, then just use this code to build the equalizer.
I release the code just now because I wanted to wrap the main code in a class too, and maybe add some methods to scale it like a component, but I realized it’s totally unuseful for few lines of code, and I don’t wanna loose the fun part in the experiment.

I promise that from now I will be faster to release the source code :) 

// Author: Pierluigi Pesenti
// Web: http://blog.oaxoa.com
 
import flash.media.Sound;
import flash.net.URLRequest;
import flash.media.SoundMixer;
import flash.utils.ByteArray;
import flash.events.*;
import flash.display.Sprite;
import flash.filters.GlowFilter;
import com.oaxoa.fx.SimpleParticleGenerator;
import com.oaxoa.components.FrameRater;
 
var req:URLRequest=new URLRequest("mozart.mp3");
var sound:Sound=new Sound(req);
var ba:ByteArray=new ByteArray();
var samples:uint=32;
var offset:uint=256/samples;
 
// create a sprite and add 1*samples istances of the SimpleParticleGenerator class
var _holder:Sprite=new Sprite();
for(var i:uint=0; i<samples; i++) {
	var pg:SimpleParticleGenerator=new SimpleParticleGenerator();
	pg.y=252;
	pg.x=15+i*offset*2;
	pg.angleDeg=-90;
	_holder.addChild(pg);
}
 
// add the holder sprite and start music
addChild(_holder);
sound.play();
 
// listener for frame based animation
addEventListener(Event.ENTER_FRAME, onframe);
 
// some fancy glow filter
// the glow filter is added to the holder sprite
// and not to the single particle for two reasons
// a lot of speed gain, and visually better blend result
var glow:GlowFilter=new GlowFilter();
glow.color=0xFFAA00;
_holder.filters=[glow];
 
// at every frame
function onframe(event:Event):void {
	// compoute sound specturm
	SoundMixer.computeSpectrum(ba, true);
	var count:uint=0;
	//for every generator
	// with a 0-256 range only the left channel is sampled
	// you can easily goto from 256 to 512 for the right or sample both and average value
	for (var i:uint=0; i<256; i+=offset) {
		var t:Number=ba.readFloat();
		var n:Number=t*20;
		var g=_holder.getChildAt(count);
		// set the particles speed at a value of n
		// n = the sound peak * 20 to raise the effect
		g.speed=n;
		count++;
	}
}
 
//add frame rate meter
var fr:FrameRater=new FrameRater(0xffFFFF, false, true, 0x0099ff);
addChild(fr);

Expect more equalizing fun.

21 Comments

Actionscript 3 Videowall / Videotexture

December 26, 2007
Pierluigi Pesenti
BitmapData, actionscript 3, video

Here I am with my first experiment on this blog.

I was trying to get a videowall effect by displaying many times the same video tiled on X rows and columns.

The bad one…

The logic says to create N*N Video Class instances and position them dinamically with a double for loop on rows and columns.
Alternatively we can speed up things by using the FLVPlayback component so we don’t need to manage connections and NetStream objects.

As I expected that couldn’t be that simple. Just with 10*10 (100 for non-math guys :-)) wall the frame rate is fast dropping and audio and video desynch issues appear. Another point is that you have to manually mute all FLVPlayback/Video instances except one for having one single audio playback.

Here is the “bad” code:

/*
SUMMARY:
This example will try to create a video wall instancing many times the FLVPlayback component with the same video source.
Results are very poor performances and audio sync issues.
*/
 
import fl.video.FLVPlayback;
 
/* set the number of horizontal and vertical tiles
a matrix of tiles*tiles instances will be created
try with very low numbers to avoid crashes.
A value of 10 will produce (10*10=) 100 instances of the FLVPlayback on the stage 
 */
var tiles:uint=4;
 
// get stage size for tile size calculating
var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;
 
// calculate the size of a single tile
var vw:Number=sw/tiles;
var vh:Number=sh/tiles;
 
// perform a double cicle on rows and columns
for (var i:uint=0; i<tiles; i++) {
	for (var j:uint=0; j<tiles; j++) {
		var video:FLVPlayback=new FLVPlayback();
		video.source="onepiece.flv";
		// mute it if you don't wanna go crazy
		video.volume=0;
		// let's jump to the action
		video.seek(7);
		video.x=j*vw;
		video.y=i*vh;
		video.setSize(vw, vh);
		// add to stage the newly created FLVPlayback instance
		addChild(video);
	}
}

If you use FLVPlayback as I do in the above code just remember to drop the component in the library before compiling the movie or flash will not be able to attach it dinamically.

And here is the (almost) working example.

As you can see videos are not perfectly synchronized and just raise a little the tiles number to make everything laggy.

…and the good one

Ok, now the better idea in another picture and few words:

  1. Add a single FLVPlayback instance
  2. create e bitmapdata and a bitmap to display it
  3. add a frame based event to apply the draw() method of the bitmapdata to the video instance N*N times at everyframe with a translation matrix to set the position of every tile.
  4. add the bitmap to the stage and hide the FLVPlayback instance.
  5. Enjoy

I really couldn’t believe how the new AS3 bitmap engine can perform well once again. I have added a numeric stepper to let you dinamically change the tiles number and test it yourself. I set the limit to 50*50 (2500!) tiles and on my old Athon XP 3200 it just shows a little of audio stuttering when reaching that limit.

Here is the well working example,

and here comes the code:

/*
SUMMARY:
This example will use a single bitmap and the bitmapdata draw() method to render everyframe the video content as texture
*/
 
import fl.video.FLVPlayback;
import fl.video.VideoScaleMode;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Matrix;
import fl.controls.NumericStepper;
 
// get stage size for tile size calculating
var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;
 
var tiles:uint;
var vw:Number;
var vh:Number;
 
// create a single instance of the FLVPlayback component
var video:FLVPlayback=new FLVPlayback();
video.source="onepiece.flv";
video.scaleMode=VideoScaleMode.EXACT_FIT;
video.seek(7);
// add to stage the newly created FLVPlayback instance
addChild(video);
video.visible=false;
 
// create the destination bitmap/bitmapdata
var bdata:BitmapData=new BitmapData(sw, sh, false, 0xeeeeee);
var bitmap:Bitmap=new Bitmap(bdata);
addChild(bitmap);
// perform a double cicle on rows and columns
 
 
function setTiles():void {
	// get the tiles number from the NumericStepper value
	tiles=stepper.value;
	// calculate the size of a single tile
	vw=sw/tiles;
	vh=sh/tiles;
	video.setSize(vw, vh);
}
addEventListener(Event.ENTER_FRAME, onframe);
function onframe(event:Event):void {
	for (var i:uint=0; i<tiles; i++) {
		for (var j:uint=0; j<tiles; j++) {
			var matrix:Matrix=new Matrix();
			matrix.translate(j*vw, i*vh);
			bdata.draw(video, matrix);
		}
	}
}
 
// add a NumericStepper for testing purposes
var stepper:NumericStepper=new NumericStepper();
stepper.minimum=1;
stepper.maximum=50;
stepper.value=4;
addChild(stepper);
stepper.x=sw-100;
stepper.y=16;
stepper.addEventListener(Event.CHANGE, onstepper);
 
function onstepper(event:Event):void {
	setTiles();
}
 
// start
setTiles();

Hope you liked my first actionscript post.

Edit: I didn’t forget the beginBitmapFill method, but the project started a little different (not all the tiles was identical) and so I left the manual loop. In a few times I’ll post the beginBitmapFill version for performance comparison.

7 Comments

First post

December 15, 2007
Pierluigi Pesenti
general

Welcome to my brand new blog.

As described in the about page I will try to discuss about actionscript 3 and other web related topics.
I am now trying to find some cool theme for this wordpress based blog to start with a decent presentation and then eventually customize it.

If you’ve got some good link to pass me just type it in the comments.

Thanks to everybody will wanna read me.

Pierluigi Pesenti

No Comments