Learn to code – 2.0 Damien Hirst Spot Paintings

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

Continuing our learn to code tutorials.

Love or loathe the works of Damien Hirst, we are going to ‘recreate’ a spot painting and explore how you put things on screen exactly where you want.

Task – Set the canvas

As always start with the base JSFiddle.

Let’s set the size of the canvas. Hopefully you’ll remember this must go in the the setup function -

size(450,450);

Set the background colour of the canvas to be white -

background(255,255,255);

Task – Change the page background with CSS

Right now the result of all your code should might look like nothing has changed. This is because the default background colour of a webpage is white and we’ve set our canvas to white.

So I’m going to introduce something called CSS or  Cascading Style Sheets. This is another way to change the colour of a web page.

In the CSS box in the top right of JSFiddle. Paste in the following code -

body {
background-color:rgb(192,192,192);
}

If you run the code now, you’ll see a white canvas on a grey background.

CSS is beyond what we’ll learn in these tutorials because but if HTML is the masonry of the web, then CSS is the decoration.

Task – Draw a circle

To draw a circle is thankfully pretty straight forward. We use the function – ellipse

We need to give this ‘ellipse’ a postion on the canvas and a width and a height (of course using the same width and height creates a circle). So in total we require four parameters.

In the setup function, paste the following code -

ellipse(0, 0, 150, 150);

If you run the code now, you’ll see the outline of a semi circle in the top left of the canvas.

So why is this? The code placed the middle of a circle, width and height 150 pixels at position top left of the canvas (this is position 0,0). If we want the circle to fit exactly in the top left hand corner we need to move the circle to the right a bit and down a bit. By how much you say? Well if only half the circle is being drawn now, we need to move the circle to the right by half of its width and down by half of its height.

Replace the current circle code with the following code -

ellipse(75, 75, 150, 150);

If you run the code now, you’ll see the outline of the circle in the top left of the canvas.

Task – Set the colour of the circle

Setting the colour of a circle, using a function called fill

We need to pass in a colour to the fill function and we do this in the usual way – By passing in R, G, B

For this code to work, it must be in the code the line before the ellipse function.

fill(33,127,249);

If you run the code now, you’ll see the a blue circle with a black outline in the top left of the canvas.

Task – Remove the black outline on the circle

You will have noticed there is a black outline on the circle. This is technically called a ‘stroke’. We can remove this with a really simple function – noStroke

For this code to work, it must be in the code before the fill function.

In the line above the fill function, paste the following code -

noStroke();

If you run the code now, you’ll see the a blue spot in the top left of the canvas.

Task – Understanding the canvas

As we have one nice coloured spot, we need another three. This is easy enough to do. We just repeat the previous code changing the colour and the position in turn.

Before we do this, let us try and understand how the canvas knows where to draw things.

Look at the image below which defines the canvas. It might ring some bells from something you did in school many moons ago. We know from before that the canvas is made up of pixels and is basically a giant grid.

The top left of the canvas is the origin and is set as 0,0 pixels.

The top right corner of the canvas is 450 pixels to the right of the origin and is 450,0 pixels.

The bottom left corner of the canvas is 450 pixels below of the origin and is 0,450 pixels.

The bottom right corner of the canvas is 450 pixels below and 450 pixels to the right of the origin and is 450,450 pixels.

We pretty much always use the top left corner of the canvas as our starting point when placing anything on the canvas. We can now think of the canvas as having two axis – the x – horizontal axis and the y – the vertical axis.

Task – Drawing the spots

To add in the spot in the top right corner, if we draw it at 450 pixels along the x axis it will be half off the canvas. So we need to draw it 450 pixels minus half of the width of the circle.

As like the previous spot, we also need to draw it 75 pixels from the top of the canvas.

After the previous spot code, paste the following code -

fill(243,205,252);
ellipse(450-75, 75, 150, 150);

You’ll notice I’ve written the position of of the spot as 450-375 instead of 375. Thankfully programming languages can do these sort of sums for us.

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

For the third spot we need to draw this in the bottom left of the canvas.

After the previous spot code, paste the following code -

fill(226,244,60);
ellipse(75, 450-75, 150, 150);

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

For the fourth spot we need to draw this in the bottom right of the canvas.
After the previous spot code, paste the following code -

fill(224,28,66);
ellipse(450-75, 450-75, 150, 150);

And if you run the code now, you’ll hopefully see our replica of the Damien Hirst.

In the next tutorial we’ll look at how you can save your work using jsFiddle.

Related posts:

  1. Learn to code – 1.1 Yves Klein Blue In the colour tutorial we did a little background into jsFiddle,...
  2. Learn to code – Introduction So here we are. I said I would write some...
  3. Learn to code – 1.0 Yves Klein Blue – Colour So here is the first in a series of ‘learn...
  4. 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.