the following code should change the color of the circles when you draw with your mouse, but the pixels array doesnt change at all, while the p5 graphic changes on the image(g,0,0)
let g;
function setup() {
createCanvas(500, 500);
g = createGraphics(10, 10);
g.background(0);
}
function getBr(x, y) {
let d = g.pixelDensity();
let a = [];
for (let i = 0; i < d; i++) {
for (let j = 0; j < d; j++) {
// loop over
index = 4 * ((y * d + j) * g.width * d + (x * d + i));
a.push(g.pixels[index]);
a.push(g.pixels[index + 1]);
a.push(g.pixels[index + 2]);
}
}
return (a[0] + a[1] + a[2]) / 3;
}
function draw() {
background(100);
noStroke();
fill(255);
let s = width/g.width;
g.loadPixels();
for (let y = 0; y < g.height; y++) {
for (let x = 0; x < g.width; x++) {
let b = getBr(x,y);
fill(b);
ellipse(x*s,y*s,s,s);
}
}
if (mouseIsPressed) {
g.noStroke();
g.fill(255);
g.rect(mouseX/s,mouseY/s,2,2);
}
image(g, 0, 0, 100, 100);
}