brooke/dither4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial commit

Browse source
This commit is contained in:
Brooke Vibber 2022-11-05 17:57:34 -07:00
commit e5a9c68d05
9 changed files with 547 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

505
dither4.js Normal file
View file

@ -0,0 +1,505 @@
class RGB {
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
static fromHex(val) {
let r = val & 0xff;
let g = (val >> 8) & 0xff;
let b = (val >> 16) & 0xff;
return new RGB(r,g,b);
}
add(other) {
return new RGB(
this.r + other.r,
this.g + other.g,
this.b + other.b
);
}
difference(other) {
return new RGB(
this.r - other.r,
this.g - other.g,
this.b - other.b
);
}
magnitude() {
return Math.sqrt(
this.r * this.r +
this.g * this.g +
this.b * this.b
);
}
distance(other) {
return this.difference(other).magnitude();
}
}
// snarfed from https://lospec.com/palette-list/atari-8-bit-family-gtia
// which was calculated with Retrospecs App's Atari 800 emulator
let palette256 = [
0x000000,
0x111111,
0x222222,
0x333333,
0x444444,
0x555555,
0x666666,
0x777777,
0x888888,
0x999999,
0xaaaaaa,
0xbbbbbb,
0xcccccc,
0xdddddd,
0xeeeeee,
0xffffff,
0x190700,
0x2a1800,
0x3b2900,
0x4c3a00,
0x5d4b00,
0x6e5c00,
0x7f6d00,
0x907e09,
0xa18f1a,
0xb3a02b,
0xc3b13c,
0xd4c24d,
0xe5d35e,
0xf7e46f,
0xfff582,
0xffff96,
0x310000,
0x3f0000,
0x531700,
0x642800,
0x753900,
0x864a00,
0x975b0a,
0xa86c1b,
0xb97d2c,
0xca8e3d,
0xdb9f4e,
0xecb05f,
0xfdc170,
0xffd285,
0xffe39c,
0xfff4b2,
0x420404,
0x4f0000,
0x600800,
0x711900,
0x822a0d,
0x933b1e,
0xa44c2f,
0xb55d40,
0xc66e51,
0xd77f62,
0xe89073,
0xf9a183,
0xffb298,
0xffc3ae,
0xffd4c4,
0xffe5da,
0x410103,
0x50000f,
0x61001b,
0x720f2b,
0x83203c,
0x94314d,
0xa5425e,
0xb6536f,
0xc76480,
0xd87591,
0xe986a2,
0xfa97b3,
0xffa8c8,
0xffb9de,
0xffcaef,
0xfbdcf6,
0x330035,
0x440041,
0x55004c,
0x660c5c,
0x771d6d,
0x882e7e,
0x993f8f,
0xaa50a0,
0xbb61b1,
0xcc72c2,
0xdd83d3,
0xee94e4,
0xffa5e4,
0xffb6e9,
0xffc7ee,
0xffd8f3,
0x1d005c,
0x2e0068,
0x400074,
0x511084,
0x622195,
0x7332a6,
0x8443b7,
0x9554c8,
0xa665d9,
0xb776ea,
0xc887eb,
0xd998eb,
0xe9a9ec,
0xfbbaeb,
0xffcbef,
0xffdff9,
0x020071,
0x13007d,
0x240b8c,
0x351c9d,
0x462dae,
0x573ebf,
0x684fd0,
0x7960e1,
0x8a71f2,
0x9b82f7,
0xac93f7,
0xbda4f7,
0xceb5f7,
0xdfc6f7,
0xf0d7f7,
0xffe8f8,
0x000068,
0x000a7c,
0x081b90,
0x192ca1,
0x2a3db2,
0x3b4ec3,
0x4c5fd4,
0x5d70e5,
0x6e81f6,
0x7f92ff,
0x90a3ff,
0xa1b4ff,
0xb2c5ff,
0xc3d6ff,
0xd4e7ff,
0xe5f8ff,
0x000a4d,
0x001b63,
0x002c79,
0x023d8f,
0x134ea0,
0x245fb1,
0x3570c2,
0x4681d3,
0x5792e4,
0x68a3f5,
0x79b4ff,
0x8ac5ff,
0x9bd6ff,
0xace7ff,
0xbdf8ff,
0xceffff,
0x001a26,
0x002b3c,
0x003c52,
0x004d68,
0x065e7c,
0x176f8d,
0x28809e,
0x3991af,
0x4aa2c0,
0x5bb3d1,
0x6cc4e2,
0x7dd5f3,
0x8ee6ff,
0x9ff7ff,
0xb0ffff,
0xc1ffff,
0x01250a,
0x023610,
0x004622,
0x005738,
0x05684d,
0x16795e,
0x278a6f,
0x389b80,
0x49ac91,
0x5abda2,
0x6bceb3,
0x7cdfc4,
0x8df0d5,
0x9effe5,
0xaffff1,
0xc0fffd,
0x04260d,
0x043811,
0x054713,
0x005a1b,
0x106b1b,
0x217c2c,
0x328d3d,
0x439e4e,
0x54af5f,
0x65c070,
0x76d181,
0x87e292,
0x98f3a3,
0xa9ffb3,
0xbaffbf,
0xcbffcb,
0x00230a,
0x003510,
0x044613,
0x155613,
0x266713,
0x377813,
0x488914,
0x599a25,
0x6aab36,
0x7bbc47,
0x8ccd58,
0x9dde69,
0xaeef7a,
0xbfff8b,
0xd0ff97,
0xe1ffa3,
0x001707,
0x0e2808,
0x1f3908,
0x304a08,
0x415b08,
0x526c08,
0x637d08,
0x748e0d,
0x859f1e,
0x96b02f,
0xa7c140,
0xb8d251,
0xc9e362,
0xdaf473,
0xebff82,
0xfcff8e,
0x1b0701,
0x2c1801,
0x3c2900,
0x4d3b00,
0x5f4c00,
0x705e00,
0x816f00,
0x938009,
0xa4921a,
0xb2a02b,
0xc7b43d,
0xd8c64e,
0xead760,
0xf6e46f,
0xfffa84,
0xffff99,
].map((hex) => RGB.fromHex(hex));
function decimate(input, palette, n) {
// to brute-force, the possible palettes are:
// 255 * 254 * 253 = 16,386,810
//
// we could brute force it but that's a lot :D
// but can do some bisection :D
//
// need a fitness metric.
// each pixel in the dithered line gives a distance
// sum/average them? median? maximum?
// summing evens out the ups/downs from dithering
// but doesn't distinguish between two close and two distant options
// consider median, 90th-percentile, and max of abs(distance)
// consider doing the distance for each channel?
let line = input.slice();
// Apply dithering with given palette
let dither = (palette) => {
let fitness = 0;
let error = {
right: new RGB(0, 0, 0),
red: new Float64Array(line.length),
green: new Float64Array(line.length),
blue: new Float64Array(line.length),
}
let output = new Int32Array(line.length);
let popularity = new Int32Array(palette.length);
// Try dithering with this palette.
for (let x = 0; x < line.length; x++) {
let rgb = line[x];
rgb = rgb.difference(error.right);
// find the closest possible color
let shortest = Infinity;
let pick = -1;
for (let i = 0; i < palette.length; i++) {
let diff = palette[i].difference(rgb);
let dist = diff.magnitude();
if (dist < shortest) {
nextError = diff;
shortest = dist;
pick = i;
}
}
output[x] = pick;
popularity[pick]++;
error.right.r = nextError.r / 2;
error.right.g = nextError.g / 2;
error.right.b = nextError.b / 2;
if (x == 0) {
error.red[x - 1] += nextError.r / 8;
error.green[x - 1] += nextError.g / 8;
error.blue[x - 1] += nextError.b / 8;
} else {
error.red[x] += nextError.r / 8;
error.green[x] += nextError.g / 8;
error.blue[x] += nextError.b / 8;
}
error.red[x] += nextError.r / 4;
error.green[x] += nextError.g / 4;
error.blue[x] += nextError.b / 4;
error.red[x + 1] += nextError.r / 8;
error.green[x + 1] += nextError.g / 8;
error.blue[x + 1] += nextError.b / 8;
//fitness += error.r;
//fitness += error.g;
//fitness += error.b;
}
return {
output,
palette,
fitness,
popularity,
error
};
};
let start = Date.now();
let decimated = palette.slice();
while (decimated.length > n) {
let {popularity} = dither(decimated);
// Try dropping least used color on each iteration
let least = Infinity;
let pick = -1;
for (let i = 1; i < decimated.length; i++) {
if (popularity[i] < least) {
pick = i;
least = popularity[i];
}
}
let old = decimated.length;
decimated = decimated.filter((rgb, i) => {
if (i == 0) {
return true; // keep black always
}
if (i == pick) {
return false;
}
if (popularity[i] == 0) {
return false;
}
return true;
});
if (decimated.length >= old) {
throw new Error('logic error');
}
}
let delta = Date.now() - start;
console.log(`${delta}ms for line`);
// Palette fits
return dither(decimated);
}
function convert(source, sink) {
let width = 320;
let height = 192;
let canvas = sink;
let ctx = canvas.getContext('2d');
// Draw the source image down, then grab it
// and re-draw it with custom palette & dither.
ctx.drawImage(source, 0, 0);
let imageData = ctx.getImageData(0, 0, width, height);
let {data} = imageData;
let nextError;
for (let y = 0; y < height; y++) {
let line = new Uint8Array(data.buffer, y * width * 4, width * 4);
let input = [];
// Note we take two pixels because we're using the 160-wide 4-color mode
for (let x = 0; x < width; x += 2) {
let i = x >> 1;
let rgb = new RGB(
(line[x * 4 + 0] + line[x * 4 + 4]) / 2,
(line[x * 4 + 1] + line[x * 4 + 5]) / 2,
(line[x * 4 + 2] + line[x * 4 + 6]) / 2
);
if (nextError) {
rgb.r -= nextError.red[i];
rgb.g -= nextError.green[i];
rgb.b -= nextError.blue[i];
} else {
if (y > 0) {
debugger;
}
}
input.push(rgb);
}
let {output, palette, error} = decimate(input, palette256, 4);
nextError = error;
for (let x = 0; x < width; x++) {
let rgb = palette[output[x >> 1]];
line[x * 4 + 0] = rgb.r;
line[x * 4 + 1] = rgb.g;
line[x * 4 + 2] = rgb.b;
line[x * 4 + 3] = 0xff;
}
}
ctx.putImageData(imageData, 0, 0);
}
function run() {
for (let i = 0; i < 7; i++) {
let source = document.querySelector('#source' + i);
let sink = document.querySelector('#sink' + i);
let doit = () => convert(source, sink);
if (source.complete) {
doit();
} else {
source.addEventListener('load', doit);
}
}
}
if (document.readyState === 'loading') {
addEventListener('DOMContentLoaded', run);
} else {
run();
}

42
index.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Atari 4-color palette dither generator</title>
<style type="text/css">
body {
background-color: #4c5fd4;
color: #e5f8ff;
font-family: monospace;
}
img, canvas {
/*width: 640px;
height: 384px;*/
image-rendering: pixelated;
}
</style>
<script async src=dither4.js></script>
</head>
<body>
<img id=source0 with=320 height=192 src=sample0.jpg>
<canvas id=sink0 width=320 height=192></canvas>
<img id=source1 with=320 height=192 src=sample1.jpg>
<canvas id=sink1 width=320 height=192></canvas>
<img id=source2 with=320 height=192 src=sample2.jpg>
<canvas id=sink2 width=320 height=192></canvas>
<img id=source3 with=320 height=192 src=sample3.jpg>
<canvas id=sink3 width=320 height=192></canvas>
<img id=source4 with=320 height=192 src=sample4.jpg>
<canvas id=sink4 width=320 height=192></canvas>
<img id=source5 with=320 height=192 src=sample5.jpg>
<canvas id=sink5 width=320 height=192></canvas>
<img id=source6 with=320 height=192 src=sample6.jpg>
<canvas id=sink6 width=320 height=192></canvas>
</body>
</html>

BIN
sample0.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
sample1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
sample2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
sample3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
sample4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
sample5.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
sample6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB