*blog... kind of... *rss 

Things I still miss in Ubuntu
Moving to Linux was quite a decision back in the day. If you really want to move you should be ready to miss many things, in my case: 3D Studio MAX, Photoshop, gaming, ... Although for most of the things you have alternatives: Blender, Gimp, no gaming... When I moved it was even worst because the suspend didn't work so I had to close/start my computer every time. It's been fixed now.

That's ok, but there are those little issues that would make the whole experience just perfect, this is the current list (I'll be updating it whenever I find more issues or solutions):

.psd support on the default image viewer
right now it will get open by Gimp, but this is annoying if you just wanted to preview it. I miss irfanview

XnViewMP can display .psd's, .ai's and anything you can imagine. Thanks Jull

vpn working out of the box
I had to connect to a Microsoft VPN and at first it didn't work. Months later I googled for the issue and found this which made it work. Tried to connect to the about-to-be-released 9.04 and it didn't work again, neither with that sites tips. On Windows it just works...

vpn to a Microsoft vpn now works flawlessly with Ubuntu 9.04 RC.

nice and consistent design
Mark recently said that in 2 years they were going to outpretty MacOS. Well, I can't see this happening that easily. 9.04 design additions aren't exactly on the right path. But hey, he also said that on Ubuntu 9.04 was going to load damn fast, and it does. We'll see.

webcam on flash player
Anytime I use the webcam in a browser, the second page I visit that tries to use the webcam breaks the webcam image input. I need to restart the browser if I want to use the webcam again.

Skype 64-bit
This is Skype's fault obviously, and a clear example of why open source is going to dominate the world soon ^^

I believe it's all a matter of patience :)

Get the amount of files in a folder with Ubuntu
It's a shame that doing a right click > properties in a folder doesn't tell you this (as Windows does) but well... Open the terminal, go to the folder you want to check a type this:

for t in files links directories; do echo `find . -type ${t:0:1} | wc -l` $t; done 2> /dev/null

Will output this:

655 files
6 links
213 directories

Found it here.

no comments
Install debug version of Flash Player plugin in Ubuntu
Download it from here:


Uncompress it and ignore the installer script, otherwise whenever you restart Firefox the previous plugin will be used instead.

The only way I managed to find was this:


sudo cp libflashplayer.so /usr/lib/flashplugin-installer/


sudo cp libflashplayer.so /usr/lib/adobe-flashplugin/


sudo cp libflashplayer.so /usr/lib/flashplugin-nonfree/

1 comment
Detect if the swf is being executed localy or online
Ends up as a very simple line, but took a bit to figure it out.

var localMode : Boolean = loaderInfo.url.indexOf("file") == 0;

Sys-Con now attacks Mr.doob!
Earlier this week, the uber famous Sys-Con surprised everyone with a masterly attention technique.

Eral Belkan is a designer, developer, author, teacher, entrepreneur, and performer. Best known for being the first designer, developer, author, teacher, entrepreneur, and performer being defaced by Sys-Con on the history of humanity.

Mr.Belkan started a internet campaign against Sys-Con but the campaign made a unexpected u-turn giving Sys-Con a lot of exposure reaching sites such as Digg and Reddit, page-rank rise and most importantly income rise.

Following this technique they defaced Mr.doob over the night. This is how the page looked like:

Fortunately I spoke with my venture capitalists, lawyers and a quick visit to a Scotland yard friend and forced them to remove the malicious page from their site. Quick enough before the page got indexed.

Chrome Experiments!
Oh my... I couldn't wait any longer...

And many other cool ones here.

Now, if you want to know a bit of the background/making of...

Some months ago the guys at Instrument commissioned me for doing a experimental piece. This is the first time I get this kind of offer, I had total creative freedom (as long as the piece was cool :D). The experiment mainly had to demonstrate Google Chrome's performance.

First concept

The best thing to do here was to directly code it with Javascript. First needed to get a little framework done, a stats widget and then see where it could go. Then I started porting a super simple collision system in between circles I had in AS3, and mixed that with browser movement. So you could interact with a bunch of circles by shaking your browser. They liked the main concept so I continued developing it.

Google Gravity

At Hi-ReS! I was working on a experiment that consisted basically in the google homepage collapsing and you could play with the elements, throw them around and even search. It was done in flash with box2dflash and I did a custom editor for rebuilding the html layouts. Unfortunately I had to move to another project and the experiment development got stuck.

Back to this project, as I had a little physics engine going on they suggested using it for breaking elements of a site. At first I said that it couldn't be done because in html you can't rotate elements, then they replied with this link and I had to eat my words ;) Then I showed them the flash experiment and they seemed very excited about it. I was about to mention that still couldn't be done because I used Box2D and there wasn't a javascript version, but this time I googled first and, oh! surprise, a Japanese ported it! :D So it was all decided, it was the perfect chance to finish that experiment.

Javascript < Flash ?

It was all looking good then, it was all a matter of the browser being able to handle css rotations fast and at the same time use the box2d engine. And how surprised I was when I saw how fast it performed. Seriously, Javascript in Chrome almost reaches the speed of flash. (no, they didn't pay me to say this :P). Another good thing now was that it wasn't a flash hack anymore, meaning that in the original experiments I had images of the buttons, so in MacOS you would see the button using the Ubuntu skin. Not anymore as now uses directly the html elements \o/

Box2d-js improvements

Then it was time to do the usual process, the actual work, the hacks, refactoring, the addictiveness tests... Eventually faced the problem that box2d-js took a bit of time to load (5-10 seconds) because it loads many files... Well, not anymore! I managed to do a script to put all the files in one and also jsmined it, and I'll be sending the script to Yasushi later :D Glad to be able to contribute something back to box2d-js after all :)


Brilliant project, I may still submit another piece that it's half done, we'll see.

Now go and take a look at the code of each piece and feel free to reuse the code, in fact, I want to see a lot of websites "collapse". The code its really easy to reuse, just add the class "box2d" to any element you want to collapse, and the code will do the rest. If you do anything with it, post it on the comments down here please :)

Face tracking + 3D Scene, Laughing Man, DOF Tunel and more...
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...



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.

png2swf.jsfl & folder_png2swf.jsfl v1.2
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!


Peter Saville's Unknown Pleasures AV
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 ;)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72