Learn to Code – 2.3 Damien Hirst Spot Paintings – If

Posted: July 19th, 2012 | Author: | Filed under: Code, learntocode | 1 Comment »

Continuing our learn to code tutorials, we are going to take a look at If Statements.

In the last tutorial we started to recreate the Damien Hirst spot painting seen below but with loops.

We didn’t quite finish from the last tutorial as we left the colour of every spot to be blue. Let’s find a way to set the correct colour of every spot and for this we are going to use the If statement.

Start with the JSFiddle from the last tutorial, fork it and then rename the title to say ’2.3 Damien Hirst Spot Paintings’.

Task – Set the spotsize

We should start by showing just four spots with the spotsize to be 150.

spotsize = 150;

numberofcolumns = 2;
numberofrows = 2;

If you run this code you’ll see four blue spots.

Task – Figure out the spots

In the loop code we are setting all the spots to be blue - fill(blue)

We can replace blue with red, purple or yellow and this will change the colour of all of the spots. So we need to tell the code to only set a certain colour for a certain spot. So we need a way for the code to understand which spot we are drawing.

As we have a loop in a loop and we have two variables  x & y which increment – we can use them to figure out which spot we are drawing.

Let’s try an experiment. In the loop below the code – ellipse(x*spotsize*2+spotsize/2,y*spotsize*2+spotsize/2,spotsize,spotsize);

Add in the following code -

alert(x + " " + y);

If you run the code now, you’ll see each spot drawn in turn and also an alert will pop up showing the x & y for that spot.

So we now know :-

The top left spot is drawn when x = 0 and y = 0;

The bottom left spot is drawn when x = 0 and y = 1;

The top right spot is drawn when x = 1 and y = 0;

The bottom right spot is drawn when x = 1 and y = 1;

Task – Set the blue spot

Now we know the values of x & y for each spot, we can set the colour

To do this we finally use the If statement. It is really simple to understand.

We need to write some code which works like this – if some value is equal to some other value else then do some stuff.

More specifically - if x is equal to 0 and y is equal to 0 then set the spot colour blue

In the code, remove the alert line we just added. Now where the fill(blue) code is, replace this with the following code below -


if(x == 0 && y == 0) {
fill(blue);
}

If you run the code now you’ll see the same four blue spots. Our code specifcally set the top left spot blue but a quirk in the way the code works has set all the others blue also. This is because the code uses the last fill colour we’ve used to draw the spots.

Let’s just step through this If statement because there are a few new things here to understand.

So the code - if(x == 0 && y == 0) { – This means if x is equal to 0 and y is equal to 0 then do the code inside the curly bracket.

The == means equal to. Why write x == 0 and not x = 0? Well x = 0 actually sets x to be 0. While x == 0 means check if x is equal to 0.

The && means AND. Both x  == 0 AND y == 0 have to be true before the code in the brackets will run.

These are called operators. There are loads of them. Dead useful.

Task – Set the yellow spot

We’ve set the top left spot to be blue, now set the bottom left spot to be yellow. From before we know that – if x is equal to 0 and y is equal to 1 then set the spot colour yellow.

Below the if statement for the blue spot, add in the following code -


if(x == 0 && y == 1) {
fill(yellow);
}

If you run the code now, you’ll see we’ve set the bottom left spot to yellow (along with the two other spots – remember that quirk).

Task – Set the purple spot

Now to set the top right spot to be purple. From before we know that – if x is equal to 1 and y is equal to 0 then set the spot colour purple.

Below the if statement for the yellow spot, add in the following code -


if(x == 1 && y == 0) {
fill(purple);
}

If you run the code now, you’ll see we’ve set the top right spot to purple (along with the last other spot – remember that quirk).

Task – Set the red spot

Now to set the bottom right spot to be red. From before we know that – if x is equal to 1 and y is equal to 1 then set the spot colour red.

Below the if statement for the purple spot, add in the following code -


if(x == 1 && y == 1) {
fill(red);
}

If you run the code now, you’ll see we’ve set all the spots to their correct colour.

We’ve successfully recreated the spot painting with another different way of doing so. The way we’ve just completed is fine for small amounts of spots but it isn’t really very useful if you want to colour 100 spots. To put an if statement for every spot would take a while.

A way to colour a large amount of spots very quickly is to randomly pick the spot colour. So for the next tutorial we will look at randomness.

Related posts:

  1. Learn to Code – 2.1 Damien Hirst Spot Paintings – Variables Continuing our learn to code tutorials, we are going to take a...
  2. Learn to Code – 2.2 Damien Hirst Spot Paintings – Loops Continuing our learn to code tutorials, we are going to take a...
  3. Learn to code – 2.0 Damien Hirst Spot Paintings Continuing our learn to code tutorials. Love or loathe the...
  4. Learn to code – Introduction So here we are. I said I would write some...
  5. Learn to code – 1.0 Yves Klein Blue – Colour So here is the first in a series of ‘learn...

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