checking conversion matrices

Author: svgeesus

css-color-4/LCH-examples.html

@@ -30,6 +30,7 @@
     };
 
     console.log("image-p3");
+    P3results.value += `image-p3
 
     // I am a bad person
 

css-color-4/conversions.js

@@ -34,6 +34,8 @@ function lin_sRGB_to_XYZ(rgb) {
 	// convert an array of linear-light sRGB values to CIE XYZ
 	// using sRGB's own white, D65 (no chromatic adaptation)
 	// 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([
 		[0.4124564,  0.3575761,  0.1804375],
 		[0.2126729,  0.7151522,  0.0721750],
@@ -54,7 +56,7 @@ function XYZ_to_lin_sRGB(XYZ) {
 	return math.multiply(M, XYZ).valueOf();
 }
 
-//  display-p3-related functions
+//  image-p3-related functions
 
 
 function lin_P3(RGB) {
@@ -168,10 +170,12 @@ function gam_a98rgb(RGB) {
 
 function lin_a98rgb_to_XYZ(rgb) {
 	// convert an array of linear-light a98-rgb values to CIE XYZ
-	// using  D50 (so no chromatic adaptation needed afterwards)
 	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
-	// which has greater numerical precsion than section 4.3.5.3 of
+	// has greater numerical precsion than section 4.3.5.3 of
 	// https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf
+	// 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 ],

css-color-4/images/P3-prim-sec.svg

@@ -22,8 +22,17 @@
 		// const xblue=0.131 ;
 		// const yblue=0.046 ;
 
+		// these are for sRGB
+		const xred=0.640 ;
+		const yred=0.330 ;
+
+		const xgreen=0.300 ;
+		const ygreen=0.600 ;
+
+		const xblue=0.150 ;
+		const yblue=0.060 ;
 
-		// these are for DCI P3
+		// these are for image-p3
 		// const xred=0.680 ;
 		// const yred=0.320 ;
 
@@ -45,14 +54,14 @@
 
 		// AdobeRGB, for testing
 
-		const xred=0.640 ;
-		const yred=0.330 ;
+		// const xred=0.640 ;
+		// const yred=0.330 ;
 
-		const xgreen=0.210 ;
-		const ygreen=0.710 ;
+		// const xgreen=0.210 ;
+		// const ygreen=0.710 ;
 
-		const xblue=0.150 ;
-		const yblue=0.060 ;
+		// const xblue=0.150 ;
+		// const yblue=0.060 ;
 
 
 		// D65
@@ -65,6 +74,7 @@
 
 
 		// Relative XYZ values. Copy-paste-o-rama
+		// method from http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
 		var XWhite=xwhite/ywhite;
 		var YWhite=1;
 		var ZWhite=(1 - xwhite - ywhite)/ywhite;
@@ -82,20 +92,22 @@
 		var ZBlue=(1 - xblue - yblue)/yblue;
 
 		var white = math.matrix([XWhite, YWhite, ZWhite]);
+		console.log("White X Y Z")
 		console.log(white.valueOf());
 		var primaries = math.matrix([
 			[XRed, XGreen, XBlue],
 			[YRed, YGreen, YBlue],
 			[ZRed, ZGreen, ZBlue]
 		]);
+		console.log("Primaries X Y Z")
 		console.log(primaries.valueOf());
 
 		var iprimaries = math.inv(primaries);
 		console.log(iprimaries.valueOf());
 
 		// S is easier if it ends up as an array than a matrix
 		// but we use matrix math to calculate it
-		var S = math.multiply(math.inv(primaries),white).valueOf();
+		var S = math.multiply(iprimaries,white).valueOf();
 
 		var M = [
 			[S[0] * XRed, S[1] * XGreen, S[2] * XBlue],