diff --git a/Makefile b/Makefile index 59126da..fcaa51e 100644 --- a/Makefile +++ b/Makefile @@ -11,7 +11,9 @@ CSS = $(shell find fonts -type f) \ $(patsubst %.scss,%.css, \ $(wildcard rainbow-quox/style/*) $(wildcard style/*)) \ dnd/base.css dnd/bio.css dnd/index.css $(wildcard dnd/*/style.css) -SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/script/*.ts)) +SCRIPTS = $(patsubst %.ts,%.js, \ + $(wildcard script/*.ts rainbow-quox/script/color/*.ts \ + rainbow-quox/script/*.ts)) MISC = $(shell find .well-known -type f) ALL = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC) diff --git a/rainbow-quox/script/color.ts b/rainbow-quox/script/color.ts index 1cd1d39..4fdd815 100644 --- a/rainbow-quox/script/color.ts +++ b/rainbow-quox/script/color.ts @@ -1,194 +1,12 @@ -import * as R from './rand.js'; +import { Rand } from './color/rand.js'; +import { Color, Luma, Chroma, Hue, oklch, oklab, rgb } from './color/def.js'; + +export { Rand, Color, Luma, Chroma, Hue, oklch, oklab, rgb }; + const max = Math.max; const min = Math.min; -export type Luma = number; -export type Chroma = number; -export type Hue = number; -export type Alpha = number; - -export type HueDistance = number; - -const MAXL: Luma = 0.9; -const MINL: Luma = 0.4; -const MINL_LIGHT: Luma = 0.7; -const MAXL_DARK: Luma = 0.65; - -const MINC_LIGHT: Chroma = 0.08; -const MAXC_LIGHT: Chroma = 0.1; -const MINC_DARK: Chroma = 0.12; -const MAXC_DARK: Chroma = 0.175; - -// max spread for a sequence of analogous colors. unless that would put them -// too close together -const MAXH_WIDTH: HueDistance = 80; - -// minimum distance between adjacent analogous colors -const MINH_SEP: HueDistance = 5; - -// size of the wedge a "complementary" color can be in -const MAXH_COMPL: HueDistance = 40; - -// size of the wedge a "triadic" color can be in -const MAXH_TRIAD: HueDistance = 25; - - -type LD = 'light' | 'dark'; - -export namespace Oklch { - export type Channel = 'l' | 'c' | 'h'; - export type Channels = Record; - export type ChannelMap = (x: number) => number; - export type ChannelMaps = Record; - - // a function, or constant value, for each channel; - // or nothing, which indicates identity function - export type With = Partial>; - export type With1 = ChannelMap | number | undefined; -} - -function isLight(l: Luma): boolean { return l >= MINL_LIGHT; } - -export namespace Rand { export type State = R.State; } - -type CloseFar = 'close' | 'far'; - -export class Rand extends R.Rand { - constructor(); - constructor([a, b, c, d]: Rand.State); - constructor(str: string); - constructor(st?: Rand.State | string) { - if (st === undefined) super(); - else if (typeof st === 'string') super(st); - else super(st); - } - - lightFor(baseL: Luma, d: CloseFar = 'close'): Luma { - let maxl = d == 'close' ? min(MAXL, baseL * 1.25) : MAXL; - return this.float(baseL, maxl); - } - darkFor(baseL: Luma, d: CloseFar = 'close'): Luma { - let minl = d == 'close' ? max(MINL, baseL * 0.8) : MINL - return this.float(minl, baseL); - } - - brightFor(l: Luma, baseC: Chroma): Chroma { - return this.float(baseC, isLight(l) ? MAXC_LIGHT : MAXC_DARK); - } - - dullFor(l: Luma, baseC: Chroma): Chroma { - return this.float(baseC, isLight(l) ? MINC_LIGHT : MINC_DARK); - } - - analogous1(baseH: Hue): Hue { - const size = this.float(MINH_SEP, 2 * MINH_SEP); - return this.boolean() ? baseH + size : baseH - size; - } - - analogous(baseH: Hue, count: number): Hue[] { - const minWidth = min(count * MINH_SEP, MAXH_WIDTH * 0.8); - const width = this.float(minWidth, MAXH_WIDTH); - const sep = width / (count - 1); - const start = baseH - (width / 2); - const numbers = Array.from({length: count}, (_u, i) => start + i * sep); - return this.boolean() ? numbers : numbers.reverse(); - } - - complementary1(baseH: Hue): Hue { - return this.analogous1((baseH + 180) % 360); - } - - complementary(baseH: Hue, count: number): Hue[] { - const angle = this.float(180 - MAXH_COMPL/2, 180 + MAXH_COMPL/2); - return this.analogous(baseH + angle, count); - } - - triad(baseH: Hue): [Hue, Hue] { - const angle = this.float(120 - MAXH_TRIAD/2, 120 + MAXH_TRIAD/2); - return [baseH - angle, baseH + angle]; - } - - baseLuma(ld?: LD): Luma { - if (ld == 'light') { - return this.float(MINL_LIGHT, MAXL); - } else if (ld == 'dark') { - return this.float(MINL, MAXL_DARK); - } else { - return this.float(MINL, MAXL); - } - } - - baseChroma(l: Luma): Chroma { - if (l >= MINL_LIGHT) { - return this.float(MINC_LIGHT, MAXC_LIGHT); - } else { - return this.float(MINC_DARK, MAXC_DARK); - } - } - - baseHue(): Hue { return this.float(360); } -} - - -export class Oklch { - readonly l: Luma; readonly c: Chroma; readonly h: Hue; - - static normHue(h: Hue) { return (h = h % 360) < 0 ? h + 360 : h; } - - constructor(l: Luma, c: Chroma, h: Hue); - constructor(r: Rand, ld?: LD); - constructor(cs: Oklch.Channels); - constructor(ll: Luma | Oklch.Channels | Rand, cc?: Chroma | LD, hh?: Hue) { - if (hh !== undefined) { - this.l = ll as Luma; - this.c = cc as Chroma; - this.h = hh as Hue; - } else if (typeof ll == 'object' && 'l' in ll) { - const {l, c, h} = ll as Oklch.Channels; - this.l = l; this.c = c; this.h = h; - } else { - const r = ll as Rand; - this.l = r.baseLuma(cc as LD | undefined); - this.c = r.baseChroma(this.l); - this.h = r.baseHue(); - } - } - - with(maps: Oklch.With): Oklch { - function call(comp: Oklch.With1, x: number) { - switch (typeof comp) { - case 'number': return comp; - case 'function': return comp(x); - default: return x; - } - } - return new Oklch({ - l: call(maps.l, this.l), - c: call(maps.c, this.c), - h: call(maps.h, this.h), - }); - } - - css(alpha: number = 1): string { - const l = (this.l * 100).toFixed(0); - const c = (this.c * 250).toFixed(0); - const h = this.h.toFixed(0); - if (alpha != 1) { return `oklch(${l}% ${c}% ${h} / ${alpha})`; } - else { return `oklch(${l}% ${c}% ${h})`; } - } - - rgb(): Rgb { return toRgbViaCanvas(this); } - - static validate(x: unknown): Oklch | undefined { - if (typeof x == 'object' && x != null && 'l' in x && 'c' in x && 'h' in x) { - const { l, c, h } = x; - if (typeof l == 'number' && typeof c == 'number' && typeof h == 'number') - return oklch(l, c, h); - } - } -} - export type SchemeType = 'triad' | 'fin-belly' | 'fin-body'; @@ -200,7 +18,7 @@ export type MiscLayer = 'eyes' | 'masks' | 'claws' | 'lines'; export type Layer = OuterLayer | SockLayer | FinLayer | BellyLayer | MiscLayer; -export type ColsOf = Record; +export type ColsOf = Record; export type OuterCols = ColsOf; export type SockCols = ColsOf; export type FinCols = ColsOf; @@ -223,73 +41,72 @@ export type BaseCol = 'outer' | 'belly' | 'fins'; export type OptionalBaseCol = 'eyes' | 'stripes'; type KnownPalette = - Record & Partial>; + Record & Partial>; export function colors(r: Rand = new Rand(), base?: KnownPalette): Scheme { - const outer = base?.outer ?? new Oklch(r, 'dark'); - let outerCols: OuterCols = + const outer = base?.outer ?? r.color('dark'); + const outerCols: OuterCols = { outer, spines: mkSpines(r, outer), vitiligo1: mkVitiligo(r, outer) }; const stripes = mkStripes(r); - let sockCols: SockCols = { stripes, cuffs: mkCuffs(r, stripes) }; + const sockCols: SockCols = { stripes, cuffs: mkCuffs(r, stripes) }; let finCols: FinCols, bellyCols: BellyCols, type: SchemeType; const whichBody = r.float(); if (whichBody > 2/3) { type = 'triad'; - const [f, b] = r.triad(outer.h); + const [f, b] = r.triad(outer.hue); finCols = mkFins(r, f, outer, base); bellyCols = mkBelly(r, b, base); } else if (whichBody > 1/3) { type = 'fin-belly'; - const [f, b] = r.complementary(outer.h, 2); + const [f, b] = r.complementary(outer.hue, 2); finCols = mkFins(r, f!, outer, base); bellyCols = mkBelly(r, b!, base); } else { type = 'fin-body'; - finCols = mkFins(r, r.analogous1(outer.h), outer, base); - bellyCols = mkBelly(r, r.complementary1(outer.h), base); + finCols = mkFins(r, r.analogous1(outer.hue), outer, base); + bellyCols = mkBelly(r, r.complementary1(outer.hue), base); } - let miscCols = mkMisc(r, outerCols, finCols, bellyCols, base); + const miscCols = mkMisc(r, outerCols, finCols, bellyCols, base); return merge(outerCols, sockCols, finCols, bellyCols, miscCols, type); } -function mkSpines(r: Rand, outer: Oklch): Oklch { - return outer.with({ +function mkSpines(r: Rand, outer: Color): Color { + return outer.with({ type: 'oklch', l: l => r.darkFor(l), - c: c => r.brightFor(outer.l, c), + c: c => r.brightFor(outer.luma, c), h: h => r.float(h + 12, h - 12), }) } -function mkVitiligo(r: Rand, outer: Oklch): Oklch { - return outer.with({ +function mkVitiligo(r: Rand, outer: Color): Color { + return outer.with({ type: 'oklch', l: x => r.float(max(x, 0.94), 0.985), // exception to MAXL - c: x => r.float(min(x, 0.1), MINC_LIGHT), + c: x => r.float(min(x, 0.1), r.mincLight), }); } -function mkStripes(r: Rand): Oklch { - return new Oklch({ - l: r.float(0.8, MAXL), - c: r.float(MINC_LIGHT, MAXC_LIGHT), - h: r.baseHue(), - }); +function mkStripes(r: Rand): Color { + return oklch(r.float(0.8, r.maxl), + r.float(r.mincLight, r.maxcLight), + r.baseHue()); } -function mkCuffs(r: Rand, sock: Oklch): Oklch { - return sock.with({ +function mkCuffs(r: Rand, sock: Color): Color { + return sock.with({ type: 'oklch', l: l => r.float(l * 0.85, l * 0.65), - c: c => r.float(c, MAXC_LIGHT), + c: c => r.float(c, r.maxcLight), h: h => r.float(h + 8, h - 8), }); } -function mkFins(r: Rand, h: Hue, outer: Oklch, base?: KnownPalette): FinCols { +function mkFins(r: Rand, h: Hue, outer: Color, + base?: KnownPalette): FinCols { const baseFin1 = base?.fins; - const [fin1Hue, fin2Hue, fin3Hue] = r.analogous(baseFin1?.h ?? h, 3); + const [fin1Hue, fin2Hue, fin3Hue] = r.analogous(baseFin1?.hue ?? h, 3); const direction: 'lighter' | 'darker' = r.choice(['lighter', 'darker']); @@ -300,26 +117,24 @@ function mkFins(r: Rand, h: Hue, outer: Oklch, base?: KnownPalette): FinCols { return direction == 'lighter' ? r.dullFor(l, c) : r.brightFor(l, c); } - const fins1 = baseFin1 ?? oklch(ll(outer.l), cc(outer.l, outer.c), fin1Hue!); - const fins2 = oklch(ll(fins1.l), cc(fins1.l, fins1.c), fin2Hue!); - const fins3 = oklch(ll(fins2.l), cc(fins2.l, fins2.c), fin3Hue!); - const lighter = fins1.l >= fins3.l ? fins1 : fins3; + const fins1 = baseFin1 ?? + oklch(ll(outer.luma), cc(outer.luma, outer.chroma), fin1Hue!); + const fins2 = oklch(ll(fins1.luma), cc(fins1.luma, fins1.chroma), fin2Hue!); + const fins3 = oklch(ll(fins2.luma), cc(fins2.luma, fins2.chroma), fin3Hue!); + const lighter = fins1.luma >= fins3.luma ? fins1 : fins3; const vitiligo4 = mkVitiligo(r, lighter); return { fins1, fins2, fins3, vitiligo4 }; } function mkBelly(r: Rand, h: Hue, base?: KnownPalette): BellyCols { - let baseBelly1 = base?.belly; - const [belly1Hue, belly2Hue] = r.analogous(baseBelly1?.h ?? h, 2); - const belly1 = baseBelly1 ?? new Oklch({ - l: r.float(0.7, MAXL), - c: r.baseChroma(1), - h: belly1Hue! - }); - const belly2 = belly1.with({ - l: x => min(MAXL, x * 1.1), + const baseBelly1 = base?.belly; + const [belly1Hue, belly2Hue] = r.analogous(baseBelly1?.hue ?? h, 2); + const belly1 = baseBelly1 ?? + oklch(r.float(0.7, r.maxl), r.baseChroma(1), belly1Hue!); + const belly2 = belly1.with({ type: 'oklch', + l: x => min(r.maxl, x * 1.1), c: x => x * 0.9, - h: belly2Hue!, + h: [belly2Hue!], }); const vitiligo3 = mkVitiligo(r, belly1); const vitiligo2 = mkVitiligo(r, belly2); @@ -328,28 +143,22 @@ function mkBelly(r: Rand, h: Hue, base?: KnownPalette): BellyCols { function mkMisc(r: Rand, o: OuterCols, f: FinCols, b: BellyCols, base?: KnownPalette): MiscCols { - const masks = new Oklch({ - l: r.float(0.8, MAXL), - c: r.float(0.01, 0.06), - h: r.analogous1(r.choice([o.outer, b.belly1, f.fins1]).h) - }); + const masks = oklch(r.float(0.8, r.maxl), r.float(0.01, 0.06), + r.analogous1(r.choice([o.outer, b.belly1, f.fins1]).hue)); return { masks, - eyes: base?.eyes ?? new Oklch({ - l: r.baseLuma('light'), - c: r.float(0.28, MAXC_LIGHT), - h: r.boolean() ? r.analogous1(o.outer.h) : r.complementary1(o.outer.h) - }), - claws: masks.with({ - l: x => min(MAXL, x + r.float(0, 0.1)), - c: r.float(0.01, 0.06), + eyes: base?.eyes ?? oklch( + r.baseLuma('light'), + r.float(0.28, r.maxcLight), + r.boolean() ? r.analogous1(o.outer.hue) : r.complementary1(o.outer.hue) + ), + claws: masks.with({ type: 'oklch', + l: x => min(r.maxl, x + r.float(0, 0.1)), + c: [r.float(0.01, 0.06)], h: h => r.analogous1(h), }), - lines: new Oklch({ - l: r.float(0.01, 0.06), - c: r.baseChroma(0), - h: r.analogous1(o.outer.h) - }), + lines: oklch(r.float(0.01, 0.06), r.baseChroma(0), + r.analogous1(o.outer.hue)), }; } @@ -366,82 +175,6 @@ function merge({ outer, spines, vitiligo1 }: OuterCols, } -export namespace Rgb { - export type Channel = number; - export type Channels = { r: number, g: number, b: number }; -} - -export class Rgb { - readonly r: Rgb.Channel; - readonly g: Rgb.Channel; - readonly b: Rgb.Channel; - - static clamp(x: Rgb.Channel) { - return min(max(0, Math.floor(x)), 255); - } - - constructor(r: Rgb.Channel, g: Rgb.Channel, b: Rgb.Channel); - constructor({r, g, b}: Rgb.Channels); - constructor(rr: Rgb.Channel | Rgb.Channels, gg?: Rgb.Channel, bb?: Rgb.Channel) { - const C = Rgb.clamp; - if (typeof rr == 'number') { - this.r = C(rr!); this.g = C(gg!); this.b = C(bb!); - } else { - this.r = C(rr.r); this.g = C(rr.g); this.b = C(rr.b); - } - } - - css() { - function h(x: Rgb.Channel) { - let s = x.toString(16); - return s.length == 2 ? s : '0' + s; - } - return `#${h(this.r)}${h(this.g)}${h(this.b)}` - } - - static validate(x: unknown): Rgb | undefined { - if (typeof x == 'object' && x != null && 'r' in x && 'g' in x && 'b' in x) { - const { r, g, b } = x; - if (typeof r == 'number' && typeof g == 'number' && typeof b == 'number') - return rgb(r, g, b); - } - } -} - -export type Rgbs = Record; - -let rgbBuf: OffscreenCanvasRenderingContext2D; - -export function toRgbViaCanvas(col: Oklch): Rgb { - rgbBuf ??= new OffscreenCanvas(1, 1).getContext('2d')!; - rgbBuf.fillStyle = col.css(); - rgbBuf.fillRect(0, 0, 1, 1); - const pix = rgbBuf.getImageData(0, 0, 1, 1).data; - return rgb(pix[0]!, pix[1]!, pix[2]!); -} - -export function toRgbs(col: Colors): Rgbs { - return makeColorInfo(l => col[l].rgb()); -} - -export function toHex({r, g, b}: Rgb): string { - function chan(n: number) { - let a = Math.floor(n).toString(16); - return a.length == 1 ? `0${a}` : a; - } - return `#${chan(r)}${chan(g)}${chan(b)}`; -} - - -export function oklch(l: number, c: number, h: number) { - return new Oklch(l, c, h); -} - -export function rgb(r: number, g: number, b: number) { - return new Rgb(r, g, b); -} - - export const KNOWN: Record = { niss: { outer: oklch(0.83, 0.201, 151), diff --git a/rainbow-quox/script/color/conv.ts b/rainbow-quox/script/color/conv.ts new file mode 100644 index 0000000..312f945 --- /dev/null +++ b/rainbow-quox/script/color/conv.ts @@ -0,0 +1,126 @@ +export type Oklch = { type: 'oklch', l: number, c: number, h: number }; +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'; + + +type Deg = number; +type Rad = number; + +function deg2rad(θ: Deg): Rad { return θ / 180 * Math.PI; } +function rad2deg(θ: Rad): Deg { return θ * 180 / Math.PI; } +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 oklch2oklab({ l, c, h }: Oklch): Oklab { + return { type: 'oklab', l, a: c * dcos(h), b: c * dsin(h) }; +} + +export function oklab2oklch({ l, a, b }: Oklab): Oklch { + return { type: 'oklch', l, c: Math.sqrt(a*a + b*b), h: datan2(b, a) } +} + +// https://bottosson.github.io/posts/oklab/#converting-from-linear-srgb-to-oklab +export function lrgb2oklab({ r, g, b }: Lrgb): Oklab { + const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b; + const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b; + const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b; + + const l_ = Math.cbrt(l); + const m_ = Math.cbrt(m); + const s_ = Math.cbrt(s); + + 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_, + }; +} + +export function oklab2lrgb({ l, a, b }: Oklab): Lrgb { + const L_ = l + 0.3963377774 * a + 0.2158037573 * b; + 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_; + + 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), + }; +} + +function clamp(x: number): number { + return Math.max(0, Math.min(1, x)); +} + +// https://bottosson.github.io/posts/colorwrong/#what-can-we-do%3F +function γ(x: number): number { + return x >= 0.0031308 ? 1.055 * x ** (1/2.4) - 0.055 + : 12.92 * x; +} + +function γ̂(x: number): number { + return x >= 0.04045 ? ((x + 0.055)/1.055) ** 2.4 + : x / 12.92; +} + +export function lrgb2srgb({ r, g, b }: Lrgb): Srgb { + return { type: 'srgb', r: γ(r), g: γ(g), b: γ(b) }; +} + +export function srgb2lrgb({ r, g, b }: Srgb): Lrgb { + return { type: 'lrgb', r: γ̂(r), g: γ̂(g), b: γ̂(b) }; +} + + +export function oklab2srgb(c: Oklab): Srgb { + return lrgb2srgb(oklab2lrgb(c)); +} + +export function oklch2srgb(c: Oklch): Srgb { + return oklab2srgb(oklch2oklab(c)); +} + +export function srgb2oklab(c: Srgb): Oklab { + return lrgb2oklab(srgb2lrgb(c)); +} + +export function srgb2oklch(c: Srgb): Oklch { + return oklab2oklch(srgb2oklab(c)); +} + + +export function toOklch(c: ColorData): Oklch { + switch (c.type) { + case 'oklch': return c; + case 'oklab': return oklab2oklch(c); + case 'srgb': return srgb2oklch(c); + } +} + +export function toOklab(c: ColorData): Oklab { + switch (c.type) { + case 'oklch': return oklch2oklab(c); + case 'oklab': return c; + case 'srgb': return srgb2oklab(c); + } +} + +export function toSrgb(c: ColorData): Srgb { + switch (c.type) { + case 'oklch': return oklch2srgb(c); + case 'oklab': return oklab2srgb(c); + case 'srgb': return c; + } +} diff --git a/rainbow-quox/script/color/def.ts b/rainbow-quox/script/color/def.ts new file mode 100644 index 0000000..cd78966 --- /dev/null +++ b/rainbow-quox/script/color/def.ts @@ -0,0 +1,136 @@ +import { Oklch, Oklab, Srgb, ColorType, ColorData } from './conv.js'; +import * as Conv from './conv.js'; +export { Oklch, Oklab, Srgb, ColorType, ColorData }; + + +export type CSSFormat = 'oklch' | 'oklab' | 'rgb' | 'hex'; + +export type ChannelMapper = [A] | ((x: A) => A); + +export type ColorMapper = + { type: C['type'] } & + { [k in Exclude]?: ChannelMapper }; + +export function apply(f: ChannelMapper | undefined, x: A): A { + if (typeof f == 'undefined') return x; + else if (typeof f == 'function') return f(x); + else return f[0]; +} + +export class Color { + readonly oklch: Oklch; + readonly oklab: Oklab; + readonly srgb: Srgb; + + constructor(c: ColorData) { + this.oklch = Conv.toOklch(c); + this.oklab = Conv.toOklab(c); + this.srgb = Conv.toSrgb(c); + } + + 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); } + + css(format: CSSFormat = 'hex', α = 1): string { + switch (format) { + case 'oklch': { + const { l, c, h } = this.oklch; + return `oklch(${pc(l)} ${pc(c, 0.4)} ${deg(h)} / ${pc(α)})`; + } + case 'oklab': { + const { l, a, b } = this.oklab; + return `oklab(${pc(l)} ${pc(a)} ${pc(b)} / ${pc(α)})`; + } + case 'rgb': { + const { r, g, b } = this.srgb; + return `rgb(${pc(r)} ${pc(g)} ${pc(b)} / ${pc(α)})`; + } + case 'hex': { + const { r, g, b } = this.srgb; + return α == 1 ? `#${hex(r)}${hex(g)}${hex(b)}` : + `#${hex(r)}${hex(g)}${hex(b)}${hex(α)}`; + } + } + + function hex(c: number) { + const d = Math.min(255, Math.max(0, Math.floor(255 * c))); + const str = d.toString(16); + return str.length == 1 ? `0${str}` : str; + } + + function pc(c: number, max = 1) { + c *= 100 / max; + return `${c.toFixed(0)}%`; + } + + function deg(θ: number) { + θ %= 360; if (θ < 0) θ += 360; + return `${θ.toFixed(0)}deg`; + } + } + + with(maps: ColorMapper): Color; + with(maps: ColorMapper): Color; + with(maps: ColorMapper): Color { + switch (maps.type) { + case 'oklch': { + const { l, c, h } = this.oklch; + const { l: ll, c: cc, h: hh } = maps as ColorMapper; + return oklch(apply(ll, l), apply(cc, c), apply(hh, h)); + } + case 'srgb': { + const { r, g, b } = this.srgb; + const { r: rr, g: gg, b: bb } = maps as ColorMapper; + return rgb(apply(rr, r), apply(gg, g), apply(bb, b)); + } + } + } + + static validate(x: unknown): Color | undefined { + if (typeof x == 'object' && x != null) { + if ('l' in x && 'c' in x && 'h' in x) { + const { l, c, h } = x; + if (num(l) && num(c) && num(h)) return oklch(l, c, h); + } else if ('l' in x && 'a' in x && 'b' in x) { + const { l, a, b } = x; + if (num(l) && num(a) && num(b)) return oklab(l, a, b); + } else if ('r' in x && 'g' in x && 'b' in x) { + const { r, g, b } = x; + if (num(r) && num(g) && num(b)) return rgb(r, g, b); + } + } + function num(x: unknown): x is number { return typeof x == 'number'; } + } + + toJSON(): unknown { const { l, c, h } = this.oklch; return { l, c, h }; } +} + +export function oklch(l: number, c: number, h: number): Color { + return new Color({ type: 'oklch', l, c, h }); +} + +export function oklab(l: number, a: number, b: number): Color { + return new Color({ type: 'oklab', l, a, b }); +} + +export function rgb(r: number, g: number, b: number, + style: 'int' | 'float' = 'int'): Color { + return style == 'int' ? + new Color({ type: 'srgb', r: r / 255, g: g / 255, b: b / 255 }) : + new Color({ type: 'srgb', r, g, b }); +} + + + +export type Luma = number; +export type Chroma = number; +export type Hue = number; +export type Alpha = number; + +export type HueDistance = number; diff --git a/rainbow-quox/script/color/rand.ts b/rainbow-quox/script/color/rand.ts new file mode 100644 index 0000000..e9f12f3 --- /dev/null +++ b/rainbow-quox/script/color/rand.ts @@ -0,0 +1,120 @@ +import * as R from '../rand.js'; +import * as Color from './def.js'; + +const max = Math.max; +const min = Math.min; + + +export type State = R.State; + + +export type CloseFar = 'close' | 'far'; +export type LightDark = 'light' | 'dark'; + +export class Rand extends R.Rand { + maxl: Color.Luma = 0.9; + minl: Color.Luma = 0.4; + minlLight: Color.Luma = 0.7; + maxlDark: Color.Luma = 0.65; + + mincLight: Color.Chroma = 0.08; + maxcLight: Color.Chroma = 0.1; + mincDark: Color.Chroma = 0.12; + maxcDark: Color.Chroma = 0.175; + + // max spread for a sequence of analogous colors. unless that would put them + // too close together + maxhWidth: Color.HueDistance = 80; + + // minimum distance between adjacent analogous colors + minhSep: Color.HueDistance = 5; + + // size of the wedge a "complementary" color can be in + maxhCompl: Color.HueDistance = 40; + + // size of the wedge a "triadic" color can be in + maxhTriad: Color.HueDistance = 25; + + constructor(); + constructor([a, b, c, d]: State); + constructor(str: string); + constructor(st?: State | string) { + if (st === undefined) super(); + else if (typeof st === 'string') super(st); + else super(st); + } + + isLight(l: Color.Luma): boolean { return l >= this.minlLight; } + + lightFor(baseL: Color.Luma, d: CloseFar = 'close'): Color.Luma { + const maxl = d == 'close' ? min(this.maxl, baseL * 1.25) : this.maxl; + return this.float(baseL, maxl); + } + darkFor(baseL: Color.Luma, d: CloseFar = 'close'): Color.Luma { + const minl = d == 'close' ? max(this.minl, baseL * 0.8) : this.minl + return this.float(minl, baseL); + } + + brightFor(l: Color.Luma, baseC: Color.Chroma): Color.Chroma { + return this.float(baseC, this.isLight(l) ? this.maxcLight : this.maxcDark); + } + + dullFor(l: Color.Luma, baseC: Color.Chroma): Color.Chroma { + return this.float(baseC, this.isLight(l) ? this.mincLight : this.mincDark); + } + + analogous1(baseH: Color.Hue): Color.Hue { + const size = this.float(this.minhSep, 2 * this.minhSep); + return this.boolean() ? baseH + size : baseH - size; + } + + analogous(baseH: Color.Hue, count: number): Color.Hue[] { + const minWidth = min(count * this.minhSep, this.maxhWidth * 0.8); + const width = this.float(minWidth, this.maxhWidth); + const sep = width / (count - 1); + const start = baseH - (width / 2); + const numbers = Array.from({length: count}, (_u, i) => start + i * sep); + return this.boolean() ? numbers : numbers.reverse(); + } + + complementary1(baseH: Color.Hue): Color.Hue { + return this.analogous1((baseH + 180) % 360); + } + + complementary(baseH: Color.Hue, count: number): Color.Hue[] { + const angle = this.float(180 - this.maxhCompl/2, 180 + this.maxhCompl/2); + return this.analogous(baseH + angle, count); + } + + triad(baseH: Color.Hue): [Color.Hue, Color.Hue] { + const angle = this.float(120 - this.maxhTriad/2, 120 + this.maxhTriad/2); + return [baseH - angle, baseH + angle]; + } + + baseLuma(ld?: LightDark): Color.Luma { + if (ld == 'light') { + return this.float(this.minlLight, this.maxl); + } else if (ld == 'dark') { + return this.float(this.minl, this.maxlDark); + } else { + return this.float(this.minl, this.maxl); + } + } + + baseChroma(l: Color.Luma): Color.Chroma { + if (l >= this.minlLight) { + return this.float(this.mincLight, this.maxcLight); + } else { + return this.float(this.mincDark, this.maxcDark); + } + } + + baseHue(): Color.Hue { return this.float(360); } + + color(ld?: LightDark): Color.Color { + const l = this.baseLuma(ld); + const c = this.baseChroma(l); + const h = this.baseHue(); + return Color.oklch(l, c, h); + } +} diff --git a/rainbow-quox/script/history.ts b/rainbow-quox/script/history.ts index 47fe42e..0e7ede6 100644 --- a/rainbow-quox/script/history.ts +++ b/rainbow-quox/script/history.ts @@ -1,19 +1,17 @@ -import { Colors as Oklchs, Rgbs } from './color.js'; +import { Colors } from './color.js'; import * as Color from './color.js'; export class HistoryItem { - name: string; - oklch: Oklchs; - rgb: Rgbs; + name: string; + cols: Colors; - constructor(name: string, oklch: Oklchs, rgb: Rgbs) { - this.oklch = oklch; - this.rgb = rgb; + constructor(name: string, cols: Colors) { + this.cols = cols; this.name = name; } asHtml(): HTMLButtonElement { - const { lines, outer, belly1: belly, fins1: fins } = this.rgb; + const { lines, outer, belly1: belly, fins1: fins } = this.cols; const content = ` @@ -37,7 +35,7 @@ export class HistoryItem { ${this.name} `; - let button = document.createElement('button'); + const button = document.createElement('button'); button.className = 'history-item'; button.dataset.name = this.name; button.innerHTML = content; @@ -54,7 +52,7 @@ export class History { add(name: string): void { this.items.push(name); } *iterNames(maxLength: number = 100): Iterable { - let seen = new Set; + const seen = new Set; let done = 0; for (let i = this.items.length - 1; i >= 0; i--) { @@ -71,10 +69,9 @@ export class History { // pass a negative number to iterate over all *iterItems(maxLength?: number): Iterable { for (const name of this.iterNames(maxLength)) { - const oklch = Color.colors(new Color.Rand(name), Color.KNOWN[name]); - const rgbs = Color.toRgbs(oklch); + const cols = Color.colors(new Color.Rand(name), Color.KNOWN[name]); - yield new HistoryItem(name, oklch, rgbs); + yield new HistoryItem(name, cols); } } @@ -107,8 +104,8 @@ export class History { } prune(maxLength?: number): void { - let keep = []; - for (let name of this.iterNames(maxLength)) keep.push(name); + const keep = []; + for (const name of this.iterNames(maxLength)) keep.push(name); this.items = keep.reverse(); } } diff --git a/rainbow-quox/script/layer.ts b/rainbow-quox/script/layer.ts index 4727b20..49db489 100644 --- a/rainbow-quox/script/layer.ts +++ b/rainbow-quox/script/layer.ts @@ -4,14 +4,18 @@ async function loadBitmap(url: string): Promise { const img0 = new Image; const img: Promise = new Promise((ok, err) => { img0.addEventListener('load', () => ok(img0)); - img0.addEventListener('error', () => err(`couldn't load file: ${url}`)); + img0.addEventListener('error', () => { + err(new Error(`couldn't load file: ${url}`)); + }); }); img0.src = url; return createImageBitmap(await img); } -export type Buffer = OffscreenCanvasRenderingContext2D; +export type Buffer = + CanvasCompositing & CanvasDrawImage & CanvasImageData & + CanvasRect & CanvasState; function dataViaBuffer(bmp: ImageBitmap, buf: Buffer): ImageData { buf.clearRect(0, 0, bmp.width, bmp.height); @@ -19,34 +23,10 @@ function dataViaBuffer(bmp: ImageBitmap, buf: Buffer): ImageData { return buf.getImageData(0, 0, bmp.width, bmp.height); } -async function loadDataLocking(url: string, buf: Buffer): Promise { - return loadBitmap(url).then(i => - navigator.locks.request('imagebuf', () => dataViaBuffer(i, buf))); -} - -async function loadDataFresh(url: string): Promise { - const img = await loadBitmap(url); - let buf = new OffscreenCanvas(img.width, img.height).getContext('2d')!; - return dataViaBuffer(img, buf); -} - -export function loadImageData(url: string, buf?: Buffer): Promise { - if (buf && navigator.locks) return loadDataLocking(url, buf); - else return loadDataFresh(url); -} - export const WIDTH = 1040; export const HEIGHT = 713; -export function makeBuffer(width = WIDTH, height = HEIGHT): Buffer { - return new OffscreenCanvas(width, height).getContext('2d')!; -} - -function makeBufferIfLocks(width?: number, height?: number): Buffer | undefined { - if (navigator.locks) return makeBuffer(width, height); -} - export type Layer = 'stroke' | 'static' | 'eyeshine' | Color.Layer; // in compositing order @@ -61,14 +41,16 @@ export function makeLayerInfo(f: (l: Layer) => A): Record { export async function makeLayerInfoAsync(f: (l: Layer) => Promise): Promise> { - let list = await Promise.all(allLayers.map(l => f(l).then(res => [l, res]))); - return Object.fromEntries(list); + const list = await Promise.all(allLayers.map(l => f(l).then(res => [l, res]))); + return Object.fromEntries(list) as Promise>; } -export function loadLayers(dir: string): Promise> { - let buf = makeBufferIfLocks(WIDTH, HEIGHT); - return makeLayerInfoAsync(l => loadImageData(`./${dir}/${l}.webp`, buf)); +export async function +loadLayers(dir: string, buf: Buffer): Promise> { + const bitmaps = + await makeLayerInfoAsync(l => loadBitmap(`./${dir}/${l}.webp`)); + return makeLayerInfo(l => dataViaBuffer(bitmaps[l], buf)); } @@ -76,7 +58,7 @@ export type Position = [x: number, y: number]; export type Positions = Record; export async function loadPos(dir: string): Promise { - return (await fetch(`./${dir}/pos.json`)).json(); + return (await fetch(`./${dir}/pos.json`)).json() as Promise; } @@ -95,10 +77,10 @@ export type Data = { export type ComposedData = Required; -export async function loadData(): Promise { - let [fl, fp, bl, bp] = await Promise.all([ - loadLayers('front'), loadPos('front'), - loadLayers('back'), loadPos('back') +export async function loadData(buf: Buffer): Promise { + const [fl, fp, bl, bp] = await Promise.all([ + loadLayers('front', buf), loadPos('front'), + loadLayers('back', buf), loadPos('back') ]); return { front: makeLayerInfo(l => [fl[l], fp[l]]), @@ -107,13 +89,13 @@ export async function loadData(): Promise { } -function recolor({ data }: ImageData, { r, g, b }: Color.Rgb) { +function recolor({ data }: ImageData, col: Color.Color) { for (let i = 0; i < data.length; i += 4) { - data[i] = r; data[i+1] = g; data[i+2] = b; + data[i] = col.red; data[i+1] = col.green; data[i+2] = col.blue; } } -export async function recolorAll(layers: Data, cols: Color.Rgbs) { +export async function recolorAll(layers: Data, cols: Color.Colors) { await Promise.all(Color.allLayers.map(l => { recolor(layers.front[l][0], cols[l]); recolor(layers.back[l][0], cols[l]); @@ -139,7 +121,7 @@ async function compose(buf: Buffer, layers: ComposeLayer[], export async function ensureComposed(buf: Buffer, data: Data): Promise { - let { front, back } = data; + const { front, back } = data; data.frontImage ??= await composeLayers(front); data.backImage ??= await composeLayers(back); return data as ComposedData; @@ -148,14 +130,12 @@ ensureComposed(buf: Buffer, data: Data): Promise { return compose(buf, allLayers.map(l => makeLayer(l, sdata)), WIDTH, HEIGHT); } function makeLayer(l: Layer, sdata: SideData): ComposeLayer { - let [i, p] = sdata[l]; + const [i, p] = sdata[l]; return [i, p, l == 'eyeshine' ? 'luminosity' : 'source-over']; } } -export async function redraw(ctx: CanvasRenderingContext2D, - buf: Buffer, data: ComposedData, side: Side) { - await ensureComposed(buf, data); +export function redraw(ctx: CanvasImageData, data: ComposedData, side: Side) { ctx.putImageData(data[`${side}Image`], 0, 0); } diff --git a/rainbow-quox/script/palette.ts b/rainbow-quox/script/palette.ts index 1b4501b..6a4839f 100644 --- a/rainbow-quox/script/palette.ts +++ b/rainbow-quox/script/palette.ts @@ -1,18 +1,19 @@ -import { Rgb, Rgbs, rgb } from './color.js'; +import { Color, Colors, rgb } from './color.js'; import { Layer } from './layer.js'; -export type Color = +export type Swatch = Exclude | 'collars' | 'bells' | 'tongues' | 'socks' | 'sclera'; // in palette order -export const COLORS: Color[] = - ['lines', 'outer', 'vitiligo1', 'spines', 'fins1', 'fins2', 'fins3', - 'vitiligo4', 'belly1', 'vitiligo3', 'belly2', 'vitiligo2', 'sclera', - 'eyes', 'tongues', 'masks', 'claws', 'socks', 'stripes', 'cuffs', - 'collars', 'bells']; +export const SWATCHES: Swatch[] = + ['lines', 'outer', 'vitiligo1', 'spines', + 'socks', 'stripes', 'cuffs', + 'vitiligo4', 'belly1', 'vitiligo3', 'belly2', 'vitiligo2', + 'fins1', 'fins2', 'fins3', 'masks', 'claws', + 'sclera', 'eyes', 'tongues', 'collars', 'bells']; -export const NAMES: Partial> = { +export const NAMES: Partial> = { outer: 'outer body', stripes: 'sock stripes', cuffs: 'sock cuffs', @@ -27,13 +28,13 @@ export const NAMES: Partial> = { vitiligo4: 'fins vitiligo', }; -export function name(l: Color): string { +export function name(l: Swatch): string { return NAMES[l] ?? l; } -export type StaticColor = Exclude; +export type StaticColor = Exclude; -export const STATIC_COLS: Record = { +export const STATIC_COLS: Record = { collars: rgb(206, 75, 101), bells: rgb(235, 178, 79), tongues: rgb(222, 165, 184), @@ -41,23 +42,23 @@ export const STATIC_COLS: Record = { sclera: rgb(238, 239, 228), }; -export function get(col: Color, palette: Rgbs): Rgb { - type PPalette = Partial>; - let p = palette as PPalette; - let s = STATIC_COLS as PPalette; +export function get(col: Swatch, palette: Colors): Color { + type PPalette = Partial>; + const p = palette as PPalette; + const s = STATIC_COLS as PPalette; return (p[col] ?? s[col])!; } -export function make(seed: string, palette: Rgbs): Blob { - let lines = [ +export function make(seed: string, palette: Colors): Blob { + const lines = [ "GIMP Palette\n", `Name: quox ${seed}\n`, "Columns: 6\n\n", ]; - for (const col of COLORS) { - let { r, g, b } = get(col, palette); - lines.push(`${r} ${g} ${b} ${name(col)}\n`); + for (const sw of SWATCHES) { + const col = get(sw, palette); + lines.push(`${col.red} ${col.green} ${col.blue} ${name(sw)}\n`); } return new Blob(lines, { type: 'application/x-gimp-palette' }); diff --git a/rainbow-quox/script/quox.ts b/rainbow-quox/script/quox.ts index ab19ebf..a8bad51 100644 --- a/rainbow-quox/script/quox.ts +++ b/rainbow-quox/script/quox.ts @@ -16,7 +16,7 @@ function message(msg: string, size = 100) { function urlState(): string | undefined { - let hash = document.location.hash?.substring(1); + const hash = document.location.hash?.substring(1); if (hash != '' && hash !== undefined) return decodeURI(hash); } @@ -28,37 +28,35 @@ type ApplyStateOpts = { seed: string, side?: Layer.Side, firstLoad?: boolean, - buf?: Layer.Buffer, history?: History, done?: Done, }; async function applyState(data: Layer.Data, opts: ApplyStateOpts): Promise { - let { side, seed, firstLoad, buf, history, done } = opts; + const { seed, history } = opts; + let { side, firstLoad, done } = opts; side ??= 'front'; firstLoad ??= false; - buf ??= Layer.makeBuffer(); done ??= () => {}; - let rand = new Color.Rand(seed); + const rand = new Color.Rand(seed); - const oklch = Color.colors(rand, Color.KNOWN[seed]); - const rgb = Color.toRgbs(oklch); + const cols = Color.colors(rand, Color.KNOWN[seed]); const newSeed = rand.alphaNum(); - await Layer.recolorAll(data, rgb); + await Layer.recolorAll(data, cols); - updateBg(oklch); - updateSvgs(oklch, rgb); + updateBg(cols); + updateSvgs(cols); updateLabel(seed); updateUrl(seed); if (firstLoad) { - await instantUpdateImage(side, await Layer.ensureComposed(buf, data)); + await instantUpdateImage(side, data); done(); } else { - await animateUpdateImage(buf, side, data, done); + await animateUpdateImage(side, data, done); } if (history) history.addSave(seed); @@ -74,8 +72,9 @@ function getCanvasCtx(id: CanvasId) { } async function -instantUpdateImage(side: Layer.Side, data: Layer.ComposedData) { - getCanvasCtx('main').putImageData(data[`${side}Image`], 0, 0); +instantUpdateImage(side: Layer.Side, data: Layer.Data) { + const cdata = await Layer.ensureComposed(getCanvasCtx('aux'), data); + getCanvasCtx('main').putImageData(cdata[`${side}Image`], 0, 0); } type Done = () => void; @@ -83,10 +82,9 @@ type Done = () => void; const noAnim = matchMedia('(prefers-reduced-motion: reduce)'); async function -animateUpdateImage(buf: Layer.Buffer, side: Layer.Side, - data: Layer.Data, done: Done) { +animateUpdateImage(side: Layer.Side, data: Layer.Data, done: Done) { if (noAnim.matches) { - instantUpdateImage(side, await Layer.ensureComposed(buf, data)); + await instantUpdateImage(side, data); done(); return; } @@ -97,11 +95,11 @@ animateUpdateImage(buf: Layer.Buffer, side: Layer.Side, const aux = getCanvasCtx('aux'); document.documentElement.dataset.running = 'reroll'; - const cdata = await Layer.ensureComposed(buf, data); - Layer.redraw(aux, buf, cdata, side); + const cdata = await Layer.ensureComposed(aux, data); + Layer.redraw(aux, cdata, side); - aux.canvas.addEventListener('animationend', async () => { - await Layer.redraw(main, buf, cdata, side); + aux.canvas.addEventListener('animationend', () => { + Layer.redraw(main, cdata, side); aux.canvas.style.removeProperty('animation'); delete document.documentElement.dataset.running; done(); @@ -113,10 +111,9 @@ animateUpdateImage(buf: Layer.Buffer, side: Layer.Side, } async function -animateSwapImage(buf: Layer.Buffer, newSide: Layer.Side, - data: Layer.ComposedData, done: Done) { +animateSwapImage(newSide: Layer.Side, data: Layer.ComposedData, done: Done) { if (noAnim.matches) { - instantUpdateImage(newSide, data); + await instantUpdateImage(newSide, data); done(); return; } @@ -127,9 +124,9 @@ animateSwapImage(buf: Layer.Buffer, newSide: Layer.Side, const aux = getCanvasCtx('aux'); document.documentElement.dataset.running = 'swap'; - await Layer.redraw(aux, buf, data, newSide); + Layer.redraw(aux, data, newSide); - aux.canvas.addEventListener('animationend', async () => { + aux.canvas.addEventListener('animationend', () => { const image = aux.getImageData(0, 0, Layer.WIDTH, Layer.HEIGHT); main.putImageData(image, 0, 0); @@ -144,7 +141,7 @@ animateSwapImage(buf: Layer.Buffer, newSide: Layer.Side, } function updateBg(cols: Color.Colors) { - document.documentElement.style.setProperty('--hue', `${cols.outer.h}`); + document.documentElement.style.setProperty('--hue', `${cols.outer.hue}`); } function updateLabel(seed: string) { @@ -152,21 +149,21 @@ function updateLabel(seed: string) { if (stateLabel) stateLabel.innerHTML = seed; } -function updateSvgs(oklch: Color.Colors, rgb: Color.Rgbs) { +function updateSvgs(cols: Color.Colors) { const paletteObj = document.getElementById('palette') as HTMLObjectElement; const palette = paletteObj.contentDocument as XMLDocument | null; if (palette) { - palette.documentElement.style.setProperty('--hue', `${oklch.outer.h}`); + palette.documentElement.style.setProperty('--hue', `${cols.outer.hue}`); const get = (id: string) => palette.getElementById(id); for (const layer of Color.allLayers) { - let col = rgb[layer].css(); + const col = cols[layer].css(); let elem; // main group - if (elem = get(`i-${layer}`)) { - if (oklch[layer].l < 0.6) { + if ((elem = get(`i-${layer}`))) { + if (cols[layer].luma < 0.6) { elem.classList.add('light'); elem.classList.remove('dark'); } else { elem.classList.add('dark'); elem.classList.remove('light'); @@ -175,9 +172,9 @@ function updateSvgs(oklch: Color.Colors, rgb: Color.Rgbs) { } // label - if (elem = get(`c-${layer}`)) elem.innerHTML = col; + if ((elem = get(`c-${layer}`))) elem.innerHTML = col; // minor swatch, if applicable - if (elem = get(`s-${layer}`)) elem.style.setProperty('--col', col); + if ((elem = get(`s-${layer}`))) elem.style.setProperty('--col', col); } } } @@ -188,14 +185,12 @@ function showHistory(history: History, data: Layer.Data, const list = document.getElementById('history-items'); if (!list) return; list.innerHTML = ''; - let { side, firstLoad, buf, done } = opts; + const { side, firstLoad, done } = opts; for (const item of history.iterItems()) { const elem = item.asHtml(); - let allOpts = { side, firstLoad, buf, done, seed: item.name, history }; - elem.addEventListener('click', () => { - applyState(data, allOpts); - }); + const allOpts = { side, firstLoad, done, seed: item.name, history }; + elem.addEventListener('click', () => void applyState(data, allOpts)); list.appendChild(elem); } @@ -211,13 +206,13 @@ function showHistory(history: History, data: Layer.Data, function closeHistory() { document.getElementById('history-items')?. scroll({ top: 0, left: 0, behavior: 'smooth' }); - let field = document.getElementById('history-close-target'); + const field = document.getElementById('history-close-target'); if (field) field.parentElement?.removeChild(field); document.documentElement.dataset.state = 'ready'; } function download(seed: string) { - const colors = Color.toRgbs(Color.colors(new Color.Rand(seed))); + const colors = Color.colors(new Color.Rand(seed)); const blob = Palette.make(seed, colors); // there must be a better way to push out a file than @@ -233,14 +228,15 @@ function download(seed: string) { async function setup() { message('loading layers…'); - let data = await Layer.loadData().catch(e => { message(e, 30); throw e }); - let history = History.load(); + const aux = getCanvasCtx('aux'); - let buf = Layer.makeBuffer(); + const data = await Layer.loadData(aux) + .catch(e => { message(`${e}`, 30); throw e }); + const history = History.load(); let prevSeed = urlState() ?? new Color.Rand().alphaNum(); let seed = - await applyState(data, { seed: prevSeed, buf, history, firstLoad: true }); + await applyState(data, { seed: prevSeed, history, firstLoad: true }); let side: Layer.Side = 'front'; const reroll = document.getElementById('reroll')!; @@ -248,6 +244,10 @@ async function setup() { addListeners(); + function asyncHandler(h: (e: Event) => Promise): (e: Event) => void { + return (e: Event) => void h(e); + } + // these ones don't need to be toggled document.getElementById('hideui')?.addEventListener('click', () => { document.documentElement.dataset.state = 'fullquox'; @@ -258,38 +258,38 @@ async function setup() { document.getElementById('history-button')?.addEventListener('click', () => { // does this need the add/remove listeners dance // actually does anything any more? - showHistory(history, data, { side, buf }); + showHistory(history, data, { side }); }); document.getElementById('close-history')?.addEventListener('click', closeHistory); - document.getElementById('current-name')?.addEventListener('focusout', async e => { + document.getElementById('current-name')?.addEventListener('focusout', asyncHandler(async e => { const space = String.raw`(\n|\s|
| )`; const re = new RegExp(`^${space}+|${space}+$`, 'msgu'); - let elem = e.target as HTMLElement; + const elem = e.target as HTMLElement; let str = elem.innerText.replaceAll(re, ''); if (!str) str = new Color.Rand().alphaNum(); elem.innerText = str; // todo allow images cos it's funny prevSeed = seed; - seed = await applyState(data, { side, seed: str, buf, history }); - }); + seed = await applyState(data, { side, seed: str, history }); + })); document.getElementById('download-button')?.addEventListener('click', () => { download(prevSeed); }); document.documentElement.dataset.state = 'ready'; - async function run(task: (k: Done) => Promise): Promise { + function run(task: (k: Done) => Promise): void { removeListeners(); - await task(addListeners); + void task(addListeners); } function updateFromUrl() { run(async k => { const newSeed = urlState(); if (newSeed) { - const opts = { history, side, seed: newSeed, buf, done: k }; + const opts = { history, side, seed: newSeed, done: k }; prevSeed = seed; seed = await applyState(data, opts); } @@ -298,14 +298,14 @@ async function setup() { function runReroll() { run(async k => { prevSeed = seed; - seed = await applyState(data, { side, seed, buf, history, done: k }); + seed = await applyState(data, { side, seed, history, done: k }); }); } function runSwap() { run(async k => { side = Layer.swapSide(side); - const cdata = await Layer.ensureComposed(buf, data); - await animateSwapImage(buf, side, cdata, k); + const cdata = await Layer.ensureComposed(aux, data); + await animateSwapImage(side, cdata, k); }); } @@ -321,4 +321,4 @@ async function setup() { } } -document.addEventListener('DOMContentLoaded', setup); +document.addEventListener('DOMContentLoaded', () => void setup()); diff --git a/rainbow-quox/script/rand.ts b/rainbow-quox/script/rand.ts index efc8a1c..0be4ac6 100644 --- a/rainbow-quox/script/rand.ts +++ b/rainbow-quox/script/rand.ts @@ -73,7 +73,7 @@ export class Rand implements Randy { h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233); h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213); h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179); - h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1; + h1 ^= (h2 ^ h3 ^ h4); h2 ^= h1; h3 ^= h1; h4 ^= h1; return [h1>>>0, h2>>>0, h3>>>0, h4>>>0]; } @@ -112,7 +112,7 @@ export class Rand implements Randy { #next(): number { this.#a |= 0; this.#b |= 0; this.#c |= 0; this.#d |= 0; - let t = (this.#a + this.#b | 0) + this.#d | 0; + const t = (this.#a + this.#b | 0) + this.#d | 0; this.#d = this.#d + 1 | 0; this.#a = this.#b ^ this.#b >>> 9; this.#b = this.#c + (this.#c << 3) | 0;