Published
Edited
Dec 22, 2018
1 fork
11 stars
man = {
let pixels = ctx.getImageData(0, 0, data.width, data.height);
let lines = "";
let w = data.width * 4;
let p = ``;
for (let i = 0; i < pixels.data.length; i += w) {
let y = Math.floor(i / w);
p += `M0 ${y}`;
let down = false;
for (let j = i; j < i + w; j += 4) {
if (pixels.data[j] === 0) {
if (down === false) {
p += `M ${(j % w) / 4} ${y} `;
down = true;
}
} else {
if (down === true) {
p += `L ${(j % w) / 4} ${y} `;
down = false;
}
}
}
}
return html`<svg viewBox='0 0 ${data.width} ${
data.height
}' width=${data.width * 2} height=${data.height *
2}><path d='${p}' stroke='black' stroke-width='0.5' fill='none' /></svg>`;
}
ctx = floydSteinberg.getContext("2d")
import {floydSteinberg, data} from "@tmcw/dithering"
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.
