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.
P.S. You can make the boxes bigger/smaller to suit your screen.
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 :-
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…