index.html

<!doctype html>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<style>
    html, body {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    canvas {
        display: block;
        cursor: none;
    }
</style>
<title>Dispersive Flies</title>

<body onload="main()">
    <canvas></canvas>
</body>

<script>
    const FLY_COLOR         = '#212529'
    const FLY_RADIUS        =   5

    const CURSOR_COLOR      = '#dc3545'
    const CURSOR_THICKNESS  =   4
    const CURSOR_SIZE       =  20

    const DFO_DELAY         = 200      // ms

    const N                 =  40      // no. flies
    const D                 =   2      // no. dimensions (grid!)
    const T                 = 1 / N    // disturbance threshold

    let timeLastIter                   // unix time (ms)
    let flies                          // [index][dimension]
    let fliesNext
    let mouseX
    let mouseY

    const canvasDims = []
    let canvas
    let graphics


    Array.prototype.minBy = function(f) {
        if (this.length === 0) return undefined
        if (this.length === 1) return this[0]

        let minElement = this[0]
        let minValue = f(minElement)

        for (let i = 1; i < this.length; i++) {
            const v = f(this[i])
            if (v < minValue) {
                minElement = this[i]
                minValue = v
            }
        }

        return minElement
    }

    function argmin(a) {
        if (a.length === 0) return undefined
        let minIndex = 0
        for (let i = 1; i < a.length; i++)
            if (a[i] < a[minIndex])
                minIndex = i
        return minIndex
    }

    function clamp(x, min=0, max=1) {
        return Math.max(min, Math.min(x, max))
    }


    // simple linear interpolation (ease-in-out makes the animation choppy)
    function interpolateFly(f1, f2, t) {
        return [
            f1[0] + t * (f2[0] - f1[0]),
            f1[1] + t * (f2[1] - f1[1]),
        ]
    }

    function drawFly(f) {
        graphics.beginPath()
        graphics.arc(f[0], f[1], FLY_RADIUS, 0, 2 * Math.PI)
        graphics.fill()
    }

    function drawCursor() {
        graphics.fillRect(mouseX - CURSOR_SIZE      / 2, mouseY - CURSOR_THICKNESS / 2, CURSOR_SIZE,      CURSOR_THICKNESS)
        graphics.fillRect(mouseX - CURSOR_THICKNESS / 2, mouseY - CURSOR_SIZE      / 2, CURSOR_THICKNESS, CURSOR_SIZE     )
    }

    function draw() {
        // 1. clear
        graphics.clearRect(0, 0, canvas.width, canvas.height)

        // 2. draw flies
        graphics.fillStyle = FLY_COLOR
        graphics.globalAlpha = .5
        const t = clamp((Date.now() - timeLastIter) / DFO_DELAY)
        for (let i = 0; i < N; i++) drawFly(interpolateFly(flies[i], fliesNext[i], t))

        // 3. draw cursor
        graphics.fillStyle = CURSOR_COLOR
        graphics.globalAlpha = 1
        drawCursor()

        // 4. schedule next redraw
        window.requestAnimationFrame(draw)
    }


    function computeCost(f) {
        const dx = f[0] - mouseX
        const dy = f[1] - mouseY
        return dx*dx + dy*dy
    }

    function dfoInit() {
        fliesNext = Array(N).fill().map(_ =>
            [...Array(D).keys()].map(d => Math.random() * canvasDims[d])
        )
        dfoIter()
    }

    function dfoIter() {
        timeLastIter = Date.now()
        flies = fliesNext
        fliesNext = Array(N)

        const costs = flies.map(computeCost)
        const bestIndex = argmin(costs)
        const best = flies[bestIndex]

        for (let i = 0; i < N; i++) {
            // do not change best
            if (i === bestIndex) { fliesNext[i] = flies[i]; continue }

            const f = flies[i]
            const fNext = fliesNext[i] = Array(D)

            const neighborIndices = [(i-1 + N) % N, i, (i+1) % N]  // also includes current fly!
            const bestNeighbor = flies[neighborIndices.minBy(k => costs[k])]

            for (let d = 0; d < D; d++)
                if (Math.random() < T)
                    // exploration
                    fNext[d] = Math.random() * canvasDims[d]
                else
                    // exploitation (with clamp instead of restart if out of bounds!)
                    fNext[d] = clamp(bestNeighbor[d] + Math.random() * (best[d] - f[d]), 0, canvasDims[d])
        }
    }


    function setDimensions() {
        canvasDims[0] = canvas.width = window.innerWidth
        canvasDims[1] = canvas.height = window.innerHeight
    }

    function main() {
        canvas = document.querySelector('canvas')
        graphics = canvas.getContext('2d')

        setDimensions()
        window.addEventListener('resize', setDimensions)

        mouseX = canvas.width / 2
        mouseY = canvas.height / 2
        canvas.addEventListener('mousemove', e => {
            mouseX = e.clientX
            mouseY = e.clientY
        })

        dfoInit()
        setInterval(dfoIter, DFO_DELAY)

        draw()  // initial call
    }
</script>