Get() returns RGB values while the colorMode is set to HSB

p5.js Beginners
1

I’ve swicthed to p5.js from Procesisng.js today (I’ll miss that dude) and already encountered a problem.

get() returns an RGB value but my canvas is set to HSB mode. As far as I remember that wasn’t happening when I was working with Processing.js; it used to return according to the colorMode of the sketch.

Is there a way to convert it?

2

Hello,

You can use the hue(), saturation() and brightness() functions.

Reference:
https://p5js.org/reference/

:)

3

I’m having the same issue. I don’t understand how to use @glv’s response about using hue() etc — as far as I can tell, you have to give either a HSB or HSL array to the hue() function, so it can’t work.

I want to keep my program in HSB colorMode. Is there a way for get() to return a HSB array, or a way to convert an RGB array to a HSB array?

Thanks for any help

4

Since HSB is an acronym for Hue, Saturation and Brightness, you can create a wrapper function, for example: getSketchColor().

Within this wrapper function you could fetch the colours in the normal way and assign them respectively to the arguments for the methods that @glv mentioned.

Whenever you want to get the sketch colour you could use your wrapper function instead of the normal.

5

Hi James,
What do you mean by “fetch the colours in the normal way”?
The only way I know of is by using get(), which I can’t combine with the HSB functions. That’s why using the Hue, Saturation, or Brightness won’t work, since they require H or S or B values as their inputs, but get() only gives you R, G and B.

I’m not sure how making a wrapper would work unless I had a way to tell that wrapper how to convert from RGB to HSB? Thanks for any clarification

8

https://p5js.org/reference/#/p5/get

Returns an array of [R,G,B,A] values for any pixel

get(x, y)

Extracts the hue value from a color or pixel array.
Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB)

I tested this and it works for H and B but did not seem to give correct value for S.

A little exploration lead me to this:
https://github.com/processing/p5.js/issues/4667
https://github.com/processing/p5.js/issues/1620

The above issues also cross link to other related issues if you care to follow those.

One of the posts said this works correctly:
https://bgrins.github.io/TinyColor/

Additional resources:

See references:

  • Color
  • Pixels

See:

  • Color

:)

9

Hmm, it doesn’t really work for me either. H and B don’t work reliably either for some reason.

Thanks for the link to TinyColor, I installed it and managed to get it working. Needed to do some work to get the TinyColor output to be readable by fill() but in the end I got it working.

10

What I mean by “fetch the colours in the normal way” is by using get() - as you have been doing and then use them to perform the conversion. There are methods for converting RGB to HSB values which you then use in the wrapper function I mentioned.