When trying to install ruby 1.9.2 using rvm I got a nasty suprise:

ossl_ssl.c:110:1: error: ‘SSLv2_method’ undeclared here (not in a function)
ossl_ssl.c:111:1: error: ‘SSLv2_server_method’ undeclared here (not in a function)
ossl_ssl.c:112:1: error: ‘SSLv2_client_method’ undeclared here (not in a function)
make[1]: *** [ossl_ssl.o] Error 1
make[1]: Leaving directory `/var/cache/ruby-rvm/src/ruby-1.9.2-p180/ext/openssl'
make: *** [mkmain.sh] Error 1

The solution

sudo apt-get install ruby-rvm
# make sure we have $rvm_path
source /etc/profile
# don't use ubuntus openssl
rvm package install openssl
rvm install 1.9.2 --with-openssl-dir=$rvm_path/usr

I generally like dynamic languages and in generally don't run into much trouble with them. Having that said, I hate the way undefined and NaN work in Javascript.

This turns a simple typo into a NaN apocalypse. After half of your numbers have turned into NaNs it's hard to find out where they came from.

var o = {y: 0},
#NaN
1/o;
#NaN
var x = 1/o.x;
#NaN
var y = x*10;

Setting up traps

So how do you catch stray NaNs? You set up traps. Because it can become very tedious and error prone to have asserts everywhere I wrote a little helper, fuckNaN().

function fuckNaN(obj, name){
    var key = '__' + name;
    obj.__defineGetter__(name, function(){
        return this[key];
    });
    obj.__defineSetter__(name, function(v) {
        // you can also check for isFinite() in here if you'd like to
        if(typeof v !== 'number' || isNaN(v)){
            throw new TypeError(name + ' isNaN');
        }
        this[key] = v;
    });
}

// Examples
var o = {x: 0};
fuckNaN(o, 'x');
// throws TypeError: x isNaN
o.x = 1/undefined;

// Also works with prototypes
function O(){
    this.x = 0;
}
fuckNaN(O.prototype, 'x');
var o = new O();

// throws TypeError: x isNaN
o.x = 1/undefined;

Place some of those traps during debug mode in critical locations like your Vector and Matrix classes and they will bring doom and destruction to those NaNs..

Note: This doesn't work in IE<=8 and you shouldn't use it in production. Use it as a tool during development to make your code fail early.

I got myself a new toy - a Thinkpad X1. I wasn't really sure whether I should get the X1 or a Macbook Air. The main reason I decided to get the Thinkpad is because I prefer Linux for coding and I actually prefer the style of the hardware. It looks like a hackers tool and not like a shiny fashion accessory, but that's of course just my taste. It's also a lot more powerful in terms of CPU and connectivity (RJ45 jack, HDMI out, USB3, built in 3G modem). The downside is the display, the IPS displays Apple uses are just SO much better. But hey, I'm a developer not a designer.

This post describes the tweaks I did to make this notebook even better. They are also a documentation for myself. It targets advanced users.

TL;DR

Everything works out of the box, but a few tweaks make it way more awesome.

Thinkfan

The default fan settings are very aggressive and result in a lot of noise. I use thinkfan for manual fan control. This reduces the noise significantly.

#/etc/thinkfan.conf
sensor /sys/devices/platform/coretemp.0/temp1_input
sensor /sys/devices/platform/coretemp.0/temp2_input
sensor /sys/devices/platform/coretemp.0/temp3_input
sensor /sys/devices/virtual/hwmon/hwmon0/temp1_input

(0,	0,	60)
(1,	60,	70)
#(2,	76,	61)
#(3,	52,	63)
#(4,	56,	65)
#(5,	59,	66)
(7,	70,	32767)

Note that those are pretty extreme settings, use with caution and don't blame me.

Reducing power consumption

In order to improve battery life and to keep the device cool I tweaked some settings and disabled all unused devices in the bios. The changes save almost 10 watt!

#/etc/default/grub
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash i915.i915_enable_rc6=1"
# run update-grub after change

#/etc/rc.local
echo 1500 > /proc/sys/vm/dirty_writeback_centisecs
for i in /sys/bus/usb/devices/*/power/autosuspend; do echo 1 > $i; done
echo min_power > /sys/class/scsi_host/host0/link_power_management_policy
echo min_power > /sys/class/scsi_host/host1/link_power_management_policy

Also you should consider using flashblock for firefox/chrome. Flash will drain your battery. If you don't believe it just look at the cpu wakeups it creates using powertop.

SSD TRIMing

I use an Intel SSD in the Notebook. The installation was a bit fiddly but the performance is just incredible. The thing boots in seconds. In order to get TRIM support I added discard to the partition options in /etc/fstab.

#/etc/fstab
UUID=b38561bd-9ca9-44a6-848d-ec90f31e1955 /               ext4    discard,errors=remount-ro 0       1

Wireless

802.11N seemed to create problems with my WLAN so I disabled it.

#/etc/modprobe.d/_wlan.conf 
options iwlagn 11n_disable=1

HDAPS

HDAPS offers you access to the accelerometer and advanced battery functions. It's simple to install:

sudo apt-get install tp-smapi-dkms
sudo modprobe -a tp_smapi hdaps
# get battery details
grep -r . /sys/devices/platform/smapi/BAT0/
# load on boot
echo "tp_smapi" >> /etc/modules
echo "hdaps" >> /etc/modules

Conclusion

With all those tweaks done the Thinkpad X1 becomes a durable, light, quiet and fast notebook with a lousy screen.

29a.ch/sandbox/2011/addresscloud/

As some of you know I work for local.ch. I was looking for cool visualizations to do with our data for quite a while, missing the obvious - plotting all our 3.7 million geocoded addresses in 3D using WebGL! I'm actually quite impressed by the accuracy of the data. But go and have a look for your self.

Controls

WASD + Mouse (drag). Velocity is scaled with altitude.

Video

If you can't see the demo for some reason I uploaded a short video of the demo to youtube.

Techniques

The points are encoded in a Float32Array, then sorted and gziped using a python script. Sorting the data improves the compression ratio by over 200% so it's well worth the effort. This brings the original 100mb file down to 7mb.

The file is then loaded using XHR level 2, which supports binary files and progress events. The points are then rendered using WebGL as GL_POINTS and additive blending is used to give it a glow effect. In the future I might add HDR rendering and blooming.

There is no level of detail or culling performed so this will require a relatively powerful rig. Also note that for some reason Firefox Aurora (9) seems to be quicker than Chrome Dev (16) for some mysterious reason. I would expect all of the work to be done by OpenGL so I'm not sure about where this comes from. It could be chromes process isolation.

Sourcecode

You can find the source code on github if you want to get into some hacking. Note that the data belongs to local.ch and may not be used.

View Demo

Some of you might remember my Chaotic Particles demo from last year. That demo was featuring 10'000 particles on a plain old 2d canvas. I decided to optimize that demo a bit in order to support 100'000 particles. I also fixed a little issue where numeric inaccuracy allowed particles to escape and made the influence map more fine grained.

Want to see the source? Just use view source and feel free to ask questions.

Next up: 4'000'000 Particles using WebGL.

View Demo

I think this is my favorite canvas demo I have created so far. It is an interactive drawing tool based on particle effects. It is the result of me trying to create some generative art using canvas. The techniques used are actually pretty similar to the ones shown in my frontendconf talk on particle systems. In short:

p.vx = p.vx*0.8 + getNoise(p.x, p.y, 0)*4+fuzzy(0.1);
p.vy = p.vy*0.8 + getNoise(p.x, p.y, 1)*4+fuzzy(0.1);

p.x += p.vx;
p.y += p.vy;

data[index] = tonemap(hdrdata[index] += r);
data[index+1] = tonemap(hdrdata[index+1] += g);
data[index+2] = tonemap(hdrdata[index+2] += b);

I'm planning to play with a few improvements especially in tone mapping and controls in the future but feel free to take a look at the source on github. I hope you enjoy it.

Video

Video from my talk at frontendconf on particles and html5 canvas, 100% live coding.

Video on ustream

Demo

View Demo

Sourcecode

on github

Note

This is an experiment. It's hacky and you should not use it as an example of good style - it's not.

For an upcoming canvas project I want to give the users the ability to upload the content of the canvas to an image sharing service. When looking for a suitable API I came across imgur.com the registration was trivial, and they support CORS and base64/dataurl uploads, perfect!

// trigger me onclick
function share(){
    try {
        var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];
    } catch(e) {
        var img = canvas.toDataURL().split(',')[1];
    }
    // open the popup in the click handler so it will not be blocked
    var w = window.open();
    w.document.write('Uploading...');
    // upload to imgur using jquery/CORS
    // https://developer.mozilla.org/En/HTTP_access_control
    $.ajax({
        url: 'http://api.imgur.com/2/upload.json',
        type: 'POST',
        data: {
            type: 'base64',
            // get your key here, quick and fast http://imgur.com/register/api_anon
            key: 'YOUR-API-KEY',
            name: 'neon.jpg',
            title: 'test title',
            caption: 'test caption',
            image: img
        },
        dataType: 'json'
    }).success(function(data) {
        w.location.href = data['upload']['links']['imgur_page'];
    }).error(function() {
        alert('Could not reach api.imgur.com. Sorry :(');
        w.close();
    });
}

A few days ago I released my first WebGL demo which was using some slightly advanced WebGL features. I was well aware of the fact that this would mean that my demo won't run on a lot of setups. The two features in question are texture access from vertex shaders and floating point textures. Texture access from vertex shaders is used for displacement mapping. I used floating point textures for high definition range rendering and to fake support for attaching textures to the depth attachment by storing the z value in the alpha channel of the color attachment. Because I was curious about what the reasons for errors would be in the real world I added google analytics events to my demo and this are the results.

The Platforms

Mac OS X and Chrome win. Except, this is the only combination where I had complete system freezes while developing. ;) Internet Explorer is not even on the list because it didn't even get to the WebGL initialization code for some reason, but it's only accounting for about ~1% of the unique page views anyway.

The Errors

This is pretty much the numbers that I expected. no-OES_texture_float is so low because MAX_VERTEX_TEXTURE_UNITS is checked before. no-vertext-texture-units very strongly correlates to the ANGLE layer used to emulate OpenGL ES on top of direct x which does not support accessing textures from vertex shaders which is needed to do displacement mapping. no-OES_texture_float is mostly firefox 4 on platforms other than windows.

Other statistics

Florian Boesch has written a similar more in depth round up about his WebGL demo which I recommend you to read. I think the really interesting thing will be the development of those numbers over time. I expect that at least no-OES_texture_float will die with the release of firefox 6.

I finally finished my first WebGL demo. Try it and let me know how you like it.

Sourcecode

You can find the source code on github if you want to get into some hacking.

Compatibility

To run the demo you'll need a browser that supports webgl and the OES_TEXTURE_FLOAT extension. At the moment this means Google Chrome 12 or Firefox Aurora (6.0a2). The extension is needed for HDR rendering.