forked from SleepyHarry's block: SiLK I
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SiLK</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
background: #000000;
}
</style>
</head>
<body>
<canvas width=960 height=500></canvas>
<script>
var canvas = d3.select('canvas').node(),
context = canvas.getContext('2d');
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