Generate alphabet plates

1 files changed, 42 insertions, 7 deletions

diff --git a/index.html b/index.html
index b845c31..31a4240 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,15 @@ svg {
 	display: block;
 	margin: 1em auto;
 	border: 1px solid black;
-	height: 32em;
-	max-height: 80vh;
 }
-.pointer {
+.pointer, .plate {
 	transform: none;
 	transform-origin: 50% 50%;
 }
+.pointer .plate path {
+	stroke: none;
+	stroke-width: none;
+}
 .pointer path, .pointer circle {
 	stroke: black;
 	stroke-width: 1px;
@@ -29,7 +31,7 @@ function start(element) { dragging = element; }
 function stop() { dragging = null; }
 function update(element, diff) {
 	element.dataset.angle = Number(element.dataset.angle) + diff;
-	element.style.transform = `rotate(${Math.floor(element.dataset.angle)}deg)`;
+	element.style.transform = `rotate(${element.dataset.angle}deg)`;
 }
 function reset() {
 	if (svg) {
@@ -60,8 +62,40 @@ function onmove(event) {
 function change(query, ratio) {
 	svg.querySelector(query).dataset.ratio = ratio;
 }
+function newSegment(radius, n) {
+	let g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+	let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	const outerRadius = radius + 10;
+	const left = width(radius);
+	const right = width(outerRadius);
+	path.setAttribute("d", `M${left} ${-height(radius)}
+		A${radius} ${radius} 0 0 1 ${left} ${height(radius)}
+		L${right} ${height(outerRadius)}
+		A${outerRadius} ${outerRadius} 0 0 0 ${right} ${-height(outerRadius)}
+		Z`);
+	g.classList.add("plate");
+	g.appendChild(path);
+	return g;
+
+	function width(radius) { return Math.cos(Math.PI / n) * radius; }
+	function height(radius) { return Math.sin(Math.PI / n) * radius; }
+}
+function generatePlate(svg, radius, segments) {
+	const colours = ["#edd", "#ded", "#dde"];
+	for (let i=0; i < segments; i++) {
+		let segment = newSegment(radius, segments);
+		segment.style.transform = `rotate(${i * 360 / segments}deg) translate(50%, 50%)`;
+		segment.style.fill = colours[i%3];
+		svg.prepend(segment);
+	}
+}
+function init(element) {
+	svg = element;
+	generatePlate(svg, 20, 26);
+	generatePlate(svg, 30, 27);
+}
 </script>
-<svg onload="svg = this" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">
+<svg onload="init(this)" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">
 <g id="outer" data-angle="0" data-ratio="27" class="pointer">
 	<path d="M49 50 L80 50 Z"/>
 	<circle onmousedown="start(this.parentNode)" cx="85" cy="50" r="5"/>
@@ -71,6 +105,7 @@ function change(query, ratio) {
 	<circle onmousedown="start(this.parentNode)" cx="75" cy="50" r="5"/>
 </g>
 </svg>
-<input onchange='change("#outer", this.value)' type="number" value="27" autocomplete="off">
-<input onchange='change("#inner", this.value)' type="number" value="26" autocomplete="off">
+<strong>Wadsworth/Wheatstone</strong><br>
+Outer: <input onchange='change("#outer", this.value)' type="number" value="27" autocomplete="off"><br>
+Inner: <input onchange='change("#inner", this.value)' type="number" value="26" autocomplete="off"><br>
 <button onclick="reset()">Reset Position</button>