feat: Adding alpha functionality to bezier interpolation gka/chroma.j…

…s#228
bluelovers · Jun 17, 2020 · 6656b99 · 6656b99
1 parent 0532186
commit 6656b99
Show file tree

Hide file tree

Showing 6 changed files with 437 additions and 31 deletions.
diff --git a/packages/chroma-js/package.json b/packages/chroma-js/package.json
@@ -34,7 +34,9 @@
     "test": "test"
   },
   "scripts": {
-    "test": "vows --dot-matrix test/**/*.test.js && jest",
+    "test": "yarn run test:vows && yarn run test:jest",
+    "test:jest": "jest",
+    "test:vows": "vows --dot-matrix test/**/*.test.js",
     "prepublishOnly": "yarn run test",
     "prepublishOnly:check-bin": "ynpx --quiet @yarn-tool/check-pkg-bin",
     "prepublishOnly:update": "yarn run ncu && yarn run sort-package-json",

diff --git a/packages/chroma-js/src/generator/bezier.d.ts b/packages/chroma-js/src/generator/bezier.d.ts
@@ -10,5 +10,5 @@ export interface IBezier {
     (t: number): Color;
     scale(): IScale;
 }
-declare const bezier: (colors: string[]) => IBezier;
+declare const bezier: (colors: (string | Color)[]) => IBezier;
 export default bezier;
diff --git a/packages/chroma-js/src/generator/bezier.js b/packages/chroma-js/src/generator/bezier.js
diff --git a/packages/chroma-js/src/generator/bezier.ts b/packages/chroma-js/src/generator/bezier.ts
@@ -23,8 +23,13 @@ const _bezier = function (colors: (Color | string)[]): IBezier
 		[lab0, lab1] = colors.map(c => c.lab());
 		I = function (t)
 		{
-			const lab = ([0, 1, 2].map((i) => lab0[i] + (t * (lab1[i] - lab0[i]))));
-			return new Color(lab, 'lab');
+			const linearInterpolation = (x0, x1) => x0 + (t * (x1 - x0));
+
+			const lab = ([0, 1, 2].map((i) => linearInterpolation(lab0[i], lab1[i])));
+
+			const alpha = linearInterpolation((colors[0] as Color).alpha(), (colors[1] as Color).alpha());
+
+			return new Color(lab, 'lab').alpha(alpha);
 		};
 	}
 	else if (colors.length === 3)
@@ -33,12 +38,13 @@ const _bezier = function (colors: (Color | string)[]): IBezier
 		[lab0, lab1, lab2] = colors.map(c => c.lab());
 		I = function (t)
 		{
-			const lab = ([
-				0,
-				1,
-				2,
-			].map((i) => ((1 - t) * (1 - t) * lab0[i]) + (2 * (1 - t) * t * lab1[i]) + (t * t * lab2[i])));
-			return new Color(lab, 'lab');
+			const quadraticInterpolation = (x0, x1, x2) => ((1 - t) * (1 - t) * x0) + (2 * (1 - t) * t * x1) + (t * t * x2)
+
+			const lab = ([0, 1, 2].map((i) => quadraticInterpolation(lab0[i], lab1[i], lab2[i])));
+
+			const alpha = quadraticInterpolation((colors[0] as Color).alpha(), (colors[1] as Color).alpha(), (colors[2] as Color).alpha());
+
+			return new Color(lab, 'lab').alpha(alpha);
 		};
 	}
 	else if (colors.length === 4)
@@ -48,12 +54,17 @@ const _bezier = function (colors: (Color | string)[]): IBezier
 		[lab0, lab1, lab2, lab3] = colors.map(c => c.lab());
 		I = function (t)
 		{
-			const lab = ([
-				0,
-				1,
-				2,
-			].map((i) => ((1 - t) * (1 - t) * (1 - t) * lab0[i]) + (3 * (1 - t) * (1 - t) * t * lab1[i]) + (3 * (1 - t) * t * t * lab2[i]) + (t * t * t * lab3[i])));
-			return new Color(lab, 'lab');
+			const cubicInterpolation = (x0,
+				x1,
+				x2,
+				x3,
+			) => ((1 - t) * (1 - t) * (1 - t) * x0) + (3 * (1 - t) * (1 - t) * t * x1) + (3 * (1 - t) * t * t * x2) + (t * t * t * x3);
+
+			const lab = ([0, 1, 2].map((i) => cubicInterpolation(lab0[i], lab1[i], lab2[i], lab3[i])));
+
+			const alpha = cubicInterpolation((colors[0] as Color).alpha(), (colors[1] as Color).alpha(), (colors[2] as Color).alpha(), (colors[3] as Color).alpha());
+
+			return new Color(lab, 'lab').alpha(alpha);
 		};
 	}
 	else if (colors.length === 5)
@@ -86,10 +97,11 @@ declare module '../chroma'
 export interface IBezier
 {
 	(t: number): Color,
+
 	scale(): IScale
 }
 
-const bezier = (colors: string[]): IBezier =>
+const bezier = (colors: (string | Color)[]): IBezier =>
 {
 	const f = _bezier(colors);
 	f.scale = () => scale(f as any);

diff --git a/packages/chroma-js/test/__snapshots__/bezier.spec.ts.snap b/packages/chroma-js/test/__snapshots__/bezier.spec.ts.snap
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`five color diverging quadratic bezier interpolation 1st quarter 1`] = `
+Color {
+  "_rgb": Array [
+    233.19030009653343,
+    149.48568936490597,
+    77.70818925383125,
+    0.75,
+  ],
+}
+`;
+
+exports[`five color diverging quadratic bezier interpolation 3rd quarter 1`] = `
+Color {
+  "_rgb": Array [
+    165.95197295723432,
+    206.80328083106684,
+    193.23203906355687,
+    0.25,
+  ],
+}
+`;
+
+exports[`five color diverging quadratic bezier interpolation center is snow 1`] = `
+Color {
+  "_rgb": Array [
+    254.9999889601456,
+    250.0000173961273,
+    249.99999732944465,
+    0.5,
+  ],
+}
+`;
+
+exports[`five color diverging quadratic bezier interpolation ends in transparent royalblue 1`] = `
+Color {
+  "_rgb": Array [
+    65.00002095351515,
+    104.99999975559058,
+    225.00000209416496,
+    0,
+  ],
+}
+`;
+
+exports[`five color diverging quadratic bezier interpolation starts from darkred 1`] = `
+Color {
+  "_rgb": Array [
+    138.9999882021398,
+    0.00011212162605855155,
+    0,
+    1,
+  ],
+}
+`;
+
+exports[`four color cubic bezier interpolation 1st quarter 1`] = `
+Color {
+  "_rgb": Array [
+    255,
+    224.03899248147033,
+    132.81503252512528,
+    0.65625,
+  ],
+}
+`;
+
+exports[`four color cubic bezier interpolation 3rd quarter 1`] = `
+Color {
+  "_rgb": Array [
+    144.87099553702365,
+    65.651166141413,
+    18.759023083692984,
+    0.34375,
+  ],
+}
+`;
+
+exports[`four color cubic bezier interpolation center 1`] = `
+Color {
+  "_rgb": Array [
+    230.1559171578932,
+    150.8554374112126,
+    52.84422558429743,
+    0.5,
+  ],
+}
+`;
+
+exports[`four color cubic bezier interpolation ends in transparent black 1`] = `
+Color {
+  "_rgb": Array [
+    2.0424926888958734e-7,
+    2.042492495365618e-7,
+    2.0424925616526716e-7,
+    0,
+  ],
+}
+`;
+
+exports[`four color cubic bezier interpolation starts from white 1`] = `
+Color {
+  "_rgb": Array [
+    254.99998940693285,
+    255,
+    254.99999736707582,
+    1,
+  ],
+}
+`;
+
+exports[`simple two color linear interpolation center is transluscent grey 1`] = `
+Color {
+  "_rgb": Array [
+    118.91328116479764,
+    118.91329253054577,
+    118.9132842032307,
+    0.5,
+  ],
+}
+`;
+
+exports[`simple two color linear interpolation ends in transparent black 1`] = `
+Color {
+  "_rgb": Array [
+    2.0424926888958734e-7,
+    2.042492495365618e-7,
+    2.0424925616526716e-7,
+    0,
+  ],
+}
+`;
+
+exports[`simple two color linear interpolation starts from white 1`] = `
+Color {
+  "_rgb": Array [
+    254.99998940693285,
+    255,
+    254.99999736707582,
+    1,
+  ],
+}
+`;
+
+exports[`three color quadratic bezier interpolation center is a transluscent greyish red 1`] = `
+Color {
+  "_rgb": Array [
+    196.38575706795183,
+    91.71313890151566,
+    67.65992964943767,
+    0.5,
+  ],
+}
+`;
+
+exports[`three color quadratic bezier interpolation ends in transparent black 1`] = `
+Color {
+  "_rgb": Array [
+    2.0424926888958734e-7,
+    2.042492495365618e-7,
+    2.0424925616526716e-7,
+    0,
+  ],
+}
+`;
+
+exports[`three color quadratic bezier interpolation starts from white 1`] = `
+Color {
+  "_rgb": Array [
+    254.99998940693285,
+    255,
+    254.99999736707582,
+    1,
+  ],
+}
+`;