need ideas to only display some pixels and gray out the remaining pixels

Question

I'm looking for ideas ...brainstorming a new project for a client ....I have an image ...300px x 300px ...I need to display the image one random pixel at a time until the entire image is revealed.

Basically, at certain intervals, a pixel is revealed and remains revealed while other pixels are still blank. At each interval, another pixel at random is revealed and remains revealed to join the other revealed pixels. Eventually, all the pixels will be revealed.

Any suggestions on how to make that happen?

I could make numerous copies of the image and manually reveal one random pixel, but surely it can be done programatically :)

Oh, and it cannot be any form of flash.

I suspect you could do this purely in javascript with a technique similar to CSS sprites. — Frank Farmer, May 11 '11 at 00:06
You can use javascript - but in that way when java-script is turned off image becomes visible at once. You can use gd library on the server side but that's going to produce overhead for CPU and bandwidth. — Mikk, May 11 '11 at 00:29

score 3 · Accepted Answer · answered May 11 '11 at 00:51

EDIT: I realize I mis-interpreted what you needed to do, but I thought this was cool anyway and could be applied to your problem...

See working demo of the following →

I threw this together in jQuery. I made each pixel actually a 3x3 box instead because otherwise it would take way too long to process. Seems to work pretty well for something on this in client side, though I haven't tested IE yet.

<div id="w">
    <img id="i" src="yourImage.jpg" width="300" height="300" />
</div>

$('#w').css({
    width: $('#i').width(),
    height: $('#i').height()
});

var htmlFrag = '',
    id, ids = [],
    removePix = function () {
        if (ids.length) {
            var rand = Math.floor(Math.random()*ids.length);
            $('#'+ids[rand]).fadeOut(function(){
                $(this).remove();
            });
            ids = ids.slice(0, rand).concat(ids.slice(rand+1));
            setTimeout(removePix, 1);
        }
    };

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {
        id = 'pix'+j+'-'+i;
        ids.push(id);
        htmlFrag += '<div id="'+id+'" class="pix" ' +
                    'style="width:3px;height:3px;position:absolute;' +
                    'left:'+j+'px;top:'+i+'px;"></div>';
    }
}

$('#w').html($('#w').html() + htmlFrag);

removePix();

See working example →

Very impressive ...love it ...need to adapt it a bit but its definitely a sweet piece of code ...excellent job mVChr! — Mark, May 11 '11 at 03:43
Very nice indeed! Has just been reused here too: http://stackoverflow.com/questions/11039125/reveal-a-picture-piece-by-piece — Me.Name, Jun 14 '12 at 18:38

score 0 · Answer 2 · answered May 11 '11 at 00:08

Load the image file into an image resource (imagecreatefrompng, imagecreatefromgif, etc).
Decide what pixels to show, using rand() or however you want to choose them.
Loop over every pixel in the image, and if it's not one you chose to show, color it gray with imagesetpixel.

need ideas to only display some pixels and gray out the remaining pixels

2 Answers2

Linked