The shapes you drew in the last chapter were a bit drab, weren't they?
You can of course control colors in your Processing programs: We can set the color of the background, the inside of a shape (called its fill) and the outline of a shape (called its stroke).
You give a shape a color by declaring the color before drawing the shape. Fill and stroke are both functions, and they take numerical values as arguments. An RGB value is three numbers: a red, green and blue component (between 0 and 255).
This function will fill the background of the window with the specified color:
Or you can pass a single digit to background, and it will create a shade of gray.
As in so many things in computer graphics, color is represented by a number, or a group of numbers. But if we pass a single number like 0 to background(), Processing will interpret that as a grayscale number, with 0 being black and 255 being white.
That means that 128 is halfway in the middle, or gray.
Change the fill color of the circle to gray using fill(128) before drawing the circle.
Make the background of the sketch black by passing the number 0 to the background function at the beginning of the draw function.
You can also use a color system named RGB (Red, Green, Blue) to define colors numerically in Processing. This will bring some new life to our grayscale world.
Here's the big idea:
Each color component in the RGB system is represented by a number from 0 to 255, which gives the intensity of that color component. A value of 0 means that the light is completely off, while 255 means that light is at its brightest.
You can imagine a color in this system as being built by tweaking the intensity of these RGB components.
For example:
What happens when you remove all of one color? That is, entirely remove all Red, Green, and Blue from an image?
In the widget below, press the r , g , and b keys to toggle each channel on or off.
If you pass 3 values to background, fill or stroke, it'll interpret that as an "RGB" value which stands for Red, Green, Blue. The first number is the amount of red in the color, the second is the amount of green and the third is the amount of blue. As with grayscale, the numbers are in the range 0 to 255. The color with the maximum possible number for red (255) and the minimum of green and blue will be (255,0,0), or bright red.
Try playing with the color widget below to find some of your own colors and get a feel for the RGB color system:
Try changing the program given to you.
Step 1: Change the color of the circle to bright red (that is, a value with 0 Green, 0 Blue, and maximum Red values).
Step 2: Change the color of the background to contain no red and maximum green and maximum blue. What color is it?