Categories
Beginner Colours Processing Project Rainbow

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.

Colours after Itten; to print and cut
Colours after Itten; to print and cut
Colours after Itten; for screen display
Colours after Itten; for screen display

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.

Critical thinking sheet of the colours from Itten exercise.
  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.

Printed blocks of colour, to investigate different effects
Printed blocks of colour, to investigate different effects

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.

Printed blocks of colour laid on top of different background colours
Printed blocks of colour laid on top of different background colours

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.

Colour example after Josef Itten, created in Processing.org
Colour example after Josef Itten

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();

Top Tip.
Use pushMatrix() to
remember the
transformation state.
Use popMatrix() to go
back to the remembered
state.

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”.

Top Tip.
Using local coordinates
is the best way
to model different objects

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.

Blue and red coloured squares, after Josef Albers
Blue and red coloured squares, after Josef Albers

Go further

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

  1. Shades of green
  2. Shades of grey
  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.

Want to read more?

Take a look at work by Swiss artist Johannes Itten (1888-1967). For example, take a look at The Elements of Color: A Treatise on the Color System of Johannes Itten, Based on Itten’s Book “The Art of Color” Hardcover – 31 Jan. 1970 · ISBN-10. 0471289299.

Have a look at the work by Josef Albers. There is a lot of information on the Albers’ foundation website. Or pick up a copy of his book “Interaction of color”.

By Jonathan

Jonathan is constantly designing things, educating people, and always learning. He is professor of visualisation at the School of Computer Science and Electronic Engineering, Bangor University, U.K. He leads the Visualization, Data, Modelling and Graphics Group (VDMG), leads project rainbow and is an author of the Springer book "Five Design-Sheets" sketching design method.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

en_GBEnglish (UK)
cyCymraeg en_GBEnglish (UK)