Add a basic color palette generator

This commit is contained in:
Pyrex 2024-04-22 18:16:32 -07:00
parent 03a8ae9a24
commit c49b042b62
4 changed files with 232 additions and 0 deletions

2
slop/palette/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
palette.png

184
slop/palette/index.mjs Normal file
View File

@ -0,0 +1,184 @@
import Color from "colorjs.io/dist/color.js";
import {PNG} from "pngjs";
import fs from "fs";
function generateColors() {
let pad = function(n) {
while (colors.length < n) {
colors.push(new Color("slategray"));
}
}
let band = function(colors) {
return function(point, shimmer) {
point += shimmer;
var ix2 = point * colors.length;
while (ix2 < 0) { ix2 += colors.length; }
return colors[Math.floor(ix2) % colors.length].mix(
colors[Math.floor(ix2 + 1) % colors.length],
ix2 % 1,
{"space": "oklch", "outputSpace": "oklab"}
)
}
}
let ramp = function(start, c0, c1, c2) {
// deep base -> center -> pastel
var r01 = c0.range(c1, {space: "oklab", outputSpace: "oklch"});
var r12 = c1.range(c2, {space: "oklab", outputSpace: "oklch"});
var n = 5;
var i = 0;
for (var amt = 0; amt < n; amt++) {
colors[start + i * 8] = r01(amt/(n - 1));
i += 1;
}
n = 3;
for (var amt = 1; amt < n; amt++) {
colors[start + i * 8] = r12(amt/(n - 1));
i += 1;
}
}
var colors = [];
// we were originally appending these
// but for now, just prefill all the slots
pad(64); // so the slots are filled and we can replace them
// system colors
colors[0] = new Color("#000000");
colors[1] = new Color("#0000ff");
colors[2] = new Color("#00ff00");
colors[3] = new Color("#00ffff");
colors[4] = new Color("#ff0000");
colors[5] = new Color("#ff00ff");
colors[6] = new Color("#ffff00");
colors[7] = new Color("#ffffff");
for (var i = 0; i < 8; i++) {
// colors[i].hsv.h += 135.0;
}
let lowBand = band([
new Color("oklch(11.2% 0.0744 268.04)"),
new Color("oklch(15.55% 0.0782 310.39)"),
new Color("oklch(21.51% 0.0864 357.28)"),
new Color("oklch(22.74% 0.0755 43.16)"),
new Color("oklch(23.84% 0.0733 145.59)"),
new Color("oklch(27.4% 0.0444 171.2)"), // NOTE: This reproduces terribly
new Color("oklch(19.1% 0.0396 233.51)"), // NOTE: This reproduces terribly
new Color("oklch(18.63% 0.0575 259.12)"), // NOTE: This reproduces terribly
]);
let middleBand = band([
new Color("oklch(55.34% 0.241 291.34)"),
new Color("oklch(58.54% 0.1994 330.82)"),
new Color("oklch(63.2% 0.2135 20.28)"),
new Color("oklch(80.34% 0.16 70.47)"),
new Color("oklch(91.95% 0.23681720512967358 126.89394948265881)"),
new Color("oklch(87.99% 0.2353 147.34)"),
new Color("oklch(86.44% 0.1505 187.42)"),
new Color("oklch(74.91% 0.1505 235.22)"),
]);
let highBand = band([
new Color("oklch(92.3% 0.041 317.16)"),
new Color("oklch(94.93% 0.0217 358.04)"),
new Color("oklch(95.21% 0.0101 7.31)"),
new Color("oklch(98.41% 0.0172 88.4)"),
new Color("oklch(99.58% 0.00969628196819721 125.6732391579389)"),
new Color("oklch(97.53% 0.0584 127.22)"),
new Color("oklch(96.38% 0.0465 167.45)"),
new Color("oklch(95.21% 0.0475 214.73)"),
]);
for (var i = 0; i < 4; i++) {
var lowRampIx = (i - 0.25) / 4;
var low = lowBand(lowRampIx, -0.3);
var middle = middleBand(lowRampIx, 0.0);
colors[8 + i * 2] = low.mix(middle, 0.2/4.0, {space: "oklab"})
colors[8 + i * 2 + 1] = low.mix(middle, 0.8/4.0, {space: "oklab"})
colors[8 + i * 2].oklch.c *= 0.4;
colors[8 + i * 2 + 1].oklch.c *= 0.5;
}
for (var i = 0; i < 4; i++) {
for (var c = 1; c < 3; c++) {
var lowRampIx = (i - 0.25) / 4;
var low = lowBand(lowRampIx, -0.3);
var middle = middleBand(lowRampIx, 0.0);
var cbase = low.mix(middle, ([2.1, 3.1, 4.0][c - 1])/4, {space: "oklab"})
colors[8 + i * 2 + c * 8] = cbase
var color2 = low.mix(middle, ([1.7, 2.7, 3.5][c - 1])/4, {space: "oklab"})
color2.oklch.c *= 0.6
colors[8 + i * 2 + 1 + c * 8] = color2;
}
}
for (var i = 0; i < 8; i++) {
colors[32 + i] = middleBand((i - 1) / 8, 0.0);
colors[32 + i + 8] =
middleBand((i - 1) / 8, 0.0).mix(highBand((i - 1) / 8, 0.15), 1.5/5, {space: "oklch"})
}
for (var i = 0; i < 4; i++) {
var highRampIx = (i - 0.25) / 4;
colors[48 + i * 2] =
middleBand(highRampIx, 0.0).mix(highBand(highRampIx, 0.15), 2.4/5, {space: "oklch"})
colors[48 + i * 2 + 1] =
middleBand(highRampIx, 0.0).mix(highBand(highRampIx, 0.15), 3.4/5, {space: "oklch"})
colors[48 + i * 2 + 1].lch.c *= 0.7
}
for (var i = 0; i < 4; i++) {
var highRampIx = (i - 0.25) / 4;
colors[56 + i * 2] =
middleBand(highRampIx, 0.0).mix(highBand(highRampIx, 0.15), 4.3/5, {space: "oklch"})
colors[56 + i * 2].lch.c *= 0.6
colors[56 + i * 2 + 1] =
middleBand(highRampIx, 0.0).mix(highBand(highRampIx, 0.1), 5/5, {space: "oklch"})
colors[56 + i * 2 + 1].lch.c *= 0.4
colors[56 + i * 2].lch.l =
colors[56 + i * 2].lch.l * 0.25 +
colors[56 + i * 2 + 1].lch.l * 0.75
}
/*
for (var i = 0; i < 8; i++) {
colors[8 + i] = middleBand(i/8.0);
}
*/
return colors;
}
function dump(fname, colors, width, height, scalar) {
if (colors.length != width * height) {
throw new Error("wrong number of colors: " + colors.length);
}
let pngdata = [];
let clamp = function(x) {
if (x < 0.0) { return 0.0; }
if (x > 255.0) { return 255.0; }
return Math.round(x);
}
for (var y = 0; y < height * scalar; y++) {
for (var x = 0; x < width * scalar; x++) {
let i = Math.floor(y / scalar) * width + Math.floor(x / scalar);
pngdata.push(clamp(255 * colors[i].srgb.r));
pngdata.push(clamp(255 * colors[i].srgb.g));
pngdata.push(clamp(255 * colors[i].srgb.b));
pngdata.push(255);
}
}
var png = new PNG({
width: width * scalar,
height: height * scalar
});
png.data = pngdata;
png.pack().pipe(fs.createWriteStream(fname));
}
dump("palette.png", generateColors(), 8, 8, 64);

30
slop/palette/package-lock.json generated Normal file
View File

@ -0,0 +1,30 @@
{
"name": "palette",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "palette",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"colorjs.io": "^0.5.0",
"pngjs": "^7.0.0"
}
},
"node_modules/colorjs.io": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.0.tgz",
"integrity": "sha512-qekjTiBLM3F/sXKks/ih5aWaHIGu+Ftel0yKEvmpbKvmxpNOhojKgha5uiWEUOqEpRjC1Tq3nJRT7WgdBOxIGg=="
},
"node_modules/pngjs": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
"integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
"engines": {
"node": ">=14.19.0"
}
}
}
}

16
slop/palette/package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "palette",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"main": "node index.mjs",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"colorjs.io": "^0.5.0",
"pngjs": "^7.0.0"
}
}