bezier.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Bezier Curve/Spline Testing</title>
<style>
* {box-sizing: border-box;}
main {
	max-width: 815px;
	margin: auto;
	padding: 5px;
}
.scrollcontext {
	overflow: auto;
	max-height: 615px; /* Why this figure? Is that the height of the scroll bar? */
	border: 1px solid black;
}
#canvasborder {
	width: 800px; height: 600px;
	margin: 0; padding: 0;
}
#options {
	display: flex;
	padding: 0;
	list-style-type: none;
	column-gap: 10px;
}
#actions {
	display: flex;
	column-gap: 10px;
}
</style>
<script type=module src="bezier.js"></script>
</head>
<body>
<main>
<p>Play around with control points and see what the minimum curve radius is.</p>
<p>Inspired partly by <a href="https://www.youtube.com/watch?v=aVwxzDHniEw">this video by Freya Holmér</a>. If you want to know the
mathematics behind all this, watch that video; even if you don't, do yourself a favour and watch the opening minute - it is incredibly
beautiful, and an amazing showcase of what Bézier curves can do.</p>
<p>See <a href="https://rosuav.github.io/rail-ways/">Rail-Ways</a> for the updated version of this project.</p>
<details><summary>TODO</summary><ul>
<li>Spline building with multiple Bézier curves. Does putting [last ctrl, endpoint, first ctrl] on a straight line
ensure that the transition is smooth, or do they also have to be equidistant?</li>
<li>Importing of points, esp the endpoints</li>
<li>Exporting of results</li>
</ul></details>
<div class=scrollcontext><div id=canvasborder><canvas width=800 height=600>
I guess you can't see my canvas?
</canvas></div></div>
<ul id=options></ul>
<div id=actions><button type=button id=toggle_animation>Animate</button></div>
<p id=derivatives></p>
<p id=minimum_curve_radius></p>
</main>
</html>
