Databases
StackOverflow2013
Postsdbo
POMaking a "mosaic" effect in php & javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking a "mosaic" effect in php & javascript
    text
    copied!<p>I'm trying to create a mosaic type script in Javascript and PHP, which makes up a big image with many different images made from small square tiles. The idea was to "fake" the effect by having a background image and laying over the tiles on top of it, and making their opacity 50% or so. This works decently enough, but it definitely doesn't look as good as I want.</p> <p>My question is, does anyone have any recommendations on alternatives to this method? I know there are definitely ways to do this in Flash, such as the Mario Lemieux mosaic: <a href="http://www.mariomosaic.com/mosaic/" rel="nofollow">http://www.mariomosaic.com/mosaic/</a></p> <p>But I would like to avoid flash if possible.</p> <hr> <p><strong>edit: added live example</strong></p> <p>So I haven't touched the JS layer yet, this has all been server-side stuff. There's no pre-loader or anything really in terms of making it more usable, that will come soon. But here's what I've got so far:</p> <p><a href="http://www.mtimofiiv.net/mosaic_example/" rel="nofollow">http://www.mtimofiiv.net/mosaic_example/</a></p> <p>The little tiny image tiles are created from images uploaded by a user, and they're run through a class I've built to generate them. I used GD2 to make them grayscale so they will absorb the color of the background image better, and I "pixelated" the background image in Photoshop.</p> <p>If anyone wants to see any part of the code let me know and I'll add it to this post. Also when this project's done I intend to make it available on Github in its entirety for whoever wants to do the same.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload