Skip to content

Instantly share code, notes, and snippets.

@veltman

veltman/index.html

Last active October 2, 2017 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veltman/bc4569c5822a21a02c33448ed60bdfd7 to your computer and use it in GitHub Desktop.
Save veltman/bc4569c5822a21a02c33448ed60bdfd7 to your computer and use it in GitHub Desktop.
Download ZIP
Hypnocircles
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas {
width: 960px;
height: 500px;
}
</style>
</head>
<body>
<canvas width="1920" height="1000"></canvas>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d"),
width = +canvas.width,
height = +canvas.height,
duration = 4000,
innerRadius = 200,
rings = 12;
context.translate(width / 2, height / 2);
d3.timer(function(t){
t = 2 * Math.min(t % duration / duration, 1 - t % duration / duration);
context.clearRect(-width / 2, -height / 2, width, height);
var factor = 5 + 30 * t,
r = 0;
d3.range(rings).forEach(function(i){
var count = i ? Math.round(i * factor) : 1,
newRadius = i ? outerRadius(r, count) : innerRadius;
context.fillStyle = d3.interpolateRainbow(1 - (t + i / rings) % 1);
context.beginPath();
d3.range(count).forEach(function(j){
var angle = 2 * Math.PI * j / count + Math.PI / 2,
x = i ? (r + newRadius) * Math.cos(angle) : 0,
y = i ? (r + newRadius) * Math.sin(angle) : 0;
context.moveTo(x, y);
context.arc(x, y, newRadius, 0, 2 * Math.PI);
});
context.fill();
r += i ? newRadius * 2 : newRadius;
});
});
function outerRadius(r1, n) {
return Math.sin(Math.PI / n) * r1 / (1 - Math.sin(Math.PI / n));
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment