# Finding the color of a pixel

**URL:** <https://discourse.processing.org/t/finding-the-color-of-a-pixel/36555>\
**Category:** Beginners\
**Created:** [April 23, 2022, 10:47pm UTC](https://discourse.processing.org/t/finding-the-color-of-a-pixel/36555 "2022-04-23T22:47:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hermitdog](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hermitdog/32/14686_2.png) [@hermitdog](https://discourse.processing.org/u/hermitdog)\
**Post date:** [April 23, 2022, 10:47pm UTC](https://discourse.processing.org/t/finding-the-color-of-a-pixel/36555/1 "2022-04-23T22:47:58Z")

</div>

> Blockquote

In previous versions of Processing, I could find the color of a pixel using get(x,y)

But in P5js get(x,y) gives me something like [146, 200 150, 255]  
What I need is some way to check that the location is the background color, so I can draw rectangles or ellipses that do not overlap, like this:

> Blockquote

[http://hermitdog.com/2022/March%2016%202022.jpg](http://hermitdog.com/2022/March%2016%202022.jpg)

---

<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:** [April 23, 2022, 11:23pm UTC](https://discourse.processing.org/t/finding-the-color-of-a-pixel/36555/2 "2022-04-23T23:23:34Z")

</div>

Hello,

There are differences between Processing (Java) and p5.js (JavaScript) and you will have to adapt.

To get you started:

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

> **[Processing transition · processing/p5.js Wiki](https://github.com/processing/p5.js/wiki/Processing-transition)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

Reference for _get()_:  
[https://p5js.org/reference/#/p5/get](https://p5js.org/reference/#/p5/get)

`:)`

---

<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:** [April 24, 2022, 12:06am UTC](https://discourse.processing.org/t/finding-the-color-of-a-pixel/36555/3 "2022-04-24T00:06:23Z")

</div>

> [@hermitdog](#):
>
> In previous versions of Processing,

I assume you mean Processing’s Java Mode flavor:

> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language

> [@hermitdog](#):
>
> , I could find the color of a pixel using **get(x, y)**.

In Java Mode a `color` datatype is a 32bit (4byte) aRGB value:

> **[color / Reference](https://processing.org/reference/color_datatype.html)**
>
> Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCC00.…

> [@hermitdog](#):
>
> But in p5js [**get(x, y)**](https://p5js.org/reference/#/p5/get) gives me something like [146, 200, 150, 255].

That’s a color array using an RGBa ordering: [R, G, B, a].

> [@hermitdog](#):
>
> What I need is some way to check that the location is the background color,

So you just need a function which converts that p5js RGBa color array to a Java Mode aRGB value:

```auto
function get32bitColorFromArrayRGBa(rgbaArray) {
  const [r, g, b, a] = rgbaArray;
  return a << 0o30 | r << 0o20 | g << 0o10 | b;
}

```

Here’s a test example for the **get32bitColorFromArrayRGBa()** function:

```auto
const rgbaArr = [146, 200, 150, 255];
console.log(rgbaArr);

const argb = get32bitColorFromArrayRGBa(rgbaArr);
console.log(argb); // -7157610
console.log((argb >>> 0).toString(16)); // "ff92c896"

```

The example above outputs the same values as this Processing’s Java Mode flavor example:

```auto
final color argb = color(146, 200, 150, 255);

println(argb); // -7157610
println(hex(argb)); // FF92C896

exit();

```