Learn to code – 1.1 Yves Klein Blue

Posted: June 22nd, 2012 | Author: | Filed under: Code, learntocode | 1 Comment »

In the colour tutorial we did a little background into jsFiddle, colour theory and a tiny bit of coding. We didn’t deconstruct the code in anyway so let’s step through this.

Task – Understand scripting

Open this blank colour tutorial in jsFiddle. In the HTML panel put the code -

<script type="application/processing">

</script>

All our code needs to be put in something that tells the browser what type of code it is. So we do this by using the <script> HTML tag. There is a specific syntax of HTML (HyperText Markup Language) and it is really easy.

I wont go too much into HTML (HyperText Markup Language) but it is the the masonry of the web. All websites need this to work and this is why I’ve chosen jsFiddle for the tutorials as it hides a lot of the HTML and let’s us get on coding without worrying about this. A good thing to know is when you start a tag e.g. <script> you have to close it somewhere. You do this by repeating the tag but this time with a backslash e.g </script>

To draw nice coloured squares or anything we need a canvas.

After the previous code, in the HTML panel put the code -

<canvas></canvas>

We now have a web page made with HTML and we are going to be writing javascript & processing.js that displays inside a canvas. (Press HTML below to see the code).

Task – Add the setup code

Between the <script></script> tag, in the HTML panel put the code -

void setup() {
}

This ‘setup’ code is something called a ‘function’. You’ll meet these a lot in programming. This setup code runs once (and only once) – as soon as you press ‘Run’. Think of this as when you turn on the ignition of your car and the engine starts, the car needs to do all sorts of things before you can drive away.

What does the ‘void’ mean? This means the function doesn’t return anything. We’ll explore this further in another tutorial.

What do the brackets after setup() mean? This means the function doesn’t accept any values. We’ll explore this further in later in the tutorial.

What do the curly brackets {} mean? Any code inside the curly brackets means it belongs to that function and it will run when we call that function.

Task – Set the size of the canvas

We need to set the size of the canvas.

Inside the setup function, put the code -

size(400,400);

So here we are using a function – size and this sets the size of the canvas we want to draw on. We need to give the canvas a width and and a height, and we do this by passing the function two numbers – 400  and 400

The first number corresponds to the width (in pixels) and the second number also to the height in (also in pixels).

If you want to, you can read more detailed background into this size function or if you really want to, try and change the width or height of the canvas. You should see a grey box.

You might notice at the end of the line is a semicolon ;  - These signify you’ve finished the code for that line. It’s a good habit to do this.

Now you should have the following code on screen.

Task – Set the background colour

We need to set the background colour of the canvas. After the size function, add on a new line -

background(10,55,171);

As we’ve seen before, we are using a function. In this case the function is background and we are passing in numbers which set the red, green and blue colour. Remember from the last tutorial?

So in this tutorial we went into some syntax and also alluded to some bigger concepts – functions being the main one.

The next tutorial we’ll be looking at the works of Damien Hirst.

Related posts:

  1. Learn to code – 1.0 Yves Klein Blue – Colour So here is the first in a series of ‘learn...
  2. 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.