There is a nice way to change the overall color of a drawing image by multiplying ("modulating") the color components of each pixel by some fixed number. It is realized by using the ofSetColor() function. Namely, calling ofSetColor( r, g, b ) or ofSetColor( r, g, b, a ) before image.draw()
implies that the red, green, blue, and alpha components of each image's pixel will be multiplied by r' = r / 255.0, g' = g / 255.0, b' = b / 255.0, and a' = a / 255.0 respectively.
Note that the parameters r, g, b, and a in ofSetColor lie in the 0 to 255 range, so r', g', b', a' lie in the range [0..1]. So, by using such a modulation, you can decrease or retain the color components of pixels but you cannot increase them.
For arbitrary manipulations with color components while drawing images, use the fragment shader (see Chapter 8, Using Shaders). Also, you can change all the pixels of the image itself. This method is good and appropriate but works slowly when it changes the image. For details, see the Creating and modifying images section.
The following are some examples:
- Drawing an image with unchanged colors:
ofSetColor( 255, 255, 255 ); image.draw( 0, 0, 200, 100 );
- Drawing an image with half-value of colors:
ofSetColor( 128, 128, 128); image.draw( 250, 0, 200, 100 );
- Drawing only a red channel of an image:
ofSetColor( 255, 0, 0 ); image.draw( 150, 0, 200, 100 );
You will see the images shown in the following screenshot:
You can note that the result of the color modulation resembles a tonal correction in a photo editor such as Adobe Photoshop or Gimp.
Remember, calling ofSetColor()
affects all the images being drawn after the call. So, if you need to draw images without modulation, it is a good idea to call ofSetColor( 255, 255, 255 ) before drawing your images.
You can see that in these examples we didn't demonstrate the usage of the alpha channel. This is a very important matter of transparency, and we will discuss it in detail now.