Messing Around With Images

The Side Dish

If you know me at all, you know that I always have a side project. I mean, I love the main course as it is full of challenges, but sometimes I need to do something else. I need a Gedankenvacation.

Dude, you may ask, why do your vacations include hours of code in front of a small screen? Why not go out, get some fresh air and enjoy the sun? That’s actually a good question. Maybe it’s because I love to code. Maybe I’m just a bit lazy. Maybe I’m a vampire. Who knows?

All I know is that when I work too hard on one problem, I can tap out of resources pretty quickly and then I turn into a Facebook Zombie. Learning a new skill or working on a different problem usually helps me get out of the rut, and allows me to go on for much longer stretches.

My side projects usually have some sort of visual or artistic nature. I’m hardly any good at it, but I love doing it, and I don’t mind failing. One year I have written detective stories in a blog format (think of how a blog of a private investigator would look like). One year I’ve founded (and terminated) an online T-shirt store. One year I have worked on a massive multi-player online game (that we abandoned unfinished). And one year I helped organize reality-hacking events, where I got to meet interesting people and edit lots of videos. This year I want to work on a combination of visualization and social themes, simply because it’s the complete opposite of what I’m working on during my “day job”.

Messing Around With Images

It’s been almost a decade since I last did anything related to image processing. I was in the second year of my computer science degree, and I was looking for any practical course I could find. I never felt engaged by highly abstract mathematical courses such as Computational Complexity Theory. Call me a heretic, but in my mind Turing machines aren’t very practical mental models for computers, and I don’t understand why they are still being taught.

Anyway, digital image processing was exceptionally suited for my practical needs. First, you could actually see the results of your work. Second, it included just enough math so it wasn’t completely technical and boring (unlike, unfortunately, most of the programming tasks in Data Structures) and just enough code as to be useful.  Third, did I mention you could actually see results with your own eyes?

It’s A Boy!

This weekend I’ve spent some time messing with HTML5’s canvas and images. I have created a small jQuery plugin that creates a nice mosaic effect on an image. You can see a few examples here:

Original Image

5x pixel size

10x pixel size

15x pixel size

Note that all the processing is done by the browser, no server side code at all. If you are using Internet Explorer, chances are that your browser doesn’t support this feature, so I don’t know if it displays correctly. I hear IE9 is out and is very good. You can upgrade here.

As I mentioned, this is a very simple example of how images can be manipulated quickly and in the browser. With devices getting stronger, we may be able to push more computation to the clients (and find a better balance of server-client load).

In this demo script I calculate the average color of each section of the image, and then fill a rectangle with this color on a canvas. The JS can be downloaded from here. This is practically the first script I have written from scratch, so it is probably full of newby mistakes. Please, let me know. I want to get better.

I have several thoughts about what I want to use it for, but there are still some features I need to add first. Stay tuned.

  • http://y3xz.com Yuval Adam

    Hmm, doesn’t work on FF4?

  • http://omergertel.com Omer Gertel

    Doh! Fixed (apparently when you try and draw beyond the borders of the canvas, Firefox throws an exception, and chrome just does its best).

    Thanks for notifying me.

  • Pingback: One More Time, From The Top | Re-gur-gi-tate (n) | Omer Gertel()

  • http://www.clearfirestudios.com Jon Thomas

    Hey man, cool script. Is there any way I can use this to get the average color of a certain part of the image? For instance, I’d like to grab the average color of the image where a logo might be on top, and then use javascript to add a class of light or dark to the logo so I can put a light version or a dark version of the logo over top the image. Make sense?