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.

Answer 1

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 3×3 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 →