Using Colors

Any geometric primitive we draw on the screen uses a particular ^fill() and stroke() color. If we don’t say otherwise, Processing will default to a black stroke and a white fill color. We can use the ^fill() and ^stroke() methods to change default values, and also use grayscale, RGB, HSB, or hexadecimal color in the Android apps we create. The background() method uses color in the same way, with the exception that it cannot set a value for opacity, formally known as the alpha value.

By default, Processing draws all graphic elements in RGB (red, green, blue) color mode. An additional alpha value can be used as fourth parameter to control the opacity of graphic elements drawn on the screen. An alpha value of ⁰ is fully transparent, and a value of ²⁵⁵ is fully opaque. Values between 0..255, control the level of opacity of an individual pixel.

The background() color of a Processing window cannot be transparent. If you provide an alpha parameter for background(), the method will just ignore its value. Within ^draw(), the background() method is used in most cases used to clear the display window at the beginning of each frame. The method can also accept an image as a parameter, drawing a background image, if the image has the same size as the Processing window.

Processing provides us with two different color modes that we can switch using the colorMode()¹⁰ method. The color mode can be set to the RGB (red, green, blue) or HSB (hue, saturation, brightness) color mode, which we’ll fur-ther explore in Using HSB Colors, on page 26. colorMode() changes the way Processing interprets color values. By default, Processing interprets colors in the RGB color space, using values between ⁰ and ²⁵⁵. Both RGB and HSB can handle alpha values to make objects appear transparent.

We can adjust the value range of the parameters used in colorMode() as well.

For example, "white" specified in the default RGB color mode is defined as color(255). If we change the range to colorMode(RGB, 1.0), "white" is defined as col-or(1.0).

Here are the parameters colorMode() can take. We can specify mode as either RGB or HSB, and ^range in the value range we prefer.

• colorMode(mode)

• colorMode(mode, range)

• colorMode(mode, range1, range2, range3)

• colorMode(mode, range1, range2, range3, range4)

Let’s now take a look at the three different color methods Processing has to offer. They are good examples for how Processing uses as few methods as possible to get the job done.

Using Grayscale and RGB colors

The fill() and stroke() methods can take either one, two, three, or four parameters.

Since the background() method doesn’t accept alpha values, it takes either one or three parameters:

• ^fill(gray) stroke(gray) background(gray)

• fill(gray, alpha) stroke(gray, alpha)

• fill(red, green, blue) stroke(red, green, blue) background(red, green, blue)

• fill(red, green, blue, alpha) stroke(red, green, blue, alpha)

10. http://processing.org/reference/colorMode_.html

Using Colors

•

As you can see, depending on how many parameters you use, your results will differ. One parameter results in a grayscale value. Two parameters define a grayscale and its opacity (as set by an alpha value). If alpha is set to ⁰, the color is fully transparent. An alpha value of ²⁵⁵ results in a fully opaque color.

Three parameters correspond by default to red, green, and blue values. Four parameters contain besides red, green, and blue also an alpha value for transparency. Through this approach, Processing reduces the number of core methods, by allowing for a different number of parameters, and by interpreting them differently depending on the color mode.

To recall the syntax of any particular method, just mark and right-click the method you want to look up in the sketch window, and choose Find in Reference from the pop-up menu. It’s the quickest way to look up the syntax and usage of Processing methods while you are working with your code.

Using Hex Colors

Processing’s color method can also handle hexadecimal values, which are often less intuitive to work with, but still fairly common as a way to define color. Hex color method parameters, such as the hex code ^#ff8800 for orange, are applied like this:

• ^fill(hex) stroke(hex) background(hex)

• fill(hex, alpha) stroke(hex, alpha)

Now, let’s take a look at the HSB color mode, which, as we learned earlier, can define a color by hue, brightness, and saturation.

Using HSB Colors

Why should we care about HSB? It’s a rather excellent color mode for working algorithmically with color, such as when we want to change only the saturation of a UI element. When we switch the default RGB color mode to HSB, the values of the color parameters passed to the ^fill() and ^stroke() are not interpreted any more as red, green, blue, and alpha values—but instead as hue, saturation, brightness, and alpha color values. We can achieve seamless transitions between a more to a less saturated color value for UI highlights for instance, which is very difficult to do properly in RGB. So for the objective of algorithmic color combinations, transitions, and animations that need to be seamless, HSB is really great.

When we switch to HSB using the colorMode(HSB), the fill(), stroke(), and background() methods will be interpreted like this:

• fill(hue, saturation, brightness) stroke(hue, saturation, brightness) background(hue, saturation, brightness)

• fill(hue, saturation, brightness, alpha) stroke(hue, saturation, brightness, alpha)

When we work algorithmically in HSB, we can access the color hue directly using Processing’s ^hue()11 method. It takes a color as parameter and extracts only the hue value of that color. Similarly, we can get the brightness by using the brightness()¹² color method, and we can access the saturation()¹³ separately as well. The HSB color cylinder is a very useful illustration of this color space¹⁴ to further investigate and better understand the HSB color mode, where all hues are represented within the 360 degrees circumference of the color cylinder. Take a quick look at it, we’ll come back to it in the next project Section 2.4, Use Touch Screen Pressure to Control Color Hues, on page 28.

As we’ve learned all about the different ways to assign color values, let’s finally take a look at the Processing ^color type, which Processing provides for the specific purpose of storing colors.

Using the color Type

The Processing ^color15 type can store RGBA or HSBA values in one variable, depending on the colorMode() you choose. It’s a great type for any app that we build using a color scheme of multiple colors. Using the ^color type, we simply call the ^color variable and apply it to the objects we draw. We can create a color palette in our apps without requiring a bunch of individual variables for each value of a RGBA or HSBA color. We would apply the ^color type like this:

• fill(color)

• fill(color, alpha)

If ^color included an alpha value of, let’s say ^127.5, a primitive drawn with fill(color) would be drawn with ^50% opacity (given a possible max alpha value of ²⁵⁵). In the unlikely scenario that the same color which already contains

11. http://processing.org/reference/hue_.html 12. http://processing.org/reference/brightness_.html 13. http://processing.org/reference/saturation_.html

14. http://upload.wikimedia.org/wikipedia/commons/1/16/Hsl-hsv_models_b.svg 15. http://processing.org/reference/color_datatype.html

Using Colors

•

an alpha value is used in conjunction with an addition alpha parameter, like for instance fill(color, 128), the resulting color would be drawn half as transparent as before, or ^25% opacity.

Processing color methods are overloaded so they can handle a range of situa-tions—one method for many applications. In other languages, remembering which syntax to use for a particular color effect can be a challenge, but with Processing you need to remember only a small member of methods. When a color value exceeds the default maximum value of ²⁵⁵, Processing caps it for us. So ^fill(300) has the same result as ^fill(255) does. The same is true for values lower than default minimum ⁰.

Now that we’ve learned about the different color modes, methods, and types available to define colors in an Android app, let’s refine our previous drawing sketch.