Processing: Creative Coding and Computational Art

plotted, the vertices are connected with straight lines, and the space between the lines is
filled in with the RGB color (R = 0, G = 0, and B = 255)—which makes blue. So far this is
pretty simple, right?
If the rectangle is 10 pixels by 10 pixels, then you have 100 pixels altogether (10 ✕ 10). You
can also think about the rectangle as a table of 10 rows of pixels by 10 columns of pixels.
The BufferedImage class handles these types of storage issues internally, which can get
complex, as each pixel is made up of other components. In addition, the BufferedImage
class maintains an internal model of an image, rather than generating an actual screen
image—which is the work of a Graphics object or graphics context, which I’ll discuss later
on. The word “Buffer” within BufferedImage refers to a pixel buffer, which simply means
an internal storage structure for the pixel data. Computer graphics relies on these types of
buffers to efficiently manage the vast amounts of data involved in graphics and animation.
There are numerous ways to store pixel data, based on different sample and color models.
For example, pixel data can be stored in an internal table structure, with rows and columns
that are essentially equivalent to the image’s pixel structure on the screen; while another
internal buffer can hold the pixel data organized by color. Some of the composite helper
classes connected to the BufferedImage class organize pixel data into other structural
units such as samples, bands, banks, and rasters, which add flexibility and power to the
class, but also contribute to its complexity—it’s a good thing Processing internally handles
most of this stuff for us. Next, let’s go in a little deeper and explore the pixel.
The pixel
COMPUTER GRAPHICS, THE FUN, EASY WAY
Pixel, short for picture element, is the term used to describe the smallest unit of a digital
image. Essentially, pixels are just little blocks of colors that, when grouped together en
masse, form images. Each pixel on the screen has a range of possible colors dependent
upon the color depth of the monitor, which is a function of both the monitor and the
available memory on the computer’s video card. Modern monitors and video cards are all
generally capable of displaying 24-bit color depth—meaning that each pixel on the screen
can utilize 24 bits of information. Remember, a bit is a unit of measure, representing the
smallest unit of memory on a computer (either 0 or 1), and there are 8 bits in 1 byte. Each
pixel on a color display is composed of three components, representing the colors red,
green, and blue (RGB). Thus, a 24-bit pixel has 8 bits devoted to each of its three component
colors. Since 8 bits is kind of meaningless to most of us as a unit of measure, let’s
convert 8 bits, which lives in base 2 (binary system) to our familiar base 10 (decimal system).
To convert base 2 to base 10, you take the base (also called the radix), which in this
case is 2 (only 2 choices for bits—0 or 1), and raise it to the power of the number of places
(number of bits) in your number, in this case 8. Raising 2 to the 8th power (2 8 ) gives you
256. So each of the color components in the pixel then has a range of 256 different values,
representing the total number of combinations of zeros and ones in an 8-digit number.
In the preceding Processing function call fill(0, 0, 255);, for each of the arguments (R,
G, B) you can set a number between 0 and 255 (the 0 counts as a value—that’s why it only
goes up to 255, not 256—but the range of values, or the domain of each component, is
256). If you take the three different components (R, G, and B) and multiply each of their
domains together (256 ✕ 256 ✕ 256), you get 16,777,216 possible colors. Another way of
thinking about this (and actually closer to how the computer thinks about it) is that a
113
4