Photographic mosaics

I haven’t posted in a long while, mostly because of school. I managed some free time the past few days and wrote a photographic mosaic generator in Python. Why not call it by its more popular name? Because it is trademarked and patented. But I don’t think I’ll get into any trouble by posting this, as this is merely for learning purposes, right?

This is a relatively simple solution. I didn’t use any complex algorithms like edge-detection, dithering or whatever (maybe I could add those later), just plain old RGB matching. I’ll try to explain the process as best and as simply as I can.

Creating the image pool

The first step is to create your image pool.  The image pool is a directory of all the tiles that will be used in your mosaic, and every tile must be of the same size. The more tiles you have, the better results you get.

I used Irfanview to resize, crop, rotate and rename 1,983 photos for my image pool, plus a Python script I wrote to separate the portrait oriented photos from the landscape oriented ones.

Next, I wrote another Python script to create an SQLite database which stores all the data I need to create a photomosaic, instead of calculating each value every time I want to create a mosaic. It holds a reference to an image file, and 9 RGB values.

To calculate the RGB values of a tile, I didn’t just get the average color of the entire tile, instead I divided the tile into a 3×3 grid, then calculated the average RGB value of each cell in the grid (resulting in 9 values). I think this method is called “sub-sampling”. This helps in making more accurate matches. (Pardon the crappy images, I’m making these in Paint.NET)

Subdivided tile –> (Pseudo) Average colors

Generating the mosaic

Now that I have my image pool ready, I can start generating the photographic mosaic itself. I won’t go into the too much detail but basically I subdivide the source image with the size of my tiles. I then iterate over the subdivisions and further subdivide each cell into a 3×3 sub-grid to match against the tiles. I calculate and compare the RGB differences between every tile in my image pool, and get the best result (least difference). I then place the best tile into its proper position in the mosaic.

Subdivided cell –> Average colors of cell   =   Average colors of tile –> Best matching tile

I added an extra method that starts matching from the middle of the source image, going outward. This generates a mosaic where the best matches are in the center, and leftover tiles go to the edges, resulting in a better looking mosaic, especially for portraits.

Top-down matching vs. Inside-out matching

In the first one, by the time I got to the center, I ran out of good tiles to use. For the second one, the best tiles are used in the center.

Results

Try it out

This is just a bunch of Python scripts, so there is no executable to run.

Just type

>python photomosaic.py path\to\source.jpg path\to\output.jpg path\to\imagepool\dir [-options]

on the command line. Type --help to see possible options.

Of course, preparing the image pool is the most difficult part of creating a mosaic. You can use the create_image_pool.py script to do that for you. Just make sure all your tiles are of the same size, and it will automatically create an SQLite file inside your pool directory which the photomosaic generator can use.

>python create_image_pool.py path\to\imagepool\dir

If you don’t have 2,000 images lying around, you can go to this page. At the bottom of his post he has a link to .zip of photos of chemical elements. It’s already resized for you.

Right now, generating a 1,600 tiles mosaic from ~2,000 tiles takes about ~5 minutes on my slow-ish machine. My next goal would have to be speed and better matching algorithms.

Download photomosaic.zip

Python + Tetris

I’ve always wanted to try out Python, and I’ve been meaning to make a Tetris clone for some time now ( my last attempt in Flash failed ). Since I didn’t have anything to do for the remainder of the summer, I decided to do both.

I wanted to post about this last week, during Tetris’ 25th anniversary, but it wasn’t done. This is my first Python app, so the code is filthy. I am quite proud of it though.

Unfortunately, I don’t know how to make an executable from a Python program, and the guys at the #python channel are less than helpful, so I’ll just put up a zip of all the files.

Python is fun and easy to learn, but I think I’ll stick with Flash. I will also be studying Django.

You need to have Python and Pygame installed to run it though, until I figure out how to make an executable.

Download the zip. Extract and run Main.py in ‘src/’ folder using Python.

Color Mixer Flex App Updated

I’ve updated my Color Mixer application. Right now it is as good as done. It’s not the best looking, but all the functionality is working fine. If there are any suggestions on how to improve it, I’d be glad to hear them.

I am still working on the AIR version. It’s taking a while figuring out how to skin components properly (the gradient sliders clearly show this).  And it seems that taking a screenshot of the desktop is not possible on AIR, which is a shame because I was really looking forward for the feature to take any color on screen. Unless I find a workaround for this, I’m going to have to leave that feature out.

I hope someone finds this useful, as I know I do. Here it is.

On different note, this post was posted from Windows Live Writer. I’m liking it very much. I hope everything displays fine.

Color Mixing Flex Application

I’ve always found the color mixer found in the very nice Color Schemer Studio to be very useful. I’ve only used the trial, and it’s been hard living without it. So, I decided to create my own app. I’ve only made the color mixing part of the program, as it is the only feature I ever use, and anything more would only complicate things too much (this is my first Flex app).

Right now, you can choose a color from the color picker, enter a Hex value, RGB values, and HSV values. Changing one will affect the others, real-time. There’s also a button to copy the Hex value into your clipboard, for convenience.

It’s still not finished though. I’m planning on adding an eyedrop tool to pick colors from the desktop. I still need to figure out how to do that, probably only possible through AIR. And I’m having trouble customizing the sliders to have a gradient background, like in the Color Schemer Studio program, to better visualize what color you are going to get when moving the sliders. I also plan on publishing this as AIR app, to make it even more convenient. And once I get the hang of Flex, I’ll make it pretty, like all the other Flex apps out there.

Enough babbling, here is the application itself. If you have any suggestions or discover any bugs, please comment. Note though, that this is very unfinished. Right now all it has is core functionality. I haven’t even thought about the interface yet. Need to read up on customizing components first.

UPDATE: I’ve updated the app. It’s pretty much done at this point, as I am satisfied with it. But if anyone has any suggestions, I am still open. Links updated.

Basic (twitchy) Motion Tracking

I’ve put on hold reading “Making Things Move”, as the remaining chapters were too much for my brain to handle. I decided to try out some cool webcam experiments. Augmented Reality is obviously out of my reach right now (but definitely in my sights), I decided to try out motion tracking.

It is very twitchy and erratic, and it’s not very accurate neither, but it works.

Most of the concepts are explained in detail here and there.

My next step would be to track something of a specific color (a marker). Shouldn’t be too hard – I hope.

CLICK TO OPEN MOVIE. Press SPACE to toggle between display modes.

Metaballs update

Still delving into metaballs. I implemented the suggestions in this page for optimizing, and the results are good. I could even animate it – just barely though, at ~15 FPS on my browser.  Again, most of this is just copy & paste from the source provided in the tutorial.

Metaballs – move your mouse around.  Click to change the target ball.

Still looking for a more elegant solution for Flash. This is done on a very small stage size, with only 4 balls. I want to do a full screen version, with at least 10 balls moving around.

Simple Metaballs

I stumbled upon Metaballs yesterday, and decided it would be cool to try it out. I’ve seen some very nice examples done in Flash, but no luck finding their sources.

After Googling around, I found this tutorial on Metaballs and computer graphics.

I ported the code into AS3, but the result is not very impressive. It is very slow and processor heavy. If you click on the stage, the last Metaball added will be moved, and as you can see, it takes a bit of time to redraw them. I’m not even thinking about animating this.

I’m still looking for a more elegant solution for Flash, hopefully one that uses the Vector-based drawing API of Flash, and not BitmapData.

UPDATE: I have an updated version here. Also, I linked the image above to the updated one. For comparison, the old one is here.