# Reading pixels from an image

**URL:** <https://discourse.processing.org/t/reading-pixels-from-an-image/31592>\
**Category:** Coding Questions\
**Created:** [August 6, 2021, 7:48am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592 "2021-08-06T07:48:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 6, 2021, 7:48am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/1 "2021-08-06T07:48:58Z")

</div>

Hi.  
I’m having a problem with what I thought would be a a very simple piece of code.  
There’s not much point posting any of my attempts as I’m confused enough as is.

Ultimately I have something more complex in mind, but what I would like is a simple example of loading an image into a variable (e.g. **img = loadImage(‘data/imagefile.jpg’)**; ) and then reading each pixel one at a time and plotting them onto the screen.

Now I know I can do this in one step with **image(img,0,0)**, but I want to do some processing of the pixel data eventually. For the moment, I just want exactly what the image function does, but one pixel at a time.

The other thing I tried was actually putting the image on the screen with **image(img,0,0)** and then trying to read pixels from there and copy pixel by pixel to another part of the canvas (which I had made large enough to do so). Again, I could not get this to work.

This would be an easy exercise in other languages I have used but I am at a total loss as to why I can’t do so with p5.js. I’ve no doubt it can be done but obviously I’m doing something wrong.

If someone could provide an example of both of these approaches, I would be greatly appreciative.

Kind regards,

Richard

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 6, 2021, 9:31am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/2 "2021-08-06T09:31:14Z")

</div>

Hello, @Kiliad, and welcome to the Processing Forum!

Let’s begin by loading an image and displaying each pixel.

Here’s an image:

![polar_bear](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f95f35123938bd880c5fa66fd9b3d7417329daaf.jpeg)  
Photo by Sandy Richard  
Bronx Zoo  
June 15, 2013  
Link to original: [Tundra, the polar bear](https://www.flickr.com/photos/9428166@N03/9787410382/).

Save it as `polar_bear.jpg`, in the same folder or directory as your code.

Here’s the code:

```auto
let img;

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

function setup() {
  createCanvas(253, 320);
}

function draw() {
  w = img.width;
  h = img.height;
  for (let x = 0; x < w; x+=1) {
    for (let y = 0; y < h; y+=1) {
      s = img.get(x, y);
      stroke(s);
      point(x, y);
    }
  }
}

```

See [p5.js Reference: `get()`](https://p5js.org/reference/#/p5/get).

_EDIT (August 6, 2021):_

Now, let’s instead display the image first, copy pixels from the canvas, and display them elsewhere on the canvas:

```auto
let img;

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

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

function draw() {
  image(img, 0, 0);
  w = img.width;
  h = img.height;
  for (let x = 0; x < w; x+=1) {
    for (let y = 0; y < h; y+=1) {
      s = get(x, y);
      stroke(s);
      point(x + 300, y);
    }
  }
}

```

Also see [p5.js Reference: `loadPixels()`](https://p5js.org/reference/#/p5/loadPixels), including the example. Once you load the pixels, you can manipulate them.

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 6, 2021, 9:58am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/3 "2021-08-06T09:58:36Z")

</div>

Thanks @javagar.  
Well something is clearly not right.  
The first piece of code is essentially the same as I have been trying but it doesn’t work.  
All I get is a blank screen.  
Perhaps its something to do with the app I’m using. Its the version 3.5.4 Processing app running in p5.js mode.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 6, 2021, 10:15am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/4 "2021-08-06T10:15:08Z")

</div>

> [@Kiliad](#):
>
> The first piece of code is essentially the same as I have been trying but it doesn’t work.

So, if you copy the first example exactly as it is, and place the image in the same folder or directory as the JavaScript code, do you get a blank screen? If so, let’s try the basic technique to see if it works on your computer. Copy this exactly as is, and let us know what happens:

```auto
let img;

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

function setup() {
  createCanvas(253, 320);
}

function draw() {
  image(img, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 6, 2021, 10:18am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/5 "2021-08-06T10:18:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 6, 2021, 10:28am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/6 "2021-08-06T10:28:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 6, 2021, 10:40am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/7 "2021-08-06T10:40:23Z")

</div>

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() {

}

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 6, 2021, 10:48am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/8 "2021-08-06T10:48:17Z")

</div>

You forgot to call the `processit` function.

Try this:

```auto
function draw() {
  processit();
}

```

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 6, 2021, 10:53am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/9 "2021-08-06T10:53:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 6, 2021, 11:01am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/10 "2021-08-06T11:01:06Z")

</div>

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

```auto
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](https://discourse.processing.org/t/guidelines-asking-questions/2147). It includes information on formatting code.

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 6, 2021, 11:05am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/11 "2021-08-06T11:05:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 6, 2021, 11:14am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/12 "2021-08-06T11:14:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 6, 2021, 11:16am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/13 "2021-08-06T11:16:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 6, 2021, 11:52am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/14 "2021-08-06T11:52:47Z")

</div>

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](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/7).

Add this to the `setup()` function:

```auto
  noLoop();

```

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

```auto
  processit();

```

Also move this to a `preload()` function:

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

```

What is the result?

_EDITED on August 6, 2021 to correct a typographical error._

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 6, 2021, 12:45pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/15 "2021-08-06T12:45:50Z")

</div>

Hello,

I tried your code in the [p5.js editor](https://editor.p5js.org/) with `processit()` in `draw()` with some modifications so it loaded only once and this worked:

```auto
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!

`:)`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/694300458e88f5d3dbb05a01e9ab926c45734a5c.jpeg)

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 7, 2021, 2:28am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/16 "2021-08-07T02:28:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 7, 2021, 2:31am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/17 "2021-08-07T02:31:45Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 7, 2021, 10:20am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/18 "2021-08-07T10:20:01Z")

</div>

> [@glv](#):
>
> It also worked in Processing p5.js mode using the latest Google Chrome browser.

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

Give Google Chrome a try and report back.

`:)`

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 7, 2021, 10:41am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/19 "2021-08-07T10:41:55Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![Kiliad](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kiliad](https://discourse.processing.org/u/Kiliad)\
**Post date:** [August 7, 2021, 10:50am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/20 "2021-08-07T10:50:45Z")

</div>

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,

[Next page](https://discourse.processing.org/t/reading-pixels-from-an-image/31592.md?page=2)