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 line = 0;
return () => {
const img = mutable image;
const w = img.width;
const h = img.height;
line += 1;
if (line == h) {
line = 0;
}
img.loadPixels();
for (let i = 0; i < w * 4; i++) {
const tmp = img.pixels[line * w * 4 + i];
img.pixels[line * w * 4 + i] = img.pixels[(h - line) * w * 4 + i];
img.pixels[(h - line) * w * 4 + i] = tmp;
}
img.updatePixels();
p.image(img, 0, 0);
mutable Output = `${w} - ${h} - ${line}`;
};
}
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.
