SiLK II

forked from SleepyHarry's block: SiLK I

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SiLK</title>

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = canvas.width - margin.left - margin.right,
    height = canvas.height - margin.top - margin.bottom;

context.translate(margin.left, margin.top);

context.fillStyle = d3.rgb(0, 0, 0, 0.01);
context.strokeStyle = d3.rgb(255, 255, 255);

var degToRad = Math.PI / 180,
    r = d3.min([width, height]) / 2,
    circumferencePts = d3.range(360).map(
        d => [
        ]
    );

var toPt = function (i) {
    return [
        width  / 2 + r * Math.cos(degToRad * i),
        height / 2 + r * Math.sin(degToRad * i)
    ];
};

var lineFromCentreTo = function (x, y) {
    context.beginPath();
    context.moveTo(width / 2, height / 2);
    context.lineTo(x, y);
    context.closePath();
    context.stroke();
};

var i = 0,
    skip = 0,
    flip = true,
    anchor = 360;

var nextPt = function () {
//    return circumferencePts[Math.floor(Math.random() * circumferencePts.length)];
//    return circumferencePts[ptList[i++ % ptList.length]];

i += skip;
   skip += 1/36;
    
//    return circumferencePts[i % circumferencePts.length];
//    return toPt(Math.random() * 360);
//     i += 0.5;
//     flip = !flip;
//     anchor -= 1.8;

//     return toPt(flip ? anchor - i : i);
	  return toPt(i);
};

var fade = function () {
    context.fillRect(0, 0, width, height);
};

var step = function () {
    fade();

var [x, y] = nextPt();

context.beginPath();
    context.moveTo(lastPt[0], lastPt[1]);
    context.lineTo(x, y);
    context.closePath();
    context.stroke();

lastPt = [x, y];
};

var lastPt = nextPt(),
    ticker = setInterval(step, 50);
</script>

</body>
</html>

https://d3js.org/d3.v4.min.js