Tutorials page

An assortment of tutorials on various topics as and when I post them. To keep up to day, why not subscribe to the RSS feed?

Entries in color (2)

Sunday
Feb132011

The basics of Colour Theory

What is colour?

Colour is tricky is what it is. White light is split up into colours, which when combined, form white again.

Everyone knows this – when you shine white light through a prism, you get seven colours – Red, Orange, Yellow, Green, Blue, Indigo, Violet.

The seven colours of the rainbow.

… Assuming you discount the Near UV and Near IR shades of course, and limit yourself to the visible spectrum that humans enjoy (Other animals can see more UV, but less red, for instance), and you’re not colour blind…

And you discard all the other colours that are between those seven colours.

And if you accept that Orange should be there. But why shouldn’t it? Well let’s see:

Here’s a colour wheel:

Colour-wheel

As we can see, there’s the three primary colours in light. Red, Green and Blue. They’re at the centre of our wheel. If we mix them we get the second ring – Red, Yellow, Green, Light blue (Cyan), Blue, and Violet (Magenta).

It’s only when we start mixing that second ring of colours to make a third ring that we get to orange!

Let’s label the rings:

  • Primary.
    The ‘elemental’ colours.
  • Secondary.
    The colours you get by mixing the primary colours.
  • Tertiary.
    The colours you get from mixing secondary colours.
  • Everything else.
    The colours you get by mixing each subsequent ring. Each time you add a ring the number of colours doubles: 3,6,12,24,48,96,192… You’d either need a huge ring or colour blocks that are too small to be useful, so after Tertiary colours it’s basically a handwave.

Saturation

Saturation refers to how pure the colour is. Pure red is 100% red, accept-no-substitutes, eyeball vibrating, top of it’s game red.

A de-saturated colour is grey. Let’s look at a handy graphic:

saturation-2

Starting at the top we have that gorgeous vibrant, fully saturated “Jewel tone” set of colours, then moving down they shade through pastel, lose their vibrancy and become grey.

The lower edge isn’t straight though. It appears  that some colours remain stronger than others, which fade into grey a lot earlier.

This is because the human eye isn’t sensitive to all colours, to the same amount – we’re a lot better at seeing Green than we are at seeing Blue, and women can (often) see more Red than men!

Complements.

”My what a fine colour that is!”

Ah, that’s a compliment. A complement is an opposite. In colour theory, we use a circular model so we can show each of the three primary colours blending with the other two, to get a full range of colour.

Each colour has an opposite, which when mixed with it, will form white (Or black or grey, depending on how saturated the colours are).

Black, white and grey are “Neutral” colours. They aren’t biased towards any one of the primary colours, they have equal amounts of all three! So… who cares?

Well, you don’t want to look like a clown when you get dressed, or decorate your room in a way that looks bad do you?

Let’s pull up the colour wheel again:

Colour-wheel-labels

Here I’ve labelled the three rings, and drawn in a line from Red to Cyan. The circle at the end is filled with red, which is mixing with Cyan to make white.

This is because red and cyan are opposite – Complementary – colours. I’ve also added two more sample lines showing what red looks like when blended with the colours either side of Cyan – we get pale yellow and violet.

Analogous colour

Instead of picking opposites, what if we picked colours that went together? Orange, Red and Magenta for instance? They line up nicely on our colour wheel.

Let’s take a look at three colour schemes:

  • Analogous
    Orange, Red & Magenta
  • Complementary
    Red & Cyan
  • Split Complement
    Red and the two colours either side of cyan.

colour-scheme

In the first, the colours are too similar – they wash out.

In the second, the colours are too antagonistic. They look horrible! They have great contrast but they’re also kind of eye hurting…

… But not as eye hurting as split complement, which is a crime against vision.

But then if we start to de-saturate and darken the colours, they begin to work with each other – in other words the closer they get to neutral, the easier on the eye they are.

If you have a neutral background, you can apply brighter colours to it. Red or yellow on black or blue on white look quite nice. Due to the way monitors tend to be set up, blue on black on-screen tends to be a little harder to see and requires a lighter colour.

For example – Blue and Cyan and Sky Blue.

If you use one colour, you can use the complement or complementary analogous colours for contrast – rule of thumb is that if one colour is saturated, the other colours have to be dark and/or de-saturated – otherwise they will clash.

Colour-blind

The most common type of colour-blindness is Red/Green colour-blindness. Let’s look at our ‘full spectrum’ colour wheel under the filters of Protanopia and Deuteranopia colour-blindness simulation:

colourblind

Green and red becomes yellow, blue becomes a series of blue shades – Cyan becomes white. Certain colour combinations would then become very hard to distinguish – Green on yellow, for instance, or Cyan on white.

In the next tutorial we’ll take what we now know about shading, highlights, colour bleed and colour theory and start applying them all together in a horrible travesty that will blight your soul until the sweet release of death.

In the meantime, here’s a reptile. I am assured reptiles make everything better.

reptile

Saturday
Feb122011

Shading Concepts 101: Colour Bleed.

In the last tutorial, Basic shading concepts, I put a sphere onto a grey background and added some shadow and lighting – direct and indirect.

In that circumstance, there wasn’t any colour bleed displayed, for simplicity.

In the real world there tends to be more colour and less infinite featureless grey plains. Scientists have noticed this on occasion, and have come up with a useful testing apparatus called a Cornell Box which can be used to demonstrate colour bleed – and so I’ve created my own for the purpose of this tutorial.

My version has three coloured walls in the primary colours, and neutral grey floor and ceiling.

Tehre's nothing in here.

Neutral grey floor and ceiling, one red, one blue and one green wall, with a little neutral grey shadow popped in for æsthetics, and to give the illusion of depth and light fading over distance.

Colour bleed?

Light is energy. In this example we’re using white light which (Simplifying the entire visible spectrum thing) is made up of three primary colours:

RGB diagram

Light comes in three primary colours – Red, Green and Blue. Light is additive – the more you add on the brighter it gets.

Pure colour at it’s maximum is called ‘saturated’. In the above diagram I’ve used three saturated colours overlaid as though they were coloured lights.

Paints are Subtractive – mix the three primary colours of paint (Red Yellow and Green) and you get dark brown…

If you mix the three light primary colours you get the secondary colours:

  • Red and Green make Yellow.
  • Red and Blue make Magenta (Or purple or Violet, depending on your eyesight).
  • Blue and Green make Cyan (bright blue?).
  • Red, Green and Blue together make White.

Bearing in mind we’re working with a computer which displays on a monitor, and there are specific hardware limitations in the screen’s output.

Where all the colours overlap, we get white.

Digression

You might notice that there are six colours and may recall that rainbows have seven colours: Red Orange Yellow, Green, Blue, Indigo, Valium Violet.

Sir Isaac Newton, inventor of the Cat-flap, Calculus, the theory of gravitation and Master of the Royal Mint also did some work on colours.

Unfortunately Sir Isaac was also an alchemist and believed that there was hidden evidence of the hand of God in the world so he decided that the rainbow should have seven colours rather than six because he felt it was more appropriate.

Therefore orange was promoted to a secondary colour instead of a tertiary colour that’s produced by mixing a primary and a secondary colour. he also labelled the secondary colour ‘Cyan’ as ‘Blue’ and pure blue ‘Indigo’.

So what happens when our white light, which we’ll say is 100% pure energy for the sake of explanation, hits say… a red wall?

The wall is red because it absorbs the blue and the green part of the light, and only reflects the red part. Thus 66% of our energy is absorbed and the rest is reflected. some goes to your eye, but some is reflected onto whatever is nearby.

That means in our Cornell box example, the white light would hit the coloured walls and then be reflected onto the floor and the other walls as coloured light.

Bearing in mind that since we know white is a mix of all colours, that any coloured light is technically less coloured

Let’s add that in.

Illumination-2-Bleed

Notice that the coloured walls are reflecting colour onto the grey ceiling and floor, but that the floor is also reflecting dim white light back up against them.

I could stop here, but where’s the fun in that?

Let’s introduce our good friend Sphere’s cousin, Neutral Grey Sphere!

Illumination-3-sphere

As you can see, Sphere is reflecting the light, the walls and has some shadow and direct illumination. But as yet there’s no indirect illumination. So can you guess what I’m going to do next?

That’s right I’m going to have a nice cup of tea.

And now I’m going to add in some indirect lighting, which will be:

  • Light reflected from the floor
  • Light reflected from the walls
  • Light reflected on to the walls from the sphere.

Illumination-4-sphere-indirect-illumination

The effect is quite subtle – you can see that the shadow under the sphere is being filled in with light from the walls and that the light from above is being bounced onto the walls, and that he coloured walls are adding a little coloured light to the sides of the sphere, and the floor is putting faint white light against the underside.

Limits.

In the real world, light will reflect backwards and forwards between objects until it’s too dim for the eye to register. In this example, it bounces once. This is a compromise between looking more realistic and the amount of time and effort it takes to do this.

In this tutorial, several basic assumptions have been made – That any light reflected from the walls will be only 33% as bright as pure white light, that the floor is reflecting 20% of the light (Approximating attenuation caused by distance) and so on.

It’s also assumed that all the materials are perfect – they reflect uniformly and are a perfect matte or gloss with no imperfections, that there is air and that the air is not absorbing any light.

This is not usually the case in the real world. That can also be added but for the purpose of this tutorial, I’ve handwaved all of that.