labs.hellokeita.com

Wonder how to apply smoothing, read and write pixels on a image loaded from a different domain name?

Quite simple, load as binary first and than load the ByteArray as Bitmap.


var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener(Event.COMPLETE, urlLoaderComplete);

var url:String = "http://www.adobe.com/images/shared/product_mnemonics/50x50/flash_player_50x50.gif";
urlLoader.load(new URLRequest(url));

function urlLoaderComplete(e:Event):void
{
  var loader:Loader = new Loader();
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
  loader.loadBytes(urlLoader.data as ByteArray);
}

function loaderComplete(e:Event):void
{
  var bmp:Bitmap = e.currentTarget.content as Bitmap;
  addChild(bmp);
  var bitmapData:BitmapData = bmp.bitmapData
  bitmapData.applyFilter(bitmapData, bitmapData.rect, new Point(0, 0),
    new ColorMatrixFilter([
      0, 0, 0, 0, 0,
      1, 1, 0, 0, 0,
      0, 0, 1, 0, 0,
      0, -1, -1, 1, 0
  ]));
}



var container:Sprite = new Sprite();
var balls:Vector. = new Vector.();
var m:Matrix;
var s:Shape;
var r:Number;
var c:uint;
for(var i:int = 0; i < 10; i++){
r = Math.random() * 100 + 100;
m = new Matrix();
m.createGradientBox(r, r, 0, -r * 0.5, -r * 0.5);
s = container.addChild(new Shape()) as Shape;
c = Math.random() * 0xFFFFFF;
s.graphics.beginGradientFill(GradientType.RADIAL, [c, c], [1, 0], [0x00, 0xFF], m);
s.graphics.drawRect(-r * 0.5, -r * 0.5, r, r);
s.x = Math.random() * 400;
s.y = Math.random() * 300;
moveBall(s);
balls.push(s);
}
function moveBall(s:Shape):void
{
//whatever easing to move the spheres
}
var s2:Shape = container.addChild(new Shape()) as Shape;
m = new Matrix();
m.createGradientBox(200, 200, 0, -100, -100);
c = Math.random() * 0xFFFFFF;
s2.graphics.beginGradientFill(GradientType.RADIAL, [c, c], [1, 0], [0x00, 0xFF], m);
s2.graphics.drawRect(-100, -100, 200, 200);
var bmpData:BitmapData = new BitmapData(400, 300, true, 0x00000000);
var bmp:Bitmap = addChild(new Bitmap(bmpData)) as Bitmap;
addEventListener(Event.ENTER_FRAME, render);
function render(e:Event):void
{
s2.x = mouseX;
s2.y = mouseY;
bmpData.applyFilter(bmpData, bmpData.rect, new Point(0, 0), new BlurFilter(2, 2, 2));
bmpData.draw(container);
var i:int, l:int;
var aArr:Array = [];
var c:int;
for(i = 0; i <= 0xFF; i++)
{
c = (i - 0x80) << 1;
if(c < 0) c = 0;
aArr[i] = c << 24;
}
bmpData.paletteMap(bmpData, bmpData.rect, new Point(0, 0), null, null, null, aArr);
}


I had a great opportunity to make an interactive installation at unit9.

So, I came up with the technical idea, using the mobile device’s web browser that supports html5, and an internet connection, you could interact with a computer, without the need to install any app.

The idea our creative director Kishi brought was simple, you draw, and make your drawing a firework.
With the help from unit9, we were able to create this unique way to interact from a mobile to a computer, in a straightforward way, no need to install any app, no need of advanced technical knowledge.

So, my time has came.
My first installation.

It’s really simple drawing installation.
You get your iPhone and access the URL from your browser in the instruction on the projection, and just start drawing, and you can see it right away on the projection.
You don’t need to install any application.

You can check some videos here: http://www.facebook.com/event.php?eid=106749376013168

So, I used HTML5 + JavaScript for the web application, PHP for the socket (I know, it’s not the best solution, but it was what I could’ve done at this time), C++ & OpenFrameworks for the application running for the projection and a MySQL database to store all the drawn data.

What I’ve learned from this?
- you don’t really need to learn Objective-C and pay hundreds to Apple to make some simple application
- don’t try to do what everyone is doing
- I know c++ now
- flash is slow even on AIR
- sockets on PHP works pretty well
- HTML5 won’t be replacing Flash any time soon
- people are afraid to do something different at work until someone does something new
- don’t try to do everything by yourself

Anyway, at the end, everything went well, personally the result was really good.

If you read this post before 29th of March, you can still go check it out at Hoxton Square.

Again, I didn’t update my blog for a long time.
So to catch up, here goes what happened in my life in the last months.

At beginning of November I started working at unit9 (http://www.unit9.com) a interactive media company based in London.

As first project, I did Guinness Bring it to Life (http://www.bringittolife.tv)
It’s a project that integrates Google Earth plug-in, Flash, Javascript, Facebook, and lot of other technologies.
Basically, you can build your planet with different terrains on Google Earth plug-in and bring life to your new planet.

Last week I went to play Carling in Kent with some friends.
It was amazing, much exciting than watching someone playing. You should play it when you have chance.

And, this week, I made a installation at unit9, my very first one, that I’ll explain on next post.

Yeah!! My 3rd FWA.
Now I have my name listed on FWA’s profile!

1st FWA: Sony Recyou (Non-grid)
2nd FWA: Panasonic Wave (Non-grid)
3rd FWA: Adhemas Batista website

Check it out there!

Released couple weeks ago, I programmed the portfolio website for Adhemas Batista.
He is a Brazilian illustrator based in Los Angeles – US.

I went today for Adobe Back from MAX conference here in London. It’s like a mashup of what they showed at Adobe MAX LA.

Well, here is the note I took, and I’m really disapointed about Flash app in iPhone…

Flash app on iPhone:
- It’s a “static” app. Only SWFs packed in the app can be loaded. No SWFs from outside can be loaded;
- You can load images, sound, text from outside;
- No H.264, RTMPT, PixelBender…;
- No access to Mic / Camera;
- No access to Native API like Maps;
- The packed file size is at least 2.7mb because they have to bundle all the functionalities because the compiler doesn’t know what is being used or not;

Flash Embed in HTML
- You can assign a priority to swfs during embed, so in a page with 2 banners and a main swf, can assign main swf a higher priority for performance;

Flash Catalyst
- easy integration of Photoshop/Illustrator design with Flash, using Catalyst.
- good for prototyping and IAs
- skinning components easy
- you can create a Flex Project directly from Catalyst, but the Flex Project can’t be loaded in Catalyst
- you can create just a Library Project so you can change components skins easily

Flash Pro CS5
- Text Framework integrated (http://labs.adobe.com/technologies/textlayout/)
- AS3 snippets for designers, creates simple interactive code as Keyboard / Mouse interaction
- Can save FLA or a uncompressed FLA format, that is a bunch of XML’s and assets inside a folder.
- The uncompressed file format is good to change the assets without opening the FLA file

Flash Builder
- You can easily create Flash Project and select a FLA file
- Better integration with back-end stuff, WebServices / AMF (CF, PHP, Java)
- Code generator for WebService / AMF
- Network monitor, to monitor webservices and AMF
- Easily create CMS, selecting the data origin, can be set to edit or only ready the data

Flash Distribution
- Monetization, using Adobe ID, sell Flash / AIR products
- Apps supports Ads
- Frameworks to make easier integrations with social network.

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/

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.