Use the arrow keys to move the turtle. Don't get lost!
xxxxxxxxxx
<html>
<head>
<style>
body {
margin: 0;
}
body.out-of-bounds {
background: tomato;
}
#state {
background: rgba(255, 255, 255, .8);
font-family: "Helvetica Neue", sans-serif;
padding: 5px;
position: absolute;
}
polygon {
fill: steelblue;
}
path.selected {
fill: green;
}
</style>
</head>
<body>
<table id="state">
<tr><td>Angle:</td><td id="angle"></td></tr>
<tr><td>Position: <td id="position"></td></tr>
<tr><td><input type="checkbox"> Fill path</td></tr>
</table>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/geometric@1.0.0/build/geometric.min.js"></script>
<script src="d3-turtle.js"></script>
<script>
var width = window.innerWidth, height = window.innerHeight;
var turtle = d3.turtle().position([10, 80]).size(30).bounds([[0, 0], [width, 0], [width, height], [0, height]]);
d3.select("body")
.append("svg").attr("width", width).attr("height", height)
.append("g")
.call(turtle);
var input = d3.select("input");
input.on("change", _ => {
d3.select("path").classed("selected", input.property("checked"));
});
d3.timer(_ => {
d3.select("#position").text(turtle.position().map(d => Math.round(d)));
d3.select("#angle").text(turtle.angle());
d3.select("body").classed("out-of-bounds", !turtle.inBounds());
});
</script>
</body>
</html>
https://d3js.org/d3.v5.min.js
https://unpkg.com/geometric@1.0.0/build/geometric.min.js