diff options
| author | Aki <please@ignore.pl> | 2024-11-03 23:45:55 +0100 |
|---|---|---|
| committer | Aki <please@ignore.pl> | 2024-11-03 23:45:55 +0100 |
| commit | 0e57f615626247c67ea28058975de305ac43000d (patch) | |
| tree | f017739dbe0f036e28d7a967214b641ddf0b497c /index.html | |
| download | wadsworth-0e57f615626247c67ea28058975de305ac43000d.zip wadsworth-0e57f615626247c67ea28058975de305ac43000d.tar.gz wadsworth-0e57f615626247c67ea28058975de305ac43000d.tar.bz2 | |
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.
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 56 |
1 files changed, 56 insertions, 0 deletions
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> |