ricardocabellov5.5

Seems like I was inspired these days. I've been done quite a bunch of experiments. Probably the most interesting is this one:

Face tracking + 3D



As you probably know, the guys at squidder found out earlier this week a openCV port to as3 on the amazing (but unknown) spark project. Yesterday, Quasimondo did his magic and optimised the code quite a bit.

So after an exciting few hours I ended up doing what always wanted to try, face tracking + 3D. It's a bit glitchy, and unfortunately had to remove the z position (based on size of the rectangle) because it was super random that way. I think it kind of works and has potential.

Here it's a video of it in case you don't have webcam:



Btw, does the 3d scene sound familiar? It's yet another thing I always wanted to do, the Final Cut Server Identity in realtime.

There is a mouse-driven version here (remember to use the mouse-wheel for zoom).

Grab the sources for this one.

Laughing Man

But the first thing was a bit more simple. If you have seen the series Ghost in the Shell Stand Alone Complex you'll love this one. Long story short, on the series there is a hacker which is able to hack, not only into computers, but into broadcasts and even cybernetic eyes, so when he is hacking one person it can make all the observers view this icon instead. You can get a glimpse with this video. Anyway, it kind of looks like this:



Sources available too.

DOF Tunel

This one comes from this demo. You'll see a tube part which has DOF. The trick is the usual, a lot of sprites with different levels of blur. Although they are using OpenGL and it goes much smoother and looks much nicer, but I tried to replicate it with my engine just for the sake of testing it. Once the effect was done I started to play with parameters and sprites, and found out that the tunnel was nicer from outside. Ended up with this:





and more...

http://mrdoob.com/lab/actionscript/threedoob/tunneldof/03/
http://mrdoob.com/lab/actionscript/threedoob/tunneldof/04/
http://mrdoob.com/lab/actionscript/threedoob/tunneldof/05/

http://mrdoob.com/lab/actionscript/threedoob/glassballs/01/
http://mrdoob.com/lab/actionscript/threedoob/glassballs/02/
http://mrdoob.com/lab/actionscript/threedoob/glassballs/03/

Seems like, in Firefox, if you are browsing your 100% 100% website, open a new tab, and go back to the tab of your website the stage.stageHeight doesn't get updated (the stage now has less vertical space because the tab panel appears). It's specially annoying if you have your navigation aligned to the bottom of the stage because it won't show completely until you manually resize the window.

Checked a bit and dispatching and Event.RESIZE event from the Stage, even delayed, doesn't fix it. So it seems to be something else.

I hate these kind of bugs, you don't know if it's a Firefox bug, a swfobject bug or a flash player bug.

Anyway, if you see yourself in this situation, this dirty patch does the job:

package net.hires.utils.net 
{
	import flash.display.Stage;
	import flash.external.ExternalInterface;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.utils.setTimeout;	

	/**
	 * @author mrdoob
	 */
	public function navigateToURLAndUpdateStageSize( request : URLRequest, stage : Stage, window : String = null ) : void
	{
		navigateToURL( request, window );
		setTimeout( function () : void
					{
						if (ExternalInterface.available)
							ExternalInterface.call( "window.resizeBy", "1", "0" );
					},
					1000 );
	}
}

I guess not so many people will mind if the website resizes +1 pixel the browser window.

I must be the only one using these scripts, but just in case... I've changed them a bit.

The reason I use them is because I compile directly from Flex SDK, which means that I lose the feature of Flash IDE which compresses .png files at compile time. Which is sweet because it generates .jpg files with alpha channel. Thinking about it now, I can't believe there isn't a format like this for the HTML world, you know lossy + transparent.

So what these Flash IDE do is load any .png, add it to the stage and save it as a .swf. They have been working very well until this last project, where I had to load these .swf from another domain. After a bit of research, I found out that the solution was to add this line 'Security.allowDomain("*");' on the first frame of the generated .swf. So the script will now ask you if you want that line to be added, and as a bonus will also ask if the bitmap should have 'allowSmoothing = true' or not.

So, if you use them, enjoy!

png2swf.jsfl
folder_png2swf.jsfl

Everytime I saw Peter Saville's Cover for Joy Division's Unknown Pleasure the idea of making it real time as a Audiovisualiser popped into my mind.

It seemed something quite simple, but once you get down to doing it you start seeing things you didn't see the first time. Yes, this happens every time, but this one impressed and frustrated me for the actual complexity after its apparent simplicity (not only visual but technical).

The end result isn't 100% perfect, but does the job I think. The original album happens to be from 1979, so lets make this like a little 30 year anniversary homage.



I'm sharing the sources for this one in case anyone wants to improve it, or in case anyone wonders about the little tricks used on it ;)

http://www.whomp-fm.com/library/audio004/minilogue/Minilogue_Old_New.mp3

Specially the last tune, I wonder what/who it is, it sounds like Brothomstates + James Holden.

Yesterday I had a extra morning to walk around NYC, although I was already a bit tired, I decided I could check out a theater in the city. Did a quick google and somehow ended up on Cinema Village page. After checking the address (postcode) found out that it was in a walkable distance for the morning. So that's what I did and that was the first thing I did learn; don't trust postcodes in new york. In London a postcode will point quite close to where you want to go, in NY doesn't the arrow was pointing 200 numbers away of what I where I was going. Luckily on there, 200 numbers is a 6 blocks walk only.

Once I found the place I faced another problem, it's $10 and they don't accept Maestro. I've had the problem that I couldn't get any money from any ATM, not even from my bank's ATM. But, somehow I can pay with the card on a 7eleven (or similar) and ask for cash back, so that's what I went to look for. There were no decent places around but ended up on a super market, where they said I had to do a minimum $10 purchase to get cash back, after looking around for tiny but expensive things that I was likely to throw I managed to get $10 in products, but then the card didn't worked, good!

At that point it was 1pm and the film was starting at 1.10pm, so I went back to the theater, and asked to try with the card just in case, didn't work and lost any kind of hope. Fortunately, they saw that, and said they could sell me a student ticket, so I throw all the coins and notes on the place and asked if it was enough, and luckily, it was.

So, once again, people at Cinema Village, thanks thanks thanks!! :_)

And this is the film I was after:



Which it makes me say, thanks Charlie, thanks thanks! I'll watch the film more times so I get it better.

If you enjoy fucked up films, very recommended. And if you live in NYC, go watch a film on that theater, support the theaters that support great films.

EDIT: Uoh! Look what I found!

You will start thinking that Rob is actually paying me for promoting his site. You know, someone said that it doesn't matter whether people talk good or bad about you, but that they talk about you.

Anyway, this applies to FWA or any other site that does this. I was on the hotel trying to get back on finishing the presentation I have to do and went to FWA because the site was mention in a conversation with some friends in a random NY Starbucks few hours ago.

So I saw that the nice guys at Pixelinglife managed to get another FWA Award. Good I think, but then I go to check the site, and I saw the usual banner on the corner. This one:



Then I stopped and I though about it for a sec. The purpose of that banner is for FWA to get hits and to grow on audience. And somehow it kind of sounds fair as FWA is giving you hits. Ok, if you look at it in that way sounds fair.

BUT. When you see a Bafta/Oscar award winning movie, do you see a Bafta/Oscar on the corner of the frame during the whole movie? Aren't the guys thinking that having that kind of information is affecting the whole experience they have created and they have just been awarded for that? Somehow an award made them lose the respect for their own work and they didn't mind having a element on the site that wasn't in the client's approved flatscreens.

I sound like the old man in the sector, or something...

PS: If you know who said that quote I wrote on the first paragraph, share it on the comments please.

Adobe Tween
AS3 Animation System
BetweenAS3
ByteTween
BTween
Eaze
Go (successor of Fuse Kit)
Grape
GTween / GTweenTimeline / GTweenFilter / GTweeny
GTweener
KSTween
Tweener (successor of MC Tween)
TweenLite / TweenMax / TweenGroup
Tweensy Zero / Tweensy Original / Tweensy FX

Not bad, I thought there were even more!

EDIT: Ok, there are starting to be quite a lot :D

This is something I keep facing every time I develop a flash app on Windows. You'll get to the point that you want to access online data and the flash player will tell you that you are not allowed:

SecurityError: Error #2028: Local-with-filesystem SWF file file:///C|/Documents%20and%20Settings/mrdoob/Desktop/hi%2Dres/jaegermeister/modules/deploy/TestSuite.swf cannot access Internet URL http://...

Then, at some point you'll Google the problem, and start trying things. Eventually you'll do this:

1 - Right click on the flash movie
2 - Click on settings
3 - Click on the second icon, the screen with an eye (!)
4 - Click on advanced

And if getting here wasn't confusing enough already, now you're presented with a internet page full of text text text.

5 - Click on Global Security Settings Panel on the left column.

Here it's The Almighty Global Security Settings Panel! I remember the first time I did this, it was like "WTF? I need to access a website to configure the Flash player ssetings?!". Ok, lets leave this aside.

You may have forgotten what we were trying to do at this point. I'll remind you, we want to access the internet from our flash app.

So we are on this window were we can add "trusted" locations. So:

6 - Click on Edit Locations... (?)
7 - Click on Add Location...
8 - Click on Browse for folder
9 - Select the folder were your flash app is
In this case mine is:

C:\Documents and Settings\mrdoob\Desktop\hi-res\jaegermeister\modules\deploy

And then you'll see the new item on the list. Great you say, and then you go back and try your flash app again.

- Blimey! it doesn't work!
- Why could this be?

You double check everything you have done from the start. It's all fine. Then you realise that on the error message you got, the folder path has another format. In this case it looks like this:

file:///C|/Documents%20and%20Settings/mrdoob/Desktop/hi%2Dres/jaegermeister/modules/deploy/TestSuite.swf

Now you're ready to continue the process:

10 - Click on the location you just added
11 - Click on delete location
12 - Click on confirm
13 - Execute your flash app again
14 - Copy the path as it appears on the error
15 - Go back to The Almighty Global Security Settings Panel.
16 - Click on Edit locations...
17 - Click on Add location...
18 - Paste the path you just copied
19 - Click confirm
20 - Test your app, cry in happiness, and go to sleep cos it's 6am already

You gotta love the attention to detail on User/Developer Experience that Adobe has some times.

http://twitter.com/mrdoob

I think it's a interesting way for logging dev progress and save useful links.

Thanks... ;)