Categories

# Create colour effect examples

Create coloured squares (after Johannes Itten) to be printed and cut out, and coloured rectangles (after Josef Albers)

This set of exercises are inspired from Johannes Itten’s book, The Elements of Color. In these activities we will create some coloured blocks and investigate colour effect. We will use Processing.org and output the images into PDFs that can be printed, and start off with the Critical Thinking Sheet.

The activities develop from previous ones. So take a look at the following activities:

1. The activity to make a quick sketch before you code, introduces the Critical Thinking Sheet. You can find a copy of the CTS sheet here.
2. The RGB colour coding activity.
3. The activity titled “Learn about the relative nature of colour” goes over the ideas that we’ll cover in this post.

## Activity 1. Create some large blocks of colour, print and cut them out.

In this activity we will create some blocks of colour in Processing. We will use the PDF output of the language. But let’s start by making a plan.

#### Step 1. Make a plan – use the Critical Thinking Sheet

Complete the Critical Thinking Sheet. While this is a simple project, it is much easier to write the values down on paper, rather than typing them straight into code and just trying to get them right!

We need two versions of the program. One to print out and cut up, and one to observe on the screen.

For the print version, we need two blocks of background colour, and several (same colour) extra rectangles. Set the size to (640,660). Make each background colour (320,360) and the rectangles at the bottom (120,120).

For the screen version. Set the page to be size(640, 360); the two background blocks to fill the page (one on the left half and the other on the right). Set the internal rectangles to be a square of 120 width and height.

1. If you have not done so already: print out the Critical Thinking Sheet. Complete the problem, name and add today’s date, and explain the challenge part ①
2. In panel ② make a sketch of the problem output, and annotate the diagram.
3. In panel ③ you can explain the challenge. In today’s challenge we need to choose PDF output, put the left and right background coloured blocks and two (same colour) rectangles on top.
4. In panel ④ we can now summarise the steps of the process.
5. Finally, consider what to do next. Definitely we need to think more about the colour model (HSB), how to print in PDF and move down the page.

#### Step 2. Create the code

We can now create the code. From the previous activities, it should be straight forward to create the processing code.

``````import processing.pdf.*;          // Import PDF code
size(640, 660);
beginRecord(PDF, "line.pdf");     // Start writing to PDF
noStroke();
color colOne = color(200, 100, 0);
color colTwo = color(200, 150, 0);
color colThree = color(150, 50, 0);

fill(colOne);
rect(0, 0, 320, 360);
fill(colTwo);
rect(320, 0, 320, 360);

// The extra 3 rectangles with the same colour
fill(colThree);
rect(0, 520, 120, 120);
rect(200, 520, 120, 120);
rect(400, 520, 120, 120);``````

When the page has been printed, we can start to explore the colours. Placing the coloured squares on top of each other shows that they are the same colour. When placed on top of the different coloured backgrounds they appear different tints.

### Step 3. Explore different colour combinations

Now change the colours in the blocks. Try greys. Different tints of blue or green. Print them out and explore how they look.

## Activity 2. Create some square patterns, after Josef Albers (from his book Interaction of Color).

The aim of this second activity is to create blocks of colour in a style that Josef Albers designed.

The easiest way to achieve this is to create functions for each set of blue squares, and another for the set of red squares. This means that we can treat each function in its own small coordinated system, and move them around the page. The blue set of squares to the left, the red to the right, another blue set below along with a scaled red set of squares on top, and similarly for the final version.

We can achieve this in Processing by creating our own function (e.g., `void redSquares( )` ), and using `translate` to move them around, and `scale` to change their size.

#### Step 1. Use and setup the active mode in Processing.

We need to use the active mode in Processing, so that we can use functions. We will use `setup( )` and `draw( )`. The `setup` method gets called once at the start of running the program. While the `draw` method gets called every frame. The system will try to run as many frames per second that your system can handle.

``````void setup(){
size(680, 680);
background(255);
noStroke();
}

// we will put the functions here

void draw(){
// we will put the draw code here
}``````

#### Step 2. Create functions for each coloured rectangle

Let us create the rectangles 160 by 160.

We can define the first set of rectangles in the following coordinates:

`(0, 0), (160,0), (0,160) `and` (160,16`) each with a width and height of 160 by 160. This is easy to create.

To colour them we can use the RGB values (that we have listed in the image above).

To create the function we can do so by creating a new void function, such as `void blueSquares() { .. }`. This function is just going to be called, so we do not need to return a value, so we define it as returning a `void` value.

``````void blueSquares(){
fill(33,87,146);    rect(0, 0, 160, 160);
fill(131,192,231);  rect(160, 0, 160,160);
fill(88,128,192);   rect(0, 160, 160, 160);
fill(115,160,202);  rect(160, 160, 160,160);
}``````

Now we can create the red squares in a similar way. We can use the same coordinates, but now with the red RGB values.

``````void redSquares(){
fill(175,58,106);    rect(0, 0, 160, 160);
fill(232,189,199);  rect(160, 0, 160,160);
fill(201,102,135);   rect(0, 160, 160, 160);
fill(216,139,145);  rect(160, 160, 160,160);
}``````

#### Step 3. Call the functions, and push/pop the transformations stack

If we call the functions one after the other, we won’t get our desired effect, because they will appear on top of each other. We need to translate the position of the second one, before calling it.

``````blueSquares();
translate(360,0);
redSquares();``````

The translate function moves the whole page. So now, everything that gets plotted is also translated. So what we need to do is, hold onto the current set of positions (the state of the positions of everything) and then do the translation, and then pop back to the previous state of play.

We can do this by using the `pushMatrix() `and `popMatrix() `functions. The “matrix” word comes from the fact that the transformations are stored in a matrix form, and we are “pushing” the state onto a stack, and then “popping” off the last one from the memory stack. So putting this together we get the following code:

``````void draw(){
blueSquares();
pushMatrix(); // push the transformation stack
translate(360,0); // now translate the whole page
redSquares(); // draw the red squares
popMatrix(); // pop to the previous transformation
//.. put more drawing stuff here

} // end the draw method``````

Using the mixture of `pushMatrix()`, `popMatrix()`, `translate() `and also `scale()` we can control the position of each of the remaining blocks of colour, without explicitly changing the coordinates of the squares. What we have done is to use “local coordinates”.

Using local coordinates makes our life much easier, because we can easily create objects in a well-defined and easy-to-understand coordinate space, and then translate, scale, rotate it to the right position.

## Go further

There are many different colour combinations that you may like to try. Try the following:

3. Yellows and blues

Create some large colour pictures of different colours, and then print them out using the `beginRecord(PDF, "filename.pdf");` and `endRecord(); `functions. If you are unsure how to do this, see PRINT on the Processing.org website.

Try printing out different colour combinations, from the first activity in this post, and get your friends to see if they realise that the centre block is actually the same colour. 