Skip to content

Instantly share code, notes, and snippets.

@Fasani
Last active September 26, 2017 21:51
Show Gist options
  • Save Fasani/05e03d94e4235a71e00187329b429a40 to your computer and use it in GitHub Desktop.
Save Fasani/05e03d94e4235a71e00187329b429a40 to your computer and use it in GitHub Desktop.
Pentagon Fork
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
var rotateAngle = 1;
var length = 1;
var reverse = false;
setInterval(function() {
reRender();
}, 10);
function reRender() {
d3.selectAll("svg > *").remove();
rotateAngle += 1;
if (rotateAngle === 361) {
rotateAngle = 1;
}
if (reverse === false && length > 300) {
reverse = true;
}
if (length < 0) {
reverse = false;
}
if (reverse) {
length -= 1;
} else {
length += 1;
}
drawCircle(rotateAngle, 50, length);
}
function drawCircle(rotateAngle, numPoints, length) {
const svg = d3.select('svg');
const width = svg.attr('width');
const height = svg.attr('height');
const centerX = width / 2;
const centerY = height / 2;
const radius = length;
const points = d3.range(numPoints)
.map(i => {
const angle = i / numPoints * Math.PI * 2 + rotateAngle;
return {
x: Math.sin(angle) * radius + centerX,
y: Math.cos(angle) * radius + centerY
};
});
const spokes = points.map(point => ({
x1: centerX,
y1: centerY,
x2: point.x,
y2: point.y
}));
const wheelLines = d3.range(numPoints).map(i => ({
x1: points[i].x,
y1: points[i].y,
x2: points[(i + 1) % numPoints].x,
y2: points[(i + 1) % numPoints].y
}));
const lines = spokes.concat(wheelLines);
svg.selectAll('line').data(lines)
.enter().append('line')
.attr('x1', d => d.x1)
.attr('y1', d => d.y1)
.attr('x2', d => d.x2)
.attr('y2', d => d.y2)
.attr('stroke', 'black')
.attr('stroke-width', 2);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment