I just couldn’t resist the temptation of checking the BZ-cellular automaton of my previous post with some perspective-effect.

Demo (keyboard: esc for fullScreen, delete for a new generation)

btw … if pattern appears too dense, make sure you’ve got the latest (FP 10.0r22) version installed.

I’ve already earlier demoed this principle, but I didn’t publish the code. The whole thing is done by first applying a perspective tiling, with graphics.drawTriangles, as in one of my earlier posts – and then adding the parallax effect by counting a displacement – a pixels position is raised by its color value – with BitmapData.set/getVector: then image is scanned through a vertical column by column. Here’s some essential part from the code: found in public function extrudeBitmapData

for (var column:Rectangle= new Rectangle(bmd.width,0,1,bmd.height); (column.x-=1)>-1 ; ) {

	levels = new Vector.<int>(bmd.height, true);

	pixels = bmd.getVector(column);

	heights = (heightMap) ? heightMap.getVector(column) : pixels ;

	//	first loop marks the displacements for each pixel
	//	'version 0.0' sampled from the blur-channel
	for (i = 0; ++i != bmd.height; ) {
		levels[i- ((heights[i]&0xFF) * i >>10) ] = i; // >>10 controls the height
	}

	//	displace the column
	for (iz = -1, i = 0; ++i != bmd.height;) {
		pixels[i] = (levels[i] > iz) ? pxl = pixels[iz = levels[i]] : pxl ;
	}

	//	rewrite on the image
	bmd.setVector(column, pixels);

}

So finally here’s that messy source with too few comments !

This Demo also allows you to save the animation as a seamless gif-image. For the best results, please wait for some time for the automaton to fully develop and don’t worry if preparing data for saving might take some time. Lots of values don’t give the beautiful spirals at all, so it might take a couple of tryes before getting somewhere. I noticed the values k1=2, k2=3…8, g~250/k2, develop for the best results. To start over again just press the button to regenerate if you end up having an empty canvas.
Anyway in my personal opinion I find BZ one of the most artistic of all cellular automata – and I wanted to check it out with actionscript, the code uses fp10 Vectors and bitmapdata.setVector, with which I’ve had already earlier some nice results when it comes to performance speed.

Main_fla.zip

BelousovZhabotinskyCA.as

BelousovZhabotinskyDemo.as

For saving the gif, I used FileReference.save() of FlashPlayer 10 with very useful as3gif by Thibault Imbert

You’ll find some more info on the BZ-automaton like for instance here or here

Many of my demos here are based on the same principles: create a rectangular grid and animate bending it in some groovy way. Flash Player 10’s graphics.drawTriangles has been quite a perfect tool for doing that.
Usually I’ve handled the vertices and triangles – or indices – by some for-loop, like this example initialized the triangles for a mesh of size n*m:

for (ii=i=0 ; i!=n-1; i++) {
	for (j=0 ; j!=m-1; j++) {
		indices.push(
			ii,ii+m+1,ii+1,
			ii+m,ii+m+1,ii++);
	}
	ii++;
}

Ok, even if it’s an old code of your own, anyone might get confused with all these i,j,ii and ++’s – specially seeing it after some months. Well, this time went a bit further and wanted to try manipulating items on the grid with some more advanced way: I guess anyone interested in optimizing as-code, has came across Joa Ebert’s great results of using LinkedLists.

Ok, I ended up taking similar approach to dealing with the grid. In this version every node has two links to the nodes on the right and below it:

Now the code iterating through the grid will look like this:

var itemX:GridItem = firstItem, itemY:GridItem = itemX;
do {
	do doSomething(itemY) while (itemY = itemY.itemBelow)
} while (itemY = itemX = itemX.itemRight)

or simply by a single public function:

myLinkedGrid.forEach(doSomething);

When dealing with a grid, you every so often need to iterate the areas -like for instance the triangles – between nodes – like in the for-for -example above – now that’s just:

myLinkedGrid.forArea(doSomethingElseEvenMoreComplicated);

And the best part of course are the results of running a test code 2000 times:

*    linked list : 5722 ms
*    for-loops accessing vector[ ][ ]  : 9340 ms

Results of different methods:

- 5810 ms : Iteration by public function  Grid.forEach(doSomething)

- 5705 ms :  Using public static function  Grid.forEach( GridItem.doSomething) //  (for being ’static’ the results were varying a lot, at worse ~7500)

- 4807 ms :  Using an inline function  Grid.forEach(function (item: ){…

- 3306 ms :  Using do-while loops with inline code

Ok, finally, here’s a couple of demos using these methods, some weird physics simulations , don’t know if they’re cloth, water, landscape or architecture – but who cares, as long as it’s cool :

… press ’space’ for a different looking grid !

with sources:
Main – of later demo
LinkedGrid.as

GridItem.as
GridTriangle.as

Hi! Ok, it’s been some time since my last post. Well, anyway, here’s something I’ve been writing every now and then during the past couple of weeks – maybe a line or two an evening:

Keyboard: Press ’space’ to see the triangle mesh, or just press ‘Delele’ if you get tired of the whole thing !

The -maybe messy- sources (main, MeshConnection, MeshTriangle, MeshParticle) include solving all kinds of funny stuff, like subdividing from an icosahedron to a sphere, animated ‘mass and spring’-like system, finding the correct one out of 5000 triangles, etc.

*** Edit, As you may read from the comments, the first posting – old version – had a ’scale by 20′ bug fixed in newer version of FP, If you now see the sphere appearing in a very small scale at the center of stage, update your flash player ***

*** Edit, same code with small variations created this and this [click if it gets too boring !] ***

Metaball² – the next level: a blob consisting of smaller blobs:


… Flash Player 10

… smaller blobs are particles in the energy field of the larger blobs, searching for the position where energy=1

It started with a idea of writing a posterizer – or in this case a ‘Obamizer’:

Main principle is to compare each color’s distance in rgb-space to some predefined colors – it’s like doing a voronoi diagram, but in color space, and things remain easy while dealing with only a few colors.

xy-voronoi :

I had already earlier though of what if I extend the voronoi algorithm so it uses the x- and y-coordinates, but considers r-,g- and b-values as well, like a 5-dimensional distance Δx²+Δy²+Δr²+Δg²+Δb² ? Anyway,here’s some – in my opinion – quite interesting results I came up with, xyrgb-voronois with random points and a regular grid:

Different weights for colors: d²=x²+y²+f(r²+g²+b²) with f= 4.0 and f=-0.25, the last one seems to seach nearby area for a very different color on each pixel, creating like some partial negative:

‘Obamizer’ was written with Pixel Bender, other images with actionscript – I used a very brute-force code. Not like for instance Frank’s voronoi processor, mine is so far more like 1/15 fps !

… an article of colour metrics with a more scientific approach.

A blogpost about my entries for #tweetcoding – a nicely challenging competition organized by Grant Skinner. What can be done with an actionscript code of 140 characters – see link for further info.

My first approach was very similar to entries on 25 lines of actionscript competition, trying to chain stuff like in ‘addChild(new Bitmap(new BitmapData(w,h)))’ – now that only takes already 40 valuable chars. For a code 140 chars isn’t much, it’s in fact almost nothing – but I do like challenges like this. On the other hand, the ‘gimme code’ already had functions like g = graphics, s = Math.sin ls =graphics.lineStyle predefined, so using these might be a better approach. PerlinNoise or drawTriangles may not be the most suitable commands for use in this context, imho. My method was first to write a code snippet of about 200 chars, then start compressing it. This minifier has also been very useful, thanks to Kelvin.
Now that I’ve five entries posted so far – and a lot ideas I’ve had to reject, because of the length>140, I though I could do a small post having a closer look on what the codes on my latest posts actually do:

TunnelOfStripes

g.clear();
a=mouseX;// a=x-coordinate,
b=mouseY; // b=y-coordinate
c =++i % 8 / 8 + 10; // c=radius, at the end of tunnel starts with a zigzag value 10=< radius <11
d = (i & 8 ) << 4; // d=color, stripes by starting with 0×00 or 0×80

for (j = 64; j–; ) {

ls( /* ls=lineStyle
* I’m not using a solid fill, it’s circle’s thickness width enough
* to cover the area
* increase the radius by factor 1.1, notice the initial value 10…11
*/
c *= 1.1,
/* color, initial value was 0×00 black or 0×80 dark blur,
* after the first subtract jumps to light yellowish values like 0xF1F180
* darkens red and green channels, blue gets cycling 00 or 0×80
*/
d-=0×50580);
g.drawCircle(
/* x and y starts from mouse’s position, and approaches the center of stage:
* x-coordinate, in the form a = (1*250+49*a)/50 it’s easier to see it approaches 250
* from 140 I had a couple of extra characters left
* so I added Math.sin(i/16), giving an extra waving effect
*/
a = 5+a – a/50+ s(i/16),
b = 5 + b – b / 50,
c)
}

Recursion – I wanted to check what could be gained by calling back the function f(e:Event) itself, actually maybe not much – a bit hard case for utilising the local and global vars in a correct way, just that I’ve always found recursive functions nicely challenging, and I later notices Grant’s first example of a 140 code was a recursion also.. This code was btw exactly 140 chars – no place for changes. And if you do something with this code, be careful, recursion’s a most powerful way to get your processor stucked, a pita too often ! Hint: the code gets the variables from mouse’s position, I think the most interesting setting are below the center point.

if(!i++){ // i is used for checking the level of iteration, if i==0, initialize some vars and setup graphics
g.clear();
g.beginFill(0);
a=b=250; // x and y for circles, y not changed
w=500; // stage width
c=mouseY; // radius for largest 1st generation sphere
d=mouseX/w // scaling between iterations, from 0 to 1
}

if(i<9){ // control over not going too deep in iterations
g.drawCircle(a,b,c); // like x,y and radius in this case
a*=d; // on a iteration, x and radius are scaled
c*=d;
f(e); // I’ve always been obsessed with playing with recursions
a=w-a; // reflects x, gives the symmetry
f(e); // only room for two f(e)’s, no sierpinski’s this time
a=(w-a)/d; // return to old value of a, warning, might cause div by zero, if mouseX=0
c/=d // in a block you can leave out the ; at end
}
i– // ; not necesserly here either

And as a bonus: an ‘untweetable’ version- with a code > 140

Bullets – one more ‘untweetable’

And don’t forget to also check Quasimondo’s or Rob Muller’s entries – among all the other impressive stuff of course.

Edit March 12, 2009 : Marvellously nice results of tweetcoding context ! Ta-daa …

Today it has been one year since my first blog post … so thank you all for your interest !

Total views: 48,699
Busiest day: 733 — Friday, January 23, 2009
(last value on the chart doesn’t mean attention dropping – this months pageviews not full yet)

… so far this month I’ve been a bit quiet, meanwhile hope you like some recent stuff on my flickr account: where you’ll find some fractals and cellular automata:

My entry for The 25-Line ActionScript Contest, candidate 008, a flight simulation over a terrain of perlinNoise.

Awfully long lines of code in an extremely compressed form isn’t the easiest thing to read, so here’s a couple of tricks for tightening code I came up with:

instead of

addEventListener(Event.ENTER_FRAME, update);


function update(e:Event):void {
var i:int=1, j:int =2, ii:int =0;

...

}

you could write:

addEventListener(Event.ENTER_FRAME, function update(e:Event, i:int=1, j:int=2, ii:int=0):void {

} // defaults has to be const values, though

and how to set pixels of a BitmapData on a single line:

(bmd = new BitmapData(w,h,false)).setVector( new Rectangle(0, 0, bmd.width, bmd.height), Vector.<uint>([0xebe9da, 0xebe1db, 0xe9e9da,/* long list of uints for the pixel values */ 0x00]));

… I think I’ll later post the whole code in a longer and more readable version as soon as I get some comments written on that.

Currently (January 22, 6:38 pm) my entry seems the be at 3rd place, with 10 votes (12,12,10, …) – so let’s see, anything might happen ! Who wouldn’t mind CS4 for a birthday present ?

Edit (January 23, 2009 at 8:48 am): Looks So Very Promising ! ok, I’m trying to keep cool, anything might still happen !

Edit (January 28, 2009 at 10:15 am): O-oh, my entry was leading all the weekend, now it looks like 030 has taken some votes ahead … But hey – you still have time to vote if haven’t already !

Edit (February 1st, 2009): Well, new month, new ideas – or actually old, writing 008 I did come up with couple of more ideas, so let’s see  !

Build Flash online ? A japanese site I found via Mrdoob’s blog !

… and here’s my first donation for this common benefit – I searched my archives for some old coding attempt to create a hair-effect – and improved it online !