Spirograph

/*
BSD Zero Clause License

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
*/

window.addEventListener('load', () => {
    'use strict'

    class Vector {
        x = 0;
        y = 0;
        constructor(x = 0, y = 0) {
            this.x = x;
            this.y = y;
        }

        add(other) {
            return new Vector(this.x + other.x, this.y + other.y);
        }

        sub(other) {
            return new Vector(this.x - other.x, this.y - other.y);
        }

        mul(scalar) {
            return new Vector(this.x * scalar, this.y * scalar);
        }

        divide(scalar) {
            return new Vector(this.x / scalar, this.y / scalar);
        }
    };

    function getCirclePoint(centre, radius, angle) {
        return new Vector(centre.x + radius * Math.cos(angle),
            centre.y + radius * Math.sin(angle));
    }

    // Model a pair of spirograph wheels (or one wheel inside a ring)
    class Wheels {
        centre;
        _boundingRadius;
        _travellerRadius;
        _orbitRadius;
        _ratio;
        multiplier;

        constructor(sizeRatio, multiplier) {
            this._ratio = sizeRatio;
            this.multiplier = multiplier;
        }

        setRadius(newRadius) {
            this._boundingRadius = newRadius;
            this._travellerRadius = newRadius * this._ratio;
            this._orbitRadius = newRadius - this._travellerRadius;
        }

        pointFromRotation(theta) {
            const orbitAngle = theta * this._ratio * Math.PI * 2;
            const innerCentre = getCirclePoint(this.centre, this._orbitRadius,
                orbitAngle);
            const innerAngle = (orbitAngle + (theta % 1) *
                this.multiplier * Math.PI);
            return getCirclePoint(innerCentre, this._travellerRadius,
                innerAngle);
        }
    };

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

    const canvasSize = new Vector(canvas.width, canvas.height);

    function updateCanvasSize() {
        const w = canvas.clientWidth;
        const h = canvas.clientHeight;
        if (canvas.width != w || canvas.height != h) {
            // Only perform this assignment if required.
            // Even if the value don't change, the buffer is cleared.
            canvas.width = w;
            canvas.height = h;
            canvasSize.x = w;
            canvasSize.y = h;
        }
    }

    let curRotation = Math.random();
    const MULTIPLIER_OPTIONS = [-8, -6, -4, -2, 2, 4, 6, 8];
    let curHue = Math.random() * 360;

    function randomWheels() {
        const multiplierIndex = Math.floor(Math.random()
            * MULTIPLIER_OPTIONS.length);
        return new Wheels(0.3 + Math.random() * 0.178,
            MULTIPLIER_OPTIONS[multiplierIndex])
    }

    let wheels = randomWheels();

    const btnFuncs = {
        clear: () => {
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        },
        reroll: () => {
            btnFuncs.clear();
            wheels = randomWheels();
        },
    };

    const btns = document.getElementById(
        'spirographCtrls').getElementsByTagName('button');
    Array.prototype.forEach.call(btns, b => {
        const func = btnFuncs[b.dataset?.func];
        if (func) {
            b.addEventListener('click', func);
        }
    });


    const INTERPOLATE_STEPS = 16;
    function draw(posDelta) {
        // low alpha black fill, to fade previous frame(s)
        ctx.fillStyle = "rgba(0, 0, 0, 0.007)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        if (posDelta.x == 0) {
            return;
        }

        wheels.centre = canvasSize.mul(0.5);
        const outerRadius = Math.min(wheels.centre.x, wheels.centre.y) * 0.9;
        wheels.setRadius(outerRadius);

        curHue += posDelta.y / outerRadius * 45;
        while (curHue < 0) {
            curHue += 360;
        }
        curHue %= 360;

        ctx.strokeStyle = "hsl(" + (curHue).toString() + ", 70%, 50%)";

        ctx.lineCap = "round";
        ctx.lineWidth = Math.max(1, outerRadius / 64);

        ctx.beginPath();

        const startPoint = wheels.pointFromRotation(curRotation);
        ctx.moveTo(startPoint.x, startPoint.y);
        const rotDelta = posDelta.x / outerRadius / Math.abs(wheels.multiplier);

        for (let i = 1; i <= INTERPOLATE_STEPS; i++) {
            const stepRot = curRotation + rotDelta * i / INTERPOLATE_STEPS;
            const stepPoint = wheels.pointFromRotation(stepRot);
            ctx.lineTo(stepPoint.x, stepPoint.y);
        }

        ctx.stroke();

        curRotation += rotDelta;
    }

    let penDown = false;
    const MAX_VELOCITY = 2.0;
    let currentTouches = [];
    let curPos = new Vector(0, 0);
    let prevPos = curPos;
    let currentTouchId = 0;

    function setPenDown(pos) {
        penDown = true;
        curPos = pos;
        prevPos = pos;
    }

    function setPenUp() {
        penDown = false;
    }

    function penMove(pos) {
        curPos = pos;
        if (penDown) {
        }
    }

    function handleMouseDown(evt) {
        if (evt.button == 0) {
            setPenDown(new Vector(evt.clientX, evt.clientY));
        }
    }

    function handleMouseUp(evt) {
        if (evt.button == 0) {
            setPenUp();
        }
    }

    function handleMouseOut(evt) {
        setPenUp();
    }

    function handleMouseMove(evt) {
        penMove(new Vector(evt.clientX, evt.clientY));
    }

    function handleTouchStart(evt) {
        evt.preventDefault();

        let touches = evt.changedTouches;
        for (let i = 0; i < touches.length; i++) {
            let t = touches[i];
            let pos = new Vector(t.pageX, t.pageY);
            currentTouches[t.identifier] = pos;
            if (!penDown) {
                setPenDown(pos);
                currentTouchId = t.identifier;
            }
        }

    }

    function handleTouchEnd(evt) {
        evt.preventDefault();

        let touches = evt.changedTouches;
        for (let i = 0; i < touches.length; i++) {
            delete currentTouches[touches[i].identifier];
            if (touches[i].identifier == currentTouchId) {
                setPenUp();
            }
        }
    }

    function handleTouchCancel(evt) {
        evt.preventDefault();

        let touches = evt.changedTouches;
        for (let i = 0; i < touches.length; i++) {
            delete currentTouches[touches[i].identifier];
            if (touches[i].identifier == currentTouchId) {
                setPenUp();
            }
        }
    }

    function handleTouchMove(evt) {
        evt.preventDefault();

        let touches = evt.changedTouches;
        for (let i = 0; i < touches.length; i++) {
            let t = touches[i];
            let pos = new Vector(t.pageX, t.pageY);
            currentTouches[t.identifier] = pos;
            if (t.identifier == currentTouchId) {
                penMove(pos);
            }
        }
    }

    canvas.addEventListener("mousedown", handleMouseDown);
    canvas.addEventListener("mouseup", handleMouseUp);
    canvas.addEventListener("mouseout", handleMouseOut);
    canvas.addEventListener("mouseleave", handleMouseOut);
    canvas.addEventListener("mousemove", handleMouseMove);
    canvas.addEventListener("touchstart", handleTouchStart);
    canvas.addEventListener("touchend", handleTouchEnd);
    canvas.addEventListener("touchcancel", handleTouchCancel);
    canvas.addEventListener("touchmove", handleTouchMove);

    function calcPosDelta() {
        let delta = curPos.sub(prevPos);
        prevPos = curPos;
        return delta;
    }

    let lastFrame = Date.now();
    const velocityHistory = [new Vector(256, 0.1)];

    function update() {
        updateCanvasSize();

        // get frame duration in seconds
        const curFrame = Date.now();
        const delta = (curFrame - lastFrame) / 1000
        lastFrame = curFrame;

        let posDelta = calcPosDelta();

        if (penDown) {
            // track recent swipe velocity
            // so we keep spinning after the gesture if the touch ends
            if (delta > 0) {
                let velocity = posDelta.divide(delta);
                velocityHistory.push(velocity);
                if (velocityHistory.length > 3) {
                    velocityHistory.shift();
                }
            }
        } else {
            // if no touch, continue to spin base on previous velocity
            let holdVelocity = velocityHistory.reduce(
                (a, b) => a.add(b)).divide(velocityHistory.length);
            posDelta = holdVelocity.mul(delta);
        }
        draw(posDelta);

        window.requestAnimationFrame(update);
    }

    window.requestAnimationFrame(update);
});