Getting Things Moving

The First Tutorial got something on the screen. In this tutorial, we will get it to move. We can start from the result of that first tutorial. That is, with the following code:

-- Use this function to perform your initial setup
function setup()
    print("Hello World!")
end

-- This function gets called once every frame
function draw()
    ellipse(WIDTH/2,HEIGHT/2,100)
end

The key is in that comment before the line function draw(). That function gets called every frame so if we change what happens in that function each time it is called, we will get different pictures on the screen and thus the appearance of movement. Indeed, this is already happening with our original program: the ellipse is being drawn every frame. But as it is in the same place each time, we don't notice this.

Step One: Declaring Coordinates

The obvious thing to do to make it move is to change the x and y coordinates at which the ellipse is drawn. We want the program itself to make the changes, so we need to tell it to store the coordinates and tell it how to change them each time. The way we store values is using variables. We need to tell Codea that we want two variables, let's call them x and y. A good practice to get into is to tell Codea about variables like this in the setup() function. By "variables like this" we mean variables that need some sort of persistence. In this case, we need to remember x and y from one frame to the next.

Touch the screen somewhere at the end of the print("Hello World!") line (remember that you can use the extra cursor keys if you don't get it quite right). Then press the return key (middle of the right-hand side on the keyboard, it may be called something else if you have a non-English language setting). This starts a new line (notice that it is already indented). Now type x = WIDTH/2. Remember that if you start typing width then Codea will suggest WIDTH for you (saving use of the CapsLock or Shift keys), and you can use the "Magic Maths Key" to get the / symbol quickly.

Now press return again and type y = HEIGHT/2. Your setup function should now look like this:

function setup()
    print("Hello World!")
    x = WIDTH/2
    y = HEIGHT/2
end

If you run your program now, you'll notice that nothing has changed. That's because although we've declared our coordinates, we aren't using or changing them yet.

Step Two: Using the Coordinates

Using the coordinates is very simple. We just need to replace the WIDTH/2 and HEIGHT/2 in the ellipse command with x and y. There are a couple of ways to do this. You can get the cursor just after the 2 and then use the delete key (just above the return key: looks like a signpost with an x on it). Or you can select the WIDTH/2 using the iPad's selection mechanism: double tap on the word WIDTH and then extend the selection region so that it includes the /2 as well, and then just type x - this will replace the selection. Do the same for the HEIGHT/2 and replace it by y.

Your draw() function should now look like this:

function draw()
    ellipse(x,y,100)
end

If you run your program now, you'll notice that nothing has changed. That's because although we've declared our coordinates and are using them, we aren't changing them yet.

Step Three: Changing the Coordinates

To change the coordinates, we need to tell Codea what to do. As the draw() function gets run once each frame, if we change the coordinates in the draw() function then this will change them each frame. A simple change would be to add 1 to each coordinate. There's a nice extra keyboard key that helps with this!

Get the cursor to the end of the line with function draw() on it and press return to get a new line. Then type x. One of the extra keys on the keyboard looks like: +=. Press this and you'll see that the x becomes x = x + . Type 1 so that it reads x = x + 1.

What this means is the following: "Save in the variable x whatever the current value of x is plus 1". Note, in particular, that the right-hand side is worked out with the current value of x.

Your code should now look like this:

-- Use this function to perform your initial setup
function setup()
    print("Hello World!")
    x = WIDTH/2
    y = HEIGHT/2
end

-- This function gets called once every frame
function draw()
    x = x + 1
    ellipse(x,y,100)
end

Now run your code.

What you should see is the ellipse moving off to the right. What you might not have expected is that it leaves a trail behind. This is because the stuff on each frame is drawn on top of what is already there so the picture builds up incrementally.

(If you watch really carefully, you'll see that something slightly odd happens at the very beginning. This will be looked at in a later tutorial.)

Step Four: Erasing the Past

There's a very simple way of dealing with this issue of things being added to what's already there. The very first thing we draw in each frame should be a huge rectangle covering the whole screen which effectively blanks what's there and gives us a fresh canvas to work on. The command for this is background. We need to put it in before the ellipse command, in a simple program like this then it doesn't actually matter where but it's good style to put it first of all. So get the cursor to the end of the function draw() line, press return and start typing background.

The background function needs to know what colour to paint on the frame. We specify this by passing a colour as an argument (or option) to the command. Remember that arguments are contained in parentheses and Codea has a "Magic Parentheses" button: the third from the left on the extra row of keys. Press this.

If you look carefully, you'll see that the parentheses have a beige background colour (the cursor has to be between the parentheses to see this). This is a special thing! If you now tap on the screen where the cursor is (between the parentheses) then you'll invoke the Colour Picker Wheel which helps you choose a colour. You can use this to choose a colour for the background. (If you'd rather type in the colour by hand, you can do so: just don't invoke the wheel by tapping, or if you've invoked it, tap elsewhere on the screen to get rid of it.)

However, you do it, once you've chosen a colour then your code should look like this:

-- Use this function to perform your initial setup
function setup()
    print("Hello World!")
    x = WIDTH/2
    y = HEIGHT/2
end

-- This function gets called once every frame
function draw()
    background(0,0,0,255)
    x = x + 1
    ellipse(x,y,100)
end

The four numbers in the colour specification are: the amount of red, the amount of green, the amount of blue, and the transparency (also known as the alpha channel). These range from 0 to 255.

Now if you run your program you'll see the ellipse move steadily off to the right.

Making Changes

With this program, the obvious place to make changes is with the "update rule". Rather than just having x replaced by x + 1 you can have more bizarre rules. Try x = (x + 3)%WIDTH. You can also provide a rule for y. You could also make the radius of the ellipse change.