[css-color-4] Remove math.js dependency from color conversion functions, add tests

Author: LeaVerou

css-color-4/conversions.js

@@ -1,6 +1,6 @@
 // Sample code for color conversions
 // Conversion can also be done using ICC profiles and a Color Management System
-// For clarity, a library is used for matrix manipulations
+// For clarity, a library is used for matrix multiplication (multiply-matrices.js)
 
 // sRGB-related functions
 
@@ -36,24 +36,24 @@ function lin_sRGB_to_XYZ(rgb) {
 	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
 	// also
 	// https://www.image-engineering.de/library/technotes/958-how-to-convert-between-srgb-and-ciexyz
-	var M = math.matrix([
+	var M = [
 		[0.4124564,  0.3575761,  0.1804375],
 		[0.2126729,  0.7151522,  0.0721750],
 		[0.0193339,  0.1191920,  0.9503041]
-	]);
+	];
 
-	return math.multiply(M, rgb).valueOf();
+	return multiplyMatrices(M, rgb);
 }
 
 function XYZ_to_lin_sRGB(XYZ) {
 	// convert XYZ to linear-light sRGB
-	var M = math.matrix([
+	var M = [
 		[ 3.2404542, -1.5371385, -0.4985314],
 		[-0.9692660,  1.8760108,  0.0415560],
 		[ 0.0556434, -0.2040259,  1.0572252]
-	]);
+	];
 
-	return math.multiply(M, XYZ).valueOf();
+	return multiplyMatrices(M, XYZ);
 }
 
 //  image-p3-related functions
@@ -77,25 +77,25 @@ function lin_P3_to_XYZ(rgb) {
 	// convert an array of linear-light display-p3 values to CIE XYZ
 	// using  D65 (no chromatic adaptation)
 	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
-	var M = math.matrix([
+	var M = [
 		[0.4865709486482162, 0.26566769316909306, 0.1982172852343625],
 		[0.2289745640697488, 0.6917385218365064,  0.079286914093745],
 		[0.0000000000000000, 0.04511338185890264, 1.043944368900976]
-	]);
+	];
 	// 0 was computed as -3.972075516933488e-17
 
-	return math.multiply(M, rgb).valueOf();
+	return multiplyMatrices(M, rgb);
 }
 
 function XYZ_to_lin_P3(XYZ) {
 	// convert XYZ to linear-light P3
-	var M = math.matrix([
+	var M = [
 		[ 2.493496911941425,   -0.9313836179191239, -0.40271078445071684],
 		[-0.8294889695615747,   1.7626640603183463,  0.023624685841943577],
 		[ 0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
-	]);
+	];
 
-	return math.multiply(M, XYZ).valueOf();
+	return multiplyMatrices(M, XYZ);
 }
 
 // prophoto-rgb functions
@@ -130,24 +130,24 @@ function lin_ProPhoto_to_XYZ(rgb) {
 	// convert an array of linear-light prophoto-rgb values to CIE XYZ
 	// using  D50 (so no chromatic adaptation needed afterwards)
 	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
-	var M = math.matrix([
-	[ 0.7977604896723027,  0.13518583717574031,  0.0313493495815248     ],
-	[ 0.2880711282292934,  0.7118432178101014,   0.00008565396060525902 ],
-	[ 0.0,                 0.0,                  0.8251046025104601     ]
-	]);
+	var M = [
+		[ 0.7977604896723027,  0.13518583717574031,  0.0313493495815248     ],
+		[ 0.2880711282292934,  0.7118432178101014,   0.00008565396060525902 ],
+		[ 0.0,                 0.0,                  0.8251046025104601     ]
+	];
 
-	return math.multiply(M, rgb).valueOf();
+	return multiplyMatrices(M, rgb);
 }
 
 function XYZ_to_lin_ProPhoto(XYZ) {
 	// convert XYZ to linear-light prophoto-rgb
-	var M = math.matrix([
-  	[  1.3457989731028281,  -0.25558010007997534,  -0.05110628506753401 ],
-  	[ -0.5446224939028347,   1.5082327413132781,    0.02053603239147973 ],
-  	[  0.0,                  0.0,                   1.2119675456389454  ]
-	]);
+	var M = [
+	  	[  1.3457989731028281,  -0.25558010007997534,  -0.05110628506753401 ],
+	  	[ -0.5446224939028347,   1.5082327413132781,    0.02053603239147973 ],
+	  	[  0.0,                  0.0,                   1.2119675456389454  ]
+	];
 
-	return math.multiply(M, XYZ).valueOf();
+	return multiplyMatrices(M, XYZ);
 }
 
 // a98-rgb functions
@@ -176,24 +176,24 @@ function lin_a98rgb_to_XYZ(rgb) {
 	// but the vaues below were calculated from first principles
 	// from the chromaticity coordinates of R G B W
 	// see matrixmaker.html
-	var M = math.matrix([
-	[ 0.5766690429101305,   0.1855582379065463,   0.1882286462349947  ],
-	[ 0.29734497525053605,  0.6273635662554661,   0.07529145849399788 ],
-	[ 0.02703136138641234,  0.07068885253582723,  0.9913375368376388  ]
-	]);
+	var M = [
+		[ 0.5766690429101305,   0.1855582379065463,   0.1882286462349947  ],
+		[ 0.29734497525053605,  0.6273635662554661,   0.07529145849399788 ],
+		[ 0.02703136138641234,  0.07068885253582723,  0.9913375368376388  ]
+	];
 
-	return math.multiply(M, rgb).valueOf();
+	return multiplyMatrices(M, rgb);
 }
 
 function XYZ_to_lin_a98rgb(XYZ) {
 	// convert XYZ to linear-light a98-rgb
-	var M = math.matrix([
-	[  2.0415879038107465,    -0.5650069742788596,   -0.34473135077832956 ],
-	[ -0.9692436362808795,     1.8759675015077202,    0.04155505740717557 ],
-	[  0.013444280632031142,  -0.11836239223101838,   1.0151749943912054  ]
-	]);
+	var M = [
+		[  2.0415879038107465,    -0.5650069742788596,   -0.34473135077832956 ],
+		[ -0.9692436362808795,     1.8759675015077202,    0.04155505740717557 ],
+		[  0.013444280632031142,  -0.11836239223101838,   1.0151749943912054  ]
+	];
 
-	return math.multiply(M, XYZ).valueOf();
+	return multiplyMatrices(M, XYZ);
 }
 
 //Rec. 2020-related functions
@@ -233,25 +233,25 @@ function lin_2020_to_XYZ(rgb) {
 	// convert an array of linear-light rec2020 values to CIE XYZ
 	// using  D65 (no chromatic adaptation)
 	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
-	var M = math.matrix([
+	var M = [
 		[0.6369580483012914, 0.14461690358620832,  0.1688809751641721],
 		[0.2627002120112671, 0.6779980715188708,   0.05930171646986196],
 		[0.000000000000000,  0.028072693049087428, 1.060985057710791]
-	]);
+	];
 	// 0 is actually calculated as  4.994106574466076e-17
 
-	return math.multiply(M, rgb).valueOf();
+	return multiplyMatrices(M, rgb);
 }
 
 function XYZ_to_lin_2020(XYZ) {
 	// convert XYZ to linear-light rec2020
-	var M = math.matrix([
+	var M = [
 		[1.7166511879712674,   -0.35567078377639233, -0.25336628137365974],
 		[-0.6666843518324892,   1.6164812366349395,   0.01576854581391113],
 		[0.017639857445310783, -0.042770613257808524, 0.9421031212354738]
-	]);
+	];
 
-	return math.multiply(M, XYZ).valueOf();
+	return multiplyMatrices(M, XYZ);
 }
 
 // Chromatic adaptation
@@ -263,24 +263,24 @@ function D65_to_D50(XYZ) {
 	// - scale components from one reference white to another
 	// - convert back to XYZ
 	// http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html
-	var M = math.matrix([
+	var M = [
 		[ 1.0478112,  0.0228866, -0.0501270],
 		[ 0.0295424,  0.9904844, -0.0170491],
 		[-0.0092345,  0.0150436,  0.7521316]
-	 ]);
+	 ];
 
-	return math.multiply(M, XYZ).valueOf();
+	return multiplyMatrices(M, XYZ);
 }
 
 function D50_to_D65(XYZ) {
 	// Bradford chromatic adaptation from D50 to D65
-	var M = math.matrix([
+	var M = [
 		[ 0.9555766, -0.0230393,  0.0631636],
 		[-0.0282895,  1.0099416,  0.0210077],
 		[ 0.0122982, -0.0204830,  1.3299098]
-	 ]);
+	 ];
 
-	return math.multiply(M, XYZ).valueOf();
+	return multiplyMatrices(M, XYZ);
 }
 
 // Lab and LCH
@@ -347,5 +347,3 @@ function LCH_to_Lab(LCH) {
 		LCH[1] * Math.sin(LCH[2] * Math.PI / 180) // b
 	];
 }
-
-

css-color-4/multiply-matrices.js

@@ -0,0 +1,39 @@
+/**
+ * Simple matrix (and vector) multiplication
+ * Warning: No error handling for incompatible dimensions!
+ * @author Lea Verou 2020 MIT License
+ */
+// A is m x n. B is n x p. product is m x p.
+function multiplyMatrices(A, B) {
+	let m = A.length;
+
+	if (!Array.isArray(A[0])) {
+		// A is vector, convert to [[a, b, c, ...]]
+		A = [A];
+	}
+
+	if (!Array.isArray(B[0])) {
+		// B is vector, convert to [[a], [b], [c], ...]]
+		B = B.map(x => [x]);
+	}
+
+	let p = B[0].length;
+	let B_cols = B[0].map((_, i) => B.map(x => x[i])); // transpose B
+	let product = A.map(row => B_cols.map(col => {
+		if (!Array.isArray(row)) {
+			return col.reduce((a, c) => a + c * row, 0);
+		}
+
+		return row.reduce((a, c, i) => a + c * (col[i] || 0), 0);
+	}));
+
+	if (m === 1) {
+		product = product[0]; // Avoid [[a, b, c, ...]]
+	}
+
+	if (p === 1) {
+		return product.map(x => x[0]); // Avoid [[a], [b], [c], ...]]
+	}
+
+	return product;
+}

css-color-4/tests.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="UTF-8">
+<title>Color Conversion Tests</title>
+<link rel="stylesheet" href="https://test.mavo.io/style.css" />
+<style>
+.matrix {
+	white-space: pre;
+	font-family: Consolas, Monaco, monospace;
+}
+</style>
+<script src="https://blissfuljs.com/bliss.shy.js"></script>
+<script src="https://test.mavo.io/test.js"></script>
+
+<!-- <script src="math.js"></script> -->
+<script src="conversions.js"></script>
+<script src="utilities.js"></script>
+<script src="multiply-matrices.js"></script>
+<script src="tests.js"></script>
+<script>
+function reftest(title, conversion, args, result) {
+	let ref, test;
+
+	try {
+		ref = `<pre>${conversion(...args)}</pre>`;
+	}
+	catch (e) {
+		ref = e;
+		throw e;
+	}
+
+	document.currentScript.after(
+		$.create("tr", {
+			title,
+			contents: [
+				{tag: "td", innerHTML: ref },
+				{tag: "td", innerHTML: `<pre>${result}</pre>`}
+			]
+		})
+	);
+}
+</script>
+
+</head>
+<body>
+
+<h1>Color Conversion Tests</h1>
+
+<section>
+	<h1>sRGB_to_LCH</h1>
+	<table class="reftest">
+		<tbody>
+			<script>
+
+
+				for (let test of tests) {
+					reftest(`sRGB ${test.RGB} to LCH`, sRGB_to_LCH, [test.RGB], test.LCH);
+					reftest(`sRGB ${test.RGB} to XYZ`, a => lin_sRGB_to_XYZ(lin_sRGB(a)), [test.RGB], test.XYZ);
+					reftest(`P3 ${test.RGB} to LCH`, P3_to_LCH, [test.RGB], test.P3_to_LCH);
+					reftest(`P3 ${test.RGB} to XYZ`, a => lin_P3_to_XYZ(lin_P3(a)), [test.RGB], test.P3_to_XYZ);
+				}
+			</script>
+			<!-- <script>
+				reftest("sRGB 0,0,0 to LCH", sRGB_to_LCH, [[0, 0, 0]], [0, 0, 0])
+			</script> -->
+		</tbody>
+
+
+	</table>
+</section>
+
+
+</body>
+</html>