Learn to Code – 2.4 Damien Hirst Spot Paintings – Random

Posted: July 21st, 2012 | Author: Sermad | Filed under: Code, learntocode | 4 Comments »

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

In the last tutorial we finished recreating the Damien Hirst spot painting seen below but with if statements.

We also started to recreate the larger scale piece below (but we didn’t quite get around to adding colour).

We’ve mentioned that setting the colour of each spot individually would be tedious and setting these randomly would be super awesome.
So let’s investigate randomness.
Start with the JSFiddle from the last tutorial, fork it and then rename the title to say ’2.4 Damien Hirst Spot Paintings’.

Task – Create a random number

Creating random numbers on computers is really really hard. Lot’s of really clever people spent years trying to do this and lucky for us, Processing.js has a random() function already for us to use.
Let’s try an experiment. In the loop below the code – for(y=0;y<numberofrows;y=y+1) {
Add in the following code -

alert( random () );

If you run the code now, you’ll see a popup alert where each alert will be a rather long random number.

Task – Randomness within a range

Right now we have four colours for our spots – blue, yellow, purple and red. To pick one of these at random, we’ve got to figure out a way to associate a random number with a colour. The first step would be generate random numbers between 1 to 4 and each number would be a whole number – 1, 2, 3 or 4.

In the random code we’ve added, we can change it so it only generates numbers between 1 and 4 -

alert( random (1,4) );

If you run the code now, you’ll see a popup alert where each alert will be a rather long random number but now between 1 and 4.

We need to round these numbers to be whole numbers and we can use the round() function to do this for this.

alert( round( random (1,4) ) );

If you run the code now, you’ll see a popup alert where each alert a number between 1 and 4.

Task – Associate a random number to a colour

Perhaps you can sense where we are going with this as now we need to associate a number to a colour. Let’s create our own associations.

1 = blue

2 = yellow

3 = purple

4 = red

We then need to write some if statements that compare the random number we’ve generated to the numbers we’ve defined, then we set the colour accordingly.

Let’s create a variable to store the random number in. Replace the code alert( round ( random (1,4) ) ) with the following -

colour = round ( random (1,4) );

Task – Finish up

So now we have a colour variable, we can write those If statements to set the colour.

if(colour == 1) {
fill(blue);
}
if(colour == 2) {
fill(yellow);
}
if(colour == 3) {
fill(purple);
}
if(colour == 4) {
fill(red);
}

Task – Increasing the canvas

Let’s wrap up by increasing the site of the canvas and reducing the spotsize.

spotsize = 10;

numberofcolumns = 30;
numberofrows = 20;

We’ve successfully used random numbers to colour the spots.

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.3 Damien Hirst Spot Paintings – If Continuing our learn to code tutorials, we are going to take a...
3. Learn to Code – 2.2 Damien Hirst Spot Paintings – Loops Continuing our learn to code tutorials, we are going to take a...
4. Learn to code – 2.0 Damien Hirst Spot Paintings Continuing our learn to code tutorials. Love or loathe the...
5. Learn to code – 1.1 Yves Klein Blue In the colour tutorial we did a little background into jsFiddle,...

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

---