Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active February 1, 2019 11:41
Show Gist options
  • Save HarryStevens/90437d2cbc83f26655cb9771dd2ba463 to your computer and use it in GitHub Desktop.
Save HarryStevens/90437d2cbc83f26655cb9771dd2ba463 to your computer and use it in GitHub Desktop.
Download ZIP
Rotate a Polygon
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
circle {
cursor: pointer;
stroke: #fff;
}
polygon {
fill: steelblue;
}
text {
font-family: "Helvetica Neue", sans-serif;
pointer-events: none;
}
text.hidden {
opacity: 0;
transition: opacity .5s;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/geometric.min.js"></script>
<script>
var width = window.innerWidth, height = window.innerHeight;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var point = [width / 2, height / 2],
points = [
[point[0] - 100, point[1] - 100],
[point[0] - 50, point[1] - 100],
[point[0] - 75, point[1] - 75],
[point[0] - 50, point[1] - 50],
[point[0] - 100, point[1] - 50]
];
var drawCount = 0;
var polygon = svg.append("polygon");
var text = svg.selectAll("text")
.data([point, last(points)])
.enter().append("text")
.attr("transform", d => "translate(" + d + ")")
.html((d, i) => i === 0 ? "<tspan>Move the</tspan><tspan x=12 dy=16>point of origin</tspan>" : "<tspan>Rotate the</tspan><tspan x=0 dy=16>polygon</tspan>")
.style("text-anchor", (d, i) => i === 0 ? "start" : "middle")
.attr("dx", (d, i) => i === 0 ? 12 : 0)
.attr("dy", (d, i) => i === 0 ? -2 : 24);
var dragCircle = d3.drag()
.on("drag", _ => {
point = [event.clientX, event.clientY];
draw();
});
var circle = svg.append("circle")
.attr("r", 6)
.call(dragCircle);
var dragHandle = d3.drag()
.on("drag", _ => {
points = geometric.polygonRotate(
points,
geometric.lineAngle([[event.clientX, event.clientY], point]) - geometric.lineAngle([last(points), point]),
point
);
draw();
});
var handle = svg.append("circle")
.attr("r", 6)
.call(dragHandle);
draw();
function draw(){
drawCount++;
if (drawCount == 2){
text.classed("hidden", 1);
}
polygon.attr("points", points);
circle.attr("transform", "translate(" + point + ")");
handle.attr("transform", "translate(" + last(points) + ")")
}
function last(arr){
return arr[arr.length - 1];
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment