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

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.

I'm doing my first steps into webgl land. It's definitely a love hate relationship, and I still have a lot to learn and improve. :)

I might post the actual demo at a later stage, right now it's a complete mess.

Play it now

Space Break

Space Break is a html5 acrade 'ball and paddle' game written in coffee-script. It features levels full of explosives, extra balls and even nukes. I hope you will enjoy it.

History

Space Break started out as coffee-break - a little project I did to get into coffee script. Because it turned out to be a lot of fun I decided to turn it into a complete game.

Technology

Space Break uses the canvas tag for rendering. The sound effects were created using csound and played using the audio tag. The graphics were made using the gimp and blender. Rake is used for controlling the asset pipeline. All the assets of the game (music, sounds, graphics) are self made - programmer art.

Browsers

Firefox 4 (3.6 kind of works), Chrome 9 and Safari (no ogg - no audio) work. Opera is crashy. Mobile safari on the iPad also works but the frame rate is low. Could be fixed with a bit of optimization.

Source and License

The code and assets are of course on github.

The Sourcecode (break.coffee, Rakefile) is licensed under the GPL V3.

The assets are licensed as Creative Commons BY NC SA

PLEASE LET ME KNOW IF YOU DO SOMETHING COOL WITH IT.

If the licensing doesn't work for you, please let me know.

Feedback

Feedback, both positive and negative is of course appreciated. Just leave me a comment, tweet or send me a email.

I created this demo more or less by accident when prototyping some particle mechanics for a game. It is based on a particle system, and an acceleration map but more on that later. It reminds me quite a bit of simulations of galaxy formation or a lava lamp, it's really nice to watch.

Demo

Click the image to open the demo. In the demo, set the particles in motion by dragging with your mouse.

Mobile devices

This demo also works on Android including fullscreen (tested on a nexus one with 2.2), iPhone and iPad! Give it a try ;)

How it works

Each particle has a position and a velocity stored in a typed Float32Array (yes, they work on iOS). In addition to that there is an acceleration 'map' in the background. When you drag over the particle system, you initialize the acceleration map which sets the whole system in motion.

accelerationMap[particle.position] += particle.velocity*someFactor
particle.velocity += accelerationMap[particle.position];
particle.position += particle.velocity;
...

Finally after a long time I can present you a new demo. It is inspired by the wave propagation formula mr.doob demoed a while ago. I was quite amazed by how simple it was and so I decided to build myself a little pond.

Demo

Click the screenshot to start the demo. Move your mouse over the pool to disturb the water.

How it works

I think the really interesting part here is the wave propagation formula:

waveHeight = (buffer0[i-1] + buffer0[i+1] + buffer0[i+width] + buffer0[i-width])/2-buffer1[i];
buffer1[i] = waveHeight;
aux = buffer0;
buffer0 = buffer1;
buffer1 = aux;

The rest is pretty simple, and made up on the spot. The refraction is done by offsetting the texture coordinates by the height difference between the current point and it's neighbors. The lightning and caustics are faked similarly based on the height differences and the height of the current point.

In short it's all fake.

Performance

Chrome is fast, firefox is slow, at least thats the way it usually is. To my pleasant surprise the jaeger monkey builds of firefox seem to finally catch up. Another interesting thing is that safari seems to be the fastest (for this demo).

Credits

The photo was shot by Travholt licensed CC-BY-SA. As mentioned in the intro, I got the wave propagation function from mr.doob.

Other Experiments

Be sure to check out my other experiments. If you like what you saw you should subscribe to my blog or follow me on twitter.