bingo-blower.js demo

Return Home

bingo-blower.js is available on GitHub. See the README for installation and documentation.

The ball drawn is:

Balls

Red
MediumBlue
Gold
LimeGreen
Sienna

Blower options

The values shown on load are the default values.

Width and height of the blower, which is a square, in pixels. Everything else scales with it
Thickness of the walls of the blower, as a fraction of the blower's width
Radius of the balls, as a fraction of the blower's width
Radius of the numbered balls, as a fraction of the blower's width. They are made lighter so that they weigh the same as balls of size ballSize
Denser balls are heavier and need a stronger windForce
How much the balls slow down when they slide against each other or the walls
Air resistance: how much the balls slow down as they move
How much force it takes to move a ball at rest
Bounciness of the balls
How strongly the air blows from the bottom of the blower
Colour of the target, the cross that appears in the middle when a ball is drawn
Length of each bar of the target cross, as a fraction of the blower's width
Thickness of each bar of the target cross, as a fraction of the blower's width
Colour of the ring around the ball drawn
Thickness of the ring around the ball drawn, as a fraction of the ball's diameter. The ring sits outside the ball
How long the balls keep moving after the target appears, before the ball closest to it is drawn
How long the blower takes to go from blurry to sharp (0 for no blur)
frostedEdges
Blurs the edges of the blower and washes them out to white, so that the balls there cannot be counted, even from a screenshot. The switch above turns it on and off without rebuilding the blower
How much the frosted edges are blurred, as a fraction of the blower's width. Only used when the edges are frosted
How much of the blower's width is frosted, split equally between both sides: 0.5 frosts a quarter from each side, 1 frosts everything. Only used when the edges are frosted
How much the frosted edges are washed out to white, from 0 to 1. Only used when the edges are frosted

Minimal example

<canvas id="world"></canvas>
<button type="button" id="draw">Draw a ball</button>
The ball drawn is: <span id="result"></span>

<script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0/build/matter.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/geoffreycastillo/bingo-blower-js@v4.0.0/bingo-blower.min.js"></script>
<script>
    const blower = new BingoBlower();
    blower.addBalls([18, 6, 3]);
    const button = document.getElementById('draw');
    button.addEventListener('click', async () => {
        button.disabled = true;
        const draw = await blower.drawBall();
        document.getElementById('result').textContent = draw.label;
    });
</script>