Using bingo blower.js in an experiment

Controlling for the refresh rate

As already said in the README, the force of the wind depends on the screen refresh rate. The smaller the refresh rate, the slower the balls will appear to move.

But you can control for that! To get your subjects' refresh rate, use the following JavaScript snippet:

<script>
    let previousTimestamp, divFPS;

    const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    let frame = 0;
    const rafLoop = timestamp => {
        frame++;
        let interval = timestamp - previousTimestamp;
        let fps = Math.round(1000 / interval);
        // insert code here to record fps
        previousTimestamp = timestamp;
        if (frame < 200) {
            raf(rafLoop);
        }
    };

    // This is run first to set the previousTimestamp variable with an initial value, and then call the rafLoop function.
    raf(timestamp => {
        previousTimestamp = timestamp;
        raf(rafLoop);
    });
</script>

Controlling for the OS and browser

bingo-blower.js, and the other libraries it depends on, might break on old browsers. You can also control for that.

To get your subjects' OS and browser, you can use UAParser.js, for example like this:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/ua-parser.min.js"></script>
<script>
    let parser = new UAParser();
    let result = parser.getResult();
    // insert code here to record what you need, for example: 
    // result.browser.name, result.browser.version, result.os.name, result.os.version, result.device.type
</script>

Encoding the ball number

If you do blower.addBalls([1, 2, 3]), subjects can in principle inspect the page and see the number of balls. If you want to create ambiguity, this is far from ideal.

For this reason, addBalls() accepts a base64-encoded list. For example, [1,2,3] encoded into base64 becomes WzEsMiwzXQ==, which is less transparent.

Hiding the bingo-blower until the balls start moving

When balls are first added to the bingo-blower, they progressively gain speed as they are picked up by the wind at the bottom of the bingo-blower. Thus, during the first few seconds, balls move slower and subjects could more easily count them.

If you're worried about that, add the blower CSS class to your HTML element, as such:

<canvas class="blower" id="world"></canvas>

The bingo-blower will appear blurry for a few seconds after the page is loaded.