Let's build a better world, together.
Published
Edited
Feb 18, 2022
2 forks
{
if (window.p_inst !== undefined) {
window.p_inst.remove();
}
window.p_inst = new P5(
(p) => {
p.setup = setup(p);
p.draw = draw(p);
},
document.querySelector("#view"),
true
);
return "Succeed";
}
function setup(p) {
return () => {
p.createCanvas(640, 640); // updatePixels not work in WEBGL mode
p.pixelDensity(1);
};
}
function draw(p) {
let count = 127;
return () => {
count += 1;
if (count == 255) {
count = 127;
}
mutable Output = p.frameCount;
p.background(255);
p.loadPixels();
for (var y = 0; y < p.height; y++) {
for (var x = 0; x < p.width; x++) {
var index = (x + y * p.width) * 4;
//if (x % 16 == 0 && y % 8 == 0) {
if (x < y && x % 16 != 0) {
p.pixels[index + 0] = (2 * x) % count;
p.pixels[index + 1] = (3 * y) % count;
p.pixels[index + 2] = 2 * count;
} else {
p.pixels[index + 0] = 127 % count; // red
p.pixels[index + 1] = 0;
p.pixels[index + 2] = 0;
}
p.pixels[index + 3] = 255; // alpha
}
}
p.updatePixels();
};
}
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.
