Learn to code – 1.0 Yves Klein Blue – Colour

Posted: June 21st, 2012 | Author: | Filed under: Code, learntocode | 2 Comments »

So here is the first in a series of ‘learn to code’ tutorials.

Let’s start with something incredibly basic as you really want to get comfortable with the tools at hand.

Task – We are going to change the colour of a square

Open your your favourite web browser and visit this jsFiddle page.

Looks a bit confusing right? So let’s just quickly look at JSFiddle.

This is a way for you to code directly in your web browser.

Everything in the purple box is the menu and we’ll go through some of these features as and when we need them.

Everything in the blue box is where you code. This is really where we’ll play.

Everything in the orange box is where you see the result of the code. The pretty pictures we create.

Everything else (such as the menu on the left, the CSS box and the JavaScript box) is extra so let’s not complicate things by going through all of that.

P.S. You can make the boxes bigger/smaller to suit your screen.

Colour

So you see the blue box on the right hand window. This is copy of klein international blue made famous by Yves Klein.

TV’s,computers, mobile phones etc display graphics as millions of tiny dots (pixels) and they show colour as a combination of three colours - Red, Green and Blue. If you grab a magnifying glass and look at your computer monitor you’ll see these pixels. So by mixing red, green and blue of all of the the pixels together, you can display a lot of colours (16.7 million I think).

So let’s have a fiddle with the code to understand this a little more. Find the line :-

background(10,55,171);

This command ‘background’ tells the computer to draw funnily enough the background colour.

It needs three colours – Red – Green - Blue

They are each represented by a number. Starting at 0 going to 255 (You can if you wish go deeper into why this is but for now it might be too much).

Task – Change the colour

Change the first number from 10 to 150 then press ‘Run‘. This causes jsFiddle to try and run our code again.

If you run the code now, you’ll see a purple box (you can see this below if you press ‘result’ below.

Task – Set any colour

Visit the website colorpicker, pick a colour of your liking and then copy some the R,G,B values into the JSFiddle and then press ‘Run’. Try this a few times to get a sense of how the colour changes depending on how much Red, Green and Blue you have.

What colour do you think background(0,0,0) is?

Pat on the back there. You’ve completed task 1 and in the next task we are going to go through each line of code to understand everything…

Related posts:

  1. Learn to code – Introduction So here we are. I said I would write some...

Related posts brought to you by Yet Another Related Posts Plugin.