Published
Edited
Oct 30, 2019
1 fork
Importers
22 stars
thresholdDither = {
let ctx = DOM.canvas(data.width, data.height).getContext('2d');
ctx.canvas.style.width = `${data.width * 2}px`;
let clone = new ImageData(
new Uint8ClampedArray(data.data.data),
data.width,
data.height
);
for (let x = 0; x < clone.data.length; x += 4)
clone.data[x] = clone.data[x + 1] = clone.data[x + 2] =
clone.data[x] + clone.data[x + 1] + clone.data[x + 2] > threshold
? 255
: 0;
ctx.putImageData(clone, 0, 0);
return ctx.canvas;
}
randomDither = {
let ctx = DOM.canvas(data.width, data.height).getContext("2d");
ctx.canvas.style.width = `${data.width * 2}px`;
let clone = new ImageData(
new Uint8ClampedArray(data.data.data),
data.width,
data.height
);
for (let x = 0; x < clone.data.length; x += 4)
clone.data[x] = clone.data[x + 1] = clone.data[x + 2] =
clone.data[x] + clone.data[x + 1] + clone.data[x + 2] >
Math.random() * 255 * 3
? 255
: 0;
ctx.putImageData(clone, 0, 0);
return ctx.canvas;
}
floydSteinberg = {
let ctx = DOM.canvas(data.width, data.height).getContext('2d');
ctx.canvas.style.width = `${data.width * 2}px`;
let clone = new ImageData(
new Uint8ClampedArray(data.data.data),
data.width,
data.height
);
function px(x, y) {
return x * 4 + y * data.width * 4;
}
for (let y = 0; y < data.height; y++) {
for (let x = 0; x < data.width; x++) {
let oldPixel = clone.data[px(x, y)];
let newPixel = oldPixel > 125 ? 255 : 0;
clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[
px(x, y) + 2
] = newPixel;
let quantError = oldPixel - newPixel;
clone.data[px(x + 1, y)] = clone.data[px(x + 1, y) + 1] = clone.data[
px(x + 1, y) + 2
] = clone.data[px(x + 1, y)] + (quantError * 7) / 16;
clone.data[px(x - 1, y + 1)] = clone.data[
px(x - 1, y + 1) + 1
] = clone.data[px(x - 1, y + 1) + 2] =
clone.data[px(x - 1, y + 1)] + (quantError * 3) / 16;
clone.data[px(x, y + 1)] = clone.data[px(x, y + 1) + 1] = clone.data[
px(x, y + 1) + 2
] = clone.data[px(x, y + 1)] + (quantError * 5) / 16;
clone.data[px(x + 1, y + 1)] = clone.data[
px(x + 1, y + 1) + 1
] = clone.data[px(x + 1, y + 1) + 2] =
clone.data[px(x + 1, y + 1)] + (quantError * 1) / 16;
}
}
ctx.putImageData(clone, 0, 0);
yield ctx.canvas;
}
html`<style>canvas { image-rendering: crisp-edges; image-rendering: pixelated; }</style>`
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.
