Update radius-expansion.html

Add Noam's algorithm.
Change my algorithms to use min instead of max.
Add testcase.

Author: Loirooriol

css-backgrounds-3/radius-expansion.html

@@ -78,6 +78,10 @@
 		<input type="radio" name="algorithm" value="oriol2">
 		Oriol's variant of current spec (adding a linear factor)
 	</label>
+	<label>
+		<input type="radio" name="algorithm" value="spectrum">
+		Noam's old/new spectrum
+	</label>
 </form>
 <output id="output"></output>
 <script>
@@ -101,6 +105,7 @@
   {width: 200, height: 40, spread: 50, borderRadius: "0 50% / 50%"},
   {width: 0, height: 0, spread: 30, borderRadius: "50px 0px 0px 0px"},
   {width: 500, height: 500, spread: 30, borderRadius: "50px"},
+  {width: 250, height: 30, spread: 100, borderRadius: "10px"},
 ];
 
 function show({incremental = false} = {}) {
@@ -295,7 +300,7 @@
 	}
 	else if (algorithm === "oriol") {
 		for (let corner in radii) {
-			let coverage = Math.max(
+			let coverage = Math.min(
 				2 * radii[corner][0] / testCase.width,
 				2 * radii[corner][1] / testCase.height,
 			) || 0;
@@ -310,7 +315,7 @@
 	}
 	else if (algorithm === "oriol2") {
 		for (let corner in radii) {
-			let coverage = Math.max(
+			let coverage = Math.min(
 				2 * radii[corner][0] / testCase.width,
 				2 * radii[corner][1] / testCase.height,
 			) || 0;
@@ -323,6 +328,58 @@
 			});
 		}
 	}
+	else if (algorithm === "spectrum") {
+		const old_spec = (value) => {
+			if (value == 0)
+				return 0;
+			return value + testCase.spread;
+		}
+
+		const new_spec = (value) => {
+			if (value >= testCase.spread) {
+				return value + testCase.spread;
+			}
+			let r = value / testCase.spread;
+			return value + testCase.spread * (1 + (r - 1)**3);
+		}
+
+		const map_dim = (radius, dim) => {
+				// If there's no radius, there's no spread to apply.
+				if (radius === 0) {
+					return 0;
+				}
+
+				// Calculate the radius's ratio to the spread, clamping at 1.
+				const spreadRatio = 1 - Math.min(1, radius / testCase.spread);
+
+				// Calculate the diameter's ratio to the overall dimension, clamping at 1.
+				const dimRatio = Math.min(1, (2 * radius) / dim);
+
+				// These factors determine the amount of easing. They both approach 0
+				// as their respective ratios approach 1, which reduces the easing effect.
+				const spreadEasingFactor = spreadRatio ** 3;
+				const dimEasingFactor = 1 - dimRatio ** 3;
+
+				// The total reduction in spread is the product of the two easing factors.
+				const totalReduction = dimEasingFactor * spreadEasingFactor;
+
+				// Apply the reduction to the spread and add it to the original radius.
+				const easedSpread = testCase.spread * (1 - totalReduction);
+
+				return radius + easedSpread;
+		}
+
+		const map = ([h, v]) => {
+			return [map_dim(h, testCase.width), map_dim(v, testCase.height)];
+		}
+
+		r = {
+			topLeft: map(radii.topLeft),
+			topRight: map(radii.topRight),
+			bottomRight: map(radii.bottomRight),
+			bottomLeft: map(radii.bottomLeft)
+		};
+	}
 
 	return `${r.topLeft[0]}px ${r.topRight[0]}px ${r.bottomRight[0]}px ${r.bottomLeft[0]}px / ${r.topLeft[1]}px ${r.topRight[1]}px ${r.bottomRight[1]}px ${r.bottomLeft[1]}px`;
 }