Learn to Code – 2.2 Damien Hirst Spot Paintings – Loops

Posted: July 19th, 2012 | Author: | Filed under: Code, learntocode | 2 Comments »

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

In the last tutorial we recreated the Damien Hirst spot painting seen below but with variables.

Let’s onto something larger scale.

You can imagine just how tedious it would be to fill out the code for every single spot. You would be typing for days. Luckily computers are pretty darn good at repeating things and for this, we are going to learn about loops.

I should say this is a pretty lengthy tutorial so get yourself a nice cup of tea and time to tackle this one.

Task – Loop the Loop

One way for our code to repeat so we can draw hundreds of spots is to use a For Loop. We draw a spot, we set it’s position and colour and repeat this code a set number of times. This is the essence of a loop. Let’s just try to create one  to understand how to use one.

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

Let’s clean out all of the code that draws the spots. This is the code under - // draw the spots

Where you previously had code to draw spots, add in the code -

for() {

}

This is the start of our For Loop. Notice it has brackets () that need some values and it also uses curly brackets {}. Anything inside these brackets is part of the loop.

We need want to tell it what number we want to start at and how many times to repeat.

for(x=0;x}

To recap -

x=0 – means we’ve set a variable x to equal 0.
x<10 – means we loop only while x less than 10.
x=x+1 – means every time we loop, add 1 to x.

Add in the alert(x) code into the for loop.

for(x=0;xalert(x);
}

If you run the code now, a popup window will launch with the copy – The page at fiddle.jshell.net says: 0

As you press OK, you’ll notice the number increase by 1 until 9. Which is exactly how we’ve described the for loop to work in the code.

Task – Draw a line of spots

So we have a way to loop through code and we can now use this to draw a line of spots.

We know to create a spot we need two lines of code.

One to set the colour e.g. fill(blue);
One to set the position, the width and the height e.g ellipse(75,75,spotsize,spotsize);

In the For Loop you’ve already created, remove the alert code and add in the code to draw a blue circle at position 75,75.

for(x=0;xfill(blue);
ellipse(75,75,spotsize,spotsize);
}

If you run the code now, you’ll see one blue spot. You might wonder why this is the case, afterall we are looping 10 times and making 10 blue circles. The reason is super simple. We are drawing 10 circles on top of each other.

To see 10 different circles we need to draw them all in a different position. In the For Loop we have the variable x incrementing from 0 to 9. If we use this variable and multiple it by another number, each circle can then have a unique position.

for(x=0;xfill(blue);
ellipse(x*30,75,spotsize,spotsize);
}

If you run the code now, you’ll see a rather strange elongated blue shape.

We can make the spotsize smaller to see individual spots.

spotsize = 30;

If you run the code now, you’ll a line of spots.

Task – Make the spots fit

Now I think it’s a good time to tidy up the code with some variables and also to make the canvas only be as big as the amount of spots we need. We need a variable to set the amount spots going horizontally and vertically. Add the following variables inside the setup -

numberofcolumns = 10;
numberofrows = 1;

If we have a spot size and the number of spots then we can figure out the size of the canvas by multiplying them together. Before the size(450, 450) code, add the following code -

canvaswidth = numberofcolumns*spotsize;
canvasheight = numberofrows*spotsize;

We just need to replace the fixed size in size(450, 450) code with the variables we’ve now created.

size(canvaswidth, canvasheight);

If you run the code now, you’ll see a white strip as we’ve lost our spots.

Because we’ve shrunk our canvas, we need cropped out the spots so we need to draw them from the top left corner. Hopefully you’ll remember the ellipse code controls this. We need to change the vertical position of the spot and right now these are being drawn 75 pixels from the top of the canvas. In the ellipse drawing code, replace the 75 with 0 -

ellipse(x*30,0,spotsize,spotsize);

If you run the code now, you’ll see 10 cropped spots.

We now need to move the spots down and to the right a little so they fit the canvas perfectly. By how much is pretty easy to see. We use spotsize as our variable for controlling the size and we can simply divide this by 2 to get the right amount to move the spot by.

So we are essentially adding a little bit extra to where we are currently draw the spots to put them in the right place.
We should also change that ‘x*30′ to be ‘x*spotsize’ to clean things up too. Your changes to the code should look like the code below -

ellipse(x*spotsize+spotsize/2,spotsize/2,spotsize,spotsize);

If you run the code now, you’ll see all ten spots fit the canvas perfectly.

We should finally tidy up the for loop as currently it is fixed to draw up to 10 spots. In the for loop, replace x<10 with x

for(x=0;xfill(blue);
ellipse(x*spotsize+spotsize/2,spotsize/2,spotsize,spotsize);
}

You can change the numberofcolumns variable and hopefully you’ll see the canvas resize to fit any number of spots.

Task – Loop in a Loop

We’ve made a horizontal line of spots fit the canvas and now we can do the same for the vertical lines of spots. For this to work, we are going to put a loop in a loop or properly known as a Nested Loop.

If the loop we have now is using a x variable and it counts up to numberofcolumns, then the new loop should use a y variable and count up to number of rows. We also should increment the y value by 1 every loop we make. We also need to adjust the ellipse code to draw the ellipse with the correct y position.

Remember you need to close the loop with a curly bracket }.

If you’ve followed the tutorial I think you should be able to figure out how to add this new loop. The code below is a reference if you get stuck (try to not copy and paste this) -


    for(x=0;x    for(y=0;y        fill(blue);
        ellipse(x*spotsize+spotsize/2,y*spotsize+spotsize/2,spotsize,spotsize);
    }
    }

If you run the code now, you’ll see a line of 10 blue spots. Which isn’t helpful in any way because nothing has changed. You might remember we have a variable which controls the number of rows. Please change this to 10.

numberofrows = 10;

If you run the code now, you’ll see a nice 10 by 10 grid of blue spots.

Task – Perfect the spot spacing

If you compare the grid of spots we’ve created to the actual painting you’ll notice that our spots are all touching each other while the spots should be spaced exactly one spot width away from each other.

We can accomplish this pretty easily by multiplying the amount of spacing by 2.

ellipse(x*spotsize*2+spotsize/2,y*spotsize*2+spotsize/2,spotsize,spotsize);

If you run the code now, you’ll see the 5 by 5 grid of blue spots with the correct spacing.

Task – Making the canvas fit

Just a couple more tweaks to get everything perfect. Because we’ve doubled the spacing between the spots, we need to increase the canvas by double also.

canvaswidth = numberofcolumns*spotsize*2;
canvasheight = numberofrows*spotsize*2;

If you run the code now, you’ll see the 10 by 10 grid of blue spots with the correct spacing.

Task – Making the canvas fit

The last tweak we have to make is to make the canvas fit perfectly to the spots. You’ll notice this on the right and bottom of the canvas. By the looks of things, we seem to be one spot too big. So the easiest would be to subtract the spotsize from the canvas width and canvas height.

canvaswidth = numberofcolumns*spotsize*2-spotsize;
canvasheight = numberofrows*spotsize*2-spotsize;

If you run the code now, you’ll see the 10 by 10 grid of blue spots which fit perfectly into the canvas. Changing the size of the spots, the colour of the spots, the number of rows of columns is as simple as changing the value of a variable now.

We’ve learnt some really really important concepts in the this tutorial. Some pretty hard things to wrap your head around. So feel really happy you got this far.

The next tutorial, we should look at how we colour individual spots so we can complete the picture.

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.0 Damien Hirst Spot Paintings Continuing our learn to code tutorials. Love or loathe the...
  3. Learn to code – 1.1 Yves Klein Blue In the colour tutorial we did a little background into jsFiddle,...
  4. Learn to Code – jsFiddle introduction We’ve been using jsFiddle for a little while now and...
  5. 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.