Cardioid

/*
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'
    const canvas = document.getElementById('cardioidCanvas');
    const ctx = canvas.getContext('2d');

    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;
        }
    }

    function circlePoints(cx, cy, radius) {
        return angle => {
            return [
                cx + radius * Math.cos(angle),
                cy + radius * Math.sin(angle)
            ];
        };
    }

    const LINE_COUNT = 140;
    const ANGLE_INCREMENT = Math.PI * 2 / LINE_COUNT;
    const ANGLE_OFFSET = Math.PI / 2;
    let multiplier = 2;
    let innerHue = 340;
    let outerHue = 0;

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

        const centre = { x: canvas.width / 2, y: canvas.height / 2 };
        const radius = Math.min(centre.x, centre.y) * 0.95;
        const circle = circlePoints(centre.x, centre.y, radius);

        const gradient = ctx.createRadialGradient(centre.x - radius / 3,
            centre.y - radius / 3, 1, centre.x, centre.y, radius);
        gradient.addColorStop(0,
            "hsl(" + (innerHue).toString() + ", 40%, 45%)");
        gradient.addColorStop(1,
            "hsl(" + (outerHue).toString() + ", 60%, 35%)");
        ctx.strokeStyle = gradient;

        ctx.lineCap = "round";
        ctx.lineWidth = Math.max(1, radius / 128);

        ctx.beginPath();
        for (let from = 0; from < LINE_COUNT; from++) {
            const to = (from * multiplier) % LINE_COUNT;
            ctx.moveTo(...circle(ANGLE_OFFSET + from * ANGLE_INCREMENT));
            ctx.lineTo(...circle(ANGLE_OFFSET + to * ANGLE_INCREMENT));
        }
        ctx.stroke();
    }

    const MAX_VELOCITY = 2.0;
    let penDown = false;
    let currentTouches = [];
    let currentMouseX = 0;
    let touchCount = 0;

    function handleMouseDown(evt) {
        if (evt.button == 0) {
            penDown = true;
            innerHue = (360 * evt.clientY / canvas.height + 70) % 360;
            currentMouseX = evt.clientX;
        }
    }

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

    function handleMouseOut(evt) {
        penDown = false;
    }

    function handleMouseMove(evt) {
        if (penDown) {
            innerHue = (360 *  evt.clientY / canvas.height + 70) % 360;
            multiplier += 2 * (evt.clientX - currentMouseX) / canvas.width;
            currentMouseX = evt.clientX;
        }
    }

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

        penDown = true;
        touchCount++;

        for (let i = evt.changedTouches.length; i-- > 0;) {
            const t = evt.changedTouches[i];
            currentTouches[t.identifier] = { x: t.pageX, y: t.pageY };
            innerHue = (360 * t.pageY / canvas.height + 70) % 360;
        }
    }

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

        if (--touchCount == 0) {
            penDown = false;
        }

        for (let i = evt.changedTouches.length; i-- > 0;) {
            const t = evt.changedTouches[i];
            delete currentTouches[t.identifier];
        }
    }

    function handleTouchCancel(evt) {
        handleTouchEnd(evt);
    }

    function handleTouchMove(evt) {
        evt.preventDefault();
        penDown = true;
        let x = 0;
        for (let i = evt.changedTouches.length; i-- > 0;) {
            const t = evt.changedTouches[i];
            const prevPosition = currentTouches[t.identifier];
            const curPosition = { x: t.pageX, y: t.pageY };
            currentTouches[t.identifier] = curPosition;
            x += curPosition.x - prevPosition.x;
            innerHue = (360 * t.pageY / canvas.height + 70) % 360;
        }

        multiplier += 2 * x / canvas.width;
    }

    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);

    let lastFrame = Date.now();

    let velocityHistory = [0.2];
    let previousMul = multiplier;

    function update() {
        updateCanvasSize();
        draw();

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

        outerHue = (curFrame / 50) % 360;

        if (penDown) {
            // track recent swipe velocity
            // so we keep spinning after the gesture if the touch ends
            if (delta > 0) {
                const velocity = (multiplier - previousMul) / delta;
                velocityHistory.push(velocity);
                if (velocityHistory.length > 3) {
                    velocityHistory.shift();
                }
            }
        } else {
            // if no touch, continue to spin based on previous velocity
            let holdVelocity = velocityHistory.reduce(
                function(a, b) { return a + b; }, 0) / velocityHistory.length;
            if (holdVelocity > 0) {
                holdVelocity = Math.min(MAX_VELOCITY, holdVelocity);
            } else {
                holdVelocity = Math.max(-MAX_VELOCITY, holdVelocity);
            }
            multiplier += holdVelocity * delta;
        }
        previousMul = multiplier;

        window.requestAnimationFrame(update);
    }

    window.requestAnimationFrame(update);
});