Browsing the archives for the actionscript 3 category.


Fountain equalizer now with source code

actionscript 3, classes, equalizer, Particles

I just edited the Fountain equalizer post adding the source code.
You’ll just need to download the two particles classes and copy the main code.

I received really a lot of requests about the code in the comments and by mail, and I am very pleased about this… means you liked it.

Expect more equalizing fun.

1 Comment

Actionscript 3 – PixelMorphing class first test (morphing with particles)

actionscript 3, BitmapData, classes, morphing, Particles

Hi there,
I am back after some pause with this interesting effect. This class takes every pixel from two pictures, sort them by averaged luminosity e reconstruct the second picture animating pixels from the first one.

The effect is a very nice pixel morphing (particles morphing) and the final result resambles some color ramp recolor tecnique.

pixelmorphing_test.jpg
Start demo

This is the second algorythm I wrote. The first one was build to do the calculation about moving pixels and then draw the full picture parsing the full array of pixels. The bigger problem in the first one was speed of execution.

The setPixel method of the BitmapData class is far too slow for this kind of effect and even slower was the parsing every frame of the full array containing all the pixel of the first image.

So I come with completely new algorythm that uses three bitmaps/bitmapdatas where the first only displays original image and set to trasparent only pixels that have moved away.
The scond one redraws every frame, but only displays moving pixels which are stored in a much shorter array and the last one shows only pixels which reached the final position.

With this second approach only pixels effectively changing are redrawn and a lot of speed can be gained.

This first post is only for showcase, during next days I will write a technical post about class structure, speed optimisations etc. off course with source code.

Don’t forget to leave a comment if you like it ;-)

22 Comments

“Learning Japanese” Game – Lesson 1: Hiragana

actionscript 3, fun, game, japanese

Hi there,

this is a small and simple game for learning hiragana.

Hiragana (平仮名 or ひらがな) is a Japanese syllabary, one component of the Japanese writing system, along with katakana and kanji;

The game is very simple but quite useful. This goes mainly for me and my Japanese language course mates: Manuel, Marco, Ester, Tommaso, Francesca, Barbara, Monica and offcourse the teacher Flavia chan :-) but can be useful for everybody studing this language.

To play you just need Adobe Flash Player 9 and installed support for japanese language in you operating system.

hiragana_part1.jpg
Start the game

Enjoy.

4 Comments

Actionscript 3 FrameRater Class

actionscript 3, classes, FrameRater, utils

In my previous post you may have noticed the little frame rate meter in the top left corner.
Somebody just asked me to post this simple but very useful class.

framerater.gif
Download FrameRater
.
..and extract it to: [your as3 classes dir]/com/oaxoa/components/

Usage is very simple:

// import class from the oaxoa package
import com.oaxoa.components.FrameRater;
// create a new instance
var fr:FrameRater=new FrameRater(0xffffff, true);
// position it where you want
fr.x=10; fr.y=10;
// add it to the displayList
addChild(fr);

The constructor function can receive four optionals parameters:

public function FrameRater(textColor:uint=0x000000, drawShadow:Boolean=false, showGraph:Boolean=true, graphColor:uint=0xff0000) {

Leave a comment if you like it ;)

4 Comments

Actionscript 3 fluids simulation

actionscript 3, BitmapData, fluids, simulation

Hi there, sorry for not posting for a while but have been days really full of work.
I find some time now to post a new experiment I did some week ago.

I was searching about fluids simulation and I found a lot of interesting studies from Jos Stam including this document entitled “Real-Time Fluid Dynamics for Games“.

Then I found a post on Nulldesign.de about a java fluid solver he found which is implementing the same routines from Jos Stam.

So I simply trashed my evolving algorythm and translate the java one into AS3 eliminated the walls calculation (I don’t like small spaces) and added a blur filter.

The result is quite interesting and you can see it here.

fluidsolver.jpg
See it in action
.

Simply click and drag for a while to add some fluid into the running simulation. Better looking when adding many times a little quantity in different places.
Press SPACE to reset simulation.


The main delusion was about speed. Ok, the actionscript virtual machine 2 (AVM2) is incredibly faster than AVM1 and the bitmapData class too, but stil not enough to compete with java. The most funny thing is that in the original document “Real-Time Fluid Dynamics for Games” at page 6, there the following loop:

void diffuse ( int N, int b, float * x, float * x0, float diff, float dt ) { 
	int i, j, k; 
	float a=dt*diff*N*N; 
	 
	for ( k=0 ; k<20 ; k++ ) { 
		for ( i=1 ; i<=N ; i++ ) { 
			for ( j=1 ; j<=N ; j++ ) { 
				x[IX(i,j)] = (x0[IX(i,j)] + a*(x[IX(i-1,j)]+x[IX(i+1,j)]+ x[IX(i,j-1)]+x[IX(i,j+1)]))/(1+4*a); 
			} 
		} 
		set_bnd ( N, b, x ); 
	} 
} 

Notice the main for loop starting from k=0 and ending with k=20?
I thought this was used to average the relaxation routine result on 20 samples or something similar but if you look at it better you will see than there are no increments, decrements or averaging functions, but just simple value assignment and not using k index at all.

In the java fluid solver the same loop is implemented (and the result is still faster than mine in as3 :-( ). I simply totally removed the k loop and gained 20x speed with (apparently) no cons.

However the main coclusion is that Java is still a lot faster on some math operations and pixel access as described in this comparison paper i found.

Here is the as3 fluid solver class.

Extract it to your as3 classes dir after creating this path:
com/oaxoa/misc/

This class doesn't render or manage user interaction, just solve the fluids interactions in a linearized matrix. To see something on the screen you just need some lines to manage the data. I am actually to busy/lazy to wrap this into a class, maybe I will do, until then just paste this code to the main timeline:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.KeyboardEvent;
import flash.filters.BlurFilter;
import com.oaxoa.misc.FluidSolver;
import com.oaxoa.components.FrameRater;

// frame dimensions (dxd pixels)
var d:int = 200;

// solver variables
var n:int = 40;
var dt:Number = 0.52;
var fs:FluidSolver = new FluidSolver();

// mouse position
var xOld:int;
var yOld:int;

// cell index
var tx:int;
var ty:int;

// cell dimensions
var dg:int;
var dg_2:int;

// cell position
var dx:int;
var dy:int;

// fluid velocity
var u:int;
var v:int;
var c:int;

var blur:BlurFilter=new BlurFilter(5,5,5);
var bd:BitmapData=new BitmapData(d,d, false, 0x000000);
var bmp:Bitmap=new Bitmap(bd);
bmp.filters=[blur];
var holder:Sprite=new Sprite();
holder.addChild(bmp);
addChild(holder);

var fr:FrameRater=new FrameRater(0xffffff, true);
fr.y=10;
addChild(fr);

function reset():void {
	dg   = d  / n;
	dg_2 = dg / 2;
	fs.setup(n, dt);
}

function paint():void {
	var c:int;
	// clear screen
	bd.fillRect(new Rectangle(0, 0, d, d), 0x000000);

	fs.velocitySolver();
	fs.densitySolver();
	for (var i:int = n; i >= 1; i--) {
		// x position of current cell
		dx = int(( (i - 0.5) * dg ));
		for (var j:int = n; j >= 1; j--) {
			// y position of current cell
			dy = int(( (j - 0.5) * dg ));
			// draw density
			var dd:Number=fs.d[I(i, j)];
			if (dd > 0) {
				var r:Number=dd*255;
				if(r>255) r=255;
				c = r << 16 | r << 8 | r;
				if (c < 0) {
					c = 0;
				}
				bd.fillRect(new Rectangle(dx-dg_2, dy-dg_2, dg, dg), c);
			}
		}
	}
}

reset();

addEventListener(Event.ENTER_FRAME, onframe);
function onframe(event:Event):void {
	paint();
}

stage.addEventListener(KeyboardEvent.KEY_UP, onkeyup);
function onkeyup(event:KeyboardEvent):void {
	if(event.keyCode==32) reset();
}
var adding:Boolean=false;
holder.addEventListener(MouseEvent.MOUSE_MOVE, onmove);
holder.addEventListener(MouseEvent.MOUSE_DOWN, ondown);
holder.addEventListener(MouseEvent.MOUSE_UP, onup);
function ondown(event:MouseEvent):void {
	adding=true;
}
function onup(event:MouseEvent):void {
	adding=false;
}
function onmove(event:MouseEvent):void {
	if(adding) {
		tx=int(mouseX/dg);
		ty=int(mouseY/dg);
		if(tx>n) tx=n;
		if(tx<1) tx=1;
		if(ty>n) ty=n;
		if(ty<1) ty=1;
		
		fs.dOld[I(tx, ty)]=30;
	}
}

// util function for indexing
function I(i:int, j:int):int {
	return i + (n + 2) * j;
}





If you want to discuss about this just leave a comment.

Anyway, just thought I'd share with you guys, I'm thinking of getting a reseller hosting plan so I can enhance the perfomance of the site and start my own hosting business, maybe in the future.

17 Comments
« Older Posts
Newer Posts »