http://gbrlgrct.com/gists/cc5ea4bf19838a41e527/cardiod.html

cardiod.html

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
    body {
        margin: 0;
    }
</style>

<script>
'use strict';

const TAU = 2 * Math.PI;

function main() {
    const UNIT = Math.min(document.body.clientWidth, document.body.clientHeight) / 2;
    
    const canvas = document.createElement('canvas');
    canvas.width  = 2*UNIT;
    canvas.height = 2*UNIT;
    document.body.appendChild(canvas);
    
    const minput = document.createElement('input');
    minput.type = 'number';
    document.body.appendChild(minput);
    
    minput.addEventListener('keyup', () => {
        m = parseFloat(minput.value) || 0;
        draw();
    });
    
    const ctx = canvas.getContext('2d');
    
    ctx.translate(UNIT, UNIT);
    ctx.font = '30px Arial';
    
    let m = 2;
    let dm = 0.005;
    let n = 500;
    let c = 0;
    let dc = 1;
    
    function draw() {
        ctx.clearRect(-UNIT, -UNIT, 2*UNIT, 2*UNIT);
        
        ctx.strokeStyle = 'hsl(' + c + ', 50%, 50%)';
        
        for (let i = 0; i < n; ++i) {
            let z = i * m;
            
            let a1 = TAU * (i % n) / n;
            let a2 = TAU * (z % n) / n;
            
            let x1 = UNIT * Math.cos(a1);
            let y1 = UNIT * Math.sin(a1);
            
            let x2 = UNIT * Math.cos(a2);
            let y2 = UNIT * Math.sin(a2);
            
            ctx.beginPath();
            ctx.moveTo(-x1, y1);
            ctx.lineTo(-x2, y2);
            ctx.stroke();
        }
        
        ctx.stroke();
        
        ctx.fillText(m.toFixed(4), -UNIT, UNIT);
    }
    
    function animate() {
        m += dm;
        c += dc;
    }
    
    let paused = false; 
    
    function loop() {
        if (!paused) {
            animate();
            draw();
        }
        requestAnimationFrame(loop);
    }
    
    requestAnimationFrame(loop);
    
    canvas.addEventListener('click', () => {
        paused = !paused;
    });
    
    canvas.addEventListener('wheel', ev => {
        if (!paused) return;
        
        m += dm * Math.sign(ev.deltaY);
        
        draw();
    });
    
    canvas.addEventListener('touchstart', ev1 => {
        let wasPaused = paused;
        
        ev1.preventDefault();
        paused = true;
        
        let moved = false;
        let y1 = ev1.touches[0].pageY;
        
        function updater(ev2) {
            let y2 = ev2.touches[0].pageY;
            let dy = y2 - y1;
            
            if (Math.abs(dy) < 10) return;
            
            m += 20 * dm * Math.sign(dy);
            
            draw();
            
            y1 = y2;
            moved = true;
        }
        
        function stopper() {
            canvas.removeEventListener('touchmove', updater);
            canvas.removeEventListener('touchend', stopper);
            
            if (moved) {
                paused = wasPaused;
            } else {
                paused = !wasPaused;
            }
        }
        
        canvas.addEventListener('touchmove', updater);
        canvas.addEventListener('touchend', stopper);
    });
}

window.addEventListener('load', main);

</script>