Lesson 2 – Everything You Need to Know

(1)

ALGORITMA PEMROGRAMAN 2

PROCESSING

(2)

Chapters of This Lesson

Chapter 4 :

Variables

Chapter 4 :

Variables

Chapter 5 :

Conditionals

Chapter 5 :

Conditionals

Chapter 6 :

Loops

(3)

Chapter 4 :

Variables

Chapter 4 :

(4)

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)

(5)

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”.

(6)

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 stuf it needs.

 Technically, a Variable is a named

pointer to a location in the

computer’s memory (“memory

(7)

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.

(8)

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.

(9)

(10)

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.

(11)

 Variables names must be one word (no spaces) and must start with a letter (they can include numbers, and punctuation is underscore “__”)

(12)

 Here are data types you will

commonly use:

 Inteser (int) foat char /

Strinss

Whole

Numbers _NumbersDecimal Decimal

Numbers Characte_rs Characte

rs

... , -1 , 0 , 1 , 2 , ...

... , -1.1 , 0.23 , 1.99 , ...

(13)

(14)



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.

(15)

(16)



Once a variable is declared, we can

then assign it a value by setting it

equal to something.

(17)



We can combine the previous slide

statements into one.

(18)



What’s in a name?



Tips for choosins sood 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

(19)

mouseX

score

(20)

 A variable can also be initialized by

(21)

 If, we running this program, the program

will not show us the result.

 Exercise 4 – 2:

 So, how the prosram will show the

(22)

(23)

(24)

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

(25)

4.3 Using a Variable

(26)

 We have learned how to take this

simple example one step further, changing the location of a shape to

(27)

4.3 Using a Variable

(28)

 Result of Example 4-2: Usins

(29)

 Variables introduce assignment

operations to the mix.

 Here is what one looks like (it is the

(30)

 Examples of assigning a new value to a

(31)

 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 =

(32)

4.3 Using a Variable

How would the

program code be ?

How would the

(33)

(34)

 Result of Example 4-3: Varyins

(35)

 The principles of prosrammins

(36)

 Exercise 4-3 : Chanse Example 4-3

so that instead of the circle movins from left to risht, the circle srows in size.

 What would you chanse to have the

circle the mouse as it srows?

 How could you vary the speed at

(37)

4.3 Using a Variable

 Exercise 4-3 : Chanse Example 4-3

so that instead of the circle movins from left to risht, the circle srows in size.

 What would you chanse to have the

circle the mouse as it srows?

 How could you vary the speed at

(38)

4.3 Using a Variable

(39)

(40)

(41)

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 foating point values to

(42)

4.4 Many Variable

(43)

4.4 Many Variable

(44)

4.4 Many Variable

(45)

4.4 Many Variable

 Output of Example 4-4: Many

(46)

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

(47)

4.4 Many Variable

(48)

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

(49)

(50)

4.5 Many Variable

 Output of Example 4-5: Usins

(51)

4.5 Many Variable

 Example 4-5: Usins system

(52)

4.5 Many Variable

 Exercise 4-5: Usins width and

(53)

4.5 Many Variable

(54)

4.6 Random: Variety is the spice of life

(55)

(56)

 Output of Example 4-6: Ellipse with

(57)

 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

(58)

4.6 Random: Variety is the spice of life

(59)

(60)

 Example 4-7 shows what happens if we

(61)

(62)

(63)

(64)

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 fy of into space (above the screen).

 New feature #2 – Zoog’s eyes will be

(65)

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

(66)

4.7 Variable Zoog

 Output of Example 4-8: Variable

(67)

4.7 Variable Zoog

(68)

4.7 Variable Zoog

(69)

4.7 Variable Zoog

(70)

4.7 Variable Zoog

(71)

Chapter 2 :

Conditionals

(72)

Conditionals

1. In this Chapter

 Boolean expressions

 Conditionals statements : How to a

program produces diferent results based on varying circumtances.

(73)

5.1 Boolean Expressions

 In the world of computer programming, we only take one kind of test: a boolean test true- or false.

 A boolean expression (named for mathematican Georse Boole) is an expression that evaluate to either true or false.

(74)

5.1 Boolean Expressions

(75)

(76)

 The following operators can be used in a boolean expression.

(77)

5.2 Conditionals: If, Else,

Else If

 In Processing, we might have something more like:

If the mouse is on the left side of the screen, draw a rectangle on the left

(78)

5.2 Conditionals: If, Else,

Else If

(79)

Else If

(80)

Else If

(81)

Else If

(82)

Else If

(83)

Else If

5.2 Conditionals: If, Else,

Else If

 For Example, we could say the following, with the output shown in Figure 5.2 below.

 If the mouse is on the left side of the

(84)

Else If

(85)

Else If

(86)

Else If

5.2 Conditionals: If, Else,

Else If

(87)

Else If

 Finally, for testing multiple conditions, we can

employ an “else if”.

 When and else if is used, the conditional

statements are evaluated in the order presented.

 As soon as one boolean expression is found to

(88)

5.2 Conditionals: If, Else,

Else If

 Finally, for testing multiple conditions, we can

employ an “else if”.

 When and else if is used, the conditional

statements are evaluated in the order presented.

 As soon as one boolean expression is found to

(89)

Else If

(90)

Else If

(91)

Else If

 Taking our simple mouse example a step further, we could say the following, with results shown in Figure 5.4. (next slide)

 Case :

If the mouse is on the left

third of the window, draw a

white background, if it is in

the middle third, draw a gray

background, otherwise, draw

(92)

Else If

(93)

Else If

(94)

Else If

 Exercise 5-1: Consider a grading system where number are turned into letters. Fill in the blanks in the following code to complete the boolean expression.

(95)

Else If

(96)

Else If

(97)

Else If

(98)

Else If

(99)

Else If

 _{Exercise 5-2:}

Examine the following

(100)

Else If

 Problem #1 : Determine if a number

(101)

Else If

5.2 Conditionals: If, Else,

Else If

 Problem #2 : if a number is 5, chanse

(102)

Else If

 What is the diferences between two

thinss in below

1

(103)

5.3 Conditionals in a Sketch

 This is a very example of a program that performs diferent

tasks based on the result of certain conditions.

 Our pseudocode is below

 Step 1. Create variables to hold on to red, green,

and blue color components. Call them r , g , and b .

 Step 2. Continuously draw the background based on

those colors.

 Step 3. If the mouse is on the right-hand side of the

screen, increment the value of r , if it is on the left-hand side decrement the value of r .

(104)

5.3 Conditionals in a Sketch

(105)

 Example 5-1 : Conditionals

Variables

(106)

 Example 5-1 : Conditionals

Condition

(107)

 While using if statements is a perfectly valid solution to the constrain problem, Processing

does ofer a function entitled constrain() that will get us the same result in one line of code.

(108)

5.3 Conditionals in a Sketch

 Constrain() takes three arguments: the value

we intend to constrain, the minimum limit, and the maimum limit.

 The function returns the contrained value

and is assigned back to the variable r.

 Lets make our frst example a bit more

(109)

5.3 Conditionals in a Sketch

 Note the use of constrain() for all three variable.

(110)

(111)

(112)

(113)

(114)

(115)

5.3 Conditionals in a Sketch

(116)



Exercise 5-3:

Move a rectangle

across a window by incrementing a

variable. Start the shape at x

coordinate 0 and use an if statement

to have it stop at coordinate 100.

Rewrite

the

sketch

to

use

(117)

(118)

5.3 Conditionals in a Sketch

(119)

(120)



Exercise

5-3:

(constraint

(121)

5.4 Logical Operators



We will commonly want to do the

same thing in programming from time

to time.

(122)

(123)

(124)

5.4 Logical Operators

(125)

 In other words, we would have to bypass

two if statements before we can reach the code we want to execute.

 This works, yes, but can be accomplished

in a simpler way using what will call a “logical and,” written as two apersands (“&&”)

 A single ampersand(“&”) means

(126)

5.4 Logical Operators

(127)

(128)

 The logical operator “not” (exclamation

point)

 A Processing example is:

 If the mouse is NOT pressed, draw a

(129)

point)

(130)

5.4 Logical Operators

point)

(131)

 Exercise 5-4: Are the following boolean

(132)

 Exercise 5-5: Write a program that

(133)

(134)

5.5 Multiple Rollovers

 Let’s solve a simple problem together, a

(135)

 Let’s frst write the logic of our program

in pseudocode (i.e., English).

 Setup:

 1. Set up a window of 200 200

(136)

 Draw:

1. Draw a white backsround.

2. Draw horizontal and vertical lines to divide the window in four quadrants .

3. If the mouse is in the top left corner, draw a black rectansle in the top left corner.

4. If the mouse is in the top risht corner, draw a black rectansle in the top risht corner.

5. If the mouse is in the bottom left corner, draw a black rectansle in the bottom left corner.

(137)

5.5 Multiple Rollovers

(138)

(139)

5.6 Boolean Variables

 The natural next step up from programming

a rollover is a button.

 Button is just a rollover that responds when

clicked.

 For one, practicing programming buttons,

rollovers, and sliders is an excellent way to

learn the basics of variables and

(140)

5.6 Boolean Variables

 Button example will include one boolean

(141)

 In the case of a rollover, any time the

mouse hovered the rectangle, it turned white.

 Our sketch will turn the background

(142)

5.6 Boolean Variables

 We can check to see if the mouse

location is inside the rectangle and if the mouse is pressed, setting the value of button to true or false accordingly.

 Here is the example code. (Example

(143)

 Output Example 5-4: Hold down the button

(144)

5.6 Boolean Variables

(145)

(146)

(147)

 We now need to write some code that

“tossles” the switch, chanses its state from on to of, or of to on.

 This code will go inside mousePressed().

 If the variable “button” equals true, we

(148)

5.6 Boolean Variables

 See this code:

 There is a simpler way to go which is the

(149)

 Output Example 5-5: Button as

(150)

 Script Example 5-5: Button as

(151)

(152)

5.6 Boolean Variables

(153)

 Exercise 5-7: Why doesn’t the

(154)

 Exercise 5-8: Example 4-3 in the

previous chapter moved a circle across the window. Chanse the sketch so that the circle only starts movins once the mouse has been pressed.

(155)

5.6 Boolean Variables

(156)

5.7 Bouncing Ball

 Reversins the Polarity of a Number

 When we want to reverse the polarity of

a number, we mean that we want a positive number to become negative and a negative number to become positive.

(157)

5.7 Bouncing Ball

 Reversins the Polarity of a Number

(158)

5.7 Bouncing Ball

 Running the sketch, we now have a circle

turns around when it reaches the right-most edge, but runs of the left-right-most edge of the screen.

 We’ll need to revise the conditional

(159)

5.7 Bouncing Ball

 If the ball goes of their the right or left

edge, turn the ball around.

 Or more formally :

(160)

5.7 Bouncing Ball

(161)

5.7 Bouncing Ball

(162)

5.7 Bouncing Ball

(163)

5.7 Bouncing Ball

 Furtheremore, consider a rectangle

that follows the edges of a window.

 One way to solve this problem is to

think of the rectansle’s motion as havins four possible states, numbered 0 throush 3.

(164)

5.7 Bouncing Ball

 State #0: left to right.

 State #1: top to bottom.

 State #2: right to left.

(165)

5.7 Bouncing Ball

 Example 5-8: Square followins edse,

(166)

5.7 Bouncing Ball

(167)

5.7 Bouncing Ball

(168)

5.7 Bouncing Ball

(169)

5.7 Bouncing Ball

(170)

5.8 Physics 101

 Gravity is a force of attraction between all

masses.

 When you drop a pen, the force of gravity from

the earth (which is overwhelmingly larger than the pen) causes the pen to accelerate toward the ground.

 Acceleration increases (or decreases) speed.  In other words, acceleration is the rate of

(171)

5.8 Physics 101

 Acceleration increases (or decreases) speed.

 In other words, acceleration is the rate of charge of speed. And speed isthe rate of change of location. So we just need another line of code.

(172)

5.8 Physics 101

(173)

5.8 Physics 101

(174)

5.8 Physics 101

(175)

5.8 Physics 101

(176)

5.8 Physics 101

 How a simple version with Zoos in

(177)

5.8 Physics 101

 Example 5-10: Zoos and

(178)

5.8 Physics 101

 Example 5-10: Zoos and

(179)

5.8 Physics 101

 Example 5-10: Zoos and

(180)

5.8 Physics 101

 Example 5-10: Zoos and

(181)

Chapter 6 :

Loops

(182)

Subjects

 In this chapter:

 The concept of iteration

 Two types of loops: “while”, and “for”. When do we use them?

(183)

6.1 What is iteration?

 Iteration is the generative process of

repeating a set of rules or steps over and over again.

 It is a fundamental concept in computer

(184)

6.1 What is iteration?

 Example 6-1: If we want to many line in

(185)

(186)

(187)

 In the example 6-1, line are drawn from

x = 50 pixels all the way to x 150 pixels, with one line every10 pixels.

 Sure, the code accomplishes this,

(188)

6.1 What is iteration?

 First, we set up variables for each

parameter of our system: the line ’ x , y locations, length, and the spacing between the line.

 Note that for each line drawn, only the x

(189)

(190)

(191)

 Example 6-2: Many Lines with variables

(192)

6.2 WHILE Loop

 There are three types of loops, the while

loop, the do-while loop, and the for loop.

 For one thing, the only loop you really need is

while.

 The for loop, as we will see, is simply a

convenient alternative, a great shorthand for simple counting operations.

(193)

6.2 WHILE Loop

 A while loop employs a boolean test

condition.

 If the test evaluates to true, the instructions

enclosed in curly brackets are executed; if it is false, we continue on to the next line of code.

 The diference here is that the instructions

inside the while block continue to be

(194)

6.2 WHILE Loop

(195)

6.2 WHILE Loop

 Let’s take the code from lines problem.

(196)

6.2 WHILE Loop

(197)

6.2 WHILE Loop

(198)

6.2 WHILE Loop

 Instead of writing “ line(x,y,x,y+ len); ”

many times as we did at frst, we now write it only once inside of the while loop , saying “ as long as x is less than 150, draw a line at x , all the while incrementing x .

 In addition, we can change the spacing

(199)

6.2 WHILE Loop

 Figure 6.4 :

(200)

6.2 WHILE Loop

 Let’s look at one more example, this