nagoon97′s Weblog

you can actually do alot with javascript!

Ajax mosaic builder April 9, 2008

Filed under: ajax,javascript — nagoon97 @ 6:03 am
Tags: , , , ,

To demonsterate what you can do with the BinFileReader that I have posted at http://nagoon97.wordpress.com/2008/04/06/reading-binary-files-using-ajax/, I’ve written a mosaic builder.

Mosaic picture of Hillary Duff built with 23 images

The function will load multiple images as a color pallet using BinFileReader and then arranged them in such an order that those images would look like one of the images in the pallet.

And you can also click on one of the small images to rearrange the images to build that image.

The demo is available at http://www.heypage.com/nagoon97/BinFileReader/MosaicBuilder_demo.html

It may take a while to load all the image files because the hosting server is quote slow, please be patient.

You can see the image loading progress on the title bar on FireFox but I found that IE won’t even update the title bar before making an ajax request.

And I’d like to mention that this was written entirely in Javascript/VBScript, no server-side techologies what-so-ever. (VBScript for IE support)

To try this on your own server, you just need to download BinFileReader.js, MosaicBuilder.js, the HTML file and the image files.

And you can use the mosaic builder in the following manner.

var demo = MosaicBuilder(Prefix_used_for_the_filenames_of_the_images, number_of_the_image_files);
demo.buildMosaic(image_file_name);

Example:

var demo = new MosaicBuilder("60x45", 23);
demo.buildMosaic("60x45 (0).bmp");

Please note that since the function was written just to show what can done with BinFileReader, the code was not optimized.
If you wish to increase the speed, you may want to sort the pallet and then implement a better search algorithm when it looks for an image with the closest brightness.

And if you wish to run this script with your own set of images, please make sure all the images are
(1) 24 bits per pixel, uncompressed BMP files
(2) gray scaled
(3) small
 

About these ads
 

22 Responses to “Ajax mosaic builder”

  1. [...] Andy Na has posted about building mosaic pictures using binary ajax techniques. [...]

  2. [...] Andy Na has posted about building mosaic pictures using binary ajax techniques. [...]

  3. [...] image mosaics in a web application are something that can only be rendered on server side? Well a very interesting post gives an example for the generation of image mosaics with JavaScript and Ajax. The authors employs [...]

  4. amazing, thanks for sharing that

  5. [...] Mosaic Builder: con la librería javascript BinFileReader se pueden crear efectos de mosaico mediante Ajax: [...]

  6. Nina Moric Says:

    Hi…Man i love reading your blog, interesting posts ! it was a great Sunday .

  7. [...] image mosaics are something that can only be rendered on server side? Not true. Here’s a very interesting post that gives exemplifies the generation of image mosaics using AJAX. The authors employs a JavaScript [...]

  8. Hani Salem Says:

    Hi
    you have a nice work here friends

  9. [...] Ajax mosaic builder- The function will load multiple images as a color pallet using BinFileReader and then arranged [...]

  10. [...] Ajax mosaic builder- The function will load multiple images as a color pallet using BinFileReader and then arranged them in such an order that those images would look like one of the images in the pallet. [...]

  11. [...] Javascript Video Player- How to create a pure (non-flash) JavaScript video player. 演示 下载 9) Ajax mosaic builder- The function will load multiple images as a color pallet using BinFileReader and then arranged [...]

  12. [...] Ajax mosaic builder- The function will load multiple images as a color pallet using BinFileReader and then arranged [...]

  13. [...] the Demos here. 9) Ajax mosaic builder- [...]

  14. [...] the Demos here. 9) Ajax mosaic builder- [...]

  15. [...] Ajax mosaic builder- The function will load multiple images as a color pallet using BinFileReader and then arranged [...]

  16. [...] 9) Ajax mosaic builder- Bir resmi mozaikleştiren güzel bir uygulama [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 33 other followers