Published
Edited
Oct 13, 2021
{
if (window.p_inst !== undefined) {
window.p_inst.remove();
}
window.p_inst = new P5(
(p) => {
p.preload = preload(p);
p.setup = setup(p);
p.draw = draw(p);
},
document.querySelector("#view"),
true
);
return "Succeed";
}
function preload(p) {
return async () => {
mutable image = p.loadImage(url);
};
}
function setup(p) {
return () => {
const img = mutable image;
p.createCanvas(img.width, img.height);
};
}
function draw(p) {
let line = 0;
return () => {
const img = mutable image;
const w = img.width;
const h = img.height;
line += 1;
if (line == h) {
return
}
img.loadPixels();
for (let i = 0; i < w * 4; i += 4) {
// Gray = 0.2989 * R + 0.5870 * G + 0.1140 * B
let gray =
0.2989 * img.pixels[line * w * 4 + i ] +
0.587 * img.pixels[line * w * 4 + i + 1] +
0.114 * img.pixels[line * w * 4 + i + 2];
img.pixels[line * w * 4 + i] = gray;
img.pixels[line * w * 4 + i + 1] = gray;
img.pixels[line * w * 4 + i + 2] = gray;
}
img.updatePixels();
p.image(img, 0, 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.
