Oaxoa Blog

3D Christmas tree (aka the “Merry Christmas” post)

Pierluigi Pesenti — Thu, 24 Dec 2009 09:07:22 +0000

Hi there,

lot of time without posting some code. I have been working three months on a Disney project, which will be on-line soon and makes me very proud, but almost drained all of my energies.

Here is my Christmas card/gift for my readers, in less than 80 lines of code. Obviously with source code. The lights are vector graphics in the attached FLA’s library to make it easy to customize or animate.

Nothing too fancy here about the code, just some trigonometric math. You can have a look at the correctOrientations function which can be interesting to avoid lights deformations due to the FP10 native 3D.
Download source code.

I wish you all great winter holidays, and an awesome beginning of 2010!
And make me smile by leaving a greetings comment

Watch the running example:
Click to start (mouseX affects rotation)

Google Translate database is… Windows Font Viewer

Pierluigi Pesenti — Tue, 17 Nov 2009 01:10:29 +0000

Google Translate goes realtime… -_-

Just a quick (non-technical) post, but I cannot resist… Ok, Google translate introduces a realtime translation feature as highlighted as every new Google feature by billions of blogs (I saw it here: http://mashable.com/2009/11/16/google-translate-update/), but where is the GTranslate database taken from?

Does Anyone know? I do…
The Google Translate source database is… Windows Font Viewer!

Any other way to explain how is it possible that writing:
“a quick brown fox”

is translated in

“uno Cantami o Diva” (literally: “one Sing, O goddess”)

(Try it yourself)

For those not into Greek epic poems translated in Italian, this is the beginning of the Homer’s Iliad which in my language reads:

Cantami, o Diva, del Pelìde Achille
l’ira funesta che infiniti addusse
lutti agli Achei, molte anzi tempo all’Orco
generose travolse alme d’eroi,
e di cani e d’augelli orrido pasto
lor salme abbandonò (così di Giove
l’alto consiglio s’adempìa), da quando
primamente disgiunse aspra contesa
il re de’ prodi Atride e il divo Achille.
E qual de’ numi inimicolli?

So how is it possible that a brown fox becomes a singing Goddess? I couldn’t remember but then I realized that the beginning of that poem is used by the Italian version of Windows in the font viewer to preview fonts!

So “A quick brown fox jumped over a lazy dog” (which is used in the English version since it contains every letter of the alphabet –a pangram) according to GTranslate in Italian should be translated with the beginning of a classical piece of literature… just because it’s another common pangram (almost)).

Obviously the magic doesn’t end here: just change “a quick brown fox” in “A quick brown fox” (with capital A) and the result is “Una volpe veloce” (correct)…

or remove the article: “quick brown fox” and the result is “quick brown fox” (not translated at all)!

I can understand translating from english to japanese (which are structurally completely different languages) back and forth can produce funny idiosyncrasies as seen on Translation Party but Italian is more similar and “quick”, “brown” and “fox” are common words learned at the first grade during the English lessons.

So I never wrote a dictionary db or algorithm and I am not so sure I could do better, but Google surely can, and first things should come first.

NihongoUp by divita – Learn japanese the fun way

Pierluigi Pesenti — Sun, 18 Oct 2009 14:05:24 +0000

This is the first time I publish a review, but since I am learning japanese and this game is so much fun and so much useful I think it deserves visibility.

NihongoUp is a japanese learning game developed in Adobe AIR by Philip Seyfi.
It is structured in four main categories:

Kana (Hiragana, Katakana, All kana)
Kanji (JLPT 3, JLPT 2)
Vocabulary (JLPT 4, JLPT 3, JLPT 2, JLPT 1)
Grammar (particles, counters)

There are mainly two kinds of games, a typing one, used in the “Kana” section where lots of balloon comes down the screen with a japanese symbol attached. You have to type the translitterated kana before the balloon disappears to gain score points and raise the level number. It’s simply funny and perfect for someone at the beginning of the studying process.

The other kind of game reuses the concept of the falling balloons but you simply have to choose between four possible answers to the question located at the bottom of the screen. This game concept is used in the other sections, where you can train your Kanji knowledge, grammar skills or the richness of your japanese vocabulary.

What else to say? It is well coded and the database is huge with ~~8000~~ 10000 (!) records filled all the JLPT Kanjis and training sentences, so this game could really help the willing student to become a japanese language master, with fun.

So if you are studying japanese and you are a flash developer (likely as you are reading this…), support this valuable work. A license serial number costs only $4.99 and before buying you can trying a free trial to test it out.

http://nihongoup.com/

I’ll soon be back posting lots of new actionscript stuff. Have a nice sushi day

Actionscript 3 – as3 | Rorschach mask (realtime animated inkblots)

Pierluigi Pesenti — Fri, 11 Sep 2009 07:19:13 +0000

Everybody knows about Rorschach inkblot tests, and they always charmed me… It’s like looking clouds and recognizing different shapes.

However I must admit the real turn on came after watching Watchmen the movie. Seeing those animated inkblots on the face of the character symbolically named Rorschach is something really fascinating. So here we are, after about an hour of coding fun this is what I came up with.

Click to start

Here after adding a cool persistence of the ink (call it motion blur if you like), and the face oval:

Click to start

How it’s made is quite simple:

- perlinNoise a bitmapData
- draw a circular gradient mask (I used a beginGradientFill on a Shape/Sprite)
- BitmapData.draw() the mask onto the perlinNoise bitmapData
- threshold
- (optional) a little blur to simulate antialias

Since a picture is worth a thousand words:

Click to see it moving

I’ve built a class to do this easily. Six parameters are optional to instance it:

public function Rorschach(w:uint=400, h:uint=400, mirror:Boolean=true, seed:uint=0, ovalClass:Class=null, ovalScale:Number=1, ovalYOffset:Number=0)

ovalClass is the (optional) reference to the class containing the face background.

So the usage is very simple, here an example:

import com.oaxoa.fx.Rorschach;
addChild(new Rorschach(300,300));
//addChild(new Rorschach(300,300,true,0,blankMaskImage, 1.2, -20));

Download Rorschach class for your experimentation pleasure.

All nice, but the aim of this simple experiment is seeing Rorschach animated face in action so here we go… we will be using this class in a practical example.

To simulate 3D volume and perspective we need flash CS4 (or any 3D engine):
we create a MovieClip which has the Rorschach class instanced and a rectangular solid background for composition reference in it. Then we set layer visibility to wireframe and add another instance to the stage, which is flipped horizontally.
Just position the two instances using 3D rotations and we are ready.

Just build et voilà!

Click to start

Rorschach’s Journal. October 12th, 1985. Dog Carcass in alley this morning, tire tread on burst stomach. This city is afraid of me. I have seen its true face. The streets are extended gutters and the gutters are full of blood and when the drains finally scab over, all the vermin will drown. The accumulated filth of all their sex and murder will foam up about their waists and all the whores and politicians will look up and shout ‘Save us!’ And I’ll look down, and whisper ‘no.’

The last (and D-E-F-I-N-I-T-I-V-E! ) usage for this is apply it to a realtime webcam face detection algorithm. I used this originally created by Ohtsuka Masakazu and optimized by Mario Klingemann. The result is totally weird (don’t expect photoreal hollywood effect LOL) but it’s funny, even if the face detection algorithm is not perfectly smooth.

Have fun being the definitive comics anti-hero:

Click to start

Actionscript 3 – as3 Lightning / Thunderbolt / Electric discharge Class

Pierluigi Pesenti — Mon, 27 Jul 2009 21:34:28 +0000

Finally here we come!

Yup, sry for the delay, I’ve had a lot of work recently.

I have prepared three demos and a publishable (but far from perfect and not yet documented) class. The demos are FLA based… you can find the timeline code to assemble the demos at the bottom of the post. I’ll publish some documentation in the next days, so until then just look at the demos’ code to unserstand the basic of the class usage.

Download Lightning classes

Demo N°1:
This demo shows the two different behaviours the class can mimic: Electric discharge/beam or lightning. Drag the ball near or far to the coil to see different behaviors.

Click to start

Demo N°2:
This demos show the maxLength and maxLengthVary properties in action.
Bring the fingers near to the plug to have continuos electricity. Bringing the hand far from the plug lowers the discharge probability. Reaching the max distance simply disables it.

Click to start

Demo N°3:
This demo is a good reason for the publishing delay

A nice sandbox to play with (some of) the properties.
The class is recursive to create children so many properties have also a decay twin property which rule how the property is passed to children.
As instance if you set a childrenMaxCount = 6 to the main Lightning instance it will have a maximum of 6 direct children. Its children will have a childrenMaxCount value which depends on the main instance childrenMaxCount and childrenMaxCountDecay.
So if you set childrenMaxCount = 6 and childrenMaxCountDecay = .5 the children of the main instance will have childrenMaxCount = 3.
If you set childrenMaxCount = 6 and childrenMaxCountDecay = 0 the children of the main instance will have childrenMaxCount = 6 (no decay).

This value can be very useful to optimize the speed of execution cause smaller branches don’t need many children or many steps of detail.

Click to start

Ok, I’m too tired to write more. I’ll publish some documentation in the next days.
Feel free to ask everything question you can have in the comments, and as usual if you like this stuff scream it in the comments!

Demos’ code after the break. Waiting for your comments I will surf through the website of fatcow and see if they have any good hosting plans.

Demos code is just timeline code to instance and pilot the lightning class… and very untidy! Please don’t blame it

Demo N°1:

import com.oaxoa.fx.Lightning;
import com.oaxoa.fx.LightningFadeType;

const cx:uint=360;
const cy:uint=320;

var color:uint=0xffffff;
var ll:Lightning=new Lightning(color, 2);
ll.blendMode=BlendMode.ADD;
ll.childrenDetachedEnd=true;
ll.childrenLifeSpanMin=.1;
ll.childrenLifeSpanMax=2;
ll.childrenMaxCount=4;
ll.childrenMaxCountDecay=.5;
ll.steps=150;
ll.alphaFadeType=LightningFadeType.TIP_TO_END;

ball.useHandCursor=ball.buttonMode=true;
dot1.mouseEnabled=dot2.mouseEnabled=false;
dot1.alpha=.75;

var glow:GlowFilter=new GlowFilter();
glow.color=color;
glow.strength=3.5;
glow.quality=3;
glow.blurX=glow.blurY=10;
ll.filters=dot1.filters=dot2.filters=[glow];
addChild(ll);

ll.childrenProbability=.3;

var p:Point=new Point();
randomizePoint();
function randomizePoint():void {
	var angle:Number=-Math.random()*Math.PI;
	var dist:Number=160+Math.random()*180;
	p.x=cx+Math.cos(angle)*dist;
	p.y=cy+Math.sin(angle)*dist;
}

addEventListener(Event.ENTER_FRAME, onframe);
function onframe(event:Event):void {
	
	var rnd:Number=Math.random();
	if(rnd<.05) randomizePoint();
	var dx:Number=cx-ball.x;
	var dy:Number=cy-ball.y;
	var d:Number=Math.sqrt(dx*dx+dy*dy);
	if(d<310) {
		dot2.visible=true;
		if(ll.childrenDetachedEnd) {
			ll.childrenDetachedEnd=false;
			ll.alphaFadeType=LightningFadeType.GENERATION;
			ll.killAllChildren();
		}
		
		ll.endX=dot2.x=ball.x;
		ll.endY=dot2.y=ball.y;
	} else {
		dot2.visible=false;
		if(!ll.childrenDetachedEnd) {
			ll.childrenDetachedEnd=true;
			ll.alphaFadeType=LightningFadeType.TIP_TO_END;
			ll.killAllChildren();
		}
		ll.endX=p.x;
		ll.endY=p.y;
	}
	var ddx:Number=cx-ll.endX;
	var ddy:Number=cy-ll.endY;
	var aangle:Number=Math.atan2(ddy, ddx);
	ll.startX=cx-Math.cos(aangle)*80;
	dot1.scaleX=Math.sin(aangle);
	ll.startY=cy;
	dot1.x=ll.startX;
	dot1.y=ll.startY;
	ll.update();
}

ball.addEventListener(MouseEvent.MOUSE_DOWN, onmdown);
function onmdown(event:MouseEvent):void {
	ball.startDrag();
}
ball.addEventListener(MouseEvent.MOUSE_UP, onmup);
function onmup(event:MouseEvent):void {
	ball.stopDrag();
}

Demo N°2:

import com.oaxoa.fx.Lightning;
import com.oaxoa.fx.LightningFadeType;

setChildIndex(fingers, 2);

var iy:Number=fingers.y;
addEventListener(MouseEvent.MOUSE_MOVE, onmove);

fingers.x=fingers.y/2.5-10;

function updatePositions():void {
	ll.endX=fingers.x+fingers.dot1.x;
	ll.endY=fingers.y+fingers.dot1.y;
	ll2.endX=fingers.x+fingers.dot2.x;
	ll2.endY=fingers.y+fingers.dot2.y;
}

function onmove(event:MouseEvent):void {
	fingers.y=mouseY-150;
	if(fingers.y320) fingers.y=320;
	fingers.x=fingers.y/2.5-10;
	updatePositions();
	event.updateAfterEvent();
}
addEventListener(Event.ENTER_FRAME, onframe);
function onframe(event:Event):void {
	ll.update();
	ll2.update();
}

var color:uint=0xddeeff;
var ll:Lightning=new Lightning(color, 2);
var ll2:Lightning=new Lightning(color, 2);
ll.blendMode=ll2.blendMode=BlendMode.ADD;
ll.childrenProbability=ll2.childrenProbability=.5;
ll.childrenLifeSpanMin=ll2.childrenLifeSpanMin=.1;
ll.childrenLifeSpanMax=ll2.childrenLifeSpanMax=2;
ll.maxLength=ll2.maxLength=50;
ll.maxLengthVary=ll2.maxLengthVary=200;

ll.startX=dot3.x;
ll.startY=dot3.y;
ll2.startX=dot4.x;
ll2.startY=dot4.y;

var glow:GlowFilter=new GlowFilter();
glow.color=color;
glow.strength=3.5;
glow.quality=3;
glow.blurX=glow.blurY=10;
ll.filters=ll2.filters=[glow];
addChild(ll);
addChild(ll2);

updatePositions();

Demo N°3:
(The ugliest bunch of random code lines ever written )

import com.oaxoa.fx.Lightning;
import com.oaxoa.fx.LightningFadeType;
import com.oaxoa.components.ToolTip;
import fl.controls.Button;
import fl.data.DataProvider;

import fl.events.SliderEvent;
var color:uint=0xffffff;
var ll:Lightning=new Lightning(color, 2);
ll.blendMode=BlendMode.ADD;

var glow:GlowFilter=new GlowFilter();
glow.color=color;
glow.strength=4;
glow.quality=3;
glow.blurX=glow.blurY=10;
ll.filters=[glow];
addChild(ll);
ll.startX=cross1.x;
ll.startY=cross1.y;

ll.endX=cross2.x;
ll.endY=cross2.y;

setChildIndex(ll,0);

ll.childrenMaxGenerations=3;
ll.childrenMaxCountDecay=.5;

addEventListener(Event.ENTER_FRAME, onframe);
function onframe(event:Event):void {
	ll.startX=cross1.x;
	ll.startY=cross1.y;
	
	ll.endX=cross2.x;
	ll.endY=cross2.y;
	ll.update();
	updateCircles();
}

import com.oaxoa.components.FrameRater;
var fr:FrameRater=new FrameRater(0xffffff, true);
addChild(fr);

var ttip:ToolTip=new ToolTip();
addChild(ttip);

var tfmt:TextFormat=new TextFormat("_sans", 11, 0xffffff);

cb0.addItem({label:"Choose a preset", value:0});
cb0.addItem({label:"Fast discharge", value:1});
cb0.addItem({label:"Fast discharge (Max length + max length variation)", value:2});
cb0.addItem({label:"Fast discharge (slow-motion)", value:3});
cb0.addItem({label:"Moving Thunderbolt", value:4});
cb0.addItem({label:"Moving Thunderbolt (Max length + max length variation)", value:5});
cb0.selectedIndex=0;
cb0.addEventListener(Event.CHANGE, oncb);
cb0.textField.setStyle("textFormat", tfmt);
cb0.dropdown.setRendererStyle("textFormat", tfmt);

cb1.addItem({label:"Discharge", value:false});
cb1.addItem({label:"Lightning (detached end)", value:true});
cb1.selectedIndex=1;
cb1.addEventListener(Event.CHANGE, oncb);
cb1.textField.setStyle("textFormat", tfmt);
cb1.dropdown.setRendererStyle("textFormat", tfmt);

cb2.addItem({label:"None", value:LightningFadeType.NONE});
cb2.addItem({label:"Generation", value:LightningFadeType.GENERATION});
cb2.addItem({label:"Tip to end", value:LightningFadeType.TIP_TO_END});
cb2.selectedIndex=2;
cb2.addEventListener(Event.CHANGE, oncb);
cb2.textField.setStyle("textFormat", tfmt);
cb2.dropdown.setRendererStyle("textFormat", tfmt);

cb3.addItem({label:"None", value:LightningFadeType.NONE});
cb3.addItem({label:"Generation", value:LightningFadeType.GENERATION});
cb3.addItem({label:"Tip to end", value:LightningFadeType.TIP_TO_END});
cb3.selectedIndex=2;
cb3.addEventListener(Event.CHANGE, oncb);
cb3.textField.setStyle("textFormat", tfmt);
cb3.dropdown.setRendererStyle("textFormat", tfmt);

function oncb(event:Event):void {
	var t:ComboBox=event.currentTarget as ComboBox;
	switch(t) {
		case cb0:
			setPreset(t.selectedItem.value);
			break;
		case cb1:
			ll.childrenDetachedEnd=t.selectedItem.value;
			ll.killAllChildren();
			break;
		case cb2:
			ll.alphaFadeType=t.selectedItem.value;
			ll.killAllChildren();
			break;
		case cb3:
			ll.thicknessFadeType=t.selectedItem.value;
			ll.killAllChildren();
			break;
	}
}


slider.addEventListener(SliderEvent.CHANGE, onslider);
slider2.addEventListener(SliderEvent.CHANGE, onslider);
slider3.addEventListener(SliderEvent.CHANGE, onslider);
slider4.addEventListener(SliderEvent.CHANGE, onslider);
slider5.addEventListener(SliderEvent.CHANGE, onslider);
slider6.addEventListener(SliderEvent.CHANGE, onslider);
slider7.addEventListener(SliderEvent.CHANGE, onslider);
slider8.addEventListener(SliderEvent.CHANGE, onslider);
slider9.addEventListener(SliderEvent.CHANGE, onslider);
slider10.addEventListener(SliderEvent.CHANGE, onslider);
slider11.addEventListener(SliderEvent.CHANGE, onslider);
slider12.addEventListener(SliderEvent.CHANGE, onslider);
slider13.addEventListener(SliderEvent.CHANGE, onslider);
function onslider(event:SliderEvent):void {
	var t:Slider=event.currentTarget as Slider;
	ttip.show(t.value.toString());
	ttip.y=t.y-30;
	switch(t) {
		case slider:
			ll.smoothPercentage=t.value;
			break;
		case slider2:
			ll.childrenAngleVariation=t.value;
			break;
		case slider3:
			ll.childrenMaxCount=t.value;
			break;
		case slider4:
			ll.wavelength=t.value;
			break;
		case slider5:
			ll.amplitude=t.value;
			break;
		case slider6:
			ll.speed=t.value;
			break;
		case slider7:
			ll.thickness=t.value;
			ll.killAllChildren();
			break;
		case slider8:
			ll.maxLength=t.value;
			break;
		case slider9:
			ll.maxLengthVary=t.value;
			break;
		case slider10:
			ll.childrenProbability=t.value;
			ll.killAllChildren();
			break;
		case slider11:
			ll.childrenLifeSpanMin=t.value;
			ll.killAllChildren();
			if(t.value>slider12.value) slider12.value=t.value;
			break;
		case slider12:
			ll.childrenLifeSpanMax=t.value;
			ll.killAllChildren();
			slider11.visible=t.value!=0;
			break;
		case slider13:
			ll.steps=t.value;
			ll.killAllChildren();
			break;
	}
	ll.render();
}

function setPreset(n:uint):void {
	switch(n) {
		// fast discharge
		case 1:
			ll.childrenLifeSpanMin=1;
			ll.childrenLifeSpanMax=3;
			ll.childrenProbability=1;
			ll.childrenMaxGenerations=3;
			ll.childrenMaxCount=4;
			ll.childrenAngleVariation=110;
			ll.thickness=2;
			ll.steps=100;
			
			ll.smoothPercentage=50;
			ll.wavelength=.3;
			ll.amplitude=.5;
			ll.speed=.7;
			ll.maxLength=0;
			ll.maxLengthVary=0;
			
			ll.childrenDetachedEnd=false;
			cb1.selectedIndex=0;
			ll.alphaFadeType=LightningFadeType.GENERATION;
			cb2.selectedIndex=1;
			ll.thicknessFadeType=LightningFadeType.NONE;
			cb3.selectedIndex=0;
			
			break;
		// fast discharge (with max length+variation)
		case 2:
			ll.childrenLifeSpanMin=1;
			ll.childrenLifeSpanMax=3;
			ll.childrenProbability=1;
			ll.childrenMaxGenerations=3;
			ll.childrenMaxCount=4;
			ll.childrenAngleVariation=110;
			ll.thickness=2;
			ll.steps=100;
			
			ll.smoothPercentage=50;
			ll.wavelength=.3;
			ll.amplitude=.5;
			ll.speed=.7;
			ll.maxLength=440;
			ll.maxLengthVary=75;
			
			ll.childrenDetachedEnd=false;
			cb1.selectedIndex=0;
			ll.alphaFadeType=LightningFadeType.GENERATION;
			cb2.selectedIndex=1;
			ll.thicknessFadeType=LightningFadeType.NONE;
			cb3.selectedIndex=0;
			
			break;
		// fast discharge slowmo
		case 3:
			ll.childrenLifeSpanMin=1;
			ll.childrenLifeSpanMax=3;
			ll.childrenProbability=1;
			ll.childrenMaxGenerations=3;
			ll.childrenMaxCount=4;
			ll.childrenAngleVariation=110;
			ll.thickness=2;
			ll.steps=100;
			
			ll.smoothPercentage=50;
			ll.wavelength=.3;
			ll.amplitude=.5;
			ll.speed=.1;
			ll.maxLength=0;
			ll.maxLengthVary=0;
			
			ll.childrenDetachedEnd=false;
			cb1.selectedIndex=0;
			ll.alphaFadeType=LightningFadeType.GENERATION;
			cb2.selectedIndex=1;
			ll.thicknessFadeType=LightningFadeType.NONE;
			cb3.selectedIndex=0;
			
			break;
		// moving thumnder
		case 4:
			ll.childrenLifeSpanMin=.1;
			ll.childrenLifeSpanMax=2;
			ll.childrenProbability=1;
			ll.childrenMaxGenerations=3;
			ll.childrenMaxCount=4;
			ll.childrenAngleVariation=130;
			ll.thickness=3;
			ll.steps=100;
			
			ll.smoothPercentage=50;
			ll.wavelength=.3;
			ll.amplitude=.5;
			ll.speed=1;
			ll.maxLength=0;
			ll.maxLengthVary=0;
			
			ll.childrenDetachedEnd=true;
			cb1.selectedIndex=1;
			ll.alphaFadeType=LightningFadeType.TIP_TO_END;
			cb2.selectedIndex=2;
			ll.thicknessFadeType=LightningFadeType.GENERATION;
			cb3.selectedIndex=1;
			
			break;
		case 5:
			ll.childrenLifeSpanMin=.1;
			ll.childrenLifeSpanMax=2;
			ll.childrenProbability=1;
			ll.childrenMaxGenerations=3;
			ll.childrenMaxCount=4;
			ll.childrenAngleVariation=130;
			ll.thickness=3;
			ll.steps=100;
			
			ll.smoothPercentage=50;
			ll.wavelength=.3;
			ll.amplitude=.5;
			ll.speed=1;
			ll.maxLength=440;
			ll.maxLengthVary=75;
			
			ll.childrenDetachedEnd=true;
			cb1.selectedIndex=1;
			ll.alphaFadeType=LightningFadeType.TIP_TO_END;
			cb2.selectedIndex=2;
			ll.thicknessFadeType=LightningFadeType.GENERATION;
			cb3.selectedIndex=1;
			
			break;
	}
	ll.killAllChildren();
	updateSliders();
}
function updateSliders():void {
	slider.value=ll.smoothPercentage;
	slider2.value=ll.childrenAngleVariation;
	slider3.value=ll.childrenMaxCount;
	slider4.value=ll.wavelength;
	slider5.value=ll.amplitude;
	slider6.value=ll.speed;
	slider7.value=ll.thickness;
	slider8.value=ll.maxLength;
	slider9.value=ll.maxLengthVary;
	slider10.value=ll.childrenProbability;
	slider11.value=ll.childrenLifeSpanMin;
	slider12.value=ll.childrenLifeSpanMax;
	slider13.value=ll.steps;
}
///////////////////

var tf:TextFormat=new TextFormat();
tf.color=0xffffff;

cross1.addEventListener(MouseEvent.MOUSE_UP, onup);
cross1.addEventListener(MouseEvent.MOUSE_DOWN, ondown);
cross2.addEventListener(MouseEvent.MOUSE_UP, onup);
cross2.addEventListener(MouseEvent.MOUSE_DOWN, ondown);
cross1.buttonMode=cross2.buttonMode=cross1.useHandCursor=cross2.useHandCursor=true;

function ondown(event:MouseEvent):void {
	event.currentTarget.alpha=.2;
	event.currentTarget.startDrag();
}
function onup(event:MouseEvent):void {
	event.currentTarget.alpha=1;
	event.currentTarget.stopDrag();
}
var circles:Shape=new Shape();
addChildAt(circles, 0);

function updateCircles():void {
	circles.graphics.clear();
	if(ll.maxLength>0) {
		circles.graphics.lineStyle(6, 0xffffff, .3);
		circles.graphics.drawCircle(cross1.x, cross1.y, ll.maxLength);
		circles.graphics.lineStyle(2, 0xffffff, .4);
		circles.graphics.drawCircle(cross1.x, cross1.y, ll.maxLength+ll.maxLengthVary);
		var steps:uint=5;
		for(var i:uint=1; i

Back from Prague

Pierluigi Pesenti — Wed, 03 Jun 2009 13:44:03 +0000

I am back from a week in Prague.
My 6th time there (my wife is czech) but the first time just for tourism.
Prague is awesome but prepare to walk a lot.

A picture to let you enjoy my best side

Got to get back to work now. And complete my lightning class.. which is almost done.
Posting soon.

Actionscript 3 | Speedcoding video – session #1: Black Branches

Pierluigi Pesenti — Tue, 05 May 2009 13:22:39 +0000

Yesterday night I wanted to have some “no-purpose coding session” and thought it was a nice idea to record the session and do a speedcoding video. The original video has been collapsed from 45 minutes to 3 minutes circa.

The main concept is once again based on perlinNoise which (I am sure you already guessed) is something I do like very much. So please start call me “The PerlinNoise Guy” or “Perlinator”.

So this is my first speedcoding video (be sure to look at it in high quality):

Here’s the interactive demo:

Click to launch. Move mouse (x position) to change smoothness (my favourite values are around 100)

The code consist on a Branch.as class file (click to download) and some timeline code to assemble the demo:

import com.oaxoa.fx.Branch;

const w:uint=stage.stageWidth;
const h:uint=stage.stageHeight;

var ct:ColorTransform=new ColorTransform(1,1,1,1,1,1,1);
var renderView:BitmapData=new BitmapData(w, h, true);
var bmp:Bitmap=new Bitmap(renderView);
addChild(bmp);

var tf:TextFormat=new TextFormat("_sans", 16, 0, true);
var label:TextField=new TextField();
label.width=400;
label.defaultTextFormat=tf;
addChild(label);

var timer:Timer=new Timer(10);
timer.addEventListener(TimerEvent.TIMER, ontimer);
timer.start();

function ontimer(event:TimerEvent):void {
	addNew();
}
function addNew():void {
	label.text="Smoothness: "+String(mouseX-w/2);
	var tt:Branch=new Branch(mouseX-w/2);
	tt.x=stage.stageWidth/2;
	tt.y=stage.stageHeight/2;
	tt.addEventListener(Event.COMPLETE, oncomplete);
	addChild(tt);
	renderView.colorTransform(renderView.rect, ct);
}
function oncomplete(event:Event):void {
	var t:Branch=event.currentTarget as Branch;
	var matrix:Matrix=new Matrix();
	matrix.translate(t.x, t.y);
	renderView.draw(t, matrix);
	removeChild(t);
	t.removeEventListener(Event.COMPLETE, oncomplete);
	t=null;
}

I didn’t forget about the lightning class part 3 that I will publish soon

As usual if you liked this drop a line in the comments.
Ciao

Actionscript 3 Lightning class – step 2

Pierluigi Pesenti — Sun, 26 Apr 2009 22:57:47 +0000

The first rule for the good blogger I read 18 months ago (when I started this blog) was: “Never, ever post on Sunday… people coming back to the office on monday morning will find tons of weekend rss notifications and miss your post among them”.

But… since I am not a good blogger and since this blog is mine… I do post whenever I want

Here we are with the second post dedicated to the lightning class I’m working on. It had to force myself to sit down here and write again about this, I am working on other 3 nice experiments and the fun part of this class for me has already gone, now starts the boring part: optimize/parametrize/explainize. But I think it could be interesting for someone, so here we are.

Still no code, I still have to optimize/parametrize but I can start to “explain-ize”. In the first post we just saw a couple of samples running. Some people asked me for the raw logic behind this.

The key here are two perlinNoise, one for simulate the macro behaviour and one for the micro variations. As often a monodimensional (1px height) perlinNoise is perfect to simulate bidimensional effects, since perlinNoise images contain an additional dimension defined by luminosity variations.

So, if from a 2D perlinNoise image you can easily get a 3D voxelTerrain (X+Y+Height), from a 1D image you can easily get for instance 2D mountains (X+Height).
1px height perlinNoise images are very fast to render so they do not kill your cpu even if many of them are used.

I have prepared two “debug” sample movies. The first is to show how the two perlinNoise bitmapDatas affect the movement of the final shape (children are disabled for clarity purpose).

Debug sample #1

As you can see there are 3 different grey bars under the lightning:

The first one is the perlinNoise used to displace the discharge on a micro scale
the second one for the macro movements (this is really what makes it feel as real)
the third one is the image merged onto the second one to smooth the edges.

Obviously the 3 bitmaps are 1 pixel height, I just stretched them here to 30px to make ‘em visible.

Speaking about perlinNoise edges smoothing this is the fact: without any smoothing the extremities of the perlinNoise have a random value between 0×000000 and 0xffffff which stand for black and white. Black value will displace the beam in a negative direction, white value will displace it in a positive direction. To be sure the edges are sticked to the x/y coords of the graphic that simulates the origin of the discharge, we need no displacement at the beginning and at the end.
No displacement=grey value (0×808080).

The easiest way to do this is to create a vector shape, fill it with a gradient (alphas=[1,0,0,1]), adjust ration accordingly to the smooth percentage and draw it onto the macro variations bitmap (Bitmap.draw(…)). Is off course possible to to this directly using bitmap methods. But I found this being the most natural for me. I like the idea to mix vector and bitmaps using the easiest way for what I need.

Naturally you cannot set the last pixels to medium gray without some smooth transition, and so we use the gradient. Check this sample with code snippet:

perlinNoise edges smoothing

const grey:uint=0x808080;
var smooth:Sprite=new Sprite();
var ratioOffset:uint=smoothPercentage/100*128;
smooth.graphics.beginGradientFill(GradientType.LINEAR, [grey, grey, grey, grey], [1, 0, 0, 1], [0, ratioOffset, 255-ratioOffset, 255], matrix);
smooth.graphics.drawRect(0, 0, w, 1);

I used the smoothing only on the macro bitmap, not one the micro too save some cpu cycle on a barely visible detail and because I like the micro variations on the edges too.

The second one shows the same concept applied also to children with a slider to vary the children birth probability:

[demo removed cause I overwrote the files LOL. Don't ask to get them from backups please, simply refer to part 3 post ]

The main beam can create bridges of electricity, or “children”. A child is simply another instance of the class with a “generationNumber” parameter to manage descendant probability and avoid infite recursion. All the rules described until now applies to children too. Children need to be sticked to the parent beam so they always have a non-variable smoothing of 50%.

Coming soon with part 3 and the full class.
As always leave a comment if you find something interesting.

Actionscript 3 Lightning class – First tests

Pierluigi Pesenti — Wed, 22 Apr 2009 23:04:49 +0000

Here again with the first test of a Fx class.

The class can render lightnings with these specs:

- different shapes and aspect
- variable edge-smoothness to keep the extremities sticked to the origin
- runtime children generation (every trunk can generate children)

Sample #1

Sample #2

Perhaps not that useful but could be nice to implement in some game or demo.
Code soon.

(Useless) Nightly delirium

Pierluigi Pesenti — Mon, 20 Apr 2009 23:28:10 +0000

Just some hypno-fun with drawing APIs:

Click to self-hypnotize

p.s.: this zoom back infinitely (more and more drawing API usage) so do not leave it run wildly or your cpu will burn

Code:

var w:Number=stage.stageWidth;
var h:Number=stage.stageHeight;
var steps:uint=5;
var stepAngle:Number=720/steps;
var div:Number=2;
var inita:Number=0;
var acc:Number=0;

function render(event:Event):void {
	acc+=1;
	div+=.02;
	inita+=.2;
	this.graphics.clear();
	this.graphics.beginFill(0);
	this.graphics.moveTo(w/2, h/2);
	var r:Number=1;
	var a:Number;
	var arad:Number;
	var i:int=0;
	while (r<1000) {
		if (div!=0) r+=r/div;
		a=inita;
		for (i=0; i