Grayscale beyond [0,255]

dawu

Hello,

I don't understand one aspect of grayscale colors. At multiple ressources—e. g. Daniel Shiffman's great 'Learning Processing'—I only read, that 0 means black, 255 means white. And every number in between is a shade of gray.

But I can't find any hint, how the colors are distributed beyound this range. E. g. background(3000);leads to a blue background. Can somebody explain this to me?

Regards, Daniel

calsign

Indeed, you are observing behavior that appears strange at first sight, but can be understood when you discover the way that Processing stores color data.

Processing's color datatype is a user-friendly renaming of the int datatype. In fact, these two types are exactly the same and any colors are changed to ints at runtime. So color data is stored as an integer... and if you ever print out a color, that's why you get really weird numbers.

Color data is formatted in Hexadecimal form, which is the standard used in Web development. In Processing, you can include Hex color literals (such as #FFFFFF) and they will be converted to the corresponding int notation at runtime.

Try running this short program:

color col = 3000; //color here is interchangeable with int
background(col);
println(hex(col)); //hex() converts an int to a hexadecimal String

So in this case, the number 3000 is being interpreted as a Hexadecimal literal, which happens to map to a shade of the color blue. If you take the printed result of the Hexadecimal conversion and remove the two leading zeros (the alpha component) (which yields 000BB8) and place it in hexadecimal color notation where the 3000 is in the code above, it will yield the same result.

asimes

Colors in Processing are represented user integers and integers are 4 bytes (32 bits). It is mapped like this: AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

The first byte, A, is used for alpha but Processing's built in color assistance makes it so that you don't have to think about it usually.

The second byte, R, is used for red. Red goes from 0 - 255 for most Processing functions like background(red, green, blue).

The third and fourth bytes are green and blue and work similarly to red (they go from 0 - 255).

When you write background(255, 0, 0) in Processing (which is red) it is the same as having written: 11111111111111110000000000000000. This can also be represented in hexadecimal as: 0xffff0000. Converting to decimal (numbers people generally use) is less straightforward.

Try using the hex() function with 3000: http://processing.org/reference/hex_.html

If you write println(hex(3000)) it says 00000BB8 (which can be manually written as 0xbb8), which looks like a slightly greenish blue.

void setup() {
  size(100, 100);
  background(3000);
}

dawu

@calsign, @asimes:

I assumed something like this, but didn't understand it in detail. Now, it is absolutely clear. Thank you very much for your explanations!

But one suggestion: Although there are lot of information at the processing website, I miss some more detailled information—e. g. about your explanations about how colors are processed. It would be very helpful is somebody could add them somewhere. ;)

PhiLho

See also Technical FAQ, first article...

dawu

@PhiLho: Aaaahh! Thanks for the URL. I never recognized the Wiki and the FAQ at processing.org, because it is not at the "Documentation" groups (Reference, Tutorials, Books) at the navigation (where I expected it). Sorry for that.