Creating a mosaic effect in php & javascript

I am trying to create a mosaic script type in Javascript and PHP that composes a large image with many different images made from small square tiles. The idea was to "fake" the effect by getting a background image and laying tiles on top of it and making them opaque to 50% or so. This works pretty well, but it definitely doesn't look as good as I want.

My question is: are there any recommendations regarding alternatives to this method? I know that there are certain ways to do this in Flash, for example, the mosaic of Mario Lemieux: http://www.mariomosaic.com/mosaic/

But I would like to avoid a flash if possible.


edit: add live example

So, I have not touched the JS level yet, it was all on the server side. There is no preloader or anything really in terms of its more convenient use, which will come soon. But here is what I still have:

http://www.mtimofiiv.net/mosaic_example/

Small tiny fragments of the image are created from images uploaded by the user, and they are launched through the class that I created to create them. I used GD2 to make them in shades of gray so that they better absorb the background color, and I "pixelated" the background image in Photoshop.

If someone wants to see any part of the code, let me know and I will add it to this post. Also, when this project is completed, I intend to make it available to Github completely for those who want to do the same.

+5
1

, , HTML 733KB . , - , canvas - "ajax" . . , HTML... , script , . ...

+1

All Articles