Tech > DITHERING

Here's the dithering function for anyone wanting to try it out (cart's code is mangled):

const ditherMatrix2x2 = [
[0, 2],
[3, 1],
];

const ditherMatrix4x4 = [
[0, 8, 2, 10],
[12, 4, 14, 6],
[3, 11, 1, 9],
[15, 7, 13, 5],
];

const ditherMatrix8x8 = [
[0, 32, 8, 40, 2, 34, 10, 42],
[48, 16, 56, 24, 50, 18, 58, 26],
[12, 44, 4, 36, 14, 46, 6, 38],
[60, 28, 52, 20, 62, 30, 54, 22],
[3, 35, 11, 43, 1, 33, 9, 41],
[51, 19, 59, 27, 49, 17, 57, 25],
[15, 47, 7, 39, 13, 45, 5, 37],
[63, 31, 55, 23, 61, 29, 53, 21],
];

function ditherrect(
x: number,
y: number,
w: number,
h: number,
fadeThickness: number,
c1: Color,
c2: Color,
horizontal = false,
matrixSize = 4,
) {
const matrix =
matrixSize === 2
? ditherMatrix2x2
: matrixSize === 4
? ditherMatrix4x4
: ditherMatrix8x8;
const dimension = matrix.length;
const centerOffset = horizontal
? w / 2 - fadeThickness / 2
: h / 2 - fadeThickness / 2;
if (horizontal) {
rect(x, y, centerOffset, h, c1);
} else {
rect(x, y, w, centerOffset, c1);
}
let startX = horizontal ? x + centerOffset : x,
endX = x + (horizontal ? fadeThickness + centerOffset : w);
let startY = horizontal ? y : y + centerOffset,
endY = y + (horizontal ? h : fadeThickness + centerOffset);
for (let x1 = startX; x1 < endX; x1++) {
for (let y1 = startY; y1 < endY; y1++) {
let x2 = horizontal ? x1 - x - centerOffset : x1 - x;
let y2 = horizontal ? y1 - y : y1 - y - centerOffset;
const threshold = matrix[x2 % dimension][y2 % dimension];
const t = horizontal
? (x2 / fadeThickness) * (matrixSize * matrixSize - 1)
: (y2 / fadeThickness) * (matrixSize * matrixSize - 1); //w
const color = t < threshold ? c1 : c2;
// weird but cool 3 color effect
// const color = t < threshold * .66 ? c1 : t < threshold * 1.33 ? c2 : Color.YELLOW
pix(x1, y1, color);
}
}
if (horizontal) {
rect(endX, y, centerOffset, h, c2);
} else {
rect(x, endY, w, centerOffset, c2);
}
}

Thanks to pixelbath for helping me get started with the dithering algorithm