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/threedoob/tunneldof/03/
http://mrdoob.com/lab/threedoob/tunneldof/04/
http://mrdoob.com/lab/threedoob/tunneldof/05/

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


14 comments

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.

11 comments

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

9 comments

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 ;)

16 comments

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

24 comments

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.

9 comments

http://twitter.com/mrdoob

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

Thanks... ;)

no comments

Here it's a quick snippet I had to do for this site I'm working on...

I did a quick google search to see if there was a snippet for it already but didn't find anything so I though I would share it here. I though it was going to be a nightmare job but ended up quite simple:

var legalAge : int = 18; // or 21
			
var userDOB : Date = new Date(year,month-1,day);
var today : Date = new Date();
			
var diff : Date = new Date();
diff.setTime( today.getTime() - userDOB.getTime() );
			
var userAge : int = diff.getFullYear() - 1970;
			
if (userAge >= legalAge)
	trace("lets get pissed!");	
else
	trace("go away!");

6 comments

Trent Grover from iMed Studios missed some features and went ahead and did them himself. Once done he shared the code. I say, way to go! ;)



Here is the list of his changes:

• updating to compile against PV3D public beta 2 (updated from svn on 09/02/01)
• rewrote the camera system (too much has changed, but ends up simpler)
• included loading for more model types (DAE, Ase, 3ds, kmz, MD2)
• added animation playback for DAE and MD2 files
• added model scale change via up and down arrow keys
• mouse click selects current mesh for scale change

I cleaned the code (my part mostly) and made it FDT friendly. While at it I also cleaned the repository a bit.

2 comments

More audio visualisers! Yeey!

Early December last year Marcelo invited me to join his Omega Code project where lots a visual artist were going to create a illustration/poster for each of the track on the band's first album.

My take on the project would be creating a visualiser for the website. Although at first I planned to create a tool to get some curves to match each track (which is something I want to do this year) I ended up running out of time and had to go back on trying to get the best out of the FFT.

On top of that, ever since the first time Ithaqua quickly explained on a random forum (spanish) his way of animating octopus-ish meshes in 3D I always wanted to implement it and this time, and as most of the posters were quite circular, this seemed to be a good opportunity.

If you're wondering how have it's done here it's a quick explanation. Imagine having 20 spheres each one slightly bigger than the previous one; all of the centred. Now hide them and draw lines from each point in between each sphere. That would be a line from the point 0 of the sphere 0 to the point 0 of the sphere 1 and so on. You'll end up with a hair ball. Unfortunatelly, the drawing API of flash is a bit slow and it will be a hair ball of 20 or so hairs. From there you should be able to guess the rest :)



Once the effect was done, it was a matter of spending a lot of hours tweaking parameters, testing with different tunes, and finally quickly integrating it with the website interface developed by scarpelini.

I hope you find the end result as mesmerising as I do :)

11 comments