Posted by: pixelero | June 11, 2009

LinkedGrid

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:

LinkedGrid - principle

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

Advertisements

Responses

  1. useful – useful – useful…

    linkedlists as well as object pooling is always a speed enhancement.

    polygonal has some interesting lectures on this as well, http://lab.polygonal.de/2008/06/18/using-object-pools/

  2. […] LinkedGrid Tags: ActionScript, Flash, Flex, optimization […]

  3. demos are tiny here?

    • Thanks for your comments !
      Felix, No, they shouldn’t be, check that you have the latest (at least = Flash Player 10,0,22) version installed — older versions had an annoying 1/20 scaling bug, which was finally fixed.

  4. nice post 🙂

  5. […] Handling triangles/-meshes by comparing PV3D and Flash Player10 capabilities (using Petri´s great LinkedGrid class). Thereto I created a plane in each case and bended it in some way. Both versions ended in […]

  6. Cool demo!
    But just one little issue – grid moves down every time when it change appearence after pressing space. Anyway, it’s so cool!

  7. Dmitry: grid moves every time space is pressed , it either moves down or up depending on mouse’s position.

  8. […] LinkedGrid https://pixelero.wordpress.com/2009/06/11/linkedgrid […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: