tabreturn.github.io

Processing.py in Ten Lessons – 1.2: Colour

2018-06-13

Colour

There are various ways to specify colour in Processing. To keep things simple, we’ll stick with hexadecimal values for the first tutorial. If you are familiar with graphics software like Adobe Photoshop, Illustrator, Inkscape, or Gimp, you’ll have seen these values in your colour mixer. Processing includes its own colour selector. To access this, select Tools > Color Selector…

Screens rely on three primaries to mix colours, namely red, green, and blue. A hexadecimal colour value is comprised of 6 hexadecimal digits (`0,1,2``E,F`) and can be split into three pairs. Each pair corresponds to a primary colour. In the case of red:
`#``FF``00``00`
– the `FF` represents red; the middle `00` green; and right-most `00` blue. For reasons I won’t get into here, `FF` is the equivalent of `100%`. Also, remember that you are mixing light, so `#FFFFFF` is white, and `#000000` is black.

The `fill()` function sets the colour used to fill shapes. It accommodates up to four arguments, depending on the colour system you are using. For hexadecimal use the 6-digit value prefixed with a `#` and wrap it in quotes:

To see the fill colour in effect, add a rectangle. The `rect()` function is used to draw rectangles (or squares) and takes four arguments:

`rect(x_coordinate, y_coordinate, width, height)`

The x-coordinate values begin at the left-edge of the display window; and the y-coordinate from the top edge. Add the following code to your “hello_world” sketch; then run it to confirm that the output matches the image below:

Processing’s `rect()` is one of its many drawing functions. You’ll be introduced to some others soon.

Fills and Strokes

When you write a `fill()` function, every shape after that’s filled in the specified colour – that’s, up until the next `fill()` line. If you want to disable the fill altogether, use `noFill()`. In this way, Processing is like painting: you grab a brush and dip it in some paint, then everything you paint is influenced by the brush and colour you last selected. When you wish to paint in a different style or colour, you simply change-out your brush or dip it in a different pot.

Add the following code to your “hello_world” file. Note that comments have been added to give you a better idea of what each chunk is doing:

“Stroke” is another term for “outline”. There are three stroke functions you are likely to make frequent use of: `stroke()` to change the colour; `strokeWeight()` to change the width; and `noStroke()` to disable the stroke altogether. Like `fill()` and `noFill()`, the stroke functions affect everything below them. For a white stroke, three-pixels in width, add the following code (above the existing shapes):

To specify if stroke corners and tips should rounded or sharp, consult the relevant reference entries: `strokeCap()` and `strokeJoin()`

Background

To change the background colour use the `background()` function. Add a background line to the end of your sketch:

Run the sketch and notice how everything has disappeared and the whole display window is a flat shade of blue. This because the `background('#004477')` draws over everything before it. This is useful for when you get to animation, but for now, ensure that you place your background function somewhere near the top of your code:

Colour Mode

You’ve been using hexadecimal values to represent colour thus far. We’ll stick to them for the rest of the lesson 1, but before moving along, here’s a quick introduction to some other approaches. There’s no need to write any code for this section – just read through it to gain a basic grasp of the concepts involved.

For various reasons, you may need to express colours in something other than hexadecimal. Here’s one such scenario: you wish to write some code that darkens the bright red fill. Firstly, consider that this shade of red:
`fill('#FF0000')`
can also be represented as:
`fill(255, 0, 0)`
As you can probably deduce, `255` is equivalent to `FF` (which itself is equivalent to 100%, as previously explained). To make the red half as bright, you can subtract `127` from `255`. However, trying to subtract `127` from `FF` is more tricky because you are dealing with a mix of hexadecimal and decimal numbers.

In the previous scenario, the Processing `colorMode()` was set to `RGB`. You didn’t need to specify this, though, as it’s the default mode. In this mode, values represent the screen’s primary colours. However, there’s another mode you can make use of: `HSB`. Once set to HSB, one enters values representing Hue, Saturation, and Brightness.

To mimic the GIMP mixer above, one must first set the colour mode accordingly using:
`colorMode(HSB, 360, 100, 100)`
To explain: `HSB` represents the mode; `360` represents the range of degrees; and the two `100` arguments a range of 0–100% for saturation and for brightness. You’d now write a red fill as:
`fill(360, 100, 100)`
This is because red lies at 360 degrees of rotation on the Hue ring (which begins at ‘East’ in the GIMP mixer) with the saturation and brightness set to 100%:

For a dark-greyish violet, one could use:
`fill(270, 50, 50)`

In HSB mode, shifting along the colour spectrum – from red to orange to yellow to green, etc. – is a matter of adding or subtracting from the H-value. Attempting the same in RGB mode is more complicated as you need to manage the quantities of each primary.

There will be more on colour in this lessons to come. Until then, you can consult the relevant reference entries should you need more detail:
`colorMode()`
`fill()`