Learn to Code – 2.1 Damien Hirst Spot Paintings – Variables

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

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

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

Task – Create a variable

We learnt how to put spots on the canvas but we really should tidy up our code before we move on, and learn how to use variables.

A variable is way to store information (be it numbers, text or other things) inside of it.

Before we start, we should FORK

Let’s make one to see. Inside the setup function add the code -

spotsize = 150;

Now instead of setting the width and height of the spot to be 150,  we can now use spotsize.

Task – Replace spotsize

Go through the code and replace the width and height of every spot. If you run the code now, you’ll see the the four spots we had originally.

Task – Change the spotsize

Change the spotsize variable to 15 -

spotsize = 15;

If you run the code now, you’ll see the the four spots but they are now TINY. Amazing huh.

Task – Change the colour

Change the spotsize variable back to 150 so we can be to back where we were originally. Making a variable to store the colour is slightly different than before, as colour is stored as numbers e.g fill(243,205,252);

We can’t store three numbers in one variable without doing something slightly different. Below your spotsize code, add the code -

blue = color(36,128,253);

Here we have created a new variable – blue and stored the correct the blue colour in it. As we mentioned before, uou’ll notice the syntax for doing this is not the same as setting the size. We have had to surround the three colour numbers with the ‘color’ type.

In the code, replace the first fill with the code -

fill(blue);

If you run the code now, you’ll see the the four spots as before.

Task – Change all of spot colour

We’ve changed the blue, but now we need to change the purple, yellow and red. Below the blue colour code, add the following code -

purple = color(243,205,252);
yellow = color(226,244,60);
red = color(224,28,66);

Then go through and change the fill colour of each spot to use their corresponding variable. If you run the code you should have the same four spots again.

We’ve completed our little look into the wonderful world of variables. You’ll agree they have huge amounts of benefits and we’ll build on these principles by introducing other uses for variables in further tutorials.

Related posts:

1. Learn to code – 2.0 Damien Hirst Spot Paintings Continuing our learn to code tutorials. Love or loathe the...
2. Learn to code – 1.0 Yves Klein Blue – Colour So here is the first in a series of ‘learn...
3. Learn to code – Introduction So here we are. I said I would write some...
4. Learn to code – 1.1 Yves Klein Blue In the colour tutorial we did a little background into jsFiddle,...
5. Learn to Code – jsFiddle introduction We’ve been using jsFiddle for a little while now and...

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

---