<meta name="generator" content=

"HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12), see www.w3.org">

<title></title>

<h1>Color</h1>

<p class="license">This tutorial is for Processing's Python Mode.

If you see any errors or have comments, please <a href=

"https://github.com/jdf/processing-py-site/issues?state=open">

let us know</a>. This tutorial is adapted from the book, <a href=

"http://www.processing.org/learning/books/#shiffman">Learning

Processing</a>, by Daniel Shiffman, published by Morgan Kaufmann

Publishers, Copyright &copy; 2008 Elsevier Inc. All rights

reserved.</p>

<p>&nbsp;</p>

<h3>Grayscale Color</h3>In the digital world, when we want to

talk about a color, precision is required. Saying "Hey, can you

make that circle bluish-green?" will not do. Color, rather, is

defined as a range of numbers. Let's start with the simplest

case: black &amp; white or grayscale. 0 means black, 255 means

white. In between, every other number - 50, 87, 162, 209, and so

on - is a shade of gray ranging from black to white.<br>

<br>

<img src="imgs/grayscale.jpg" border="1"><br>

<br>

<table width="656">

<tr>

<td></td>

</tr>

<tr>

<td><em>Does 0-255 seem arbitary to you?</em><br>

Color for a given shape needs to be stored in the computer's

memory. This memory is just a long sequence of 0's and 1's (a

whole bunch of on or off switches.) Each one of these

switches is a bit, eight of them together is a byte. Imagine

if we had eight bits (one byte) in sequence - how many ways

can we configure these switches? The answer is (and doing a

little <a href=

"http://en.wikipedia.org/wiki/Binary_number">research into

binary numbers</a> will prove this point) 256 possibilities,

or a range of numbers between 0 and 255. We will use eight

bit color for our grayscale range and 24 bit for full color

(eight bits for each of the red, green, and blue color

components).</td>

</tr>

</table><br>

<br>

By adding the <strong><a href=

"http://processing.org/reference/stroke_.html">stroke()</a></strong>

and <strong><a href=

"http://processing.org/reference/fill_.html">fill()</a></strong>

functions before something is drawn, we can set the color of any

given shape. There is also the function <strong><a href=

"http://processing.org/reference/background_.html">background()</a></strong>,

which sets a background color for the window. Here's an

example.<br>

<br>

<pre>

background(255) # Setting the background to white

stroke(0) # Setting the outline (stroke) to black

fill(150) # Setting the interior of a shape (fill) to grey

rect(50,50,75,100) # Drawing the rectangle

<br>

Stroke or fill can be eliminated with the functions: <a href=

"http://processing.org/reference/noStroke_.html">noStroke()</a>

and <a href=

"http://processing.org/reference/noFill_.html">noFill()</a>. Our

instinct might be to say "stroke(0)" for no outline, however, it

is important to remember that 0 is not "nothing", but rather

denotes the color black. Also, remember not to eliminate both -

with <strong>noStroke()</strong> and <strong>noFill()</strong>,

nothing will appear!<br>

<br>

In addition, if we draw two shapes, Processing will always use

the most recently specified stroke and fill, reading the code

from top to bottom.<br>

<br>

<img src="imgs/order.jpg" border="1">

<h3>RGB Color</h3>

<p>Remember finger painting? By mixing three "primary" colors,

any color could be generated. Swirling all colors together

resulted in a muddy brown. The more paint you added, the darker

it got. Digital colors are also constructed by mixing three

primary colors, but it works differently from paint. First, the

primaries are diff erent: red, green, and blue (i.e., "RGB"

color). And with color on the screen, you are mixing light, not

paint, so the mixing rules are different as well.<br>

<img src="imgs/rgb.jpg"><br>

<br></p>

<ul>

<li>Red + Green = Yellow</li>

<li>Red + Blue = Purple</li>

<li>Green + Blue = Cyan (blue-green)</li>

<li>Red + Green + Blue = White</li>

<li>no colors = Black</li>

</ul><br>

This assumes that the colors are all as bright as possible, but

of course, you have a range of color available, so some red plus

some green plus some blue equals gray, and a bit of red plus a

bit of blue equals dark purple. While this may take some getting

used to, the more you program and experiment with RGB color, the

more it will become instinctive, much like swirling colors with

your fi ngers. And of course you can't say "Mix some red with a

bit of blue," you have to provide an exact amount. As with

grayscale, the individual color elements are expressed as ranges

from 0 (none of that color) to 255 (as much as possible), and

they are listed in the order R, G, and B. You will get the hang

of RGB color mixing through experimentation, but next we will

cover some code using some common colors.<br>

<br>

<img src="imgs/example_1_3.jpg" border="1"><br>

<br>

<a href=

"http://www.learningprocessing.com/wp/examples/chapter-1/example-1-3/">

Example: RGB color</a>

<pre>

<span style="color: #006699;">background</span>(255)

<span style="color: #006699;">noStroke</span>()

<span style="color: #666666;"># Bright red</span>

<span style="color: #006699;">fill</span>(255, 0, 0)

<span style="color: #006699;">ellipse</span>(20, 20, 16, 16)

<span style="color: #666666;"># Dark red</span>

<span style="color: #006699;">fill</span>(127, 0, 0)

<span style="color: #006699;">ellipse</span>(40, 20, 16, 16)

<span style="color: #666666;"># Pink (pale red)</span>

<span style="color: #006699;">fill</span>(255, 200, 200)

<span style="color: #006699;">ellipse</span>(60, 20, 16, 16)

<h3>Color Transparency</h3>

<p>In addition to the red, green, and blue components of each

color, there is an additional optional fourth component, referred

to as the color's "alpha." Alpha means transparency and is

particularly useful when you want to draw elements that appear

partially see-through on top of one another. The alpha values for

an image are sometimes referred to collectively as the "alpha

channel" of an image.<br>

<br>

It is important to realize that pixels are not literally

transparent, this is simply a convenient illusion that is

accomplished by blending colors. Behind the scenes, Processing

takes the color numbers and adds a percentage of one to a

percentage of another, creating the optical perception of

blending. (If you are interested in programming "rose-colored"

glasses, this is where you would begin.)<br>

<br>

Alpha values also range from 0 to 255, with 0 being completely

transparent (i.e., 0% opaque) and 255 completely opaque (i.e.,

100% opaque).<br>

<br>

<img src="imgs/example_1_4.jpg" border="1"><br>

<br>

<a href=

"http://www.learningprocessing.com/wp/examples/chapter-1/example-1-4/">

Example: Alpha transparency</a></p>

<pre>

<span style="color: #006699;">size</span>(200, 200)

<span style="color: #006699;">background</span>(0)

<span style="color: #006699;">noStroke</span>()

<span style=

"color: #666666;"># No fourth argument means 100% opacity.</span>

<span style="color: #006699;">fill</span>(0, 0, 255)

<span style="color: #006699;">rect</span>(0, 0, 100, 200)

<span style="color: #666666;"># 255 means 100% opacity.</span>

<span style="color: #006699;">fill</span>(255, 0, 0, 255)

<span style="color: #006699;">rect</span>(0, 0, 200, 40)

<span style="color: #666666;"># 75% opacity.</span>

<span style="color: #006699;">fill</span>(255, 0, 0, 191)

<span style="color: #006699;">rect</span>(0, 50, 200, 40)

<span style="color: #666666;"># 50% opacity.</span>

<span style="color: #006699;">fill</span>(255, 0, 0, 127)

<span style="color: #006699;">rect</span>(0, 100, 200, 40)

<span style="color: #666666;"># 25% opacity.</span>

<span style="color: #006699;">fill</span>(255, 0, 0, 63)

<span style="color: #006699;">rect</span>(0, 150, 200, 40)

<h3>Custom Color Ranges</h3>

<p>RGB color with ranges of 0 to 255 is not the only way you can

handle color in Processing. Behind the scenes in the computer's

memory, color is always talked about as a series of 24 bits (or

32 in the case of colors with an alpha). However, Processing will

let us think about color any way we like, and translate our

values into numbers the computer understands. For example, you

might prefer to think of color as ranging from 0 to 100 (like a

percentage). You can do this by specifying a custom <a href=

"http://processing.org/reference/colorMode_.html"><strong>colorMode()</strong></a>.<br></p>

<pre>

colorMode(RGB,100)

The above function says: "OK, we want to think about color in

terms of red, green, and blue. The range of RGB values will be

from 0 to 100."<br>

<br>

Although it is rarely convenient to do so, you can also have

different ranges for each color component:<br>

<pre>

colorMode(RGB,100,500,10,255)

Now we are saying "Red values go from 0 to 100, green from 0 to

500, blue from 0 to 10, and alpha from 0 to 255."<br>

<br>

Finally, while you will likely only need RGB color for all of

your programming needs, you can also specify colors in the HSB

(hue, saturation, and brightness) mode. Without getting into too

much detail, HSB color works as follows:<br>

<br>

<img src="imgs/hsb.png" width="250"><br>

<ul>

<li><strong>Hue</strong> - The color type, ranges from 0 to 255

by default.</li>

<li><strong>Saturation</strong> - The vibrancy of the color, 0

to 255 by default.</li>

<li><strong>Brightness</strong> - The, well, brightness of the

color, 0 to 255 by default.</li>

</ul><br>

With <a href=

"http://processing.org/reference/colorMode_.html"><strong>colorMode()</strong></a>

you can set your own ranges for these values. Some prefer a range

of 0-360 for hue (think of 360 degrees on a color wheel) and

0-100 for saturation and brightness (think of 0-100%).

<p>&nbsp;</p>

<p class="license">This tutorial is for Processing version 1.1+.

If you see any errors or have comments, please <a href=

"https://github.com/jdf/processing-py-site/issues?state=open">

let us know</a>. This tutorial is from the book, <a href=

"http://www.processing.org/learning/books/#shiffman">Learning

Processing</a>, by Daniel Shiffman, published by Morgan Kaufmann

Publishers, Copyright &copy; 2008 Elsevier Inc. All rights

reserved.</p>