Finding the color of a pixel

p5.js Beginners
1

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

2

Hello,

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

To get you started:

Reference for get():
https://p5js.org/reference/#/p5/get

:)

1 Like
3

I assume you mean Processing’s Java Mode flavor:

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

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

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

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:

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:

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

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

exit();