Objectives

On completion of this lab you should:

• be able to write code to animate simple drawings.
• be aware of the system variables in the PDE and be able to use them effectively.

Basic Animation

• We will use the following built-in functions to animate our drawings:
  • setup()
  • draw()

A note on the setup() function

• setup() is called once when the program starts and should not be called again.
• setup() can set the screen size and background colour.
• There can only be one setup() function for each sketch.

A note on the draw() function

• You should never call the draw() function.
• Processing automatically calls the draw() function straight after the setup() call.
• draw() continuously executes the code contained inside it.
• There can only be one draw() function for each sketch.

Animating Ellipses

• Open the Processing Development Environment (PDE).

• Enter the following code:

• Using the File, Save as... menu options, save this sketchbook as lab03_step01.

• Run the code. You should have an animation similar to the screen shot below.

• Can you explain why there are multiple circles drawn? Why not just one circle?

Animating Ellipses (continued)

• We are now going to change the code (from the previous step) so that only one circle is shown when you move the mouse.

• Amend your code so that the background function is in the draw method instead of the setup method:

• Run the code. You should have animation similar to the screen shot below.

• Can you explain why there is only one circle drawn as we move our mouse?

Playing with the System Variables

• What would happen to our animation if we swapped the mouseX and mouseY system variables in the ellipse function with each other? Make this change (the code change is below, if you need it) and see if you can figure out what is going on.

    ellipse(mouseY, mouseX, 100, 100)

• What would happen to our animation if we changed our ellipse function to be this:

    ellipse(width, mouseY, 100, 100)

• Make this change and see if you can figure out what is going on.

Colouring Ellipses

• We are now going to change the code (from step01) so that the circle changes colour as you move the mouse.

• Ensure that you are starting with this code:

• Change your code so that the value stored in the mouseX and mouseY variables determine the colour of your circle:

• Run the code. You should have animation similar to the screen shot below.

• Can you explain why the circle colour is changing as we move our mouse?

Exercises

• The exercises are typically based on the material we covered in the previous steps in this lab.

• For each exercise listed below, open a new sketchbook.

• For the challenge exercises you may need to visit the Processing website for additional information.

Exercise 1

• Produce the following animation:
  • a white circle is drawn when you move the mouse; only one circle is visible at one time (i.e. all previous ones are cleared).
  • the x and y coordinates for the circle are dependent on the mouse position (hint: use system variables mouseX and mouseY).
  • the size of the circle is determined by the y mouse coordinate.

• When you run your code, your circle show grow in size as you move your mouse pointer down the window and reduce in size when you move your mouse up the window. When you move your mouse horizontally, the circle should stay the same size.

Exercise 2

• Using exercise 1 as a starting point, add the following animation to it:
  • a black circle is drawn when you move the mouse (all previous black circles are cleared).
  • the x coordinate for the circle is the mouseY coordinate and the y coordinate for the circle is mouseX.
  • the size of the circle is determined by the x mouse coordinate.

• When you run your code, the black circle should overlap the white circle when you drag your mouse from (0,0) diagonally down to (100,100). When you move your mouse horizontally, the black circle show grow/shrink in size. It remains the same size when the mouse is dragged vertically. Note that the white circle's behaviour hasn't changed.

Challenge Exercise 1 (animated drawing with no cursor)

• Do some research to figure out how to turn the mouse pointer (cursor) off.
• Implement this functionality in any one of your exercises above.

Challenge Exercise 2 (animated drawing with a different cursor)

• Do some research to figure out how to turn the mouse pointer (cursor) into a hand.
• Implement this functionality in any one of you exercises above.

Challenge Exercise 3 (animated drawing using a drag effect)

• Do some research into the Processing variables: pmousex and pmousey.
• Write a Processing sketch that uses these variables.

Solutions

• The solutions for this lab can be found here.

• The file is in Zip format, so when you download it, you will need to unzip it. If you don't have unzipping software installed on your computer, 7Zip is a good choice.