# 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:** 13\
**Page:** 2

<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 7, 2021, 11:09am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/21 "2021-08-07T11:09:15Z")

</div>

> [@Kiliad](#):
>
> I disabled the AdGuard AdBlocker I had installed in Firefox and suddenly it works.

Great news! 😃

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

---

<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 8, 2021, 11:29am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/22 "2021-08-08T11:29:51Z")

</div>

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,

---

<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 8, 2021, 12:07pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/23 "2021-08-08T12:07:04Z")

</div>

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.

---

<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 8, 2021, 12:19pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/24 "2021-08-08T12:19:53Z")

</div>

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0210bada4c61460003b5fe75733d40603f2c1929.jpeg)

---

<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 8, 2021, 12:33pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/25 "2021-08-08T12:33:49Z")

</div>

@Kiliad,

Try the following:

Comment out the `noLoop()` call.

Replace this:

```auto
      stroke(col);

```

with this:

```auto
      stroke(red(col), green(col), blue(col));

```

Also make sure you have a closing `}` at the end of the code.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 8, 2021, 12:35pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/26 "2021-08-08T12:35:39Z")

</div>

> [@Kiliad](#):
>
> ```auto
> function setup() {
> createCanvas(600, 300);
> img = loadImage("frac01.jpg");
> noLoop();
> }
> 
> ```

Loading functions should be moved into **preload()** instead:

> **[reference | p5.js](https://p5js.org/reference/#/p5/preload)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<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 8, 2021, 12:42pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/27 "2021-08-08T12:42:16Z")

</div>

Both @GoToLoop’s and my suggested changes worked on my system. But follow @GoToLoop’s suggestion regarding the `preload()` function, to make sure the image has a chance to load before you try to process it. Specifically, move this to `preload()`:

```auto
  img = loadImage("frac01.jpg");

```

---

<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 8, 2021, 9:10pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/28 "2021-08-08T21:10:35Z")

</div>

@javagar @GoToLoop  
Alrighty… I made the changes and it still showed a blank screen.  
However, after opening up the Firefox settings page (I didn’t change anything) and closing it again, I got a message at the top of the screen saying, “_This page is slowing down Firefox. To speed up your browser, stop this page._”

I decided to just let it go for awhile. I did some Googling of that message and a few minutes later looked back at the output page and the correct image had been displayed.  
It seems as it the code is either running very slowly or is temporarily being blocked from displaying.  
How long does it take to display the image on your systems?

This is the code…

```auto
let img;
let x;
let y;

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

function setup() {
  createCanvas(600, 300);
  //noLoop();
}

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

function draw() {
processit();
}

```

---

<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 8, 2021, 9:13pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/29 "2021-08-08T21:13:36Z")

</div>

Try uncommenting this:

```auto
  //noLoop();

```

Otherwise, you are unnecessarily reconstituting the same image repeatedly, perhaps 60 times per second, which may be bogging down your system.

---

<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 8, 2021, 11:01pm UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/30 "2021-08-08T23:01:19Z")

</div>

Hello,

I did some tests with Processing p5.js mode.  
The default browser was changed with Windows 10 setup.  
The sketch was launched from Processing with the run button.

It works with `processit()` in `draw()` or in `keyPressed()`.  
Don’t forget to press a key!

I added a random function so you can see some changes.

I added the data folder:  
`img = loadImage("/data/frac01.jpg"); // Look here!`

Try this:

```auto
let img;
let x;
let y;
let ranX;

function preload() {
  img = loadImage("/data/frac01.jpg"); // Look here! 
}

function setup() {
  createCanvas(600, 300);
  //noLoop();
}

function processit() {
  background(255);
  ranX = random(0, 300);
  for (let x = 0; x < 300; x++) {
    for (let y = 0; y < 301; y++) {
      col = img.get(x, y);
      stroke(red(col), green(col), blue(col));
      //point(x, y);
      //point(x+300,300-y);
      point(x+ranX, y);
    }
  }
}

function draw() {
//processit();
}

function keyPressed() {
processit();
}

```

It worked with Google Chrome and Microsoft Edge.

With FireFox I get this:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f5e550f715dd96fa9b7c6bb85ada84299a040456.png)

`:)`

---

<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 9, 2021, 8:49am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/31 "2021-08-09T08:49:13Z")

</div>

Oh! Thank you thank you!!!  
Finally someone else gets the same problem. The universe isn’t playing silly games with me after all lol.  
Looks like I may just have to use MS Edge… groan.

---

<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 9, 2021, 9:12am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/32 "2021-08-09T09:12:09Z")

</div>

> [@Kiliad](#):
>
> Looks like I may just have to use MS Edge…

… or Chrome

Well, it’s good that you have options that work.

> [@javagar](#):
>
> Replace this:
> 
> ```auto
> stroke(col);
> 
> ```
> 
> with this:
> 
> ```auto
> stroke(red(col), green(col), blue(col));
> 
> ```

This is actually fine:

```auto
      stroke(col);

```

However, separating out the color components may be useful for some of your work.

The following, which does separate out the color components, was tested with Chrome on a MacBook Air:

```auto
let img;

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

function processit() {
  let r, g, b;
  for (let x = 0; x < 300; x++) {
    for (let y = 0; y < 300; y++) {
      col = img.get(x, y);
      stroke(col);
      point(x, y);
      
      r = red(col);
      g = green(col);
      b = blue(col);
      stroke(r, g, b);
      point(599 - x, y);
      
      stroke(b, r, g);
      point(599 - x, y);
      
      stroke(g, b, r);
      point(x, 599 - y);
      
      stroke(...shuffle([r, g, b]));
      point(599 - x, 599 - y);
    }
  }
}

function draw() {
  processit();
}

```

It took a second or two for the image to appear, but it does work. Notice this in the `setup()` function:

```auto
  noLoop();

```

With `draw()` including nested `for` loops, it is worth cutting out the unnecessary repeated redrawing of the same image.

Note that the image is in a `data` folder.

```auto
  img = loadImage("data/frac01.jpg");

```

Have fun with your work, @Kiliad. 😃

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 9, 2021, 10:58am UTC](https://discourse.processing.org/t/reading-pixels-from-an-image/31592/33 "2021-08-09T10:58:05Z")

</div>

> [@javagar](#):
>
> ` stroke(...shuffle([r, g, b]));`

The [spread `...` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) there is cool but unneeded b/c all p5.js color-related functions can deal w/ a passed array argument even though that’s not mentioned anywhere on its reference: 🤫

`stroke(...shuffle([r, g, b]));` → `stroke(shuffle([r, g, b]));`

> <https://github.com/processing/p5.js/blob/v1.4.0/src/color/creating_reading.js#L287-L295>

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