If you had 2 weeks of holidays in September you would probably get a nice apartment in a Sunny island at 5 min of the beach. I would too. But not this time.

Instead I will be going to a Reykjavik hotel for 15 days. Why Reykjavik? Because 15 days in a hotel in UK it's about £1,000 and in Iceland it's £300 (breakfast included)... and the flight from London to Reykjavik costs £200, so that's why.

The idea is to stay inside the hotel room with my laptop all the time (Carmack's style). Hopefully with no distractions. Although I won't lie, I'll probably do a break at some point and visit the blue lagoon... Still, I think I've never been 15 days isolated. I'm much more productive when I'm alone (like everyone else I guess). So I'm very much looking forward to it.

You may think that this is wrong. But you need to understand this... The list of ideas I note down every day keep growing and the fact that the daily life doesn't give me enough time to materialise 99% of them really frustrates me.

Right now I don't know what I'll be working on, need to go through the list of ideas and do a selection... maybe xplsv.tv v2, maybe an android game, maybe a javascript demo... I really don't know.

Any suggestions/requests you may have?

20 comments

Some weeks ago I did yet another chrome experiment for Instrument. In fact, it was a experiment I half started when I realised that with the css property -webkit-transform (and MozTransform) I could scale elements. So I ported my basic 3D engine to Javascript and I got it working in a few hours. But in the end I didn't finish that one.

So for this "second phase" I finished it, but this time using Google Image API. The end result looks like this:



Realtime version: Google Sphere.

Once I had this one done I got totally addicted to Javascript and wondered what else could I try. I have to say that the fact of being able to change the code from anywhere without having to recompile anything is priceless. I keep modifying the Google Sphere every week whenever I find new Javascript tricks, and to improve the movements a bit. The first iteration of the experiment used jsTween but found some problems with it (I actually don't remember what were the problems) and luckily I found JSTweener which with some modifications performed flawlessly.

Then I though about my good old DOF experiment with Papervision3D, and though how could achieve the same effect with Javascript. The trick is background offset. Just check this image and you'll understand :)

While working on this one I really missed the Hi-ReS! Stats because at the beginning it was going a bit slow with only 100 balls. So I ported the Stats to Javascript and thanks to this I ended up having 300 balls runing quite decently. This is how it looks like:



Realtime version: Depth of Field, 100% Javascript (debug).

Of course, you'll need Google Chrome (win/linux/mac) to see all this in full glory.

So, apparently, Javascript is able to move a bunch of pixels these days. Next thing will be to render a actual polygon.

PS: Should I say that the sources are available? ;)

7 comments

Some weeks ago Vectorpark released a incredibly cute little game called Windosill. At first you had to download the game and play it on the desktop, paying $3 to play the second half of the game. Which I happily paid as I'm a big fan of this guy.

Now the game can be played online. It's one of those games with not too hard puzzles that make you feel good (aka clever) at the end of every stage. Also, technically, there are so many thing I don't know how were done. There is still magic on the flash world :)

What are you still reading this? You should be playing the game already.

EDIT: As vectorpark himself pointed out on the comments, for the online version it's still $3 to play the second part, it didn't pop up at me because I already paid for the desktop version. Anyway, it's well worth it!

9 comments

So I'm sure you've done a website that needed to be on 1,238 different languages. And every time you reached Chinese, Japanese, Korean... you got surprised that just the embeded font made your swf 9,000kbytes big.

For this project we're working on I'm mainly doing little tools with PHP. One of them is a translations manager, so you have a little SQL database with all the keywords and languages and someone fills it with data. At any point you can export it as .xml ready to be used in the website.

Having this set up, Theo came up with the idea that, as we had control on the text that was going to be needed for each language, we could do a script to output the list of characters needed for each font.

The PHP script goes down to this:

// In this case $lines is a associative array that comes from MySQL.

$list = array();

foreach($lines as $line)
{
	$string = $line["text"];
	$string = strip_tags($string);
	$string = str_replace('\n','',$string);

	preg_match_all('/./u', $string, $chars);

	foreach($chars[0] as $char)
	{
		$found = false;

		foreach($list as $listchar)
			if ($listchar == $char)
				$found = true;

		if ($found == false)
			$list[] = $char;
	}
}

foreach($list as $item)
{
	echo "U+" . zeropad( strtoupper( dechex( substr( mb_encode_numericentity ( $item, array (0x0, 0xffff, 0, 0xffff), 'UTF-8'), 2, -1 ) ) ), 4 ) . ",";
}

You'll also need this:

function zeropad($num, $lim)
{
   return (strlen($num) >= $lim) ? $num : zeropad("0" . $num, $lim);
}

What this code does (properly setted up in yours) is split the whole string into characters and check one by one if has been added to the list of characters used, if it's a new it just adds it. Then it writes a unicode list formated as U+XXXX. The output looks something like this:

U+0043, U+0048, U+0041, U+004E, U+0045, U+004C, U+002E, U+004F, U+004D, U+0052, U+0044, U+0049, U+0054, U+0053, U+5168, U+5C4F, U+89C2, U+770B, U+5176, U+5B83, U+8BED, U+8A00, U+6CD5, U+5F8B, U+58F0, U+660E, U+97F3, U+91CF, U+5E55, U+540E, U+82B1, U+7D6E, U+5965, U+9EDB, U+4E3D, U+2022, U+5854, U+56FE, U+0020, U+4E0E, U+8BA9, U+002D, U+76AE, U+8036, U+5C14, U+70ED, U+5185, U+62CD, U+6444, U+8BB0, U+5F55, U+73B0, U+573A, U+5F71, U+7247, U+0032, U+5206, U+0030, U+79D2, U+0036, U+00B0, U+0035, U+4F20, U+5947, U+4E3A, U+4EC0, U+4E48, U+9009, U+5851, U+9020, U+5973, U+795E, U+642D, U+4E58, U+591C, U+95F4, U+5217, U+8F66, U+7684, U+4EBA, U+6027, U+611F, U+8BF1, U+60D1, U+4F60, U+6700, U+559C, U+7231, U+955C, U+5934, U+7B2C, U+4E00, U+6B21, U+7EED, U+5199, U+8F89, U+714C, U+4EE3, U+00BA, U+9999, U+6C34, U+6C1B, U+5FC6, U+6211, U+53F7, U+2014, U+79D8, U+6570, U+5B57, U+0039, U+5948, U+513F, U+4E4B, U+5E74, U+7537, U+4E3B, U+89D2, U+5D14, U+7EF4, U+65AF, U+0660, U+8FBE, U+6587, U+6CE2, U+7279, U+8FC7, U+7A0B, U+4E2D, U+7F8E, U+597D, U+56DE, U+5609, U+4F2F, U+8389, U+5212, U+65F6, U+521B, U+4F5C, U+73CD, U+8D35, U+6735, U+539F, U+6599, U+5999, U+8C03, U+548C, U+5242, U+7A7F, U+8D8A, U+5149, U+7ECF, U+5178, U+56DB, U+79CD, U+6F14, U+7ECE

What's this for you'll ask. Well, just look at this:

[Embed(source="yourfont.ttf", fontFamily="YourFont", fontWeight= "bold", fontStyle = "normal",advancedAntiAliasing="true", mimeType="application/x-font-truetype", 
unicodeRange="U+0043, U+0048, U+0041, U+004E, U+0045, U+004C, U+002E, U+004F, U+004D, U+0052, U+0044, U+0049, U+0054, U+0053, U+5168, U+5C4F, U+89C2, U+770B, U+5176, U+5B83, U+8BED, U+8A00, U+6CD5, U+5F8B, U+58F0, U+660E, U+97F3, U+91CF, U+5E55, U+540E, U+82B1, U+7D6E, U+5965, U+9EDB, U+4E3D, U+2022, U+5854, U+56FE, U+0020, U+4E0E, U+8BA9, U+002D, U+76AE, U+8036, U+5C14, U+70ED, U+5185, U+62CD, U+6444, U+8BB0, U+5F55, U+73B0, U+573A, U+5F71, U+7247, U+0032, U+5206, U+0030, U+79D2, U+0036, U+00B0, U+0035, U+4F20, U+5947, U+4E3A, U+4EC0, U+4E48, U+9009, U+5851, U+9020, U+5973, U+795E, U+642D, U+4E58, U+591C, U+95F4, U+5217, U+8F66, U+7684, U+4EBA, U+6027, U+611F, U+8BF1, U+60D1, U+4F60, U+6700, U+559C, U+7231, U+955C, U+5934, U+7B2C, U+4E00, U+6B21, U+7EED, U+5199, U+8F89, U+714C, U+4EE3, U+00BA, U+9999, U+6C34, U+6C1B, U+5FC6, U+6211, U+53F7, U+2014, U+79D8, U+6570, U+5B57, U+0039, U+5948, U+513F, U+4E4B, U+5E74, U+7537, U+4E3B, U+89D2, U+5D14, U+7EF4, U+65AF, U+0660, U+8FBE, U+6587, U+6CE2, U+7279, U+8FC7, U+7A0B, U+4E2D, U+7F8E, U+597D, U+56DE, U+5609, U+4F2F, U+8389, U+5212, U+65F6, U+521B, U+4F5C, U+73CD, U+8D35, U+6735, U+539F, U+6599, U+5999, U+8C03, U+548C, U+5242, U+7A7F, U+8D8A, U+5149, U+7ECF, U+5178, U+56DB, U+79CD, U+6F14, U+7ECE")]
public var FontClass:Class;

In this way, you're going to import on the .swf only the characters you're using from the .ttf.

In our case, Chinese went down from 9,554kbytes to 45kbytes. That's a 99.6% reduction. Pretty cool!.

Hopefully this will save some sleepless nights to someone.

22 comments

Following the "a speech per year" tradition, here are the details for this year's one. It'll be open for anyone, so feel free to come around if you happen to be in town.

IED Master Madrid
May 13th, 2009 - 19.00h.

c/ Larra nº14, Madrid. [Metro Tribunal]

6 comments

Back in 2006, when I was a real noob coding wise (now I'm just below average), I did this plasma effect with AS2.



3 years later, in 2009, the effect with flash 10 looks like this.



Get the sources here. (It's VERY simple)

Thanks to Steve Ferrigno for indirectly pushing myself on coding the effect with Pixel Bender just by asking for the .fla of the 2006 effect :)

9 comments

Ends up as a very simple line, but took a bit to figure it out.

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

19 comments

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.

13 comments

One of the ideas on my to-do list was to create a website which develops a referrocracy. A place where the people giving links get back linked. A place where a small fish can top a big fish (at least until the big fish gives another referrers). etc etc

As it was a quick one and I had the day for it I though of getting that one done and see where it goes.

http://rfrrr.com/

I wonder how quickly it will get full of spam. May it also be useful to get a list of spam URLs? Time will tell.

4 comments

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 and as I had total creative freedom (as long as the piece was cool :D) I accepted. 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 Collapse

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. Before you mention it, all this was done in April last year, before this an even this (I was quite pissed off when they were released actually). Unfortunately I had to move in 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 Google Collapse flash experiment and they seemed very excited about it. I was about to mention that still couldn't be done because I used box2dflash 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 :)

Conclusion

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

11 comments