ch_filters.asciidoc

Color Filters

Color filters allow you to alter an image by …​ well …​ filtering out colors from an image. While Processing has some filters built-in, it’s often handy to be able to create your own custom filters. For example, the site http://3dtv.at/Knowhow/AnaglyphComparison_en.aspx [Anaglyph Methods Comparison] details a number of different filters that are handy in creating 3D images.

As you’ll see from the site, filters are basically mathematical transformations that are applied to the red, green, and blue components of the pixels in an image. To create a filter like the ones on the stereo anaglyph site, we need to pull each pixel in the original image, apply a matrix operation to its color components, and then use this new value in the corresponding pixel in the new image. This Codebox shows you how to create your own filters like the ones shown in [filter-example].

Filters are created through matrix operations

First, though, a quick review of the math. A matrix is a 2 dimensional array of numbers called elements. Matrices are used in many different applications, representing sets of equations, transformations to 3D objects, and color filters (as in this example).

A matrix is usually characterized by its dimensions: the number of elements in its rows (the numbers going across ) and columns (the numbers going up and down). By convention, the number of rows always comes first. Matrices shows 2 matrices. On the left is a 2 row by 3 matrix, which is generally just called a 2x3 matrix. On the right is a 3 row by 2 column matrix, also called a 3x2 matrix:

Figure 1. Matrices

To multiply two matrices together (let’s call them matrix A and matrix B), the number of columns in matrix A must equal the number of rows in matrix B. This is critical — if this isn’t true, then the multiplication is not defined. (This is sort of like dividing by zero — it’s simply impossible.)

Assuming this criteria is met, the product of the two matrices (lets call it matrix C) will have the same number of rows as matrix A and the same number of columns as matrix B. The elements in matrix C are equal to the sum of the products of the corresponding column element in A times the row elements in B. This is a bit tricky, but Matrix multiplication operation should (hopefully!) make this a bit clearer:

Figure 2. Matrix multiplication operation

The following sketch illustrates how to do the operation in Processing:

Note	You can find the code listing for this project, matrix_mult.pde, on this book’s github repository.

So, with the basic math out of the way, we’re ready to write the filter code. The only remaining wrinkle is that images in Processing are held in one dimensional arrays of colors, rather than 2 dimensional arrays of (x,y) coordinates, as explained in this great Images and Pixels tutorial by Daniel Shiffman. In the tutorial, he gives a nice formula that you can use to map an (x,y) coordinate to the position in the image array:

position in array = x + IMAGE_WIDTH * y

Mapping pixels into a one-dimensional array should help illustrate most of the concepts at work here:

Figure 3. Mapping pixels into a one-dimensional array

Without further ado, here’s the code to implement the filter:

Note	You can find the code listing for this project, filter.pde, on this book’s github repository.