Lecture 3 - Variables

Asking computer to remember some values

 What youll learn today?

What is a variable?

How to create and use variables?

Try using variables to do some operations

Make a shape move

More interactive drawings

2
 What is a variable?

A variable is a location for storing things, you can

put something in and
retrieve your stuff when you need

3
 What is a variable?

A variable can only hold a SINGLE piece of information,

e.g. a number OR a character

4
 What is a variable?

A variable always comes with a type and the type,

once defined, cannot be changed

5
 Data type

In Processing, some commonly used data types include

6
 Data type

Digit(s) NOT in nor are int or float

Digit(s) or a single character in is char
Digit(s) or a single/series of characters in is String
Value Data Type Value Data Type
8 char
8 int
8 String
123 int 123 String
123.456 float 123.456 String
true boolean true String

7
 Properties of variables
1. A variable should have a value

Example 1:
two rectangles are drawn in two
different ways

8
 Properties of variables
1. A variable should have a value

First rectangle:

rect ( 20 , 20 , 100 , 100 ) ;

Draw Topleft
width height
rectangle coordinates

9
 Properties of variables
1. A variable should have a value

Second rectangle:

rect ( 20 , 150, a, a );
Draw Topleft
width height
rectangle coordinates

The width and height

are represented by a,
then, what is a ?

10
 Properties of variables
1. A variable should have a value

Second rectangle:

rect ( 20 , 150, a, a );
Draw Topleft
width height
rectangle coordinates

So the width and

height are both 100

11
 Properties of variables
2. The value of a variable can be changed

Example 2:
the second and third assignments
change the value of the variable

12
 Properties of variables
2. The value of a variable can be changed

Example 2:
the second assignment changes
the value of the variable

13
 Properties of variables
3. We can have more than one variable

Example 3:
two rectangles with different
width and height are drawn

14
 Properties of variables
4. Value of one variable can be calculated from others

Example 4:
the width and height of the third
rectangle is calculated by that
of the previous two rectangles

15
 What youll learn today?

What is a variable?

How to create and use variables?

Try using variables to do some operations

Make a shape move

More interactive drawings

16
4 steps to create and use a variable

1. Variable Declaration
a. Tell the computer what
type of data you want to store
asking the computer for some
space to store the values
b. Give names to refer to the
storage space

Usually declare all variables at the

top of the program

17
1. Variable Declaration

a. Tell the computer what

type of data you want to store
asking the computer for some
space to store the values

Its like making a new contact on the

mobile phone

How much space

to ask for?

18
1. Variable Declaration

b. Give names to refer to the

storage space

Its like giving a name to the new

contact

How to name a
variable?
Ann
Any restrictions on
the names?

19
 1. Variable Declaration
How much space to ask for?
You: Can you give me a bag to hold something?
Me: What type of things you want to hold?
I will give you a bag of suitable type

20
 1. Variable Declaration
Data Types
You: Can you give me some space to store some data?
Computer: What type of data you want to store?
I will give you space of suitable type

10 150 2.5 -9.95 a B

-2 3.14159 c

integers floating point characters

int numbers char
float

21
 1. Variable Declaration
Data Types
Data Type Description Range / example Size
boolean true / false 1 bit
char A character a, B, c, 1 byte
byte A small number -128 to 127 1 byte
short A large number -32768 to 32767 2 bytes
-2147483648 to
int An integer 4 bytes
2147483647
long A really huge number
float A decimal number e.g. 3.14159 4 bytes
A decimal number
double with a lot more 8 bytes
decimal places

A bit is the smallest unit of information in computer

1 byte = 8 bits
22
 1. Variable Declaration
How to name a variable?
DOs DONTs
Must be one word Have space
Must start with a letter Start with a number
Can include numbers
Can have underscore _ Include any punctuation or
special characters
Avoid using keywords that appear
elsewhere in the Processing language
Better use names that mean something
Better start with a lowercase letter and
join together words with capitals
Variable names are case sensitive
i.e. aname is different from aName

23
 How to name a variable?
Test your understanding
Can these be variable names? If not, why?
score
aVariableName
my name
4thRectangle
temp2
money^
color_R

setup

abc

RectWidth

24
 1. Variable Declaration
What if you forget this step?
Forget to declare Variable declaration is to tell the
the variables computer what type of data you
want to hold asking the computer
for some space to hold some
values / information

NO declaration means no space

to hold the value

25
4 steps to create and use a variable

2. Variable Initialization

Assign an initial value to a variable

Usually do this inside setup()

26
2. Variable Initialization

Assign an initial value to a variable

Its like keying in a phone number to

the new contact

Ann What if I forget to

give a value?
90123456

27
 2. Variable Initialization
What if you forget this step?
If we forget to assign an initial
value to a variable

wont be able to draw the rectangles

Forget to give
initial values to
the variables

28
4 steps to create and use a variable

3. Use the value stored in the

variable

29
4 steps to create and use a variable

4. Assign new value or update

the variable

30
 Assigning value to a variable

We assign a value to a variable by setting it equal to something

(a value / another variable / an expression)

value expression

another
variable

This is to assign the value of y to x

DONT mix up the direction!
31
 Assigning value to a variable

Can you put things like this?

Need to match the

data type

32
 Arithmetic Operators

Example
Value of
Operators Meaning
c

+ Add c = a + b; 21
- Subtract c = a - b; 13
* Multiply c = a * b; 68
Divide
/ c = a / b; 4
(get the quotient in division)
Modulus
% (get the remainder c = a % b; 1
in division)

33
 What youll learn today?

What is a variable?

How to create and use variables?

Try using variables to do some operations

Make a shape move

More interactive drawings

34
LETS MAKE THE ROBOT MOVE
Using Variables

35
How do you want the robot to move?

e.g. Move the robot upward by 1 unit repeatedly

Where to display the robot?

36
 Lets try making the robot move
Modify the program
as follow
Things your write
after // are remarks
1. Ask the computer or comments
to remember the
robots position
as x and y

2. Specify where is
the robot initially
inside setup()

3. Display the robot at a varying

4. Tell the computer
how to vary the position position, e.g. at position (x, y)
(e.g. move upward by instead of a fixed position (0, 0)
1 unit repeatedly)
inside draw()

37
How does the program work?

x y

This is to declare two variables

asking the computer for some
memory space to remember two
values and we give the names x
and y to refer to these two space

38
How does the program work?

x 300 y 500

This is done inside setup()

because we are specifying the
initial position of the robot at start

39
How does the program work?

x 300 y 500

The computer first check the

memory for the values of x and y
Then display the robot at (300, 500)

40
How does the program work?

x 300 y 500 - 1
500
499

41
How does the program work?

x 300 y 499

The computer check the memory

again for the values of x and y
Then display the robot at (300, 499)

42
How does the program work?

x 300 y 499 - 1
499
498

43
How does the program work?

x 300 y 498

The computer check the memory

again for the values of x and y
Then display the robot at (300, 498)

44
Lets try making the robot move
from different initial positions

Which part to change?

45
Lets try making the robot move
in different directions

Which part to change?

46
Lets try other initial positions and directions

Which part to change?

47
 What youll learn today?

What is a variable?

How to create and use variables?

Try using variables to do some operations

Make a shape move

More interactive drawings

48
Recap: moving the robot with mouse

This is to display the robot

image at the mouses position
mouseX and mouseY are
system variables indicating the
horizontal and vertical positions
of the mouse cursor

Replace the fixed position with

the mouses position can move
the robot with the mouse

49
 Mouse & Keyboard Control
Put different types of instructions to
different sections / functions
mousePressed() handles mouse clicks
keyPressed() handles key presses

Instructions inside mousePressed() and

keyPressed() will wait until mouse click
or key press happen
i.e. nothing will happen if we dont press
the mouse or the key

Be careful of the
UPPER / lower
case letters
50
 Lets try drawing more robots
when mouse is pressed
Modify the source program
robotFollowMouse.pde

Add the
mousePressed()
function and display
the robot here

51
 Lets try drawing more robots
when mouse is pressed

This program displays only the

background when the
program starts, and displays a
robot at the mouses position
when you click the mouse

52
 Lets try clearing the robot
when the keyboard is pressed
At the end of the program,
add the keyPressed() function and
display the background image there

53
How mousePressed() and keyPressed() work?

54
 Class Exercise

How to use mouse click to make

the robot move faster and faster?
You need to remember the speed of
the robot need one more variable
Hint: follow the 4 steps to add a variable

55
 Challenge & Bonus

Display the robot with a fixed size when the program starts
Make the robot bigger every time user presses the keyboard

56
 Supplementary:
Print out the value of a variable
We can use println to print out some text and/or
the value of a variable in the text area
Example

Output

57
 Supplementary:
Print out the value of a variable
We can use println to print out some text and/or
the value of a variable in the text area
Example

Output

58
 Summary
We can use variables to
remember some values
e.g. position of the robot
Variable data types
int (integer)
float (floating point number)
char (character)
String (some characters)
PImage (image)

We can change the values

of the variables to do some
operations
e.g. make the robot move

4 steps to use variables

Print out the value of a
variable using println
59
 Summary
Mouse & Keyboard Control
Put different types of instructions to
different sections / functions
mousePressed() handles mouse clicks
keyPressed() handles key presses

Instructions inside mousePressed() and

keyPressed() will wait until mouse click
or key press happen
i.e. nothing will happen if we dont press
the mouse or the key

Be careful of the
UPPER / lower
case letters
60
 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/