29a.ch experiments by Jonas Wagner


 View all my experiments

Recent Articles

Introducing smartcrop.js

Written by

Image cropping is a common task in many web applications. Usually just cutting out the center of the image works out ok. It's often a compromise and sometimes it fails miserably.

Evelyn by AehoHikaruki

Can we do better than that? I wanted to try.

Smartcrop.js is the result of my experiments with content aware image cropping. It uses fairly simple image processing and a few rules to attempt to create better crops of images.

This library is still in it's infancy but the early results look promising. So true to the open source mantra of release early, release often, I'm releasing version 0.0.0 of smartcrop.js.

Source Code: github.com/jwagner/smartcrop.js

Examples: test suite with over 100 images and test bed to test your own images.

Command line interface: github.com/jwagner/smartcrop-cli


Wild WebGL Raymarching

Written by

It's been way too long since I've released a demo. So the time was ripe to have some fun again. This time I looked into raymarching distance fields. I've found that I got some wild results by limiting the amount of samples taken along the rays.


View the demo

Behind the scenes

If you are interested in the details, view the source. If left it unminified for you. The interesting stuff is mainly in the fragment shader.

Essentially the scene is just an infinite number of spheres arranged in a grid. If it is properly sampled it looks pretty boring:


Yes, I do love functions gone wild and glitchy. :)


New Website

Written by

Updating this website has been long overdue. It has been running on zine, a blog system that's no longer maintained since 2009, for way too long. After looking for a replacement and not finding anything I liked I decided that it would be fun to write my own. ;)

I tried hard not to break any existing content. If something is not working anymore, let me know.

A few details about the system

My new website is maintained by a static website generator and server using nginx. This has the benefit of speed and trivial deployments via rsync. Comments are now handled with disqus.

The system is fairly simple, it takes index.html and meta.json files from content/ and indexes them into a bunch of json files in data/. The html content is then processed using Cheerio. This involves fixing relative links and extracting meta data. After this step the pages are rendered using a few Jade templates. All of this is held together by a small set of Grunt tasks.

Goodbye old website


Fixing bash autocomplete on ubuntu 13.04

Written by

The updated git package in ubuntu 13.04 changed the way bash completion works for git. Which resulted in the following error:

completion: function `_git' not found.

This is because git completion is now using autoloading which does not work with aliases. The solution is to simply manually source the bash-completion function:

# from my bashrc
alias g='git'
source /usr/share/bash-completion/completions/git
complete -o default -o nospace -F _git g


xbox360 wireless controller on Ubuntu/Steam with xboxdrv

Written by

The driver for the xbox controller built into the kernel (xpad) seems to be quite broken. Luckily there is an alternative. Here is how to set it up under Ubuntu, other Linux distributions might differ.

Blacklist xpad kernel driver

The first step is to blacklist the xpad kernel driver to prevent it from being loaded.

# as root
echo "blacklist xpad" > /etc/modprobe.d/blacklist.conf
#unload module if already loaded
rmmod xpad

Install xboxdrv

# as root
apt-get install xboxdrv

Start xboxdrv

I start xboxdrv manually (as root) before I play. I tried to automate it but it wasn't very reliable.

# check it is working
# Should output something like
# Your Xbox/Xbox360 controller should now be available as:
# /dev/input/js0

For actually playing I tend to start it with --silent.

This solves all the xbox gamepad issues for me. Steam, Shank, Overgrowth all work fine with xboxdrv.


WebGL Fluid Simulation

Written by

A little while ago I released a canvas based fluid simulation demo. Now I have the WebGL version ready. It's doing roughly the same thing as the canvas one. It's nicely illustrating how much faster the GPU accelerated WebGL version is compared to the canvas one. As an added benefit, it does not explode anymore because the boundary conditions are now properly enforced.


View WebGL fluid simulation demo

Code Overview

Most of the interesting code for this demo lives in shaders. Here is an overview of the data flowing between the shaders.

fluid simulation data flow

The flow is defined inside the main.js file. All the other logic is in the shader files.

If you are wondering why I left out diffusion in this demo. The way the algorithm works seems to introduce a fair amount of diffusion already so I figured I'd just drop that term. :)



WebGL Voxel Worlds

Written by

I have worked on this demo for quite a while. The initial plan was to do a voxel based multiplayer shooter. It didn't turn out to be all that much fun (the movement is clunky and blowing stuff up doesn't provide too much lasting entertainment). So rather than just leaving it all to rot in a dark corner on my disk I decided to just release my prototype as it is.


Play with the WebGL Voxel Worlds Demo



I gave a 30 minute talk on some of the things in this demo at the super awesome ongamestart conference in Poland.

Also at ~12:00 you can see my notebook falling off the lectern. ;)

Source Code

I pushed the source code of this demo to github.

It is really hacky prototype code. Feel free to learn from it (and my mistakes), don't use it in production. If you have questions, feel free to ask. :)


 View all my articles