Lab 5

More about Functions

 Recap

Each function does ONE specific task

You may want to do these tasks again and again,

from time to time

Defining a function

void functionName(dataType argument1, dataType argument2, )

{
// instructions to tell Processing
// how to do something
// or what to display

2
 Recap
Calling function & passing parameters

100 150

3
Global variables vs Local variables

4
 Preparation

Create a new folder and

name it as lab5_XXXXXXXX
Replace XXXXXXXX with
your own login ID
lab5_12345678
Save all of the following
programs inside this folder

5
 Hands-on Exercise: Error Fixing

Fix the errors in mistake.pde

6
 Exercise Part (a)

Write a program to
Draw a toy image if the mouse is clicked
Clear the window if letter R is pressed (case insensitive)
In your program, write the following function to draw the toy
image

x and y are the center coordinates of the toy image

w and h are the width and height of the toy image

Save your program using filename lab5a_toys inside the folder

lab5_XXXXXXXX

7
Hints
w
(?,?)

h
(x, y)

8
 Exercise Part (b)
Modify the drawToy function you have done in part(a) to
allow selection of the toy image

x and y are the center coordinates of the toy image

w and h are the width and height of the toy image
c is the choice of toy image to be drawn
Draw toy01 if choice is 1
Draw toy02 if choice is 2
Draw toy03 if choice is 3
Draw toy04 if choice is 4
Draw toy05 if choice is 5

Save your program using filename lab5b_fiveToys inside the

folder lab5_XXXXXXXX
9
Hints

10
 Exercise Part (c)
Modify the program you have done in part(b) to draw the
toy images in the following order
toy01 toy02 toy03 toy04 toy05 toy01 toy02 toy03

Save your program using filename lab5c_toyOrdered inside

the folder lab5_XXXXXXXX

11
Hints

12
 Exercise Part (d)
Modify the program you have done in part(c) to draw a
toy image every second automatically at a random
position

After a After a
second second

Save your program using filename lab5d_toyAuto inside the

folder lab5_XXXXXXXX

13
Hints

14
 Lab Ex. Submission

Zip the folder lab5_XXXXXXXX

Submit the zip file to BU eLearning
Submit
the zip
file
lab5_1234567

"lab5_12345678.zip"
lab5_12345678 lab5_12345678

15
More about User Controls
Supplementary
MOUSE CONTROLS
Recap: mouseX, mouseY, and mousePressed()

mouseButton

17
Recap:
mouseX & mouseY
mouseX and mouseY are
system variables storing the
mouse cursor's horizontal and
vertical position

Example usage:
displaying an image at
(mouseX, mouseY) instead of
at fixed position can make
the image follow the mouse
See robotFollowMouse in
userControl folder

18
Recap: mousePressed()

While draw() is repeating, anytime

when user clicks the mouse,
Processing will jump to the
mousePressed() function to handle
the mouse click events

When the operations inside

mousePressed() are finished,
Processing will jump back to draw()

19
Recap: mousePressed()

Example: robotAtMousePress
this program displays only the
background when the program
starts, and displays a robot at the
mouses position when you click
the mouse

20
 Clearing the robots with mouse press
Lets clear the robots with RIGHT click by checking another
system variable mouseButton
System Variable Information provided
mouseButton Which button is pressed? LEFT, RIGHT, or CENTER?

21
 Lets try mouseButton
Modify the mousePressed() function in the source program
robotAtMousePress so as to clear the robots with RIGHT click

Submit your program using filename lab5_bonus1.zip

22
KEYBOARD CONTROLS
Recap: keyPressed()

key and keyCode

23
Recap: keyPressed()

While draw() is repeating, anytime

when user presses the keyboard,
Processing will jump to the
keyPressed() function to handle
the key press events

When the operations inside

keyPressed() are finished,
Processing will jump back to draw()

24
Recap: keyPressed()

Example: robotClearByKey
clear the robots by ANY
key press

25
 Which key is pressed?

You can check which key or special key is pressed and do

different operations accordingly
System Variable Information provided
key The most recent key pressed on the keyboard

keyCode The most recent special key pressed,

e.g. ENTER, ESC, DELETE, BACKSPACE, UP, DOWN, LEFT, RIGHT,

26
 Lets try keyCode
Open the source program robotMove
This program moves the robot according to the direction (UP /
DOWN / LEFT / RIGHT) stored in the direction variable

27
 Lets try keyCode

Modify the robotMove program to

allow the UP / DOWN / LEFT /
RIGHT arrow keys to control the
direction of the robot

28
How does the program work?

29
How does the program work?

30
 Lets try key

Lets use the i and d keys to increase and decrease the speed
of the robot
Where to add this part
in the program?

31
How does the program work?

32
How does the program work?

33
 How does the program work?

Submit your program using filename lab5_bonus2.zip

34
 Summary

Useful system variables for mouse and/or keyboard

controls

System Variable Information provided

mouseX The current horizontal coordinate of the mouse
mouseY The current vertical coordinate of the mouse
mouseButton Which button is pressed? LEFT, RIGHT, or CENTER?
key The most recent key pressed on the keyboard

keyCode The most recent special key pressed,

e.g. ENTER, ESC, DELETE, BACKSPACE, UP, DOWN, LEFT, RIGHT,

35
More about Functions
Supplementary
 Exercise

Rewrite lab5_star.pde to draw stars using function

x and y are the top middle coordinates of the star

w and h are the width and height of the star
c is the color to be filled into the star

Save your program using filename

lab5_bonus3.zip inside the folder
lab5_XXXXXXXX

37
Hints

38
 Hints

You could create color variables by

You program should looks like the following

39
 References

Learning Processing: A Beginner's Guide to Programming

Images, Animation, and Interaction
Daniel Shiffman.
Published August 2008, Morgan Kaufmann.
Getting Started with Processing
Casey Reas and Ben Fry.
Published June 2010, O'Reilly Media.
Web: http://processing.org/