Tinkering with code and algorithms for fun
getInterleavedGradientNoise = {
function getInterleavedGradientNoise(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/
// // InterleavedGradientNoise[x_, y_] :=
// // FractionalPart[52.9829189*FractionalPart[0.06711056*x + 0.00583715*y]]
// const v1 = 0.06711056 * x + 0.00583715 * y;
// const v2 = 52.9829189 * (v1 - (v1 | 0));
// return (256 * (v2 - (v2 | 0))) | 0;
return (142 * x + 79 * y) & 255;
}
getInterleavedGradientNoise.label = "Intrlvd. Grdnt. Noise";
return getInterleavedGradientNoise;
}
pseudoblueILG = {
const c = 256 * 7.92177803434839;
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;
function pseudoblueILG(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 64 + (v / 512);
};
pseudoblueILG.label = "pb ILG"
return pseudoblueILG
}
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 = 8;
const norm = 1 / (1 << 2*s)
let a, b;
const pseudoblue = (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;
}
v *= norm;
return v * 128 + 64;
};
pseudoblue.label = "pseudoblue";
return pseudoblue;
}
import {select, slider} from "@jashkenas/inputs"
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.
