rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

minor tweaks to quox color stuff

Browse source
This commit is contained in:
Rhiannon Morris 2025-02-16 00:08:42 +01:00
parent 0d1a749c3d
commit 1ef8c3ef91
2 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
rainbow-quox/script/color/conv.ts
View file

@ -3,9 +3,7 @@ export type Oklab = { type: 'oklab', l: number, a: number, b: number };
export type Srgb = { type: 'srgb', r: number, g: number, b: number };
export type Lrgb = { type: 'lrgb', r: number, g: number, b: number };
export type ColorData = Oklch | Oklab | Srgb;
export type ColorType = 'oklch' | 'oklab' | 'srgb';
export type AnyColor = Oklch | Oklab | Srgb;
type Deg = number;
@ -17,6 +15,11 @@ function dcos(θ: Deg): number { return Math.cos(deg2rad(θ)); }
function dsin(θ: Deg): number { return Math.sin(deg2rad(θ)); }
function datan2(b: number, a: number): Deg { return rad2deg(Math.atan2(b, a)); }
export function normDeg(θ: Deg): Deg {
θ %= 360;
return θ < 0 ? θ + 360 : θ;
}
export function oklch2oklab({ l, c, h }: Oklch): Oklab {
return { type: 'oklab', l, a: c * dcos(h), b: c * dsin(h) };
}
@ -35,8 +38,7 @@ export function lrgb2oklab({ r, g, b }: Lrgb): Oklab {
const m_ = Math.cbrt(m);
const s_ = Math.cbrt(s);
return {
type: 'oklab',
return { type: 'oklab',
l: 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,
a: 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,
b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_,
@ -48,12 +50,11 @@ export function oklab2lrgb({ l, a, b }: Oklab): Lrgb {
const M_ = l - 0.1055613458 * a - 0.0638541728 * b;
const S_ = l - 0.0894841775 * a - 1.2914855480 * b;
const L = L_*L_*L_;
const M = M_*M_*M_;
const S = S_*S_*S_;
const L = L_ * L_ * L_;
const M = M_ * M_ * M_;
const S = S_ * S_ * S_;
return {
type: 'lrgb',
return { type: 'lrgb',
r: clamp(+4.0767416621 * L - 3.3077115913 * M + 0.2309699292 * S),
g: clamp(-1.2684380046 * L + 2.6097574011 * M - 0.3413193965 * S),
b: clamp(-0.0041960863 * L - 0.7034186147 * M + 1.7076147010 * S),
@ -101,7 +102,7 @@ export function srgb2oklch(c: Srgb): Oklch {
}
export function toOklch(c: ColorData): Oklch {
export function toOklch(c: AnyColor): Oklch {
switch (c.type) {
case 'oklch': return c;
case 'oklab': return oklab2oklch(c);
@ -109,7 +110,7 @@ export function toOklch(c: ColorData): Oklch {
}
}
export function toOklab(c: ColorData): Oklab {
export function toOklab(c: AnyColor): Oklab {
switch (c.type) {
case 'oklch': return oklch2oklab(c);
case 'oklab': return c;
@ -117,7 +118,7 @@ export function toOklab(c: ColorData): Oklab {
}
}
export function toSrgb(c: ColorData): Srgb {
export function toSrgb(c: AnyColor): Srgb {
switch (c.type) {
case 'oklch': return oklch2srgb(c);
case 'oklab': return oklab2srgb(c);

20
rainbow-quox/script/color/def.ts
View file

@ -1,6 +1,6 @@
import { Oklch, Oklab, Srgb, ColorType, ColorData } from './conv.js';
import { Oklch, Oklab, Srgb as Rgb, AnyColor, normDeg } from './conv.js';
import * as Conv from './conv.js';
export { Oklch, Oklab, Srgb, ColorType, ColorData };
export { Oklch, Oklab, Rgb, AnyColor };
export type CSSFormat = 'oklch' | 'oklab' | 'rgb' | 'hex';
@ -20,9 +20,9 @@ export function apply<A>(f: ChannelMapper<A> | undefined, x: A): A {
export class Color {
readonly oklch: Oklch;
readonly oklab: Oklab;
readonly srgb: Srgb;
readonly srgb: Rgb;
constructor(c: ColorData) {
constructor(c: AnyColor) {
this.oklch = Conv.toOklch(c);
this.oklab = Conv.toOklab(c);
this.srgb = Conv.toSrgb(c);
@ -31,8 +31,10 @@ export class Color {
get luma() { return this.oklch.l; }
get chroma() { return this.oklch.c; }
get hue() { return this.oklch.h; }
get labA() { return this.oklab.a; }
get labB() { return this.oklab.b; }
get red() { return Math.floor(255 * this.srgb.r); }
get green() { return Math.floor(255 * this.srgb.g); }
get blue() { return Math.floor(255 * this.srgb.b); }
@ -70,14 +72,13 @@ export class Color {
}
function deg(θ: number) {
θ %= 360; if (θ < 0) θ += 360;
return `${θ.toFixed(0)}deg`;
return `${normDeg(θ).toFixed(0)}deg`;
}
}
with(maps: ColorMapper<Oklch>): Color;
with(maps: ColorMapper<Srgb>): Color;
with(maps: ColorMapper<Oklch | Srgb>): Color {
with(maps: ColorMapper<Rgb>): Color;
with(maps: ColorMapper<Oklch | Rgb>): Color {
switch (maps.type) {
case 'oklch': {
const { l, c, h } = this.oklch;
@ -86,7 +87,7 @@ export class Color {
}
case 'srgb': {
const { r, g, b } = this.srgb;
const { r: rr, g: gg, b: bb } = maps as ColorMapper<Srgb>;
const { r: rr, g: gg, b: bb } = maps as ColorMapper<Rgb>;
return rgb(apply(rr, r), apply(gg, g), apply(bb, b));
}
}
@ -127,7 +128,6 @@ export function rgb(r: number, g: number, b: number,
}
export type Luma = number;
export type Chroma = number;
export type Hue = number;