palette-shader 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -41
- package/dist/palette-shader.d.ts +2 -5
- package/dist/palette-shader.js +156 -320
- package/dist/palette-shader.js.map +1 -1
- package/dist/palette-shader.umd.cjs +29 -217
- package/dist/palette-shader.umd.cjs.map +1 -1
- package/package.json +16 -3
- package/src/index.ts +125 -65
- package/src/types.ts +19 -7
package/README.md
CHANGED
|
@@ -56,19 +56,19 @@ new PaletteViz(options?: PaletteVizOptions)
|
|
|
56
56
|
|
|
57
57
|
All options are optional. The palette defaults to a random 20-colour set.
|
|
58
58
|
|
|
59
|
-
| Option
|
|
60
|
-
|
|
61
|
-
| `palette`
|
|
62
|
-
| `container`
|
|
63
|
-
| `width`
|
|
64
|
-
| `height`
|
|
65
|
-
| `pixelRatio`
|
|
66
|
-
| `colorModel`
|
|
67
|
-
| `distanceMetric`
|
|
68
|
-
| `axis`
|
|
69
|
-
| `position`
|
|
70
|
-
| `invertLightness` | `boolean`
|
|
71
|
-
| `showRaw`
|
|
59
|
+
| Option | Type | Default | Description |
|
|
60
|
+
| ----------------- | ------------------- | ------------------ | ----------------------------------------------------------------------------------------- |
|
|
61
|
+
| `palette` | `string[]` | random | CSS colour strings (`#hex`, `rgb()`, `hsl()`, …) |
|
|
62
|
+
| `container` | `HTMLElement` | `undefined` | Element the canvas is appended to. Omit and use `viz.canvas` to place it yourself |
|
|
63
|
+
| `width` | `number` | `512` | Canvas width in CSS pixels |
|
|
64
|
+
| `height` | `number` | `512` | Canvas height in CSS pixels |
|
|
65
|
+
| `pixelRatio` | `number` | `devicePixelRatio` | Renderer pixel ratio |
|
|
66
|
+
| `colorModel` | `string` | `'okhsv'` | Colour space for the visualisation (see [Colour models](#colour-models)) |
|
|
67
|
+
| `distanceMetric` | `string` | `'oklab'` | Distance function for nearest-colour matching (see [Distance metrics](#distance-metrics)) |
|
|
68
|
+
| `axis` | `'x' \| 'y' \| 'z'` | `'y'` | Which axis the `position` value controls |
|
|
69
|
+
| `position` | `number` | `0` | 0–1 position along the chosen axis |
|
|
70
|
+
| `invertLightness` | `boolean` | `false` | Flip the lightness/value axis |
|
|
71
|
+
| `showRaw` | `boolean` | `false` | Bypass nearest-colour matching (shows the raw colour space) |
|
|
72
72
|
|
|
73
73
|
---
|
|
74
74
|
|
|
@@ -87,11 +87,11 @@ viz.showRaw = true;
|
|
|
87
87
|
|
|
88
88
|
Additional read-only properties:
|
|
89
89
|
|
|
90
|
-
| Property | Type
|
|
91
|
-
|
|
90
|
+
| Property | Type | Description |
|
|
91
|
+
| -------- | ------------------- | ----------------------------- |
|
|
92
92
|
| `canvas` | `HTMLCanvasElement` | The underlying canvas element |
|
|
93
|
-
| `width`
|
|
94
|
-
| `height` | `number`
|
|
93
|
+
| `width` | `number` | Current width in CSS pixels |
|
|
94
|
+
| `height` | `number` | Current height in CSS pixels |
|
|
95
95
|
|
|
96
96
|
---
|
|
97
97
|
|
|
@@ -118,8 +118,8 @@ viz.setColor('#e63946', 2);
|
|
|
118
118
|
Insert a colour at `index` (appends if omitted).
|
|
119
119
|
|
|
120
120
|
```js
|
|
121
|
-
viz.addColor('#a8dadc');
|
|
122
|
-
viz.addColor('#457b9d', 0);
|
|
121
|
+
viz.addColor('#a8dadc'); // append
|
|
122
|
+
viz.addColor('#457b9d', 0); // prepend
|
|
123
123
|
```
|
|
124
124
|
|
|
125
125
|
### `removeColor(index | color)`
|
|
@@ -141,20 +141,20 @@ Cancel the animation frame, release all WebGL resources (program, texture, buffe
|
|
|
141
141
|
|
|
142
142
|
Controls the 3-D colour space the visualisation is rendered in. Polar variants (`*Polar`) map hue to angle and show a circular wheel; non-polar variants show a rectangular slice.
|
|
143
143
|
|
|
144
|
-
| Value
|
|
145
|
-
|
|
146
|
-
| `'okhsv'`
|
|
147
|
-
| `'okhsvPolar'` | wheel | Polar (cylindrical) form of OKHsv.
|
|
148
|
-
| `'okhsl'`
|
|
149
|
-
| `'okhslPolar'` | wheel | Polar form of OKHsl.
|
|
150
|
-
| `'oklch'`
|
|
151
|
-
| `'oklchPolar'` | wheel | Polar form of OKLch.
|
|
152
|
-
| `'hsv'`
|
|
153
|
-
| `'hsvPolar'`
|
|
154
|
-
| `'hsl'`
|
|
155
|
-
| `'hslPolar'`
|
|
156
|
-
| `'oklab'`
|
|
157
|
-
| `'rgb'`
|
|
144
|
+
| Value | Shape | Description |
|
|
145
|
+
| -------------- | ----- | --------------------------------------------------------------------------------------------------------- |
|
|
146
|
+
| `'okhsv'` | cube | **Default.** Hue–Saturation–Value built on OKLab. Gamut-aware with perceptually uniform saturation steps. |
|
|
147
|
+
| `'okhsvPolar'` | wheel | Polar (cylindrical) form of OKHsv. |
|
|
148
|
+
| `'okhsl'` | cube | Hue–Saturation–Lightness built on OKLab. Better lightness uniformity across hues. |
|
|
149
|
+
| `'okhslPolar'` | wheel | Polar form of OKHsl. |
|
|
150
|
+
| `'oklch'` | cube | OKLab in cylindrical coordinates (L, C, h). Ideal for chroma or lightness slices. |
|
|
151
|
+
| `'oklchPolar'` | wheel | Polar form of OKLch. |
|
|
152
|
+
| `'hsv'` | cube | Classic HSV. Not perceptually uniform, but familiar and fast. |
|
|
153
|
+
| `'hsvPolar'` | wheel | Polar form of HSV. |
|
|
154
|
+
| `'hsl'` | cube | Classic HSL. Same caveats as `'hsv'`. |
|
|
155
|
+
| `'hslPolar'` | wheel | Polar form of HSL. |
|
|
156
|
+
| `'oklab'` | cube | Raw OKLab cube: x→a, y→b, z→L. Cube only — no polar variant. |
|
|
157
|
+
| `'rgb'` | cube | Raw sRGB cube. Useful as a baseline. Cube only — no polar variant. |
|
|
158
158
|
|
|
159
159
|
The OK-variants rely on Björn Ottosson's gamut-aware implementation and produce significantly more even hue distributions than the classic variants at the same GPU cost.
|
|
160
160
|
|
|
@@ -174,14 +174,14 @@ A practical starting point: use a **polar** model to get an intuitive read on hu
|
|
|
174
174
|
|
|
175
175
|
Controls how "nearest palette colour" is determined per pixel.
|
|
176
176
|
|
|
177
|
-
| Value
|
|
178
|
-
|
|
179
|
-
| `'oklab'`
|
|
177
|
+
| Value | Description | Cost |
|
|
178
|
+
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
|
|
179
|
+
| `'oklab'` | **Default.** Euclidean distance in OKLab. Fast, perceptually uniform, excellent general-purpose choice. | low |
|
|
180
180
|
| `'kotsarenkoRamos'` | Weighted Euclidean in sRGB — no colour-space conversion. Weights R and B by the mean red value for quick perceptual improvement over plain RGB. | lowest |
|
|
181
|
-
| `'deltaE76'`
|
|
182
|
-
| `'deltaE94'`
|
|
183
|
-
| `'deltaE2000'`
|
|
184
|
-
| `'rgb'`
|
|
181
|
+
| `'deltaE76'` | CIE 1976: plain Euclidean distance in CIELab. Classic standard, decent uniformity. | medium |
|
|
182
|
+
| `'deltaE94'` | CIE 1994: adds chroma and hue weighting on top of ΔE76. Better than ΔE76, cheaper than ΔE2000. | medium |
|
|
183
|
+
| `'deltaE2000'` | CIEDE2000: weighted colour difference with per-channel corrections for hue, chroma, and lightness. Most accurate, most expensive. | high |
|
|
184
|
+
| `'rgb'` | Plain Euclidean in sRGB. Not perceptually uniform. Useful as a baseline. | lowest |
|
|
185
185
|
|
|
186
186
|
---
|
|
187
187
|
|
|
@@ -211,7 +211,9 @@ const views = [
|
|
|
211
211
|
];
|
|
212
212
|
|
|
213
213
|
document.querySelector('#slider').addEventListener('input', (e) => {
|
|
214
|
-
views.forEach((v) => {
|
|
214
|
+
views.forEach((v) => {
|
|
215
|
+
v.position = +e.target.value;
|
|
216
|
+
});
|
|
215
217
|
});
|
|
216
218
|
```
|
|
217
219
|
|
package/dist/palette-shader.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export declare const paletteToTexture: (palette: ColorList) => Uint8Array;
|
|
|
14
14
|
|
|
15
15
|
export declare class PaletteViz {
|
|
16
16
|
#private;
|
|
17
|
-
constructor({ palette, width, height, pixelRatio, container, colorModel, distanceMetric,
|
|
17
|
+
constructor({ palette, width, height, pixelRatio, container, colorModel, distanceMetric, axis, position, invertLightness, showRaw, }?: PaletteVizOptions);
|
|
18
18
|
get canvas(): HTMLCanvasElement;
|
|
19
19
|
get width(): number;
|
|
20
20
|
get height(): number;
|
|
@@ -34,8 +34,6 @@ export declare class PaletteViz {
|
|
|
34
34
|
get colorModel(): SupportedColorModels;
|
|
35
35
|
set distanceMetric(metric: DistanceMetric);
|
|
36
36
|
get distanceMetric(): DistanceMetric;
|
|
37
|
-
set isPolar(value: boolean);
|
|
38
|
-
get isPolar(): boolean;
|
|
39
37
|
set invertLightness(value: boolean);
|
|
40
38
|
get invertLightness(): boolean;
|
|
41
39
|
set showRaw(value: boolean);
|
|
@@ -53,7 +51,6 @@ declare type PaletteVizOptions = {
|
|
|
53
51
|
container?: HTMLElement;
|
|
54
52
|
colorModel?: SupportedColorModels;
|
|
55
53
|
distanceMetric?: DistanceMetric;
|
|
56
|
-
isPolar?: boolean;
|
|
57
54
|
axis?: Axis;
|
|
58
55
|
position?: number;
|
|
59
56
|
invertLightness?: boolean;
|
|
@@ -62,6 +59,6 @@ declare type PaletteVizOptions = {
|
|
|
62
59
|
|
|
63
60
|
export declare const randomPalette: (size?: number) => ColorList;
|
|
64
61
|
|
|
65
|
-
declare type SupportedColorModels = '
|
|
62
|
+
declare type SupportedColorModels = 'rgb' | 'oklab' | 'okhsv' | 'okhsvPolar' | 'okhsl' | 'okhslPolar' | 'oklch' | 'oklchPolar' | 'hsv' | 'hsvPolar' | 'hsl' | 'hslPolar';
|
|
66
63
|
|
|
67
64
|
export { }
|