Finding the color of a pixel


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:



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

To get you started:

Reference for get():


1 Like

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 ];

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