labs.hellokeita.com

So, here is the source for the Gesture Test I posted before.
http://labs.hellokeita.com/files/gesture/gesture.zip

As I said, it’s really simple, it’s not the best code but it gives you some ideas of how it’s made.

Inside the “tags” folder, I have three pngs for each shape (triangle, square and circle).
You draw the shape you want, I trim it, and compare to each png.
The comparisson is, get the drawn image, stretch it to the size of each png, and apply threshold. The BitmapData.threshold returns you an uint, the number of pixels that has been changed. With this number, divide it to the area of the png, and than, you choose the one that returns you tha smallest number.

and… that’s it. simple simple…

actually, it’s a technique used for some facial/object recognition softwares, but in a simplified way.

Well, I went to the Flash On The Beach for the first time this year. Was really cool and inspiring.

The first night, I had some inspiration, nothing to deal to any of the presentations I saw, but just something that I wanted to test. I couldn’t upload it because I didn’t have internet at the hotel, and at the venue the firewall was blocking me to connect to my FTP.

So, what was my experiment this time?
Gesture!
I think it’s working quite nice for a code I took less than an hour to write. It was much easier than I thought.

Just click and try to draw a Triangle, Circle or Square.

Enjoy!
I’ll post the source code later… let me take a nap now.

Hi, long time that I don’t post here…

I’ve been helping Romu here at work where he was trying to use a JPG instead of a PNG with alpha channel.
Why he was trying to do that?
Firstly he was using PNGs but each image was around 600 kb. So he was trying somehow remove the white background from those images because saving as JPG it’s less than 60kb.

It’s not a perfect background remover, but it works with the website he’s developing.

I don’t know if there are easier or more accurate chroma-key like background removing techniques, but… here is my workaround.

Sources?
Not yet… I’m busy right now but I’ll try to explain how I did it.

1. Using ColorMatrixFilter, I converted each RGB channel to the alpha channel.
2. Using BitmapData.threshold, converted every pixel with alpha bigger than 0 to black.
3. Applyed a Blur.
4. Mask the original Bitmap using cacheAsBitmap = true;

Uff… long time I don’t write here…

So… what I have been doing?
Actually… nothing interesting…
Then, couple days ago I started developing my own 3d engine.
I won’t make it public because it will take all my free time that I actually don’t have…

I didn’t run any benchmarks, I think it’s more heavy processing than Papervision3d.

anyway… here is it…

It’s a gradient created from the corners of the square.
I was googling and I found the Diamond-Square on Wikipedia.

The idea is quite simple.
First you get the top left and bottom left corner colors of the square. Than, you get the half height of the edge and also the average color of those colors.
You repeat that until you have all pixels of the edge.

Note: The average color is not (color2 – color1) * .5.
It’s (color2.r – color1.r) * .5 << 16 + (color2.g - color1.g) * .5 << 8 + (color2.b - color1.b) * .5.

After that, you make the same with the right edge.

Than, you do it for each edge from the top to bottom.

If you work around more, you can create gradient spots from any pixel you wish easily.

Answering to CK

1.
ck said,

January 14, 2008 @ 8:07 pm · Edit

… you mentioned to use BitmapData.paletteMap() to generate a grayscale image. Until now I didn’t get this working. How did you do that?

You can convert a BitmapData to Grayscale easily without using my ColorUtils class.
[code lang="actionscript"]

import br.hellokeita.utils.ColorUtils;

...

var bmpData:BitmapData = new BitmapData(w, h);

...

var grayscaleArray:Array = new Array();
var c:Number;
for(var i = 0; i < 0xff; i++){

c = i * .3 + i * .59 + i * .11;
grayscaleArray[i] = (c<<16) + (c<<8) + c;

}

bmpData.paletteMap(bmpData, bmpData.rect, new Point(0,0), grayscaleArray, grayscaleArray, grayscaleArray);
[/code]

Well, I don’t know if anybody read the Thomas Pfeiffer aka Kiroukou (the Sandy3D creator and project leader) commented on my previous post.
Here’s what he said.

Indeed Sandy does a clone of the original texture, for few reasons:
- avoid an unfortunate dispose call.
- allowing to have a setTransparency method to dynamically change the transparency without changing the original bitmapdata of the user.

Concerning the lock() and unclock() are you sure it has a performance impact?
as far I know, this can’t provide any performance boost since the bitmapdata isn’t attached to the flash display list. When the object is out of stage, there’s no advantage to lock it.
But I’d be interessted to have your feedback about that, and your performance test.

About the BitmapData.clone(), he got his point.
It just don’t work for me because I’m using too many 3d Objects with different BitmapMaterial for each, so, the system memory gets too high.
But, about the setTransparency method, he is right.

About the lock and unlock methods, I runned a little benchmark test, because I got curious too how much performance boost you can get.
Here’s the two test I made. (Clicking on the flash area it will re-run the benchmark test)

Using the lock and unlock methods.

Not using the lock and unlock methods.

It’s a really simple test, just to make a benchmark test.
Actually, it’s not a situation that uses any 3d framework.

Creating a BitmapData.
Creating 1000 Bitmaps.
Applying 1000 times a BlurFilter over the BitmapData.

On my PC I get about 150ms faster with locking the BitmapData.

keita

I was making some experiments with Sandy3d and Papervision3d and I realized some tips to increase the performance.

Firstly, with Sandy3d 3.0, when you create a BitmapMaterial, the BitmapData that you used to create the Material, is cloned to create the BitmapMaterial.texture.
So, one think you can do is dispose the BitmapData that you used to create the Material after instantiating it and also, if you want to update your BitmapData use the BitmapMaterial.texture directly.

Something like this:
[code lang="actionscript"]
var bmpData:BitmapData = new BitmapData(100, 100, true, 0x00000000);
var bmpMaterial:BitmapMaterial = new BitmapMaterial(bmpData);

bmpData.dispose();

bmpMaterial.texture.fillRect(new Rectangle(10,10,30,30), 0xffff0000);
[/code]
This will not work with Papervision3d because it uses the same BitmapData instance (in my opinion, smarter).

Now for both, Sandy3d and Papervision3d.
As you make changes on your BitmapData, it’s updated on every poligon.
So, use the BitmapData.lock() and BitmapData.unlock() when you are redrawing your BitmapData texture.

[code lang="actionscript"]
var bmpData:BitmapData = new BitmapData(100, 100, false, 0x00000000);
var bmpMaterial:BitmapMaterial = new BitmapMaterial(bmpData);

redrawBitmap();

...

function redrawBitmap(){

bmpData.lock();

bmpData.fillRect(bmpData.rect, 0x00000000);
bmpData.fillRect(new Rectangle(10,10,30,30), 0xffff0000);

var blurFilter:BlurFilter = new BlurFilter(16, 16, 3);

bmpData.applyFilter(bmpData, bmpData.rect, new Point(0,0), blurFilter);

bmpData.unlock();

}
[/code]

Actually, I didn’t show the source because I wanted to know how many people was reading it, and was interested about it… so let me reveal the little trick.

First, I create a TextField, selectable(obviously) and set the alpha to zero.
Than, create a BitmapData with the TextField size, and, just draw the TextField on BitmapData each time the selection changes.
When you draw the BitmapData, there is to ways to change the selection color, using the ColorTransform or PalleteMap methods.
After that, you just place the Bitmap behind the textField.

[code lang="actionscript"]
var color = 0xff0000;
var c = ColorUtils.getRGB(color);

highlightBmpData.fillRect(highlightBmpData.rect, 0x00000000);
highlightBmpData.draw(textField);
highlightBmpData.colorTransform(highlightBmpData.rect, new ColorTransform(1, 1, 1, 1, c.r, c.g, c.b, 0));
[/code]

One thing is that, using Color transform, you can change easily the smoothed fonts, and with PalleteMap is harder.
Just remember that the selection color is always black, so you need to change the black part of the BitmapData to any color you want.

Easy huh?

PS: weird thing is that some people couldn’t see the effect on Mac with Firefox… I didn’t try it yet, but I’ll try to find a way to make it work.

Firstly… sorry for my poor English…

Working on Recyou.jp, I had to use many BitmapDatas, and so, I had to work out some way to make it lighter.
One thing I realized is that using Graphics.beginBitmapFill besides BitmapData.draw its much faster.

I made the benchmarks, drawing 10000 bitmapDatas, one using BitmapData.draw, and other using Graphics.beginBitmapFill.

First the benchmark with BitmapData.draw (Clicking on the flash it will re-run the benchmark):

The code is something like this:
[code lang="actionscript"]
var genericBmp:BitmapData = new BitmapData(100,100, false, 0x000000);
var bmp:BitmapData = new BitmapData(100,100, false, 0x000000);
for(var i = 0; i < 10000; i++){
bmp.draw(genericBmp);
}
[/code]

Now the benchmark with Graphics.beginBitmapFill (Clicking on the flash it will re-run the benchmark):

The code is something like this:
[code lang="actionscript"]
var genericBmp:BitmapData = new BitmapData(100,100, false, 0x000000);
var bmp:BitmapData = new BitmapData(100,100, false, 0x000000);
for(var i = 0; i < 10000; i++){
graphics.beginBitmapFill(genericBmp);
graphics.drawRect(0,0,100,100);
}
[/code]

So, if you are trying to create some bitmap pattens or attaching a Bitmap child and redrawing it’s BitmapData, try using the Graphics.beginBitmapFill.