Question

Maybe I am asking the wrong question completely. I have read quite a bit and seen quite a bit of HTML 5 capabilities; however, I have not yet had time to sit down and really start utilizing any of it yet :(, but hope to soon.

Anyway, I was curious if I could do the following with HTML5 and how to begin to implement it. Or, if this does not work, then how can I make it work?

I have a popcorn image (1 piece of popped popcorn that is).

I wanted to create a canvas and on a button click, start a chain of this image being randomly “popped” onto the canvas, slowly at first then gaining speed until such time there should be a stopping point.

Anyone who has popped popcorn can understand what I am looking to do here.

Is this possible to do easily?

Answer 1

I’ve popped popcorn and, yep, you can do this. Load the popcorn image by creating an Image object and setting its src attribute. Use the image’s onload property to start the animation. Given the animation’s duration k, use a sine curve, sin(x/(k/π)), to calculate the number of kernels to show per frame.

Here’s one way of doing it, demo here: http://jsfiddle.net/uyk63/8/

var IMAGE_URL = 'http://i.istockimg.com/file_thumbview_approve/959519/2/stock-photo-959519-isolated-single-popcorn.jpg';
var DURATION = 10 * 1000, FRAMES = 30, KERNELS = 10;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var frame = 0,
    start = new Date().getTime(),
    image = new Image;
image.src = IMAGE_URL;
image.onload = function() {

    function pop() {
        ctx.drawImage(image,
            Math.floor(Math.random() * canvas.width),
            Math.floor(Math.random() * canvas.height),
            100, 50);
    }

    // A little overcomplicated. You could probably do this in a single loop.
    // (It's late and I'm tired, though. Sorry.)
    function animate() {
        var i, delay,
            count = Math.floor(Math.sin(frame / (FRAMES / Math.PI)) * KERNELS);  
        for (i = 0; i < count; i++) {
            delay = (DURATION / FRAMES) / count * i;
            setTimeout(pop, delay);
        }
        if (++frame < FRAMES) {
            setTimeout(animate, DURATION / FRAMES);
        }
    }
    animate();

};