Creative Programming: Colour

Lecture 3 (10 Feb)

Table of contents

• (Re)visiting slides?
• Our World in Colour
  • What is a colour?
  • The pattern behind colour names
  • Newton
  • Colour in nature
  • Colour perception
  • Bird vision
  • Bees and humans
  • Bee vision
  • Categorising Colour: Goethe
  • Categorising Colour: Tobias Mayer
  • Categorising Colour: Philip Otto Runge
  • Categorising Colour: Michel Eugène Chevreul
  • Categorising Colour: Albert Henry Munsell
• Color For Computers (+ Recap)
  • Subtractive and Additive
  • Subtractive
  • Subtractive example: printing
  • Additive
  • We have seen this before
  • Red, Green, Blue
  • RGB with direct numbers
  • RGB with variables
  • Arrays
  • Loops
  • Gradient
• Project Introduction
  • Project Introduction
• More Colour
  • Using RGB 1
  • Using RGB 2
  • Using RGB 3
  • The fourth value: alpha
  • Alpha Example
  • Adding imagery
  • Loading images
  • Image Example
  • Tinting
  • Revisiting old drawings
• Drawing Angles
  • Straight rectangles
  • Translation
  • Offset coordinates
  • Offset coordinates
  • Rotation
  • Rotate and draw
  • Symmetry
  • Symmetry in programming
  • Drawing with symmetry
  • Chasing the mouse
  • Mandala
  • Further transformations
  • Exercise 2

The first slide of every lecture introduces what we can make with the things we learn this week! This slideshow we will iteratively build up to a bouncing ball sketch that uses variables, conditions, loops, and arrays.

(Re)visiting slides?

This is where you can find the narration notes. Some slides don’t have any notes (especially this first week) as notes are typically reserved for slides that explain technical concepts.

You can jump to any slide with the menu to the (bottom) left.

Did you miss a slide or want to revisit? Open the narration tab while studying to get an explanation of difficult slides.

Our World in Colour

What is a colour?

In society we have words for different colours, but what is a colour? Is it a property of the object, or is it something that exists in our perception?

The pattern behind colour names

Newton

Newton was one of the first to categorise colours in a systematic way, using a colour wheel based on the spectrum of light. He also associated colours with musical notes, which is why we have 7 colours in the rainbow (like the 7 notes in a scale).

Colour in nature

If we look at physics, we can see that colour is a property of light, which is electromagnetic radiation. The colour we perceive depends on the wavelength of the light, and how it interacts with the objects around us. Different animals have different colour perception, which is why they see the world in different colours.

Colour perception

Birds have four types of colour receptors, which allows them to see a wider range of colours than humans. This is useful for finding food and mates.

Bird vision

A bird that looks dark to us may actually be very colourful to a bird, because they can see ultraviolet light. This is an example of how our perception of colour is limited by our biology.

Bees and humans

Bees can see ultraviolet light, which allows them to see patterns on flowers that are invisible to us. This helps them find nectar and pollinate the flowers.

Bee vision

The world is full of colours that we cannot see, but other animals can. This shows us that colour is not an objective property of the world, but rather a subjective experience that depends on our biology and perception.

Categorising Colour: Goethe

Goethe was a poet and scientist who had a different approach to colour than Newton. He believed that colour was not just a property of light, but also a product of our perception and emotions. He created his own colour wheel based on the psychological effects of colours, rather than the physical properties of light.

Categorising Colour: Tobias Mayer

Mayer was an astronomer who created a colour system based on red, yellow, and blue, which are the primary colours in the subtractive colour model.

Categorising Colour: Philip Otto Runge

Runge was a painter who created a colour sphere that arranged colours in a three-dimensional space based on hue, saturation, and brightness.

Categorising Colour: Michel Eugène Chevreul

Chevreul was a chemist who studied the interaction of colours and created the concept of complementary colours, which are pairs of colours that create a strong contrast when placed next to each other.

Categorising Colour: Albert Henry Munsell

Munsell was an artist and teacher who created a colour system based on three dimensions: hue, value, and chroma. This system is still widely used in art and design today.

Color For Computers (+ Recap)

Subtractive and Additive

Subtractive

• Color as it is perceived by light bouncing off of material
• Wavelengths are absorbed by the material and reflected to the eye

Subtractive example: printing

Printing is an example of subtractive colour, where the inks absorb certain wavelengths of light and reflect others. The more ink you add, the more wavelengths are absorbed, which is why adding all colours together results in black.

Additive

• Color as it is perceived by light emitted from a source
• Adding colors together increase the total visible wavelengths, making white

We have seen this before

We have not seen defining colors as variables before, that is new this slide! But the concept of defining something as a variable and then using it later is something we have seen before, for example with shapes and text. This is a powerful concept that allows us to reuse and manipulate our colours in different ways.

• High values make lighter colours
• Low values make darker colours
• Single argument gives greyscale colours

let white = color(255); // Creates a white colour
let black = color(0); // Creates a black colour

• Previously, we directly wrote e.g. fill(255) to set the fill colour
• NEW: color defines a color that we can store in a variable to use later

Red, Green, Blue

• Colour model of early photography
• Three numerical values represent the intensity of red, green, and blue light channels

let red = color(255, 0, 0); // Creates a red colour
let green = color(0, 255, 0); // Creates a green colour
let blue = color(0, 0, 255); // Creates a blue colour

let purple = color(134, 42, 200); // Creates a purple colour

RGB with direct numbers

The result of these slides are identical, we just tidy the code up by using concepts we’ve seen this and last week.

• Whenever a function needs a colour, we can specify the individual RGB values directly as arguments

RGB with variables

• We can also use variables to store the RGB values, which allows us to change the colour dynamically

Arrays

• Using arrays allows us to define a single variable to store our full palette of colours, which we can then access with an index

Loops

We have two if-statements here to account for the fact that we want two rows.

• Loops can automatically iterate through our colour palette

Gradient

The point of this exercise is to practice with colour, but foremost to practice with loops and arrays. The colour gradient is just a nice example to show how we can use these concepts together to create something visually interesting.

Class Assignment: Gradient

1. With the help of the previous slides, create a sketch that draws a range of distinct colours (e.g. a rainbow)

2. Convert it to a continuous gradient by using loops to draw many rectangles with slightly different colours

Project Introduction

Project Introduction

Not really a slide; check LearnIT for all the info.

• We will now introduce the project
• The description, groups, and rubric can be found on LearnIT

More Colour

Using RGB 1

• There are a few ways to invoke RGB in p5.js
• One of them is to use three numbers from 0-255

let red = color(255, 0, 0); // Creates a red colour
let green = color(0, 255, 0); // Creates a green colour
let blue = color(0, 0, 255); // Creates a blue colour

let purple = color(134, 42, 200); // Creates a purple colour

Using RGB 2

• You may have seen hexadecimal colours in other software, e.g. Photoshop
• Hexadecimal codes use three groups (R-G-B) of 2 characters in a string
  • 0 is the lowest, F is the highest

let red = color('#FF0000'); // Creates a red colour
let green = color('#00FF00'); // Creates a green colour
let blue = color('#0000FF'); // Creates a blue colour

let purple = color('#862ac8'); // Creates a purple colour

Using RGB 3

If you do not need very specific colours this is really nice for keeping your code readable.

• p5js also support colour names
• Directly use a (supported) colour name when declaring a colour

let red = color('red'); // Creates a red colour
let green = color('green'); // Creates a green colour
let blue = color('blue'); // Creates a blue colour

let purple = color('purple'); // Creates a purple colour

The fourth value: alpha

• RGB can also have a fourth value, called alpha
• Alpha controls the transparency, where 0 is fully transparent and 255 is fully opaque
• These transparent colours are useful for layering and blending effects

let transparentRed = color(255, 0, 0, 127); // Creates a semi-transparent red colour
let transparentGreen = color(0, 255, 0, 200); // Creates a slightly transparent green colour
let transparentBlue = color(0, 0, 255, 50); // Creates a very transparent blue colour

let transparentPurple = color(134, 42, 200, 100); // Creates a semi-transparent purple colour

Alpha Example

• In this example we draw multiple shapes with different alpha values to show how they blend together

Adding imagery

Most problems here are making it so that the computer can find your image. Make sure that it is in the correct folder.

• So far we have only used shapes to create our drawings
• We can add images to p5js as long as we can tell p5js where to find them
  • We can load images from an url ("https://...")
  • Or from local files, in the same folder as our sketch ("imageName.png")

Loading images

• To load an image, we can use the loadImage function, which takes the path to the image as an argument and returns a p5 image object
• We have to load the image in the preload function, which is similar to setup but is specifically designed for loading files before the sketch starts
• We can then use the image function to draw the image on the canvas, specifying the position and size

Image Example

• In this example we load an image of a cat and draw it on the canvas

Tinting

• We can apply what we have learned about colours to images
• tint applies a filter to the image, changing its colour and/or transparency

Revisiting old drawings

The idea here is that these methods can be applied to any of your old sketches to give them a new look. You can also combine these methods with the techniques we have learned in previous weeks, such as using variables and loops to create dynamic and complex drawings.

Class Assignment: Alpha

1. Go through your old sketches and add a fourth alpha value to your colours to make them transparent
2. Replace a rectangle with an image, and make it transparent using tint
3. Experiment with different alpha values to see how it affects the appearance of your drawings, especially when layering multiple shapes on top of each other

Drawing Angles

Straight rectangles

• So far we have only drawn straight shapes and images
• We have always used the top-left corner as the reference point for positioning our shapes and images
• How can we draw ‘angled’ shapes and images, i.e. rotated?

Translation

Translation (and rotation) can be notoriously hard to debug, especially when you have multiple translations and rotations in the same sketch. A good way to debug is to draw a simple shape (e.g. a rectangle) at the origin point (0, 0) after each transformation to see where the new origin point is.

• We can use the translate function to change the origin point
• This allows us to position our shapes and images relative to a different point on the canvas

Offset coordinates

If you only translate in your setup() then you won’t have any issues in your draw, and vice-versa.

• Be careful when using translate, as it changes the coordinate system
• The coordinate system will reset at the end of the draw function
• You have to put the translate at the start of the draw function if you want to apply it every time

Offset coordinates

• mouseX and mouseY give the position of the mouse relative to the original coordinate system, not the translated one
• You need to subtract the extra translation from the mouse coordinates to get the correct position in the translated coordinate system

Rotation

If you do not specify the angleMode then p5js will run in radians, which can be confusing if you are used to thinking in degrees. You can switch to degrees with angleMode(DEGREES), but be careful when copy-pasting code from the internet as it may be in radians.

• We can use the rotate function to rotate around the origin point
• As with translate, the rotation will affect everything after it
• We need to set angleMode to DEGREES if we want to use degrees

Rotate and draw

• As with translate, the rotation resets at the end of the draw function
• We can get a spinning effect if every draw we rotate a bit more (e.g. using frameCount)

Symmetry

Symmetry is a powerful tool in art and design, and can be easily achieved with transformations. By combining translations and rotations, we can create complex symmetrical patterns with just a few lines of code.

Symmetry in programming

• If we repeat our draw code multiple times with different translations/rotations, we can create symmetrical patterns
• Place your draw code in a for-loop to automatically repeat it

Drawing with symmetry

This final class assignment introduces us to symmetric drawings, which can be a fun way to create complex and interesting visuals with just a few lines of code.

Class Assignment: Symmetry

1. Set the origin to the center of the canvas and draw some simple shapes in one direction.
2. Use a for-loop to repeat the same shapes in different directions by applying different rotations. Try to create a symmetrical pattern.

Chasing the mouse

• pmouseX and pmouseY give the previous position of the mouse (pmouse as in previous mouse)
• By not refreshing the background we can create a trail effect that follows the mouse

Mandala

• By combining symmetry and mouse trails we can create a mandala effect

Further transformations

You may or may not want to use these. Push and pop is particularly useful and does show up in exercise 2.

• We can also use scale to change the size of our shapes and images
• shearX and shearY create slanting effects
• push() and pop() allow us to save and restore the state, which is useful for applying transformations to specific parts of our drawing without affecting the rest
• All transformations can be combined to create complex effects, but be careful with the order of transformations as they affect each other

Exercise 2

• Exercise 2 is all about drawing with colour and transformations.
• Good luck!