From acb4edebb8a9769ef8d1aef4a8f43cc3189ff7ef Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Tue, 21 May 2024 09:16:34 +0200 Subject: [PATCH 1/2] support d3 in ImageData for rich images --- .../LCHPaint/LCHPaint.ts | 4 +++- .../generate-lch-colors.ts | 16 ++++------------ .../generate-lch-colors.worker.ts | 19 +++++++++++++------ .../LCHPaint/generate-lch-colors/index.ts | 9 ++++++++- .../OkLCHPaint/OkLCHPaint.ts | 4 +++- .../generate-oklch-colors.ts | 16 ++++------------ .../generate-oklch-colors.worker.ts | 19 +++++++++++++------ .../OkLCHPaint/generate-oklch-colors/index.ts | 9 ++++++++- 8 files changed, 56 insertions(+), 40 deletions(-) diff --git a/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts b/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts index 6372f55..b1be326 100644 --- a/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts +++ b/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts @@ -78,7 +78,9 @@ export class LCHPaint extends LitElement { const lch = colorController().to("lch"); this.generateColors(lch.h, this.width, this.height).then((colorArray) => { - const imageData = new ImageData(colorArray, this.width, this.height); + const imageData = new ImageData(colorArray, this.width, this.height, { + colorSpace: "display-p3", + }); ctx.putImageData(imageData, 0, 0); }); }; diff --git a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts index 9042509..89d322d 100644 --- a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts +++ b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts @@ -2,31 +2,23 @@ import Color from "colorjs.io"; interface Step { coordinates: { x: number; y: number }; - colors: { - r: number; - g: number; - b: number; - }; + colors: [number, number, number]; } export function* generateColors( hue: number, width: number, - height: number + height: number, + colorSpace: "srgb" | "display-p3" ): Generator { const color = new Color("lch", [50, 50, hue]); for (let x = 0; x < width; x += 1) { for (let y = 0; y < height; y += 1) { color.c = Math.floor((x / width) * 132); // chroma goes to 132 color.l = Math.floor((1 - y / height) * 100); - const rgb = color.to("srgb"); yield { coordinates: { x, y }, - colors: { - r: Math.floor(rgb.r * 255), - g: Math.floor(rgb.g * 255), - b: Math.floor(rgb.b * 255), - }, + colors: color.to(colorSpace === "srgb" ? "srgb" : "p3").coords, }; } } diff --git a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.worker.ts b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.worker.ts index d5a13d5..bde8299 100644 --- a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.worker.ts +++ b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.worker.ts @@ -4,16 +4,23 @@ function send(message: Uint8ClampedArray) { postMessage(message); } -onmessage = function (event: MessageEvent<[number, number, number]>) { - const [hue, width, height] = event.data; +onmessage = function ( + event: MessageEvent<[number, number, number, "srgb" | "display-p3"]> +) { + const [hue, width, height, colorSpace] = event.data; const colorArray = new Uint8ClampedArray(width * height * 4); - for (const { coordinates, colors } of generateColors(hue, width, height)) { + for (const { coordinates, colors } of generateColors( + hue, + width, + height, + colorSpace + )) { const position = 4 * (coordinates.y * width + coordinates.x); - colorArray[position + 0] = colors.r; // R value - colorArray[position + 1] = colors.g; // G value - colorArray[position + 2] = colors.b; // B value + colorArray[position + 0] = colors[0] * 255; // X in P3 + colorArray[position + 1] = colors[1] * 255; // Y in P3 + colorArray[position + 2] = colors[2] * 255; // Z in P3 colorArray[position + 3] = 255; // A value } diff --git a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/index.ts b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/index.ts index 918b2f4..78157a9 100644 --- a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/index.ts +++ b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/index.ts @@ -5,6 +5,8 @@ import GenerateColorsWorker from "./generate-lch-colors.worker.ts?worker"; let prevWorker: Worker | null = null; const isRunningMap = new WeakMap(); +const doesSupportColorSpace = new ImageData(1, 1).colorSpace !== undefined; + export const createGenerateColors = () => { return ( hue: number, @@ -25,7 +27,12 @@ export const createGenerateColors = () => { }; isRunningMap.set(worker, true); - worker.postMessage([hue, width, height]); + worker.postMessage([ + hue, + width, + height, + doesSupportColorSpace ? "display-p3" : "srgb", + ]); }); }; }; diff --git a/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts b/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts index 5c2a4ea..c618918 100644 --- a/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts +++ b/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts @@ -78,7 +78,9 @@ export class OkLCHPaint extends LitElement { const oklch = colorController().to("oklch"); this.generateColors(oklch.h, this.width, this.height).then((colorArray) => { - const imageData = new ImageData(colorArray, this.width, this.height); + const imageData = new ImageData(colorArray, this.width, this.height, { + colorSpace: "display-p3", + }); ctx.putImageData(imageData, 0, 0); }); }; diff --git a/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.ts b/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.ts index 23b87f8..e9d2e04 100644 --- a/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.ts +++ b/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.ts @@ -2,31 +2,23 @@ import Color from "colorjs.io"; interface Step { coordinates: { x: number; y: number }; - colors: { - r: number; - g: number; - b: number; - }; + colors: [number, number, number]; } export function* generateColors( hue: number, width: number, - height: number + height: number, + colorSpace: "srgb" | "display-p3" ): Generator { const color = new Color("oklch", [0.5, 0.2, hue]); for (let x = 0; x < width; x += 1) { for (let y = 0; y < height; y += 1) { color.c = (x / width) * 0.4; // chroma goes to 0.4 color.l = 1 - y / height; - const rgb = color.to("srgb"); yield { coordinates: { x, y }, - colors: { - r: Math.floor(rgb.r * 255), - g: Math.floor(rgb.g * 255), - b: Math.floor(rgb.b * 255), - }, + colors: color.to(colorSpace === "srgb" ? "srgb" : "p3").coords, }; } } diff --git a/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.worker.ts b/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.worker.ts index f25a7ab..63ce6f6 100644 --- a/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.worker.ts +++ b/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/generate-oklch-colors.worker.ts @@ -4,16 +4,23 @@ function send(message: Uint8ClampedArray) { postMessage(message); } -onmessage = function (event: MessageEvent<[number, number, number]>) { - const [hue, width, height] = event.data; +onmessage = function ( + event: MessageEvent<[number, number, number, "srgb" | "display-p3"]> +) { + const [hue, width, height, colorSpace] = event.data; const colorArray = new Uint8ClampedArray(width * height * 4); - for (const { coordinates, colors } of generateColors(hue, width, height)) { + for (const { coordinates, colors } of generateColors( + hue, + width, + height, + colorSpace + )) { const position = 4 * (coordinates.y * width + coordinates.x); - colorArray[position + 0] = colors.r; // R value - colorArray[position + 1] = colors.g; // G value - colorArray[position + 2] = colors.b; // B value + colorArray[position + 0] = colors[0] * 255; // X in P3 + colorArray[position + 1] = colors[1] * 255; // Y in P3 + colorArray[position + 2] = colors[2] * 255; // Z in P3 colorArray[position + 3] = 255; // A value } diff --git a/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/index.ts b/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/index.ts index 0b1a850..2344f9a 100644 --- a/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/index.ts +++ b/src/components/page-color-visualizer/OkLCHPaint/generate-oklch-colors/index.ts @@ -3,6 +3,8 @@ import GenerateColorsWorker from "./generate-oklch-colors.worker.ts?worker"; let prevWorker: Worker | null = null; const isRunningMap = new WeakMap(); +const doesSupportColorSpace = new ImageData(1, 1).colorSpace !== undefined; + export const createGenerateColors = () => { return ( hue: number, @@ -23,7 +25,12 @@ export const createGenerateColors = () => { }; isRunningMap.set(worker, true); - worker.postMessage([hue, width, height]); + worker.postMessage([ + hue, + width, + height, + doesSupportColorSpace ? "display-p3" : "srgb", + ]); }); }; }; -- 2.51.2 From 1c860b0fd67a473da0c975e21fb4450560a77b3d Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Tue, 21 May 2024 09:20:29 +0200 Subject: [PATCH 2/2] use display-p3 in the canvas too --- src/components/page-color-visualizer/LCHPaint/LCHPaint.ts | 2 +- src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts b/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts index b1be326..b569d16 100644 --- a/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts +++ b/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts @@ -70,7 +70,7 @@ export class LCHPaint extends LitElement { if (!canvas) { return; } - const ctx = canvas.getContext("2d"); + const ctx = canvas.getContext("2d", { colorSpace: "display-p3" }); if (!ctx) { return; } diff --git a/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts b/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts index c618918..2fef108 100644 --- a/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts +++ b/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts @@ -70,7 +70,7 @@ export class OkLCHPaint extends LitElement { if (!canvas) { return; } - const ctx = canvas.getContext("2d"); + const ctx = canvas.getContext("2d", { colorSpace: "display-p3" }); if (!ctx) { return; } -- 2.51.2