Pixelero

The beta release of Flash Player 10, code named Astro, is now out on Adobe labs!

After download you can check out couple of simple demos I wrote using new features:

Spherical Mapping - rotating 3D globe with alpha support

ThreePointGradient - a colorful gradient by specified three colors and points - the colorPickers are dragable, try ( ! it’s not a build-in function of graphics API, but an example of pixel bender-shader creating a fill … )

It’s creepy, it’s haunted, it’s eerieNoise:

if that was scary, please join a perlinParty:

And the third one – I don’t know what it is, but it does look soft …

And some northern lights ?

And finally ‘Shaman’s Prayer’:

Some simple actionscript hint for arrays:

not only can you define a new array by just writing:
var items:Array = ["first", "second", "third"]; // = new Array(”first”,”second”,”third”);

but you can also access items on a literal array by using an index [1,2,3] [i] ; !
If you have a limited number of cases you can replace a function, switch or ifs with this.

for (var i:int=0; i<3; i++) {
choices[i].name = ["D2", "D3", "D4"] [i] ; // choices[0].name= “D2″ … etc
}

var dimVal:int= [ 0, 1, 4, 13, 40 ] [n] ; // var n:int, precounted values for function (3^n -1)/2

var someColor:uint = [0xFF0000, 0xFF00, 0xFF, 0xFFFF00, 0xFF00FF, 0xFFFF] [n] ;

works in javascript as well:

var someFib = [1, 1, 2, 3, 5, 8, 13][4];
alert(”some Fibonacci number: “+someFib);

If I was a teacher, I’d now give you a task to write a script converting an integer, 0<i<5000, to a Roman Number returned as a string …

All my earlier posts have mainly concerned flash and actionscript, this time something more general:

As a starting point we have Math.random() returning a value between 0.0 … 1,0 with even distribution:

In case we want a random number more likely to be closer to like for instance 0.0, my old trick was to multiply Math.random()*Math.random, much greater odds to be <0.5.

Maths with random are sometimes very unpredictable, in the case of Math.sqrt(Math.random)) we get an - almost ? - linear curve. Function random() has a 75% change of being >0.25, so squarerooted that’s 75% for >0.5, I think:

very similar to Math.max(Math.random(), Math.random() ), greater of two random samples, with also 75% change for >0.5:

Max of several randoms seems to approach a polynomial curve, just compare Math.max(Math.random(), Math.random(), Math.random()) with f(x)=x²:

Using min instead of max naturally mirrors the situation towards 0.0.

As I mentioned this to be a bit unpredictable, when it comes to distribution random()+random() definately doesn’t equal 2*random(). In case we need randoms mainly on the mid-values, we use an average of two, 0.5*(Math.random()+Math.random()):

nice pyramid that is !

Surprise, surprise, or maybe not if you’re good at statistics and probability maths: Taking an average of even more numbers approaches the Gaussian distribution:
0.333*(Math.random()+Math.random()+Math.random()):

0.25*(Math.random()+Math.random()+Math.random()+Math.random()):

Addition and substraction gives similar results, except that naturally random()-random() is in the range between -1.0 … 1.0.
And finally a modified gaussian emphasizing the border values:

r=Math.random()-Math.random()+Math.random()-Math.random();
r += (r<0.0) ? 4.0 : 0.0;
r *= 0.25;

And the inverse 0.2/Math.random() … , well test it yourself:

… small javascript-demo for testing

Just like in the example function here, my demo shows only the values in the range 0.0…1.0, so add a proper scaling factor and addition in case you can’t see anything ! … and, hey, please comment if you come up with something interesting !

The pics in this posting were done with a code taking 20 times more samples, and a whole lot slower, than the linked demo, so don’t wonder if your result looks more rough !

… new update of Hydra Toolkit available at Adobe Labs:

I also updated my contributions in Hydra Gallery

Some minor changes to the old codes were necesserly: adding the languageVersion, input, output … The ability of using if-statements now with Flash, simplifies writing more advanced codes a whole lot …

Set of my earlier experiments with Hydra

… based on the principles of metaballs in my earlier post with some particle -behavior and displacementMapFilter -effect added :

Here’s my simple 3D-trick (or 2.5D, I know) using the color value as a z-value in 3D-space:
- to start with we have circular sprites, I’ve used a radial gradient fill, with values 0×00 around edges and 0xFF at the center,
with blendMode.NORMAL looking like this:

- when changed to BlendMode.LIGHTEN, on the area where the sprites overlap, we get this

Yes, looks like the sprites really had depth.
From the color values blendMode.LIGHTEN chooses the brighter, or as a number, larger one, like max(a,b),
or like we were having a z-buffered rendering, imaging having more sprites - kind of a voronoi mountain !

After adding some filtering ephasizing the 3D-effect and adding the color tones, we end up having this:

Although we’re limited to a very narrow depth in z-scale as well as a very limited number of colors - only 256 shades or levels, I found this method rather interesting in all its simplicity.

Here’s some results I came up with:

At the bottom of that there’s a text - may not be the best use of textField-input, but try typing something…
I don’t know if it’s for any use for anyone - but here’s the source code

Another - why always spheres ? Here’s a ‘pillow surface’ z = (1.0-x²)(1.0-y²) in range -1.0..x..1.0 and -1.0..y..1.0, used:

(reminds me of some old ’80’s computer game, should I add a penguin jumping from one block to another ? )

… stay tuned, might be source code and most probably some more examples coming up ! Wish I had the time to make a couple of more experiments like for instance if using linear gradientFill gives a ‘plane’ in 3D-space and what happens with BlendMode.DARKEN or BlendMode.SUBTRACT - a hole or anti-material ?

My simple and fast versio of metaballs, based more on graphics and image manipulation than 3D-maths:

We use precounted bitmap-images such as this:

Here are the channels separated,
in RGB channels we have a rendered image of a sphere,
Alpha channel is generated by the distance to image’s center

We draw some of these using bitmapData.draw:

That looks very sci-fi already,
but the final touch is to still make some more adjusting on the alpha-channel,
now looking like a X-ray shot:

We add contrast (16x)  to alpha and come up with this:

… and … that’s all, there we have it, the metaball -image - click for demo* :

Actionscript-code

… and this is just the principle. It would be easy to add shadows, Z-dimension, more advanced interactivity, maybe visual effects such as glows, some kinna reflections, displacementMapFilter etc. to it…

(* fix: try Firefox, if demo looks like a thumbnail/peephole in MS-Explorer, I’ll fix that later …

… more examples !
… source code

… more on Hydra:

… experimenting with some code, and this turned up.

Is it some bird, exotic flower or an Angel ?