# Drawing a rect on an p5.graphics doesnt seem to update the pixels

**URL:** <https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033>\
**Category:** Coding Questions\
**Created:** [February 1, 2019, 7:26pm UTC](https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033 "2019-02-01T19:26:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mat](https://avatars.discourse-cdn.com/v4/letter/m/e9c0ed/32.png) [@mat](https://discourse.processing.org/u/mat)\
**Post date:** [February 1, 2019, 7:27pm UTC](https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033/1 "2019-02-01T19:27:00Z")

</div>

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)`

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 2, 2019, 5:52am UTC](https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033/2 "2019-02-02T05:52:57Z")

</div>

why not use the p5 get method

[https://editor.p5js.org/kll/sketches/xndqGVdtW](https://editor.p5js.org/kll/sketches/xndqGVdtW)

 ![2019-02-02_12-48-25_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/566a8d8a712e34e61dae3775f6479fc86f53cc20.png)

but for me that is all very slow ( even you only use 10 \* 10 pix ) here,  
still it works.

---

<div class="post-metadata">

**Author:** ![mat](https://avatars.discourse-cdn.com/v4/letter/m/e9c0ed/32.png) [@mat](https://discourse.processing.org/u/mat)\
**Post date:** [February 2, 2019, 11:20am UTC](https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033/3 "2019-02-02T11:20:56Z")

</div>

I have indeed tried get() before and it worked but it’s really slow and i want to use grids with higher resolution than 10x10

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 2, 2019, 11:43am UTC](https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033/4 "2019-02-02T11:43:27Z")

</div>

understand, but can not see that here,  
pls visit my p5js page again,  
now key [t] allow to switch between your code ( we know something is wrong )  
try:

```auto
        index = 4 * ((y * d + j) * g.width * d + (x * d + i));
	console.log("d "+d+" x "+x+" y "+y+" index "+index);
/*
d 2 x 9 y 9 index 1512 
d 2 x 9 y 9 index 1592 
d 2 x 9 y 9 index 1516 
d 2 x 9 y 9 index 1596

*/

```

and the working get version, anyhow see nearly same FPS.  
as my hardware is too limited (Raspberry PI) i would like to know  
what you see ( in both cases ).