The demo shows 100 random (intersecting) triangles textured with a Lena image and is rendering at about 30FPS on my Windows 7/Intel Xeon 5160.

Grab the source code!

A  quick demo showed that I would need a lot of line segments. It turned out that Graphics‘ moveTo and lineTo is too slow for that amount of lines. So I started looking for an Alchemy implementation of a line drawing algorithm, specifically Bresenham’s line algorithm. The search was not successful so I rolled up my sleeves and started coding it myself – with help of existing Alchemy demos and a C implementation of the algorithm. Here’s the result. Click it to switch between Alchemy rendering and Graphics rendering.

Source code here.

Attempt #1 – drawing on top of previous frames – rejected

Very simple but occasionally powerful effect of blending with the previous frame (looks like what’s going on when you get hit in Call of Duty 4). It works for slow motion, but as soon as the globe starts spinning quickly, you can see the individual frames.

Attempt #2 – accumulation buffer using FBO –  rejected

Also simple to implement. Basically it’s simulating the accumulation buffer (which is not available on the iPhone). I wasn’t able to find a sweet spot between a nice-looking motion blur and maintaining high fps (even if the rendering is performed at a much lower resolution).

Attempt #3 – screen space blurring – rejected

Originally sounded like a good idea – thought no one would be able to tell that it’s only a 2d blur. Not true. Rejected.

Attempt #4 – pre-blurred texture maps – used

Main idea: if the globe is spinning along its “main” axis (south pole to north pole), the motion blur can be simulated by just blurring the texture horizontally. How about generating a couple of pre-blurred texture maps corresponding to different rotations axes.

Before I get into details I must say that it works really well. I only use 32 different versions (making the amount of rotation axes 64) and it’s really hard to tell that it’s blurred along an axis that’s slightly off (in the actual iPhone application that this was developed for I am actually snapping to the correct axis which is impossible to notice).

The next disadvantage is also obvious: I only have a limited amount of blur values. In the application I work around that by accelerating and decelerating rapidly.

Step 1

How to find the best distribution of 32 points on a sphere (actually 64, but the other 32 are just opposite versions of the first 32)? I wrote a Flash application that does it for me. It runs a simulation of the following algorithm. Thirty two points are randomly positioned in space, each has a positive charge and is restricted to the unit sphere. The purpose of the positive charge is that the points are repulsed from each other, eventually ending up in an even distribution.

Step 2

Blurring the original texture by a general axis is just a matter of writing down a couple of equations and hoping that you haven’t made a typo.

Step 3

Using the pre-blurred textures is now a piece of cake. Just find the nearest axis and use the corresponding texture.

Attempt #5 – am I missing something obvious here?

Let me know if I am.

Get the source code (contains the walking creatures, too).

PS: Again, if you happen to evolve an interesting locomotion, send me your code/swf and I’ll post it here.

Preparation

Here is the first demo.

The task is to teach an ant to get to the end of the L-shaped corridor as fast as possible. All an ant is allowed to do (every frame) is rotate freely and turn on its forward thrust (acceleration). Ant’s behavior is encoded in its DNA consisting of several genes. Every gene prescribes what an ant does in the frame that corresponds to the index of the gene in the DNA. Specifically, each gene is a 3-bit number encoding the ant’s possible behavior:

var gene:int = dna[simulationStep];
var acceleration:Boolean = gene & 1;
var turnPositive:Boolean = gene & 2;
var turnNegative:Boolean = gene & 4;

The genetic operators used are not tuned for this particular application. What you see on the screen is one population of 100 individuals. It takes time but if you let them learn you’ll see that in the end they achieve the goal in the most optimal way.

Evolution

Encouraged by the result (also, it only took about 2 hours to code) I wanted more. Without further ado I present the walking creatures (after 300 generations).

The task here is to give physics-based (thank you, Box2D!) ragdoll figures brains to be able to move a certain distance. Following Ngo and Marks’ paper Spacetime Constrains Revisited I set out to make my own creatures in Flash. In short, I am using a genetic algorithm to train a neural network that controls motors in the creature’s joints. The fitness function is plainly how far a creature can get within a certain amount of time. The neural network used is very simple – it’s a single layer feed-forward neural network with the inputs being the angles at every joint, vertical velocity and horizontal distance traveled and the outputs the speed of the motor and the target angle of every joint.

Results

I was really happy to see results only after about 300 generations (it took a night though): a frog. Excited, I ran it again and again and interestingly, I only got frogs. I tried to change the fitness function a bit so that the creatures that touch the ground are penalized but didn’t get anything interesting. Also tried to make the torso a bit heavier and an inchworm-like creature evolved. If you like, you can try to evolve your own creatures, here’s the link to first generation (with a little bit of creativistic randomization to start with). At the end of every generation, the best DNA is traced so if you happen to get some interesting locomotion, please send it to me and I’ll post it here. (Source code to follow after a brief clean-up.)

Edit: Get the source code in the next GA post.

What’s Next

My plan is to try what behaviors will emerge with different shapes, physics set up, fitness functions or selection algorithms.

I decided to work on a little bit more, but as it turned out really soon, I needed some open format model files that would serve as demos. As a fan of the original Quake, and everything around it, and having a feeling that the original levels could run easily on present hardware minus Flash, I started working on a Quake BSP parser. See the result for yourself. Use mouse (with left button down) for mouselook, ASDW to move horizontally, RF to move up/down.  (It’s intentionally running fullscreen, just maximize your window.)

I would like to point out that it is Flash 9, i.e. no Alchemy involved!

Conclusion: the demo is running just fine to create a true 3D environment for a Flash game!

I recently noticed this little function in the BitmapData class.

public function paletteMap (sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, redArray:Array = null, greenArray:Array = null, blueArray:Array = null, alphaArray:Array = null):void

var shininess:Number = 50;

for (var j:int = 0; j < 256; j++)
{
	var alpha:Number = j / 255;
	newPalette[j] = Math.floor(Math.pow(alpha, shininess) * 255);
}

Anemone

My first entry was called Anemone.

The Code:

if(i++<9)o[i-1]={x:275,y:200,a:l=i,w:30};with(o[i%l]){if(w>5)o[l++]={x:x,y:y,a:a,w:w};ls(w--,i);mt(x,y);lt(x+=9*s(2-a),y+=9*s(a+=r()*.6+6))}

Wormhole

I was really happy about Wormhole, because it seemed to become an inspiration for piXelero’s winning entry Tunnel of Stripes.

The Code:

g.clear();for(c=-90;c++;){d=91+(c-i*10)%90;ls(.1*d+9/d,0,1/d);g.drawCircle(275+.3*(s(i)+s(2*i))*(d+99),200+30*s(i),999/d)}i+=.01

Twister

The next submission received a notable mention, Twister.

The Code:

g.clear();for(c=999;c--;mt(c,k=275))if(!i)o[c]=r();else ls(1,lt(c,k),l=o[c],g.drawCircle(k+l*c*s(i+c)/9+99*s(i*.1)*s(2-2*l),k-l*k,.5));i+=.1

Grass

Fourth is Grass.

The Code:

g.clear();for(m=c=275;c--;ls(1,c<<8))for(u=c&4,v=9,mt(p=m+m*s(c*6),q=m+99*s(c*5)),k=.1+s(c+i)/20,d=15;d--;u+=v*k,v-=u*k)lt(p+=u,q-=v);i+=.1

Fur

Last but not least. At the time of the competition, our whole office became obsessed with the “fur effect” that you can see in the blog header. It was a bit challenging to recreate the effect in 140 characters, but it worked out well and I also had a couple of characters left to give the result a form, Female Form (let it run for a while).

The Code:

l=r();o.a=r()*7;mt(o.x=275+l*(r()-.5)*200,o.y=300-l*200);for(c=9;c--;){ls(1,0,c/9);l=r()*9;lt(o.x+=l*s(o.a+=r()-.5),o.y+=l*s(1.6-o.a))}