Collage Creator

6 Comments 22 November 2009

This idea originated from playing around with the Flickr API whilst creating the Colorwall with images example I posted a couple of weeks ago. So what is it? Simply an image, made up of thousands of other images, dynamically created using Flickr thumbnails. To be honest someone has probably done this before, if not with Flickr then definitely with another source of images, but that didn’t stop me as I had a lot of fun putting this little experiment together.

You can check out the application here. It takes a bit of time to get a good representation of your image, so the best bet is to set it up then go off and do something else for a while (or just watch it, I find it quite interesting to see the image develop!). After a bit of time you should get a pretty good looking image like the one below.

If you look a bit closer you’ll see all the pixels of the monkey are made up of random images.

Creating this app was actually a lot simpler than I was expecting. To get the average color of the image I simply grab each RGB value of every pixel, then divide by the amount of pixels. For this I used some code written by Justin Windle. To view Justin’s code and read about how it works follow this link to his blog post. Once I had the color values I just compare them to each pixel and give it a score of how similar it is to the original pixel, the longer you leave it the more likely it is to find a perfect match.

I actually started to build save functionality so you could save your collage and there was going to be a gallery (I even bought a domain for it!). However, after I had written some code for saving, the next time I came back to the application several of the images where no longer available (I guess the owners had taken them down from Flickr) so I canned that idea, for now anyway, I may come back to it one day.

I really enjoyed building this one and have added a ‘create your own’ section so you can upload your own images and have them turned into a collage. If you create something cool take a screenshot of it, send me it and I’ll put the best ones on the site.

Posted in ActionScript

6 Responses to Collage Creator

  1. 23 November 2009

    great work…
    how does memory versus time look?
    does it eventually go “right, this is good enough, let’s stop” ?

  2. 23 November 2009

    Cheers mate. Basically as long as there are images available with the selected search tag it will just keep going. Memory usage shouldn’t increase as the initial image is made up of BitmapData, and all that happens when a successfully match is made is the BitmapData is changed to that of the loaded Flickr thumbnail.

    If you right click on the app and select ‘Show Profiler’ from the menu, a graph will appear showing exactly whats happening with memory usage etc (one thing to note though, if you have other Flash apps open in the same browser their memory usage will also be displayed)

    You can grab that profiler from here – very useful tool, I use it on everything I build!

  3. 23 November 2009

    Wow, pretty impressive. We’re all going to expect something even more impressive from you now!

  4. 24 February 2010

    awesome! really impressive. would you tell me more about the programming flow? my understanding is upload a photo first, analyze the uploaded photo’s each pixel’s color value, but then how do you compare the color from flickr’s photo? need to download all photos from flickr to memory first? thanks…really want to know.

  5. 28 February 2010

    Hey Kaho, the programming flow goes like this:

    1. upload a photo and create a Bitmap square for each pixel, setting the Bitmap’s bitmapData to the color of the pixel
    2. load a thumbnail from flickr (just one) and get the average color value using the same method as Justin Windle talks about here
    3. compare that color value with each pixels original color value and give it a score on how close the match is (to the original color). If the score is higher than the score of the current image, replace the Bitmaps bitmapData with the bitmapData of the loaded thumb
    4. dispose the loaded thumb
    5. repeat steps 2, 3 and 4 until all images from Flickr with the specified tag have been loaded and compared

    As I’m only replacing existing bitmapData, and then disposing the loaded thumb, the memory usage should never expand so you can leave it for an hour and it won’t (/shouldn’t) crash your browser.

    I hope that helps explain how it works and thanks for the positive comment.

  6. HTML5 Collage Creator Prototype | Flash Monkey

    [...] really nice little app that will dynamically take any image and create a collage with it, much like my original flash version I made a couple of years [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>