function moire(size, palette, parameters) {
const [w, h] = size;
const [a, b, c, d, e] = parameters;
return function(elapsedTime, data) {
const t = elapsedTime / 1000;
const cx1 = Math.sin(t / a) * w / 3 + w / 2;
const cy1 = Math.sin(t / b) * h / 3 + h / 2;
const cx2 = Math.cos(t / c) * w / 3 + w / 2;
const cy2 = Math.cos(t / d) * h / 3 + h / 2;
let i = 0;
for (let y = 0; y < h; y++) {
const dy1 = (y - cy1) ** 2;
const dy2 = (y - cy2) ** 2;
for (let x = 0; x < w; x++) {
const dx1 = (x - cx1) ** 2;
const dx2 = (x - cx2) ** 2;
const hy1 = Math.sqrt(dx1 + dy1);
const hy2 = Math.sqrt(dx2 + dy2);
const col = (hy1 ^ hy2) >> e & 1;
data[i++] = palette[col][0];
data[i++] = palette[col][1];
data[i++] = palette[col][2];
data[i++] = palette[col][3];
}
}
}
}
parameters = [1, 2, 1.5, 0.5, 5]
palette = [
[31, 26, 79, 255],
[200, 32, 39, 255]
]
Plot.plot({
color: { domain: [0, 1], range: palette.map(d => d3.rgb(...d)) },
marks: [
Plot.cell(d3.cross(d3.range(16), d3.range(16)), { fill: d => (d[0] ^ d[1]) & 1, x: '0', y: '1' })
]
});
Plot.plot({
color: { domain: [0, 1], range: palette.map(d => d3.rgb(...d)) },
marks: [
Plot.cell(d3.cross(d3.range(16), d3.range(16)), { fill: d => (d[0] ^ d[1]) >> 1 & 1, x: '0', y: '1' })
]
});
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.
