Image Mosaic in Flash AS3
Project Description
I was trying to decided what to do for a project in my computer graphics 2 class. I found I was really interested in creating mosaics of different images. Having a huge art background I really wanted to make something that looked pretty. I used Flash CS3 with AS3 to use code to make them. I created both a photo mosaic program and a designers mosaic program.
The photo mosaic took much longer because I had to come up with my own algorithm on how to decide the color. There were several people who had done something similar but they did not say how. I decided to do it myself. The photo mosaic program first reads in the images that are listed in an XML document. This was intended to connect to Flickr and read in several thousand of the pictures within the "interestingness" category. The problem with this was the Flickr would block my application after about 300 images. This was not nearly enough to make the photo mosaic. I then created a database of 7403 unique images that I added to an XML list of the names and loaded into the flash application. Each image is loaded into flash then resized to around 10 px by 10 px. Then each pixel color is read. The application then decided what the outstanding color is. This is done by sorting the pixels into a preset series of ranges. Which ever range has the highest content is the outstanding color. The program then checks to make sure the image has at least 70% that range. If it does not it throws out the image. Otherwise it saves it in an array that has images of the same range. Once all the images are loaded the user can upload an image. Once the image is upload the program then downsizes the images to 65 pixels width and the corresponding height. Each pixel is read in and the range that it is within is determined. An image is then taken from the database of images and set to replace that pixel. The entire mosaic is then places on the screen.
The problem with this program is the image database. It may have 7403 images but only around 500 are 70% a range of color. This was after the ranges were made quite large. There are currently 32 sets of ranges. There should be quite a bit more but this would mean there had to be more images to separate. Many of the image end up doubling in the mosaic as it is. To solve this a very large database of images that are mostly a single color is needed. I did not have the time to create this and it would be a vast improvement.
The designers mosaic used Delaney Triangulation. The program first lets the user upload an image. It then created 1400 points with in that image. It takes the corners and half way between the corners and then all the rest are random but not doubled. The chance of a double is checked and then if that point has been created it is reset and checked until it is a unique point. When the Delaney Triangulation algorithm goes to draw all of the triangles the color of all the points is averaged together then drawn. This used the indiemaps.com/blog Delaney library. I would like to expand on this mosaic creator to also use Voronoi regions.
Images
Downloads
These are much too intensive to run threw the internet. Download, compile, and run on your own.
Need Flash CS3 or greater to do so.
These may even crash on lesser computers. The photo mosaic program takes about 10 minutes to load them
images and another 10 minutes to mosaic the one the user uploads. Please, be patient.
Any image you wish to mosaic must be in the same folder as the fla file.
There are many elements that are hard coded within these programs. I would love to make them more
dynamic in the future. Use horizontal images. Vertical
ones tend to get cropped. I do not know what is causing this error but it is one of the many things I
wish to change in the future.