ALGORITMA PEMROGRAMAN 2

PROCESSING
M4. Variabel pada Processing
Chapters of This Lesson

Chapter 4 :
Variables
Chapters of This Lesson

Chapter 4 :
Variables
Chapters of Variables
1. In this chapter :
 Variables: What are they?
 Declaring and initializing variables
 Common uses for variables
 Variables you get “for free” in Processing (AKA “bulit-
in” variables)
 Using random values for variables
4.1 What is a Variable?
 The concept of a variable in an intuitive manner. On
any given day, Might say “A Variable is like a
bucket”.
 You put something in the bucket, carry it around with
you, and retrieve it whenever you feel inspired.
4.1 What is a Variable?
 The computer has memory. Why do we call it
memory?

 Because it is what the computer uses to remember stuff

it needs.

 Technically, a Variable is a named pointer to a

location in the computer’s memory (“memory
address”) where data is stored.
4.1 What is a Variable?
 Since computers only process information one
instruction at time, a variable allows a programmer to
save information from one point in the program and
refer back to ot at a later time.
 For Processing programmer, this is incredibly useful;
variables can keep track of information related to
shapes: color, size, location.
 Variables are exactly what you need to make a
triangle change from blue to purple, a circle fly across
the screen, and a rectangle shrink into oblivion.
4.1 What is a Variable?
 Imagine that the computer’s memory is a sheet of
graph paper and each cell on the graph paper has
an address.
 With pixels, we learned how to refer to those cells by
colomn and row numbers.
 Example:
 Let’s name one “Billy’s Score” (we will see why we
are calling it that in the next section) and give it 100.
 Whenever we want to use Billy’s score in a program,
we do not have to remember the value 100.
4.1 What is a Variable?
4.2 Variable Declaration and Initialization

 Variables can hold primitive values or references to

object and array.

 Primitive values are the building blocks of data on

the computer and typically involve a singular piece of
information, like a number or character.

 Variables are declared by first stating the type,

followed by the name.
4.2 Variable Declaration and Initialization

 Variables names must be one word (no spaces) and

must start with a letter (they can include numbers,
and punctuation is underscore “__”)

 A type is the kind of data stored in that variable. This

could be a whole number, a decimal number, or a
character.
 4.2 Variable Declaration and Initialization

 Here are data types you will commonly use:

Whole Decimal
Characters
Numbers Numbers

 Integer (int) float char / Strings

... , -1 , 0 , 1 , 2 , ... A, b, C, ab, ac

... , -1.1 , 0.23 , 1.99 ,

...
4.2 Variable Declaration and Initialization

 Example :
4.2 Variable Declaration and Initialization

 Don’t Forget

 Variables must have a type. Why? This is how

the computer knows exactly how much memory
should be allocated to store that variable’s
data.
 Variables must have a name
4.2 Variable Declaration and Initialization

 All Primitive Types

4.2 Variable Declaration and Initialization

 Once a variable is declared, we can then

assign it a value by setting it equal to
something.
 Example 1: (with two lines code)
4.2 Variable Declaration and Initialization

 We can combine the previous slide statements

into one.
 Example 2: (one lines code)
4.2 Variable Declaration and Initialization

 What’s in a name?

 Tips for choosing good variable names:

1. Avoid using words that appear elsewhere in
the Processing language.
2. Use names that mean something.
3. Start your variable with a lowercase latter
and joind together words with capitals.
4.2 Variable Declaration and Initialization
4.2 Variable Declaration and Initialization

 A variable can also be initialized by another

variable (x equals y) or by evaluating a
mathematical expression (x equals y pluz z, etc).
4.2 Variable Declaration and Initialization

 If, we running this program, the program will not

show us the result.

 Exercise 4 – 2:

 So, how the program will show the result on

Messages?
4.2 Variable Declaration and Initialization

 Result :
4.2 Variable Declaration and Initialization

 The Program :
4.3 Using a Variable

 Though it may initially seem more complicated to

have words standing in for numbers, variables make
our live esier and more interesting.

 Let’s take a simple example of a program that

draws a circle on screen.
4.3 Using a Variable

 Example :
4.3 Using a Variable

 We have learned how to take this simple example

one step further, changing the location of a shape
to mouseX, mouseY in order to assign its location
according to the mouse.
4.3 Using a Variable

 Example 4-2: Using Variables

4.3 Using a Variable

 Result of Example 4-2: Using Variables

4.3 Using a Variable

 Variables introduce assignment operations to the

mix.
 Here is what one looks like (it is the same as how we
initialize a variable, only the variable does not
need to be declared).
4.3 Using a Variable

 Examples of assigning a new value to a variables

4.3 Using a Variable

 In the above code, circleX starts with a value of

100.

 If we want to increment circleX by one, we say

circleX equals itself plus one.

 In code, this ammounts to “circleX = circleX + 1”

4.3 Using a Variable

How would the program

code be ?
4.3 Using a Variable

 Example 4-3: Varying variables

4.3 Using a Variable

 Result of Example 4-3: Varying variables

4.3 Using a Variable

 The principles of programming motion

4.3 Using a Variable

 Exercise 4-3 : Change Example 4-3 so that

instead of the circle moving from left to right, the
circle grows in size.
 What would you change to have the circle the
mouse as it grows?
 How could you vary the speed at which the circle
grows?
4.3 Using a Variable

 Exercise 4-3 : Change Example 4-3 so that

instead of the circle moving from left to right, the
circle grows in size.
 What would you change to have the circle the
mouse as it grows?
 How could you vary the speed at which the circle
grows?
4.3 Using a Variable

 Exercise 4-3:
4.3 Using a Variable

 Answer of Exercise 4-3:

4.3 Using a Variable

 Answer of Exercise 4-3:

4.4 Many Variable

 Let’s take the example one step further and use

variables for every piece of information we can
think of.
 We will also use floating point values to
demonstrate greater precision in adjusting variable
values.
4.4 Many Variable

 Example 4-4: Many variables

4.4 Many Variable

 Example 4-4: Many variables

4.4 Many Variable

 Example 4-4: Many variables

4.4 Many Variable

 Output of Example 4-4: Many variables

4.4 Many Variable

 Exercise 4-4 :

 Step 1 : Write code that draws the following screenshots

with hard-coded values. (Feel free to use colors instead of
grayscale.)
 Step 2 : Replace all of the hard-coded numbers with
variables.
 Step 3 : Write assignment operations in draw() that
change the value of the variables.
 For example, “ variable1 = variable1 + 2; ” . Try
different expressions and see what happens!
4.4 Many Variable

 Exercise 4-4 :
4.5 Many Variable

 As we saw with mouseX and mouseY, Processing has

a set of convenient system freely available.
 Here a list of commonly used system variables
(there are more, which you can find in the
Processing reference).
4.5 Many Variable
4.5 Many Variable

 Output of Example 4-5: Using system variables

4.5 Many Variable

 Example 4-5: Using system variables

4.5 Many Variable

 Exercise 4-5: Using width and height, recreate the

following screenshot. Here’s the ctach: the shapes
must resize themselves relative to the windows
size. (in other words, no matter what you specify
for size(), the result should look identical).
4.5 Many Variable

 Output of Exercise 4-5

4.6 Random: Variety is the spice of life

 Example 4-6: Ellipse with variables

4.6 Random: Variety is the spice of life

 Example 4-6: Ellipse with variables

4.6 Random: Variety is the spice of life

 Output of Example 4-6: Ellipse with variables

4.6 Random: Variety is the spice of life

 There it is, our dreary circle.

 Sure, we can adjust variable values and move the
circle, grow its size, change its color, and so on.
 However, what if everytime through draw(), we
could make a new circle, one with a random size,
color, and position?
 The random() function allows us to do exactly that.
 random() is a special kind of function, it is a
function that returns a value.
4.6 Random: Variety is the spice of life

 Example of Random () function

4.6 Random: Variety is the spice of life

 Example of Random () function

4.6 Random: Variety is the spice of life

 Example 4-7 shows what happens if we take every

variable associated with drawing the ellipse (fill,
location, size) and assign it to a random number
each cycle through draw(). The output is shown in
Figure 4.8
4.6 Random: Variety is the spice of life

 Example 4-7
4.6 Random: Variety is the spice of life

 Example 4-7
4.6 Random: Variety is the spice of life

 Example 4-7
4.7 Variable Zoog

 We are now ready to revisit Zoog, our alien friend.

 Here we will add two pieces of functionality to
Zoog.
 New feature #1 – Zoog will rise from below the
screen and fly off into space (above the screen).
 New feature #2 – Zoog’s eyes will be colored
randomly as Zoog moves.
4.7 Variable Zoog

 Feature #1 is solved by simply taking the previous

program that used mouseX and mouseY and
substituing our own variables in their place.

 Feature #2 is implemented by creating three

additional variables eyeRed, eyeGreen, and
eyeBlue that will be used for the fill() function
before displaying the eye ellipses.
4.7 Variable Zoog

 Output of Example 4-8: Variable Zoog

4.7 Variable Zoog

 Example 4-8: Variable Zoog

4.7 Variable Zoog

 Example 4-8: Variable Zoog

4.7 Variable Zoog

 Example 4-8: Variable Zoog

4.7 Variable Zoog

 Example 4-8: Variable Zoog

The End and Thank You

 Shiffman, Daniel. 2008. Learning Processing : A

Beginners Guide to Programming Images, Animation,
and Interaction. Elsevier : USA.