[css-color-4] Playground for hue interpolation algorithms

LeaVerou · fantasai · LeaVerou · commit 035a3b5273ef · 2022-10-17T17:19:38.000-04:00
Co-Authored-By: fantasai &lt;725717+fantasai@users.noreply.github.com&gt;
diff --git a/css-color-4/hue-interpolation/index.html b/css-color-4/hue-interpolation/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Hue interpolation playground</title>
+<link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+
+<fieldset>
+	<legend>Algorithm</legend>
+
+	<label>
+		<input type="radio" name="algorithm" value="current-spec">
+		Current spec
+	</label>
+
+	<label>
+		<input type="radio" name="algorithm" value="new" checked>
+		New
+	</label>
+</fieldset>
+
+<div id="inputs">
+	<label>
+		θ<sub>1</sub> = <input type="number" id="theta1" value="360" step="1">deg
+	</label>
+	<label>
+		θ<sub>2</sub> = <input type="number" id="theta2" value="720" step="1">deg
+	</label>
+</div>
+
+<output id="output">
+	<p>Normalized angles:</p>
+	<p>
+		θ<sub>1</sub> = <span id="theta1n"></span>deg
+		θ<sub>2</sub> = <span id="theta2n"></span>deg
+	</p>
+	<div id="gradient"></div>
+</output>
+
+<script src="index.js" type="module"></script>
+
+</body>
+</html>
diff --git a/css-color-4/hue-interpolation/index.js b/css-color-4/hue-interpolation/index.js
@@ -0,0 +1,64 @@
+(document.body.oninput = evt => {
+
+let θ1 = +theta1.value;
+let θ2 = +theta2.value;
+
+let range = normalizeAngleRange(θ1, θ2);
+
+theta1n.textContent = range[0];
+theta2n.textContent = range[1];
+
+let colors = interpolate(range[0], range[1], 10).map(θ => `hsl(${θ}, 100%, 50%)`);
+gradient.style.background = `linear-gradient(to right, ${colors.join(", ")})`;
+
+})();
+
+function normalizeAngle (θ) {
+	return (θ % 360 + 360) % 360;
+}
+
+function normalizeAngleRange(θ1, θ2) {
+	let algorithm = document.querySelector("input[name=algorithm]:checked").value;
+
+	if (algorithm === "current-spec") {
+		θ1 = normalizeAngle(θ1);
+		θ2 = normalizeAngle(θ2);
+	}
+	else {
+		let θmax = Math.max(θ1, θ2);
+		let θmin = Math.min(θ1, θ2);
+		let Δ = θmax - θmin;
+
+		// Min common number of turns
+		let T = Math.floor(θmin / 360);
+
+		// Cap Δ at 360
+		if (Δ > 360) {
+			Δ = Δ % 360;
+			if (Δ === 0) {
+				Δ = 360;
+			}
+		}
+		if (θmax === θ1) {
+			θ1 = θ2 + Δ;
+		}
+		else {
+			θ2 = θ1 + Δ;
+		}
+
+		// Subtract min common number of turns from both
+		θ1 -= T * 360;
+		θ2 -= T * 360;
+	}
+
+	return [θ1, θ2];
+}
+
+function interpolate (start, end, steps) {
+	let ret = [];
+	let step = (end - start) / steps;
+	for (let i = 0; i < steps; i++) {
+		ret.push(start + step * i);
+	}
+	return ret;
+}
diff --git a/css-color-4/hue-interpolation/style.css b/css-color-4/hue-interpolation/style.css
@@ -0,0 +1,16 @@
+body {
+	font: 150%/1.5 system-ui;
+}
+
+input {
+	font: inherit;
+}
+
+#inputs {
+	display: flex;
+	gap: .5em;
+}
+
+#gradient {
+	height: 20px;
+}
