Ok, here we are… once again speaking about perlinNoise.

PerlinNoise is a super-cool function… nothing to object, it gives you the ability to render a smooth random varying surface on a bitmapdata.

You can use it for random behaviours, for mountains generation, for lots lots of stuff resembling the inner and deep variations hidden in nature… but lets say it: it’s kinda boring to look at.

Tired to have always the same old plain smooth boring perlinNoise? Try this simple variation.

Test interactive demo #1

The main concept is EXTREMELY simple and is a trick I inherited from photoshop “Render clouds / Render difference clouds” filters.

The logic is this:

1. Apply a simple perlinNoise method to a bitmapData
2. For i=0 to i=N…
3. Apply a simple perlinNoise method to a second bitmapData with a different seed at every iteration
4. Composite the second bitmapData onto the first with the draw() method and a BlendMode.DIFFERENCE blend mode.

Look at the simple code:

Continue Reading »

I don’t usually post about two lines of code snippets, or about workarounds to that damn bug or about basic tutorials for beginners. I honestly haven’t enough time and will to post on a daily basis. Usually I use this blog to mantain me focused on a single project I find interesting and take it to the end (not a really working however ).

Logic comes first, code is the last step

So what about the title? What’s the the perfect beginner but somehow satisfying tutorial?
Answer snow/rain/starfield and you got it, and here we have a basic starfield class tutorial.

However the main reason I am posting this is not about the 30-40 code lines involved in rendering a random starfield but make you stop a moment and think about a possible easier way to do what you are doing.
I’ll try to be clearer: this morning I was working on a flash animation and just wanted to place a background starfield on my bucholic landscape view. So I quickly created the class but was missing something… off course a starfield is not cool if stars don’t twinkle (winkle, scintillate
shine… vary in light intensity etc.). So I started to recall the milions of experiments like this I did years ago in Actionscript 1 and ok… the first answer was something like:

• Generate every star as a sprite/movieclip (possibily in a main container)
• list the instance in some array, dictionary (whatever you prefer)
• to make ‘em twinkle, at every frame, do a for loop on every instance and vary its alpha with some some increment/decrement/sine calculation (o simply randomize it if you are lazy)

or you can have a Star class togheter with the Starfield class and let the Star class think about everything, so it creates its EnterFrame event to start twinkling when added (but it’s always a bad idea to have hundres of EnterFrame events, when you can have only one in the main class.

But…

Flash teach me that there are always many options to get to the same results (that is what I really like most about flash developing), AND… that bitmap filters and blend modes are a gift to hardcore developers with tremendous possibilities.

So.. do we really want a subtle background effect to keep 50% of the CPU? I don’t.

Continue Reading »

Updated on 04/27/2009: Class with some improvements to skip transparent pixels. The two images should however share the same amount (or similar) of visible pixels.
Lot of space for improvements here, if someone want to contribute very appreciated.

Ok, lot of time passed since I posted my PixelMorphing class experiment.
Seemed to me that post passed quite unobserved but then I received a lot of feedback and e-mail asking to share the source code.

Well, the first time I wanted to speed up posting and do further experimentation/optimization so I din’t prepare the source but since the main believe of this blog is that if someone ask for code I release it, here we are. Optimization still not done… I am a lazy one, so if someone want to help improve it is really welcome.

Now the steps to play with it:

1. Download the PixelMorphing class
2. Use it with this code:

import com.oaxoa.fx.PixelMorphing;
var pm:PixelMorphing=new PixelMorphing(pic1, pic2, 200);
addChild(pm);

pm.start();
//pm.reset();

or certainly you can place some buttons or some combo and wait for some event for it to start or reset. The main code of the previous post is this:

Continue Reading »

What can be the natural evolution of an isometric engine? Of course a voxel engine…

It was really a lot of time I had this in mind and already did some experiment, but never finalized them.
What I’ll show you now is some first implementation. Source code is already optimized but I need to finish class public methods so I’ll not post source for now.

Let me say that these screenshot really suck, but you got to see them moving (they runs very fast).

This first sample is a bitmap based map. The class wants two bitmap, one for the height map and one for the color. Of course you can use the same twice (but obviously it looks good only with grayscale images). With my brand new Intel Quad core QX9550 I easilly reach the fps limitator of 51 (ok, ok… on the screenshot is written 29 but believe me! ). I am new to multi core cpu and I am really surprised to see that now the browser vs IDE situation totally changed. Now I can do 51 fps in the browser (Opera 9.23) and 30 in the IDE… mmm strange behaviour, maybe I just need some sleep.

The file is very big cause of the low compressed 2000×2000 jpeg files. No preloader (don’t even try to ask for it) so be patient please (631 Kb)

Actionscript voxel landscape (Image map)
(move mouse to fly around.Map is bitmap based so has boundaries)

This second one is to make you write some comment like: “hey man how can you be so stupid… trying to code a fast voxel engine lots of optimization etc. and then you came up with a perlin noise based sample which simply drain half of the power”… Yeah! but is cool to have infinite landscape and test my new CPU

Actionscript voxel landscape (perlinNoise)

Same but with two octaves… very blobby feeling.

Actionscript voxel landscape (weird 2 octaves perlinNoise)

Expect more about this and more new things. I am preparing a lot of funny stuff.

As usual if you like this let me now via comments and if you want to keep an eye on updates subscribe to my feed

Hi there,

back again with some funny isoStuff.
Here’s an optimized and enhanced version of the previous post, and with source code explained.
It now has dynamic colors and you can choose colors and size (for hi and low values).

See it moving

Ok now some explanation:
The main trick behind this (for who didn’t noticed) is that the code simply redraw at every frame just the first line of blocks. Then simply draw() that first line into a BitmapData that scrolls of a block size… and the trick lives!

Ok, speaking about optimization… two main things:
1. Draw it without a line (just fills) and it goes 2x faster
2. Even that first line (60 pieces only) was not actually so fast…

About this second point the code involved with sine-wave and dynamic colors calculation contains some math equation, but nothing can really send your CPU @100%. The main CPU draining comes from the visual/rendering part.
One solution I implemented in this experiment (and it’s a trick can be used very often) is simply draw into a bitmap even that first line without adding to childList the vector part. With this little trick fps went from 15 to 31 =).

Continue Reading »