Skip to content

Commit 6656b99

Browse files
blueloversbluelovers
committed
feat: Adding alpha functionality to bezier interpolation gka/chroma.js#228 
1 parent 0532186 commit 6656b99

File tree

6 files changed

+437
-31
lines changed

6 files changed

+437
-31
lines changed

‎packages/chroma-js/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@
3434
"test": "test"
3535
},
3636
"scripts": {
37-
"test": "vows --dot-matrix test/**/*.test.js && jest",
37+
"test": "yarn run test:vows && yarn run test:jest",
38+
"test:jest": "jest",
39+
"test:vows": "vows --dot-matrix test/**/*.test.js",
3840
"prepublishOnly": "yarn run test",
3941
"prepublishOnly:check-bin": "ynpx --quiet @yarn-tool/check-pkg-bin",
4042
"prepublishOnly:update": "yarn run ncu && yarn run sort-package-json",

‎packages/chroma-js/src/generator/bezier.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ export interface IBezier {
1010
(t: number): Color;
1111
scale(): IScale;
1212
}
13-
declare const bezier: (colors: string[]) => IBezier;
13+
declare const bezier: (colors: (string | Color)[]) => IBezier;
1414
export default bezier;

‎packages/chroma-js/src/generator/bezier.js‎

Lines changed: 12 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/chroma-js/src/generator/bezier.ts‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,13 @@ const _bezier = function (colors: (Color | string)[]): IBezier
2323
[lab0, lab1] = colors.map(c => c.lab());
2424
I = function (t)
2525
{
26-
const lab = ([0, 1, 2].map((i) => lab0[i] + (t * (lab1[i] - lab0[i]))));
27-
return new Color(lab, 'lab');
26+
const linearInterpolation = (x0, x1) => x0 + (t * (x1 - x0));
27+
28+
const lab = ([0, 1, 2].map((i) => linearInterpolation(lab0[i], lab1[i])));
29+
30+
const alpha = linearInterpolation((colors[0] as Color).alpha(), (colors[1] as Color).alpha());
31+
32+
return new Color(lab, 'lab').alpha(alpha);
2833
};
2934
}
3035
else if (colors.length === 3)
@@ -33,12 +38,13 @@ const _bezier = function (colors: (Color | string)[]): IBezier
3338
[lab0, lab1, lab2] = colors.map(c => c.lab());
3439
I = function (t)
3540
{
36-
const lab = ([
37-
0,
38-
1,
39-
2,
40-
].map((i) => ((1 - t) * (1 - t) * lab0[i]) + (2 * (1 - t) * t * lab1[i]) + (t * t * lab2[i])));
41-
return new Color(lab, 'lab');
41+
const quadraticInterpolation = (x0, x1, x2) => ((1 - t) * (1 - t) * x0) + (2 * (1 - t) * t * x1) + (t * t * x2)
42+
43+
const lab = ([0, 1, 2].map((i) => quadraticInterpolation(lab0[i], lab1[i], lab2[i])));
44+
45+
const alpha = quadraticInterpolation((colors[0] as Color).alpha(), (colors[1] as Color).alpha(), (colors[2] as Color).alpha());
46+
47+
return new Color(lab, 'lab').alpha(alpha);
4248
};
4349
}
4450
else if (colors.length === 4)
@@ -48,12 +54,17 @@ const _bezier = function (colors: (Color | string)[]): IBezier
4854
[lab0, lab1, lab2, lab3] = colors.map(c => c.lab());
4955
I = function (t)
5056
{
51-
const lab = ([
52-
0,
53-
1,
54-
2,
55-
].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])));
56-
return new Color(lab, 'lab');
57+
const cubicInterpolation = (x0,
58+
x1,
59+
x2,
60+
x3,
61+
) => ((1 - t) * (1 - t) * (1 - t) * x0) + (3 * (1 - t) * (1 - t) * t * x1) + (3 * (1 - t) * t * t * x2) + (t * t * t * x3);
62+
63+
const lab = ([0, 1, 2].map((i) => cubicInterpolation(lab0[i], lab1[i], lab2[i], lab3[i])));
64+
65+
const alpha = cubicInterpolation((colors[0] as Color).alpha(), (colors[1] as Color).alpha(), (colors[2] as Color).alpha(), (colors[3] as Color).alpha());
66+
67+
return new Color(lab, 'lab').alpha(alpha);
5768
};
5869
}
5970
else if (colors.length === 5)
@@ -86,10 +97,11 @@ declare module '../chroma'
8697
export interface IBezier
8798
{
8899
(t: number): Color,
100+
89101
scale(): IScale
90102
}
91103

92-
const bezier = (colors: string[]): IBezier =>
104+
const bezier = (colors: (string | Color)[]): IBezier =>
93105
{
94106
const f = _bezier(colors);
95107
f.scale = () => scale(f as any);

‎packages/chroma-js/test/__snapshots__/bezier.spec.ts.snap‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`five color diverging quadratic bezier interpolation 1st quarter 1`] = `
4+
Color {
5+
"_rgb": Array [
6+
233.19030009653343,
7+
149.48568936490597,
8+
77.70818925383125,
9+
0.75,
10+
],
11+
}
12+
`;
13+
14+
exports[`five color diverging quadratic bezier interpolation 3rd quarter 1`] = `
15+
Color {
16+
"_rgb": Array [
17+
165.95197295723432,
18+
206.80328083106684,
19+
193.23203906355687,
20+
0.25,
21+
],
22+
}
23+
`;
24+
25+
exports[`five color diverging quadratic bezier interpolation center is snow 1`] = `
26+
Color {
27+
"_rgb": Array [
28+
254.9999889601456,
29+
250.0000173961273,
30+
249.99999732944465,
31+
0.5,
32+
],
33+
}
34+
`;
35+
36+
exports[`five color diverging quadratic bezier interpolation ends in transparent royalblue 1`] = `
37+
Color {
38+
"_rgb": Array [
39+
65.00002095351515,
40+
104.99999975559058,
41+
225.00000209416496,
42+
0,
43+
],
44+
}
45+
`;
46+
47+
exports[`five color diverging quadratic bezier interpolation starts from darkred 1`] = `
48+
Color {
49+
"_rgb": Array [
50+
138.9999882021398,
51+
0.00011212162605855155,
52+
0,
53+
1,
54+
],
55+
}
56+
`;
57+
58+
exports[`four color cubic bezier interpolation 1st quarter 1`] = `
59+
Color {
60+
"_rgb": Array [
61+
255,
62+
224.03899248147033,
63+
132.81503252512528,
64+
0.65625,
65+
],
66+
}
67+
`;
68+
69+
exports[`four color cubic bezier interpolation 3rd quarter 1`] = `
70+
Color {
71+
"_rgb": Array [
72+
144.87099553702365,
73+
65.651166141413,
74+
18.759023083692984,
75+
0.34375,
76+
],
77+
}
78+
`;
79+
80+
exports[`four color cubic bezier interpolation center 1`] = `
81+
Color {
82+
"_rgb": Array [
83+
230.1559171578932,
84+
150.8554374112126,
85+
52.84422558429743,
86+
0.5,
87+
],
88+
}
89+
`;
90+
91+
exports[`four color cubic bezier interpolation ends in transparent black 1`] = `
92+
Color {
93+
"_rgb": Array [
94+
2.0424926888958734e-7,
95+
2.042492495365618e-7,
96+
2.0424925616526716e-7,
97+
0,
98+
],
99+
}
100+
`;
101+
102+
exports[`four color cubic bezier interpolation starts from white 1`] = `
103+
Color {
104+
"_rgb": Array [
105+
254.99998940693285,
106+
255,
107+
254.99999736707582,
108+
1,
109+
],
110+
}
111+
`;
112+
113+
exports[`simple two color linear interpolation center is transluscent grey 1`] = `
114+
Color {
115+
"_rgb": Array [
116+
118.91328116479764,
117+
118.91329253054577,
118+
118.9132842032307,
119+
0.5,
120+
],
121+
}
122+
`;
123+
124+
exports[`simple two color linear interpolation ends in transparent black 1`] = `
125+
Color {
126+
"_rgb": Array [
127+
2.0424926888958734e-7,
128+
2.042492495365618e-7,
129+
2.0424925616526716e-7,
130+
0,
131+
],
132+
}
133+
`;
134+
135+
exports[`simple two color linear interpolation starts from white 1`] = `
136+
Color {
137+
"_rgb": Array [
138+
254.99998940693285,
139+
255,
140+
254.99999736707582,
141+
1,
142+
],
143+
}
144+
`;
145+
146+
exports[`three color quadratic bezier interpolation center is a transluscent greyish red 1`] = `
147+
Color {
148+
"_rgb": Array [
149+
196.38575706795183,
150+
91.71313890151566,
151+
67.65992964943767,
152+
0.5,
153+
],
154+
}
155+
`;
156+
157+
exports[`three color quadratic bezier interpolation ends in transparent black 1`] = `
158+
Color {
159+
"_rgb": Array [
160+
2.0424926888958734e-7,
161+
2.042492495365618e-7,
162+
2.0424925616526716e-7,
163+
0,
164+
],
165+
}
166+
`;
167+
168+
exports[`three color quadratic bezier interpolation starts from white 1`] = `
169+
Color {
170+
"_rgb": Array [
171+
254.99998940693285,
172+
255,
173+
254.99999736707582,
174+
1,
175+
],
176+
}
177+
`;

0 commit comments

Comments
 (0)