Eye blink timer

Question

I'm creating this website with few mascots and I'll implement a "eye blink timer" where I'll make every mascot blink.

My question here is: how do i implement (and how long it is?) the delay between blinks and the blink itself, on any language (i'll probably use Javascript, but it doesn't matter right now).

Is there any resource about a "blink algorithm" or something like that?

Edit: I know how to use setTimeout and setInterval, my question here is more about the algorithm than the implementation itself.

Final result:

var blink = {
    delay: function() {
        return Math.random() * 8000 + 2000;
    },
    duration: function() {
        return 100 + Math.floor(Math.random() * 100);
    },
    blinkAgain: function() {
        return (Math.random() < .2);
    },
    betweenBliks: function() {
        return blink.duration() / 2;
    }
};

$.fn.blink = function(continueBlinking) {
    var $element = $(this);

    // Star the blink
    $element.addClass('blink');

    // Finish the blink
    setTimeout(function() {
        $element.removeClass('blink');

        // Change of blinking again
        if (blink.blinkAgain()) {
            setTimeout(function() {
                $element.blink(false);
            }, blink.betweenBliks());
        }
    }, blink.duration());

    // Continue blinking?
    if (continueBlinking) {
        setTimeout(function() {
            $element.blink(true);
        }, blink.delay());
    }
};

[setInterval](https://developer.mozilla.org/en-US/docs/DOM/window.setInterval) — Blazemonger, Sep 04 '12 at 16:45
Possible Duplicate of : http://stackoverflow.com/questions/12115247/how-do-you-make-an-image-blink/12115326#12115326 — Dhruvenkumar Shah, Sep 04 '12 at 16:46
I know how to use setTimeout and setInterval, my question here is more about the algorithm than the implementation itself. — Thiago Belem, Sep 04 '12 at 16:47
@TiuTalk what have you tried? what does you markup looklike? — Daniel A. White, Sep 04 '12 at 16:47
We have no idea what algorithm you have in mind. Please provide more details in your question if you want a more detailed answer. — Blazemonger, Sep 04 '12 at 16:50
This reminds me too much of the `` tag, and gives me shivers. — adeneo, Sep 04 '12 at 16:52

score 5 · Accepted Answer · answered Sep 04 '12 at 16:51

The rate of blinking varies, but on average the eye blinks once every five seconds. That's
equal to 17,000 times each day or 6.25 million times a year.

Source

Assuming you have a function blink that does the "blinking", you might simply want to do something like this:

setInterval(blink, 5000); // 5000ms i.e. 5s

If you want a little more "Randomness" in your blinking, you could do the following:

function blink() {
    [...] // The blinking
    setTimeout(blink, 5000 + ((Math.random() - 0.5) * 2000));
}

Which will, if my calculations are correct, call the blink function in a random manner between 4000 and 6000ms, given that Math.random() returns a value between 0.0 and 1.0, therefore "Math.random() - 0.5" will be between -0.5 and 0.5. That times 2000 will result in a value between -1000 and 1000.

Nice, I like that there's some context provided with the code. I would give you the tick. — Hacknightly, Sep 04 '12 at 16:52

score 2 · Answer 2 · answered Sep 04 '12 at 16:56

We tend to "humanise" things like mascots, so you can use the blink rate of humans to make the mascots seem natural.

Humans normally blink by average 10 times a minute, with 2-10 seconds between blinks. [source]

Make the delay between blinks random between 2 and 10 seconds, and that will end up being 10 times a minute by average:

function blink() {
  // do the blinking stuff
  window.setTimeout(blink, Math.random() * 8000 + 2000);
}

The human brain is very good at picking up patterns, so if you made the mascots blink with a set interval, the visitors would quite soon pick up on that and think that the blinking looked artificial.

Check what that looks like. It may be so that actual normal blinking intervals doesn't look normal after all, and you may have to increase the intervals, especially if you are showing several mascots beside each other.

score 0 · Answer 3 · answered Sep 04 '12 at 16:48

Your blink function will probably move some stuff around in the DOM or manipulate an image like so

var blink = function () {

   // do some work!
}

Then you may want to use setInterval() to handle the blinking interval.

setInterval(blink, 3000)

Note that setInterval is timed in milliseconds so 3000 is 'every 3 seconds'. Hopefully this helps. You could have a dynamic number if you're trying to not have it right on every three seconds. For instance, you could have a function slowDown() and speedUp() called randomly that sets the actual setTimeout() interval.

In reference to an algorithm, here's an excerpt that describes some of the diffuculty.

The process of human's blink expressing deep information of mind has uncertainties of fuzziness and randomness. A cloud theory-based method is proposed to realize uncertainty control of virtual human's blink. Eyes' maximal open angle cloud and blink interval cloud are designed. A cloud-based blink control algorithm is proposed. Results of comparing it with certainty method show that the proposed algorithm can generate control curve of blink with random eyes' maximal open angles and blink intervals, to realize uncertainty control of blink.

As stated in my last edit: I know how to use setTimeout and setInterval, my question here is more about the algorithm than the implementation itself. — Thiago Belem, Sep 04 '12 at 16:48

Eye blink timer

3 Answers3