Reading pixels from an image

Yes, that works fine. I have been able to load an display images without any issue.
It’s trying to read pixel data and then put it somewhere else that has been the problem.

Could we have an example of your code that didn’t work, exactly as you have it, so we can try it on our systems?

Ok, here is one attempt.

let img;
let x;
let y;

function setup() {
createCanvas(720, 400);
img = loadImage(‘data/moonwalk.jpg’);

}

function processit() {

for (let x = 0; x < 720; x++) {
for(let y = 0;y < 400; y++) {
col=img.get(x,y);
stroke(col);
point(x,y);

  }

}
}

function draw() {

}

You forgot to call the processit function.

Try this:

function draw() {
  processit();
}

Woops!
Yes, I have had the processit() function in draw() but had removed it to try something else.
It doesn’t work when put back in… at least not properly.
I have been experimenting a bit all this time and I have noticed the browser (Firefox) is struggling a bit.
I ran the code with procvessit() in draw() and I still don’t get the image. Usually the screen is blank but occasionally the canvas is turned black. So it seems the point(x,y) is being executed but isn’t getting the right information.

OK, let’s try another piece of code with the polar_bear.jpg file:

let img;

function preload() {
  img = loadImage("polar_bear.jpg");
}

function setup() {
  createCanvas(653, 320);
  noLoop();
}

function draw() {
  img.loadPixels();
  for (let i = 0; i < img.pixels.length; i += 4) {
    img.pixels[i + 1] = 0;
    img.pixels[i + 2] = 0;
  }
  img.updatePixels();
  image(img, 0, 0);
}

If you run it exactly as is, you should see the image with only its red component. Please let us know what happens.

It is best to format code when you post it. See Guidelines—Asking Questions. It includes information on formatting code.

Ok, now that worked as expected… the picture with just the red component.

1 Like

It’s not clear to me why the other examples did not work, since they executed correctly on my own system. Perhaps other members of the Processing Community can respond here with suggestions.

In the meantime, the most recent example demonstrates that you can load and manipulate individual pixels. With that example as a starting point, feel free to experiment, have fun, post formatted code, and ask us questions.

Yes, a bit of a head scratcher.
I will play around with it and report back.
Thank you for your help. Much appreciated.

1 Like

Maybe your browser is sluggish, and we need to prevent the draw() function from executing repeatedly.

Let’s try the following …

Begin with the code that you posted here.

Add this to the setup() function:

  noLoop();

Be sure to include this in the draw() function:

  processit();

Also move this to a preload() function:

img = loadImage('data/moonwalk.jpg');

What is the result?

EDITED on August 6, 2021 to correct a typographical error.

Hello,

I tried your code in the p5.js editor with processit() in draw() with some modifications so it loaded only once and this worked:

let img;
let x;
let y;

function setup() {
  createCanvas(720, 400);
  img = loadImage("data/Schmitt_moonwalk.jpg");
  //noLoop();
}

function processit() {
  for (let x = 0; x < 720; x++) {
    for (let y = 0; y < 400; y++) {
      col = img.get(x, y);
      stroke(col);
      point(x, y);
    }
  }
}

function draw() {
  print(frameCount);
  if (frameCount == 1) processit();
}

I prefer the online editor because it gives me Console data and I can use print().

I was only examining your code as is.

It also worked in Processing p5.js mode using the latest Google Chrome browser.

Have fun!

:)

1 Like

@javagar
Your suggestion didn’t work. Just gave the usual blank white screen.

@glv
Unfortunately the online editor gave the same result.
Also tried it in an alternative browser (MS Edge) and it didn’t work in that either.

Thanks for your input however.

It did not work in my other browsers with Processing p5.js Java mode.

Give Google Chrome a try and report back.

:)

@glv
OK… using Google Chrome did work in that it produced the correct image, but then the browser froze up and wouldn’t respond.
This is starting to look more like an issue with my computer system… perhaps the video card?
Anyone have any thoughts on that possibility?

Well just out of curiosity I disabled the AdGuard AdBlocker I had installed in Firefox and suddenly it works.
Good grief! The amount of hair I’ve lost… I could knit myself a wig.
I will test this thoroughly and report further.

Regards,

2 Likes

Great news! :smiley:

Have fun, and feel free to show us what you are doing.

1 Like

Bad news.
I thought I had the problem beaten but I haven’t.
It wasn’t the Adblocker afterall. I started by PC up this today and tried the code that was working the day before (no changes made) and its back to blank screens. I uninstalled the Adblocker and it made no difference. I’ve played around with various Antivirus (web blocking) setting and still nothing.
Surely someone has an idea of what might be going on here.

Regards,

Hi @Kiliad,

Sorry to learn of the bad news.

If you post the exact code that gave you trouble today, formatted so that we can copy and paste it on our own systems, we would be glad to come up with suggestions regarding what might be causing the problem. Though it might not cause problems on our own systems, we may notice something that could relate to the issue on yours.

Ok. This code was working yesterday.
It should load in a 300x300 image (below), and display it as is at the top left hand corner of the canvas and also put an inverted copy of it right next to it.
I have looked at the browser console and web developer tools in the Firefox browser and the code appears to have executed without causing any errors. There’s just nothing to see.

let img;
let x;
let y;

function setup() {
  createCanvas(600, 300);
  img = loadImage("frac01.jpg");
  noLoop();
}

function processit() {
  for (let x = 0; x < 300; x++) {
    for (let y = 0; y < 300; y++) {
      col = img.get(x, y);
      stroke(col);
      point(x, y);
      point(x+300,300-y);
    }
  }
}

function draw() {
processit();

frac1