Let's build a better world, together.
mutable image = ""
{
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(await FileAttachment("sample.png").url());
};
}
function setup(p) {
return () => {
p.createCanvas(1280, 847); // updatePixels not work in WEBGL mode
};
}
function draw(p) {
let inversed = false;
return () => {
const img = mutable image;
if (img.width == 1 || img.height == 1) {
return;
}
if (inversed === false) {
img.loadPixels();
for (let y = 0; y < img.height; y++) {
for (let x = 0; x < img.width; x++) {
const c = img.get(x, y);
const r = 255 - p.red(c);
const g = 255 - p.green(c);
const b = 255 - p.blue(c);
let nc = p.color(r, g, b);
img.set(x, y, nc);
}
}
img.updatePixels();
inversed = true;
}
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.
