What Is Default Background Color In Processing

Color

This tutorial is for Processing's Python Mode. If yous see any errors or have comments, please permit us know. This tutorial is adapted from the book, Learning Processing, by Daniel Shiffman, published past Morgan Kaufmann Publishers, Copyright © 2008 Elsevier Inc. All rights reserved.

Grayscale Colour

In the digital world, when we want to talk about a color, precision is required. Saying "Hey, tin can you make that circle blueish-dark-green?" will non do. Color, rather, is defined equally a range of numbers. Permit'due south start with the simplest case: blackness & white or grayscale. 0 means black, 255 ways white. In between, every other number - 50, 87, 162, 209, and so on - is a shade of grey ranging from blackness to white.

Does 0-255 seem arbitary to you?
Color for a given shape needs to be stored in the calculator's retention. This retention is just a long sequence of 0's and 1'south (a whole bunch of on or off switches.) Each 1 of these switches is a bit, eight of them together is a byte. Imagine if nosotros had eight bits (ane byte) in sequence - how many ways tin can we configure these switches? The respond is (and doing a piddling research into binary numbers volition testify this signal) 256 possibilities, or a range of numbers between 0 and 255. Nosotros volition use eight bit colour for our grayscale range and 24 bit for full colour (8 bits for each of the red, light-green, and blue colour components).

By adding the stroke() and fill() functions earlier something is drawn, nosotros can fix the colour of whatsoever given shape. At that place is too the function groundwork(), which sets a groundwork color for the window. Here's an instance.

background(255)    # Setting the groundwork to white stroke(0)          # Setting the outline (stroke) to blackness fill(150)          # Setting the interior of a shape (fill) to grey  rect(50,l,75,100) # Drawing the rectangle

Stroke or fill can be eliminated with the functions: noStroke() and noFill(). 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 colour black. Besides, remember non to eliminate both - with noStroke() and noFill(), nothing will appear!

In addition, if we describe two shapes, Processing volition always utilise the near recently specified stroke and fill up, reading the code from top to bottom.

RGB Color

Recollect finger painting? By mixing 3 "principal" colors, whatsoever colour could be generated. Swirling all colors together resulted in a muddy brown. The more paint you added, the darker it got. Digital colors are besides synthetic by mixing iii chief colors, merely information technology works differently from paint. First, the primaries are diff erent: cherry-red, greenish, and blue (i.e., "RGB" color). And with color on the screen, you lot are mixing light, not paint, so the mixing rules are different as well.

Cherry + Green = Yellowish
Red + Blue = Purple
Green + Blue = Cyan (blueish-green)
Red + Light-green + Blue = White
no colors = Black

This assumes that the colors are all every bit bright equally possible, but of course, you have a range of color available, so some red plus some dark-green plus some blue equals grayness, and a bit of red plus a chip of blue equals dark purple. While this may take some getting used to, the more y'all plan and experiment with RGB color, the more it will become instinctive, much similar swirling colors with your fi ngers. And of form y'all can't say "Mix some cherry with a chip of blue," you have to provide an exact corporeality. Every bit with grayscale, the individual color elements are expressed every bit ranges from 0 (none of that colour) to 255 (as much as possible), and they are listed in the order R, G, and B. Y'all volition get the hang of RGB color mixing through experimentation, simply next nosotros will cover some code using some common colors.

Example: RGB color

          background(255)          noStroke()          # Vivid red          fill(255, 0, 0)          ellipse(20, 20, 16, xvi)          # Night red          make full(127, 0, 0)          ellipse(40, 20, sixteen, 16)          # Pinkish (pale reddish)          fill(255, 200, 200)          ellipse(60, 20, 16, 16)

Color Transparency

In improver to the red, green, and blue components of each color, at that place is an additional optional 4th component, referred to as the colour'south "blastoff." Alpha means transparency and is specially useful when you lot desire to draw elements that appear partially see-through on acme of 1 another. The alpha values for an prototype are sometimes referred to collectively every bit the "alpha aqueduct" of an paradigm.

Information technology 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 colour numbers and adds a percent of one to a percentage of another, creating the optical perception of blending. (If you are interested in programming "rose-colored" spectacles, this is where you would begin.)

Blastoff values also range from 0 to 255, with 0 existence completely transparent (i.e., 0% opaque) and 255 completely opaque (i.east., 100% opaque).

Case: Alpha transparency

          size(200, 200)          groundwork(0)          noStroke()          # No fourth statement means 100% opacity.          fill(0, 0, 255)          rect(0, 0, 100, 200)          # 255 ways 100% opacity.          fill(255, 0, 0, 255)          rect(0, 0, 200, 40)          # 75% opacity.          fill(255, 0, 0, 191)          rect(0, 50, 200, 40)          # 55% opacity.          fill(255, 0, 0, 127)          rect(0, 100, 200, twoscore)          # 25% opacity.          fill(255, 0, 0, 63)          rect(0, 150, 200, 40)

Custom Color Ranges

RGB color with ranges of 0 to 255 is not the only way you tin can handle colour in Processing. Backside the scenes in the computer'due south memory, color is always talked about as a series of 24 bits (or 32 in the instance of colors with an blastoff). Still, Processing will permit united states think about color whatever way we like, and translate our values into numbers the calculator understands. For example, you might adopt to think of colour equally ranging from 0 to 100 (like a pct). You lot can do this by specifying a custom colorMode().

colorMode(RGB,100)

The in a higher place office says: "OK, we want to recollect nigh color in terms of red, dark-green, and blue. The range of RGB values will be from 0 to 100."

Although it is rarely convenient to do and so, you can likewise take dissimilar ranges for each color component:

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

At present we are saying "Red values become from 0 to 100, green from 0 to 500, blue from 0 to ten, and alpha from 0 to 255."

Finally, while you will likely just demand RGB color for all of your programming needs, you tin can also specify colors in the HSB (hue, saturation, and brightness) mode. Without getting into too much particular, HSB color works every bit follows:

Hue - The color type, ranges from 0 to 255 by default.
Saturation - The vibrancy of the color, 0 to 255 past default.
Brightness - The, well, brightness of the colour, 0 to 255 by default.

With colorMode() you can set your ain ranges for these values. Some prefer a range of 0-360 for hue (call back of 360 degrees on a colour wheel) and 0-100 for saturation and brightness (call back of 0-100%).

This tutorial is for Processing version ane.1+. If yous run across whatsoever errors or have comments, please let united states of america know. This tutorial is from the book, Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann Publishers, Copyright © 2008 Elsevier Inc. All rights reserved.