[apps/gamut-mapping] Clean up code

apps/gamut-mapping/methods.js

@@ -15,27 +15,29 @@ const methods = {
 		compute: (color) => {
 			let mappedColor = methods.scale.compute(color);
 			let lch = color.to("oklch").coords;
-			mappedColor.set("oklch.h", lch[2]);
-			mappedColor.set("oklch.l", lch[0]);
+			mappedColor.set({
+				"oklch.l": lch[0],
+				"oklch.h": lch[2]
+			});
 			return methods.scale.compute(mappedColor);
 		}
 	},
 	"scale": {
 		label: "Scale",
 		description: "Using a midpoint of 0.5, scale the color to fit within the linear P3 gamut.",
 		compute: (color) => {
-			let p3Linear = color.to("p3-linear");
-			let deltas = p3Linear.coords.map(c => c - .5); /* in-gamut range is now -.5 to .5 */
-			let distances = deltas.map(c => Math.abs(c));
-			let max = Math.max(...distances);
-			let factor = max / .5;
+			// Make in gamut range symmetrical around 0 [-0.5, 0.5] instead of [0, 1]
+			let deltas = color.to("p3-linear").coords.map(c => c - .5);
+
+			let maxDistance = Math.max(...deltas.map(c => Math.abs(c)));
+			let scalingFactor = maxDistance / .5;
 
-			let mapped = deltas.map((delta, i) => {
-				let scaled = delta / factor;
+			let scaledCoords = deltas.map((delta, i) => {
+				let scaled = delta / scalingFactor;
 				return scaled + .5
 			});
 
-			return new Color("p3-linear", mapped).to("p3");
+			return new Color("p3-linear", scaledCoords).to("p3");
 		}
 	},
 	// "scale125": {

apps/gamut-mapping/style.css

@@ -16,6 +16,7 @@ body > header {
 	h1 {
 		font-size: calc(200% + 2vh + 2vw);
 		margin-bottom: 0;
+		line-height: 1.1;
 	}
 }