Update radius-expansion.html with variant of Noam's algorithm

Author: Loirooriol

css-backgrounds-3/radius-expansion.html

@@ -82,6 +82,10 @@
 		<input type="radio" name="algorithm" value="spectrum">
 		Noam's old/new spectrum
 	</label>
+	<label>
+		<input type="radio" name="algorithm" value="spectrum2">
+		Noam's old/new spectrum, preserving circular corners
+	</label>
 </form>
 <output id="output"></output>
 <script>
@@ -329,20 +333,6 @@
 		}
 	}
 	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) {
@@ -380,6 +370,39 @@
 			bottomLeft: map(radii.bottomLeft)
 		};
 	}
+	else if (algorithm === "spectrum2") {
+		const axial_spread_factor = (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;
+			return 1 - totalReduction;
+		}
+
+		for (let corner in radii) {
+			let spread_factor = Math.min(
+				axial_spread_factor(radii[corner][0], testCase.width),
+				axial_spread_factor(radii[corner][1], testCase.height),
+			);
+			r[corner] = radii[corner].map(radius => {
+				return radius + testCase.spread * spread_factor;
+			});
+		}
+	}
 
 	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`;
 }