Public
Edited
Jul 18, 2023
Paused
1 fork
Importers
14 stars
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
pseudoblue = {
// Inspired by Job van der Zwan’s research https://observablehq.com/@jobleonard/pseudo-blue-noise
// and NuSan’s shader https://www.shadertoy.com/view/7lV3Ry
// shadertoy implementation: https://www.shadertoy.com/view/mtlSzn
// The x and y axes are separated for better randomness
// 1 / 307 == 0.003257328990228013
// 1 / 499 == 0.002004008016032064
const xmix = (x, y) => ((x * 212281 + y * 384817) & 0x5555555) * 0.003257328990228013;
const ymix = (x, y) => ((x * 484829 + y * 112279) & 0x5555555) * 0.002004008016032064;
const s = 6;
let a, b;
return (x, y) => {
let v = 0;
for (let i = 0; i < s; ++i) {
b = y;
a = 1 & (x ^ xmix((x >>= 1), (y >>= 1)));
b = 1 & (b ^ ymix(x, y));
v = (v << 2) | (a + (b << 1) + 1) % 4;
}
return v / (1 << (s << 1));
};
}
pseudoblue(0, 0) // note: we're using [1, 2, 3, 0] as the bayer matrix, otherwise this corner returns 0
bayer = (x, y) => {
let v = 0;
for (let i = 0; i < 8; ++i) {
v = (v << 2) | ((x & 1) + ((y & 1) << 1) + 1) % 4;
x >>= 1;
y >>= 1;
}
return v / (1 << (8 << 1));
}
pseudoblueILG = {
const c = 256 * ilg_constant;
function mix(x, y) {
// http://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare
// https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/
const v = 52.9829189 * (0.06711056 * x + 0.00583715 * y);
return c * (v - (v|0));
}
const s = 8;
let a, b;
return (x, y) => {
let v = 0;
for (let i = 0; i < s; ++i) {
b = y;
a = 1 & (x ^ mix((x >>= 1), (y >>= 1)));
b = 1 & (b ^ mix(y, x));
v = (v << 2) | (a + (b << 1) + 1) % 4;
}
return v / (1 << (s << 1));
};
}
perf(bayer)
perf(pseudoblue)
perf(pseudoblueILG)
function perf(m) {
const t0 = performance.now();
const n = 2 ** 10;
for (let i = 0; i < n; ++i) for (let j = 0; j < n; ++j) m(i, j);
return (performance.now() - t0) | 0;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
