# Weird behaviour with loadPixels() and updatePixels()

**URL:** <https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741>\
**Category:** Coding Questions\
**Created:** [January 22, 2019, 3:19pm UTC](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741 "2019-01-22T15:19:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kazuya\_Yoshimisu](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@Kazuya\_Yoshimisu](https://discourse.processing.org/u/Kazuya_Yoshimisu)\
**Post date:** [January 22, 2019, 3:19pm UTC](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741/1 "2019-01-22T15:19:19Z")

</div>

Hi everyone,

I got this very short sample of code where for each pixel of my canvas I draw a shade of grey:

```auto
function setup()
{
	createCanvas(200,200)
	background(0)

	loadPixels()

	for(var y = 0; y < height; y++)
		for(var x = 0; x < width; x++)
		{
			var c = (x+y)%255
			changePixelColor(x,y,c,c,c)
		}

	updatePixels()
}

function changePixelColor(x, y, r, g, b)
{
	var index = (x + y * width) * 4
	pixels[index + 0] = r
	pixels[index + 1] = g
	pixels[index + 2] = b
	pixels[index + 3] = 255
}

```

And this absolutely doesn’t work on my computer, here’s the result :

 ![reslt](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/792568198df323b1a958bda31447d87bcfa7094b.png)

The expected result are those rotated gradient lines. But they should take up all the screen. Why is 3/4 of the screen still black and most importantly, why is it split in two exact same tiny rectangles ?

Am I missing something ?  
Thanks for your help

---

<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:** [January 22, 2019, 4:03pm UTC](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741/2 "2019-01-22T16:03:58Z")

</div>

try

```auto
      var c = (x+y)%255
      set(x,y,c);
        //changePixelColor(x, y, c, c, c)

```

is it what you expected?

but this looks different:

```auto

function setup() {
  createCanvas(200, 200);
  background(0);
  let d = pixelDensity();

  loadPixels();
  console.log("d "+d); //see here 2
  for (var y = 0; y < height*d; y++) {
    for (var x = 0; x < width*d; x++)
    {
      var c = (x+y)%255;
      //set(x,y,c);
      changePixelColor(x, y, c, c, c,d);
    }
  }

  updatePixels();
}

function changePixelColor(x, y, r, g, b,d)
{
  var index = (x + y * width*d) * 4;
  pixels[index + 0] = r;
  pixels[index + 1] = g;
  pixels[index + 2] = b;
  pixels[index + 3] = 255;
}

```

i think in respect of pix dens also need to change

```auto
c = (x+y)%255

```

somehow  
[http://p5js.org/reference/#/p5/pixels](http://p5js.org/reference/#/p5/pixels)

---

<div class="post-metadata">

**Author:** ![Kazuya\_Yoshimisu](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@Kazuya\_Yoshimisu](https://discourse.processing.org/u/Kazuya_Yoshimisu)\
**Post date:** [January 22, 2019, 4:20pm UTC](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741/3 "2019-01-22T16:20:03Z")

</div>

You solved it.  
The problem was the pixel density, it was 2 by default so using set() instead of changePixelColor() or putting pixelDensity(1) at the start of the program fixes it  
Thanks !