Learn to Code – 2.4 Damien Hirst Spot Paintings – Random

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 –

[sourcecode language="javascript"]
alert( random () );
[/sourcecode]

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 –

[sourcecode language="javascript"]
alert( random (1,4) );
[/sourcecode]

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.

[sourcecode language="javascript"]
alert( round( random (1,4) ) );
[/sourcecode]

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 –

[sourcecode language="javascript"]
colour = round ( random (1,4) );
[/sourcecode]

Task – Finish up

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

[sourcecode language="javascript"]
if(colour == 1) {
fill(blue);
}
if(colour == 2) {
fill(yellow);
}
if(colour == 3) {
fill(purple);
}
if(colour == 4) {
fill(red);
}
[/sourcecode]

Task – Increasing the canvas

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

[sourcecode language="javascript"]
spotsize = 10;

numberofcolumns = 30;
numberofrows = 20;
[/sourcecode]

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

  • http://www.facebook.com/rwildling Robert Wildling

    Thank you so much for these insightful tutorials! – I was wondering if there is any possibility to talk to any of those ellipsis again later, like to an object. I added an spotArray.push(“ellipse_”+x+y); to identify them – but I really don’t know, if all the added spots are actually really objects that can be manipulated later on, again. Can you please help me to gain anymore insight into this problem? Thanks in advance!

    • sermad

      Hi Robert,

      Thanks for trying out the tutorials and for also commenting.

      I certainly did plan on creating a tutorial for arrays and possibly even objects. These are pretty advance topics to a beginner so they might come a little later after some other things.

      But for you I will create a jsFiddle soon showing how to place objects in an array so you can reference them easily.

      • http://www.facebook.com/rwildling Robert Wildling

        Thank you very much for your quick response and your offer to present a tutorials on how to manipulate array objects within a canvas! i am very much looking forward to it!

        Just to share my thoughts with you: having peeked into proceesingJS a little further already, i know that there is the function draw(), which enables all the fancy animations.
        The reason for thinking about arrays is that it might be less CPU intense to set up the ellipses in the setup function and collect them in an array to eventually animate them in the draw-section by looping through the array. Because jumping through all those for-loops and nested for-loops and setting them up again and again up to 60 times per second might become to processor intensive.

        I do have a Flash history, but didn’t work with it since 6, 7 years. And I haven’t looked into canvas yet, but I guess the principles remain pretty much the same. On the other hand, of course, I am not really sure if looping though an array is really less CPU-intense …

        Well, I hope you will share your insights with us!!! I really do!

        Thanks again and have a nice day!
        Greetings from Vienna, Austria.

  • Pingback: .: sermad :. » Blog Archive » Learn to code – Introduction()