pixel array with an image

tim50

Hi,

Does anybody know why my code isn't working?

Thanks,

https://www.openprocessing.org/sketch/438530

koogs

What is it meant to do?

tim50

You can get access to all the pixels in an image or even just on the canvas. In this case it is an image... but I don't know how to do it.

koogs

what do you mean by "You can get access to all the pixels in an image" ?

the openprocessing source, copied here:

var img;

function preload() {
  img = loadImage("bunker.png");
}

function setup() {
  createCanvas(192, 144);
  pixelDensity(1);
}

function draw() {
  background(51);
  loadPixels();
  img.loadPixels();
  for (var y = 0; y < height; y++){
    for (var x = 0; x < width; x++){
      var index = (x+y*width);
      pixels[index] = img.pixels[index];
    }
  } 
  updatePixels();
}

what is bunker.png?

pixels[index] = img.pixels[index];

this only works if the image is the same size as the canvas

GoToLoop

https://p5js.org/reference/#/p5/pixels

tim50

I still can't get this to work.

https://www.openprocessing.org/sketch/438530

Can anyone see what I am doing wrong? It is only showing the top of the image. I'm pretty sure for someone who knows what they are doing, this problem is kindergarden simple...

tim50

I don't know what you are talking about Koogs? Do you know why my code doesn't work?

koogs

That looks ok now.