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

Moving to github
I've asked many times to Sole about the benefits of using git and every time I thought it wasn't worth the learning time. I was happy with svn, but for Harmony I thought about giving github a try as Google Code didn't seem to make collaborations and forking too easy, plus github worked better with the way I was using it (different projects in the same place).

I guess Google Code works well for big projects, but in my case I do small projects/snippets, and creating a new repository/page for each one was a bit annoying as they also check if a project with the same name exist on sourceforge, and if it does you need to email the owner for permission first (although my project wouldn't be hosted on sourceforge but on Google Code).

Anyway, here it's the link for my github page:


So far I'm liking it, and I've started moving my projects there. First one to move was stats.js, but expect the stats.as, videoplayer and so on to be moved soon. I've found github a bit hard at the beginning (ssh, keys and so on) but once that part is done is quite simple. Oh, and it's great to see the .svn folders go away!

Wacom Javascript API
Ever tried to make an online drawing application and got frustrated because you couldn't access the Wacom tablet pressure? I know the feeling :)

Although I'm a bit surprised of how little publicity this thing had (none?) seems like Wacom has had this ready for quite a while (Windows/MacOS only) and with the latest drivers it should all work smoothly.

If you have a Wacom tablet, take a look at these demos. To learn how to integrate it into your application, here it's the info but I found easier just to take a look at the sources of this demo. If you're a Flash/Flex developer, external interface is your friend, at least until Adobe implements it within the player.

Of course, I've implemented it already in Harmony ;)

Making of The Johnny Cash Project
And you may be wondering, where does all this thing about drawing tools come from? Good question!

Although I've always had interest on developing a drawing application, it all started when Aaron Koblin asked me if I would be up for developing a drawing tool for a Johnny Cash homage project he was planning with Chris Milk. I think this was about 6 months ago, even before the Startbucks Love Project (where an alpha version of the drawing tool was used).

Before passing away in 2003, Johnny Cash recorded one last album which was never released, until now. The idea was to build a platform where everyone would be able to draw a frame for the musicvideo for one of the tunes.

The website (front-end and back-end) was built by @radical.media so my work on it gets simplified to the repainter and painter system.


One of the requirements for the drawing tool was to record how the frame was being drawn so the visitor on the site could see a timelapse. For example, here is a drawing I did:

There is small aspect ratio bug on that one, but you get the idea...

Doing this took a bit of time, but luckily I had learnt a few tricks some weeks before after trying to port the Colors! Java Repainter applet to AS3.

Creating a file format turns out to be quite simple. Just a matter of deciding a few tags (size, color, opacity, position...) and deciding how many bits you need for each value. For instance, I have STROKE_START which has the id 4, we do bytearray.writeByte(4) and then we save the positions of the mouse, but because these values can be bigger than a byte (256) we need to use int bytearray.writeInt(x) and bytearray.writeInt(y). We do the same for the rest of data and at the end we use bytearray.compress() which is pretty much a zip. The end result is a very simple and optimised file format, faster to parse than a xml and much smaller.

Having a hexadecimal editor is a must here (I used GHex). Here is a screenshot of how the uncompressed file format looks like:

If you know about file formats, I'm sure you already know what's going on, otherwise there you have a quick challenge for lunch time ;)


Having the file format sorted out I "just" had to develop the drawing tool itself. This may sound an easy task but, starting with the premultiplied alpha nightmare (more info) it has a bunch of little challenges... undo/redo, custom brushes, zoom, panning, brush outline... it just takes its time.

Using the original frame of the video as onion skin we can get nice results in a few minutes.

Now I can't wait to see how the project evolves and hopefully seeing the video without missing frames soon!

This is the result of all the weekend playing with various drawing algorithms and <canvas>.

I'm sure you prefer playing with the thing than watching a video tho... Here here!

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = 'darker'. This was on the HTML5 spec before but got removed. Just so you know what I'm talking about, this is like the "multiply" blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

I went to #processing.js to ask about this and while there sephr, apart from answring this same question, suggested making the app work on Webkit mobile (that means Android and iPhone) and also pointed me to the right direction. I didn't know this was possible at all but it was quite an easy task :) I haven't implemented multitouch support yet tho... that changes a bit the way my system work but I'll put it on the list.

Take a look at the code, play with it and if you come up with a nice brush you think should be added to the default pack, please, send it over!

EDIT: Thanks to Elke for creating a Facebook Fan Page. There is also a Facebook Group :D

EDIT 2: Yet another Facebook group. RRR, with a theme everyday and really talented artists.

César Alierta y las anotaciones de Youtube
Ayer, en el perfil de Marc de Facebook, me tope con esta perla.

Sole, al verlo esta mañana, comentaba que echaba de menos poder poner comentarios en tiempos especificos, como en soundcloud.

Dicho y hecho!

Seguramente el video terminara con demasiadas anotaciones pero por ahora el experimento ha valido la pena :D

Banning Internet Explorer
Whenever I work on a html/javascript experiment I usually test it on Chrome. Once I'm done, I test it on Firefox and Opera. There is no Safari for Linux so I don't have an easy way for testing it so I usually assume it works as it's very similar to Chrome. The interesting thing is that the same code usually works directly on the other browsers. Just special cases like adding custom css properties (like -webkit-transform, MozTransform, OTransform...).

Of course, that's not the case with Internet Explorer. And to be honest I never really tried to make anything work on it. I believe that browser has made humanity lose a lot of time and money so making my experiments work will be like helping it to stay alive.

But I wasn't showing any error message. My experiments will just not work and people will mention it and complain. I really didn't want to add Javascript browser checks in each experiment either. However, there was a much simpler and efficient solution, add a rule on the .htaccess to redirect all the request from that browser to this page.

By banning all the request of that browser, not only I'm happier when developing but also I may move some of these users to a better browser, and at the same time, other developers won't have to suffer from these users.

Imagine if all the major websites did this. Wouldn't that fix the problem?

If you find the move interesting and you would like to stop supporting IE too, this is the code you'll need to put in you .htaccess file:

RewriteEngine on

RewriteCond %{REQUEST_URI} !/projects/ie/index.html$
RewriteRule ^(.*)$ /projects/ie/index.html [L]

Just change the /projects/ie/index.html parts with wherever you put your own message/page.

EDIT: After Microsoft released a preview of Internet Explorer 9 some people suggested that I should remove the ban so they could test my HTML5 demos on the browser. That seemed a good idea, so the ban is removed. The bad news is that the browser doesn't seem to be doing too well.

Making history not repeat itself
As Quasimondo rightly pointed out history keeps repeating. Specially on the web. Over the last decade we've been repeating what off-line graphic programmers have done two decades ago. Even worst, with Javascript we're repeating what Flash was doing half a decade ago.

In the case of Flash, the reason of why history repeated is because Flash is software rendering. Meaning that it's the CPU the one processing all these 2D/3D effects. Meanwhile, all these off-line graphic programmers had been enjoying from hardware rendering where the graphic card is outperforming the CPU in many levels.

In order to avoid history repeat itself we should know history on the first place. Watching what the people have done in the Demoscene, Processing, etc worlds helps. However, it's very tempting to just remake something for the sake of showing that it's possible. And I personally don't see anything wrong with it as it's good for learning. But we should focus on creating new things.

An example of this was back on the early days of Papervision3D. People were complaining that the engine didn't have lights or shadows. Amiga computers neither had enough power to efficiently render 3D scenes with lights and shadows but they managed to fake it by prerendering the shadows in the texture. That was the reason I did the pink ball experiment. I knew the trick because I knew this Amiga demo from 2006.

Now that hardware rendering is getting closer to be default (no plugins) on the web with WebGL, the possibilities are going to increment a lot. But we don't want to have a rotating cube on the screen, we should learn from what all the off-line graphic programmers have been doing with these possibilities and continue from there.

Here it's a selection of hardware accelerated demos from the last decade. I've sorted them (more or less) in chronologic order.

Remember, all these videos run in realtime on their original form. I'm aware that presenting them here in video form devaluates the work but it's just easier to watch.

Oh my... mix all these tricks and aesthetics with interactive experiences, audio visualisation, data visualisation, ... and that's a nice looking future for the web! :D

Moving back to Spain
This Christmas, visiting the family was a bit harder and made me think why we were still in London. I've been in UK for about 7 years already. The experience has been invaluable. Learning the language, meeting a lot of people, work opportunities and a long etcetera. I'm extremely happy I decided to have a part of my life here.

Some months ago, before leaving Hi-ReS!, I had to think what the plan was going to be afterwards. At that point, seemed logical to think that staying in London in case I had to meet someone in town for a freelance job was a good idea. But London was starting to get claustrophobic so we though about moving to a town "close" to London (ie. Bath). At the same time I was getting offers to move to United States which were very tempting, but somehow UK was still winning for being closer to Spain.

Now that I was already freelancing I found myself that there was no real need to stay in London. All the projects I worked on where done from home. That home could be anywhere, so why not moving back to Barcelona instead of to Bath?

We have a lot of stuff in London, so moving is going to be a slow process. Hopefully in April/May we'll be done. There are many people I'll be missing but I have the feeling I'll be visiting quite often :)

Seems like 2010 is going to be a benchmark for us :)

Merry Xmas

Yesterday night I had the idea of retrieving all my twitter follower avatars and create an image out of it. Not an amazing concept but it was playful enough. I wanted to go down into quadtrees and play with the composition behaviour a bit but that would quite a bit of time and brain energy... I may go into it later.

Long time not sharing the sources in a .zip file! ;) Nothing too interesting tho.

Anyway... Happy holidays and a great 2010!

Blobs Redux

For a quick project I was asked to revisit my old blobs effect. The client (which, again, sells flavoured liquids) wanted a xmas greetings e-card, so the idea was to play with the liquid that would form specific shapes.

Animating was a matter of using eaze and its beziers, but making it look a bit realistic took most of the research time.

Here it's how the old version of the effect worked:

As I'm sure you had guessed already it's all based from a bunch of circles.

Then we apply a BlurFilter to the Sprite that contains the circles.

And then by copying it to a BitmapData we apply a threshold and a colorTransform.

That's it. Simple enough for a quick experiment...

This i's how the new version works:

What we had so far happened to be a bit too CPU intensive for what it was. If we were going to make it even more complex we had to optimise. We had to remove the BlurFilter step somehow.

Looking at how the Sprite wth the BlurFilter applied looked like, I though that maybe I could recreate a very similar look using pre-blurred circles.

That way, instead of doing a blur pass to a big Sprite, it would be just a copyPixels using this bitmap as source with the positions where the original circles are. The result looks like this:

Which, for the human eyes is very different, but for the computer is very similar. (I could play with brightness/contrast to make it more similar for the human eyes).

Another step for this one was to apply a colorTransform to the working bitmap instead of filling it with white every frame. By doing that we would win "trails" which would improve the liquid effect, and, at the same time doing a kind of brightness/contrast for us.

At this point we apply the threshold again.

This is pretty much like the old effect, but much faster (no fullscreen BlurFilter). Now I could make the effect a bit nicer emulating reflections. I tried many ways but in the end this 2 step process was the fastest and better looking.

First step is to apply a BevelFilter to the output of the threshold.

Doing a BevelFilter is quite slow, but I can't think of a better way.

The fact that we're using reds here is not because the final color is going to be red (which it wasn't for the client). This BevelFilter uses 0xff0000 for hightlights, 0x000000 for shadows and the threshold was 0x800000. That's basically a grayscale but using the red channel. And you may wonder why.

Well, there is this (fast) method called paletteMap that does a very interesting thing. You can map a colour channel to an array of colours. In fact, you can map all of the channels to arrays of colours but I don't know what I could do with that (yet). Lets keep it simple for now.

This is the strip of colours I'm using. Just to make it clear, what paletteMap will do is to replace all the reds with the colours in that strip... as in, 0x000000 will use the colour[0], 0x010000 will use colour[1], 0xff0000 will use colour[255]... and so on... we end up getting this:

Surprised? No? Well... I was. :)

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