Actionscript3, Flash, Java, C#, C++, Algorithms & Imageprocessing
Another experiment from scratch in about 40 minutes. Speeded up by a factor of 15. This time well know perlin noise particles originally invented by André Michelle. At the end I set the frame rate of the SWF to one which does not look very smooth in the video. It seems a little bit to slow.
Update: Source is available here. This is the original version (with a license header) so be aware that it is not optimized or very readable.
It is really fun to watch speedpainting videos. Why did nobody do the same thing using Flash? Here is my contribution. A particle explosion in one and a half minute. The video has been speeded up by a factor of ten. The result is not very interesting but maybe someone will pick it up and do something a little bit more beautiful to watch.
Update: Original source is available here. Remember that this was written in 15 minutes total so it is not very clean or optimized. For instance the Explosion object will stay in memory all the time.
Mario Klingemann did an awesome job on the seam carving demo I posted this weekend. He removed a lot of dirty stuff from the code and optimized it very well. You can get a full explanation on his blog.
As Mario mentions we are looking also in a technique that allows us to expand images. At the end the code is still not organized at all. A lot of performance can be gained with appropriate memory management. We keep you posted.
By the way there are still one or two tickets left for our rent an idea workshop! Last chance to have André, Mario and me for one day introducing you into this kind of stuff.
There is currently a lot of hype around this paper by Dr. Ariel Shamir and Dr. Shai Avidan. Honestly — it really kicks ass. This is a realy nice idea and I can absolutely understand Adobe just hired one of them direclty. Now there is a online demo of this available. Unfortunately it misses some source-code to look into and possibly optimize it.
So I did my own version. Basically this is a slim-version of the original technique. Image is converted to grayscale and a convolution matrix is used to find the pixel’s energy levels. Then the seams are created as the paper describes it … sort of :-). At the end the seam with the lowest energy is picked and removed.
The code is very ugly, not documented at all and not optimized. But it is also saturday night and I should be out drinking a beer already. You can press a key in the online demo to change the scale direction or click to reset it. If you can improve something do not be shy and post it.
Update: Here is another demo that shows the effect even better.
Update 2: Make sure to follow the joint venture from Mario and me.
Remember I promised to release some paper on performance optimizations for the Flash Player? Well currently there is just to much to do in order to get it done. But I do not want to hide this from you any longer.
Analyzing big BitmapData objects is a pain. For a nice contrast correction, world luminance or any other histogram based filter you need to know about all the pixels (if you want to make it accurate).
On my way from Germany to France a month ago I was thinking about this problem and I found something that is strangely enough faster to read a whole picture — but only for big pictures. For smaller ones fortunately it does not matter that much since the time you have to spend on reading them is around 30ms.
So basically I read through a BitmapData like this:
[code]var x: int;
var y: int;
for (;x < width; ++x)
for (y = 0; y < height; ++y)
color = bmp.getPixel( x, y );[/code]
I guess it is very common to do that. Now this goes row by row (or column by column) through your BitmapData. Now just for fun I was testing what happens if you cycle through your BitmapData without ever resetting x and y. And voilá it is faster. On a 2048x2048 BitmapData it is 336ms vs 739ms. That is a nice performance increase. But funny enough it is slower for smaller bitmaps.
Here are the results (cycling vs. for-loop):
| Iterations | Cycle[ms] | Simple for[ms] |
| 128×128 | 2.7 | 2.7 |
| 128×128 | 11.1 | 10.3 |
| 512×512 | 29.7 | 28.3 |
| 1024×1024 | 95.4 | 106.3 |
| 2048×2048 | 355.8 | 738.6 |
And here is the code for the faster version:
[code]var y: int;
var x: int;
var m: Boolean = true;
while (true)
{
color = bitmapData.getPixel(m ? x++ : –x, y);
if (x == width || x == 0)
{
if (y++ == height)
break;
m = !m;
}
}[/code]
Papervision3D is now in public beta mode. It has been in development for 7 months now with public access to the SVN for everyone who liked to check it out. This is a pretty stable release. Old users will have to change their SVN address since it is hosted now at Google Code.
Read more here and do not forget to check out the very nice showreel.
Here is a list of some of my older PV3D experiments:
A different approach for a spectrum visualizer. This one is based on a lorenz attractor and I really like how fast everything is calculated and gives a feeling of speed. This time I also had to decrease the amount of particles I render. Instead of 64k (which was still running smooth) I decided to use just 8k because it looks better.
What I like about it is that it looks complex but is very simple to do. Based on the spectrum I just change the parameters of the lorenz attractor and that is it. A little bit of paletteMap, BlurFilter, Matrix and ColorMatrix of course as well but it is only about a 100 lines of code.
Since we are planing to release a detailed paper about AS3 optimizations and techniques I was thinking about another optimization for one of the daily problems. Looping through an array that contains objects. The fastest code to do this is
[as]for (;i
v0 = array[i];
l = v0.length;
}[/as]
v0 is a local variable for my custom class which looks like this
[as]class Vector3D
{
public var x: Number;
public var y: Number;
public var z: Number;
public function Vector3D( x: Number, y: Number, z: Number )
{
this.x = x;
this.y = y;
this.z = z;
}
public function get length(): Number
{
return Math.sqrt( x * x + y * y + z * z );
}
}[/as]
Looks like from a real scenario. You can replace the vector class also with a particle class or whatever. It does not matter. The point is this loop takes 272ms for 1000000 iterations. It is pretty good already but if you add one more parameter to the Vector3D class you can get even faster. This is my modified Vector3D called LVector3D
[as]class LVector3D
{
public var x: Number;
public var y: Number;
public var z: Number;
public var next: LVector3D;
public function LVector3D( x: Number, y: Number, z: Number )
{
this.x = x;
this.y = y;
this.z = z;
}
public function get length(): Number
{
return Math.sqrt( x * x + y * y + z * z );
}
}[/as]
There is a public variable now called next. This variable will always point to the next LVector3D object. The exact same loop takes about 260ms.
[as]var v0: LVector3D = start;
for (;i
l = v0.length;
v0 = v0.next;
}[/as]
You see how nice this looks? No ugly [] etc. Our variable is directly typed. And we can speed it up even more! If we replace the for(...) part with while( v0 ) it goes down to 249ms. What is also nice about a linked list is that you could add an easy splice functionality or functions to remove elemts from a list. You just have to change the next reference. If you also add a prev variable it becomes even more easy and you could loop backwards.
Building that list of vectors is also very easy. And it looks beautiful. Compare this
[as]for ( var i: int = 0; i < n; ++i )
array[ i ] = new Vector3D( i, i, i );
var v3d: LVector3D = start;
for ( var j: int = 1; j < n; j++ )
v3d = v3d.next = new LVector3D( j, j, j );[/as]
The start variable is defined in the class as private const vector3d: LVector3D = new LVector3D( 0, 0, 0 );. Very nice. Of course not useful in every case but sometimes if you have to squeeze out what is possible here is another method. So stay tuned for our paper.
Some people have problems with the migration from AS2 to AS3. First of all. This post will not help you to migrate. Also using the stuff here is bad. I just thought I can share some idea I had and make nice use of the Proxy class you have with AS3. Why is it bad? It will make your project run slower.
First of all. What can you do with Proxy? The proxy is defined as a dynamic class and it allows you to override any method and also the “delete” operator for instance. Back to the problem: Someone said “why can I not use clip0.clip1.clip2” any longer. Another friend told me it took him some time to figure out he has to use getChildByName( 'clip0' ).getChildByName( 'clip1' ).getChildByName( 'clip2' ). By making use of the Proxy class we can give this possibility back to the users.
Since I am a nice guy I added also _x, _y, _xscale and _yscale. Now how to do that? You define a proxy that holds a Sprite object (actually… not really. More on that later). Then you have to override a lot of methods like this:
[as]flash_proxy override function getProperty( name: * ): *
{
if ( sprite.hasOwnProperty( name.toString() ) )
{
return sprite[ name.toString() ];
}
else
{
var displayObject: DisplayObject = sprite.getChildByName( name.toString() );
return ( displayObject is AS2SpriteHandle ) ? ( displayObject as AS2SpriteHandle ).handler : displayObject;
}
}[/as]
This may look a little bit fancy for the first time but what do we do? We check if the Sprite object already has that property. If so we return it. Otherwise we return the child of that sprite. Now you see that I check if the DisplayObject is a AS2SpriteHandle. That is the instance the AS2Sprite (our Proxy) stores. Because it keeps a reference back to its AS2Sprite object we can return the AS2Sprite object. If we return only Sprite we could do a.b but not a.b.c because for b we would return just Sprite and lose therefore the ability to add c just as a property.
This is important. The class AS2Sprite extends Proxy and not Sprite. Therefore I added some functions like toSprite() etc. Have a look. Examples help me often the most. And if you are a lazy guy that does not really want to bother with the AS3 syntax you might find this helpful as well.
Some example code what you can do with it:
[as]var sprite: AS2Sprite = new AS2Sprite;
addChild( sprite.toSprite() );//doh! default app is still sprite :(
sprite.clip = new AS2Sprite;
sprite.graphics.beginFill( 0xff0000, 1 );
sprite.graphics.drawCircle( 0, 0, 10 );
sprite.graphics.endFill();
sprite._x = 10;
sprite._y = 10;
sprite.clip.graphics.beginFill( 0×00ff00, 1 );
sprite.clip.graphics.drawCircle( 0, 0, 10 );
sprite.clip.graphics.endFill();
sprite.clip._x = 50;
sprite.clip._y = 50;
sprite.clip.clip2 = new AS2Sprite;
sprite.clip.clip2.graphics.beginFill( 0×0000ff, 1 );
sprite.clip.clip2.graphics.drawCircle( 0, 0, 10 );
sprite.clip.clip2.graphics.endFill();
sprite.clip.clip2._x = 50;
sprite.clip.clip2._y = 50;
delete sprite.clip.clip2;//remove the blue one[/as]
It has not as many features as a real matrix extrude but it looks smooth and organic. It is all calculated at runtime using a Sphere object of Papervision3D and then extruding some faces of it five times based on their face-normal rotated using the Matrix3D class.
