labs.hellokeita.com

A long time I didn’t code anything in JS… and I just had an insight.
I don’t know if it’s new but at least it’s interesting for me how we can integrate Flash and HTML contents.
This is just a simple ugly test to drag something from Flash and drop on HTML.

The demo is in this link:http://www.hellokeita.in/xp/DragDrop/

Vote

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.

Vote

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.

Vote

As promissed, here is the presentation I made at LFPUG in PDF format.

http://www.hellokeita.in/presentations/LFPUG/20090827/MakingMusicFP10.pdf

And the source files zipped with the demos I showed.

http://www.hellokeita.in/presentations/LFPUG/20090827/examples.zip
The contents are:
Example01-SineWaveExample: Simple example generating a sine wave
Example02-KeyboardExample: Example of a piano keyboard
Example03-WaveformExample: Changing the waveform of a sound
Example04-TimePitchExample: Changing pitch and tempo of a mp3
Example05-HeliumBalloon: Real time pitch shifting using Java

Enjoy!

UPDATE
LFPUG website uploaded the video of my presentation
http://www.lfpug.com/flash-10-making-music/

Vote

UPDATE: fixed the clicking noise correcting the zero-crossing, thanks to Caco Teixeira

Just another test now controlling the pitch and the tempo of the playback.
Source… soon, I’m re-writing the classes trying new approaches.

Vote

What is Bezier?
Simply explaining for dummy AS programmers, is what graphics.curveTo method does.
If you want to learn more, here is the Wikipedia article.

Basically, the curveTo method uses a quadratic bézier, so you need a control point and a anchor point.
But it’s difficult to find the precise control point for a curve you want, because the control point is not inside the curve.
Also, you just can create a curve with just one control point, or if you want to use many curveTo methods in sequence, sometimes the curve doesn’t became as straight as you want.

So, I created a class that calculates the control points with multiple values bézier.
You can also get the position in this curve.

Here goes the examples. (you can click and drag the points)

This is an example using 7 positions, the start and the end anchors and 5 control points.
In the class, there’s a method that returns me an array with the approximated quadratic bézier values, so I’m using this values to draw the green line.
You see that it still hard to draw a path that you want.

This is the same example, but now the positions are inset in the curve.
Now, it became easier to create a curve line.

And here, a animation over the curve.

Sorry for lack of explanation, actually I’m in vacation now, but I wanted to post this class.
Later I’ll try to post more examples and uses.

I will try to update my svn with these classes, commented, after I came back from vacation.
So, for now, here is the source code.

Vote

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…

Vote

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.

Vote

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]

Vote

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.

Vote