From 0e57f615626247c67ea28058975de305ac43000d Mon Sep 17 00:00:00 2001
From: Aki <please@ignore.pl>
Date: Sun, 3 Nov 2024 23:45:55 +0100
Subject: Sketched a customizable Wadsworth/Wheatstone cipher mechanism

This is not yet done. Pointers move in relation to each other but the
cycles are broken due to angle operations taking place mostly in 0-360
range. The alphabet lookup behind is missing too.
---
 index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c33ded8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Wadsworth/Wheatstone</title>
+<style>
+.pointer {
+	transform: none;
+	transform-origin: 50% 50%;
+}
+.pointer path, .pointer circle {
+	stroke: black;
+	stroke-width: 1px;
+}
+.pointer circle {
+	fill: transparent;
+}
+</style>
+<script>
+let dragging = null;
+let svg = null;
+function start(element) { dragging = element; }
+function stop() { dragging = null; }
+function update(element, angle) {
+	element.dataset.angle = angle;
+	element.style.transform = `rotate(${Math.floor(angle)}deg)`;
+}
+function onmove(event) {
+	if (dragging) {
+		const rect = svg.getBoundingClientRect();
+		const x = event.clientX - (rect.left + rect.width / 2);
+		const y = event.clientY - (rect.top + rect.height / 2);
+		let theta = Math.atan2(y, x);
+		theta = theta > 0 ? theta : theta + Math.PI * 2;
+		let angle = theta * 180.0 / Math.PI;
+		const current = Number(dragging.dataset.angle);
+		const diff = (angle - current) % 360.0;
+		update(dragging, current + diff);
+		svg.querySelectorAll(".pointer").forEach((x) => {
+			if (x != dragging) {
+				const ratio = Number(dragging.dataset.ratio) / Number(x.dataset.ratio);
+				update(x, Number(x.dataset.angle) + diff * ratio);
+			}
+		});
+	}
+}
+</script>
+<svg onload="svg = this" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">
+<g data-angle="0" data-ratio="4" class="pointer">
+	<path d="M49 50 L80 50 Z"/>
+	<circle onmousedown="start(this.parentNode)" cx="85" cy="50" r="5"/>
+</g>
+<g data-angle="0" data-ratio="-1" class="pointer">
+	<path d="M49 50 L70 50 Z"/>
+	<circle onmousedown="start(this.parentNode)" cx="75" cy="50" r="5"/>
+</g>
+</svg>
-- 
cgit v1.1

