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
I'm not dead. I'm working on a 2D wingsuit game based on hand drawn levels. It's going to be cool. :) What do you think?
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. :)
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
All of this is held together by a small set of
Goodbye old website
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
complete -o default -o nospace -F _git g
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
# as root
apt-get install 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:
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.
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
Most of the interesting code for this demo lives in shaders. Here is an overview of the data flowing between the shaders.
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. :)
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. ;)
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