added hichroma
rodzic
e07d4c810e
commit
2f044ca2a7
|
@ -1,16 +1,22 @@
|
||||||
import { Random } from "./random";
|
import { Random } from "./random";
|
||||||
import { range, clamp } from "./util";
|
import { range, clamp } from "./util";
|
||||||
import * as colorspaces from "colorspaces";
|
import * as colorspaces from "colorspaces";
|
||||||
import { ColorTuple, hsluvToHex } from "hsluv";
|
import { ColorTuple, luvToLch, lchToHsluv, hsluvToHex } from "hsluv";
|
||||||
import { clampedBytesToRGBColor } from "./color-util";
|
import { clampedBytesToRGBColor } from "./color-util";
|
||||||
|
import { getUVSliceGeometery } from "./chromatools";
|
||||||
|
|
||||||
type RandomPaletteGenerator = (numEntries: number, rng: Random) => string[];
|
type RandomPaletteGenerator = (numEntries: number, rng: Random) => string[];
|
||||||
//type ColorFunction = (rng: Random) => string[];
|
//type ColorFunction = (rng: Random) => string[];
|
||||||
|
|
||||||
export type RandomPaletteAlgorithm = "RGB" | "CIELUV" | "threevals" | "randhue";
|
export type RandomPaletteAlgorithm =
|
||||||
|
| "RGB"
|
||||||
|
| "CIELUV"
|
||||||
|
| "threevals"
|
||||||
|
| "randhue"
|
||||||
|
| "hichroma";
|
||||||
|
|
||||||
export const DEFAULT_RANDOM_PALETTE_ALGORITHM: RandomPaletteAlgorithm =
|
export const DEFAULT_RANDOM_PALETTE_ALGORITHM: RandomPaletteAlgorithm =
|
||||||
"threevals";
|
"hichroma";
|
||||||
|
|
||||||
function createRandomRGBColor(rng: Random): string {
|
function createRandomRGBColor(rng: Random): string {
|
||||||
const rgb = range(3).map(() => rng.inRange({ min: 0, max: 255, step: 1 }));
|
const rgb = range(3).map(() => rng.inRange({ min: 0, max: 255, step: 1 }));
|
||||||
|
@ -84,9 +90,9 @@ function threeVColor(rng: Random): string[] {
|
||||||
}
|
}
|
||||||
|
|
||||||
function randHue(rng: Random): string[] {
|
function randHue(rng: Random): string[] {
|
||||||
let L1 = rng.inInterval({ min: 10, max: 25 });
|
let L1 = rng.inInterval({ min: 10, max: 25 }),
|
||||||
let L2 = rng.inInterval({ min: L1 + 25, max: 60 });
|
L2 = rng.inInterval({ min: L1 + 25, max: 60 }),
|
||||||
let L3 = rng.inInterval({ min: L2 + 25, max: 85 });
|
L3 = rng.inInterval({ min: L2 + 25, max: 85 });
|
||||||
|
|
||||||
let Ls = [L1, L2, L3];
|
let Ls = [L1, L2, L3];
|
||||||
|
|
||||||
|
@ -113,6 +119,48 @@ function randHue(rng: Random): string[] {
|
||||||
return hexcolors;
|
return hexcolors;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clampHue(h: number): number {
|
||||||
|
let hn = (h / 360) % 1;
|
||||||
|
if (hn < 0.0) {
|
||||||
|
hn = 1.0 - hn;
|
||||||
|
}
|
||||||
|
hn = 360 * hn;
|
||||||
|
return hn;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hiChroma(rng: Random): string[] {
|
||||||
|
let L1 = rng.inInterval({ min: 0, max: 25 });
|
||||||
|
let L2 = rng.inInterval({ min: L1 + 25, max: 60 });
|
||||||
|
let L3 = rng.inInterval({ min: L2 + 25, max: 100 });
|
||||||
|
|
||||||
|
let Ls = [L1, L2, L3];
|
||||||
|
|
||||||
|
let hsluvs: ColorTuple[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < Ls.length; i++) {
|
||||||
|
let uvSlice = getUVSliceGeometery(Ls[i]);
|
||||||
|
let uvVert = rng.uniqueChoices(uvSlice.verticies, 1)[0];
|
||||||
|
let lch = luvToLch([Ls[i], uvVert.x, uvVert.y]);
|
||||||
|
let hsluv = lchToHsluv(lch);
|
||||||
|
|
||||||
|
//jitter hue
|
||||||
|
hsluv[0] = clampHue(hsluv[0] + rng.fromGaussian({ mean: 0, stddev: 10 }));
|
||||||
|
hsluvs.push(hsluv);
|
||||||
|
}
|
||||||
|
|
||||||
|
//randomize
|
||||||
|
hsluvs = rng.uniqueChoices(hsluvs, hsluvs.length);
|
||||||
|
|
||||||
|
//occasionally desaturate the bg
|
||||||
|
if (rng.bool(0.5)) {
|
||||||
|
hsluvs[0][1] = hsluvs[0][1] * 0.1;
|
||||||
|
}
|
||||||
|
console.log("Maneesh");
|
||||||
|
console.log(hsluvs[0]);
|
||||||
|
let hexcolors = hsluvs.map((x) => hsluvToHex(x as ColorTuple));
|
||||||
|
return hexcolors;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Factory function to take a function that generates a random color
|
* Factory function to take a function that generates a random color
|
||||||
* and return a palette generator that just calls it once for every
|
* and return a palette generator that just calls it once for every
|
||||||
|
@ -154,6 +202,7 @@ const PALETTE_GENERATORS: {
|
||||||
CIELUV: createSimplePaletteGenerator(createRandomCIELUVColor),
|
CIELUV: createSimplePaletteGenerator(createRandomCIELUVColor),
|
||||||
threevals: createTriadPaletteGenerator(threeVColor),
|
threevals: createTriadPaletteGenerator(threeVColor),
|
||||||
randhue: createTriadPaletteGenerator(randHue),
|
randhue: createTriadPaletteGenerator(randHue),
|
||||||
|
hichroma: createTriadPaletteGenerator(hiChroma),
|
||||||
};
|
};
|
||||||
|
|
||||||
export const RANDOM_PALETTE_ALGORITHMS = Object.keys(
|
export const RANDOM_PALETTE_ALGORITHMS = Object.keys(
|
||||||
|
|
|
@ -58,7 +58,7 @@ export function inclusiveRange({ min, max, step }: NumericRange): number[] {
|
||||||
/**
|
/**
|
||||||
* Clamp a number between min and max
|
* Clamp a number between min and max
|
||||||
*/
|
*/
|
||||||
export function clamp(x: number, min: number, max: number) {
|
export function clamp(x: number, min: number, max: number): number {
|
||||||
return Math.max(min, Math.min(x, max));
|
return Math.max(min, Math.min(x, max));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -87,7 +87,7 @@ export function slugify(text: string) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Returns whether the given number is even (as opposed to odd). */
|
/** Returns whether the given number is even (as opposed to odd). */
|
||||||
export function isEvenNumber(value: number) {
|
export function isEvenNumber(value: number): boolean {
|
||||||
return value % 2 === 0;
|
return value % 2 === 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue