Lesson 2 – Everything You Need to Know
Chapters of This Lesson
Chapter 4 : Chapter 4 : Chapters of This Lesson
Chapters of Variables 1.
In this chapter : Variables: What are they?
4.1 What is a Variable?
manner. On any given day, Might say “A The concept of a variable in an intuitive
4.1 What is a Variable?
call it memory? The computer has memory. Why do we
4.1 What is a Variable?
one instruction at time, a variable allows a Since computers only process information
4.1 What is a Variable?
sheet of graph paper and each cell on the Imagine that the computer’s memory is a
4.1 What is a Variable?
4.2 Variable Declaration and Initialization
references to object and array. Variables can hold primitive values or
4.2 Variable Declaration and Initialization
spaces) and must start with a letter Variables names must be one word (no
4.2 Variable Declaration and Initialization
commonly use: Here are data types you will
4.2 Variable Declaration and Initialization
Example :
4.2 Variable Declaration and Initialization
Don’t Forget
4.2 Variable Declaration and Initialization
All Primitive Types
4.2 Variable Declaration and Initialization
Once a variable is declared, we can
4.2 Variable Declaration and Initialization
We can combine the previous slide
4.2 Variable Declaration and Initialization
What’s in a name?
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
4.2 Variable Declaration and Initialization
If, we running this program, the program will not show us the result.
4.2 Variable Declaration and Initialization
Result :
4.2 Variable Declaration and Initialization
The Prosram :
Though it may initially seem more complicated to have words standing in
Example :
We have learned how to take this
simple example one step further,
Example 4-2: Usins Variables
Result of Example 4-2: Usins Variables
Variables introduce assignment operations to the mix.
Examples of assigning a new value to a variables
In the above code, circleX starts with a value of 100.
Example 4-3: Varyins variables
Result of Example 4-3: Varyins variables
The principles of prosrammins motion
Exercise 4-3 : Chanse Example 4-3 so that instead of the circle movins
Exercise 4-3 : Chanse Example 4-3 so that instead of the circle movins
Exercise 4-3:
Answer of Exercise 4-3:
Answer of Exercise 4-3:
Let’s take the example one step further and use variables for every piece of
Example 4-4: Many variables
Example 4-4: Many variables
Example 4-4: Many variables
Output of Example 4-4: Many variables
Exercise 4-4 :
Exercise 4-4 :
As we saw with mouseX and mouseY, Processing has a set of convenient
Output of Example 4-5: Usins system variables
Example 4-5: Usins system variables
Exercise 4-5: Usins width and heisht, recreate the followins
Output of Exercise 4-5
Example 4-6: Ellipse with variables
Example 4-6: Ellipse with variables
Output of Example 4-6: Ellipse with variables
Example of Random () function
Example of Random () function
Example 4-7 shows what happens if we
take every variable associated with
Example 4-7
Example 4-7
Example 4-7
We are now ready to revisit Zoog, our alien friend.
Feature #1 is solved by simply taking the previous program that used mouseX and
Output of Example 4-8: Variable Zoos
Example 4-8: Variable Zoos
Example 4-8: Variable Zoos
Example 4-8: Variable Zoos
Example 4-8: Variable Zoos Chapters of This Lesson
Conditionals Conditionals 1. In this Chapter Boolean expressions
5.1 Boolean Expressions
5.1 Boolean Expressions
only take one kind of test: a boolean test true- In the world of computer programming, we
5.1 Boolean Expressions
5.1 Boolean Expressions
5.1 Boolean Expressions
5.1 Boolean Expressions
variable in a boolean expression, allowing In this chapter, we will learn how to use a
5.1 Boolean Expressions
5.1 Boolean Expressions
boolean expression. The following operators can be used in a
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If In Processing, we might have something
more like:
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Or, more formally, with the output shown in Below.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Or, more formally, with the script shown in Below.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Or, more formally, with the script shown in Below.
5.2 Conditionals: If, Else, Else If
5.2 Conditionals: If, Else, Else If
The boolean expression and resulting instruction in the previous slide sour code
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If The structure can be expanded with keyword else.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If For Example, we could say the following, with the output shown in Figure 5.2 below.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If For Example, we could say the following, with the output shown in Figure 5.2 below.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Script in Figure 5.2 below.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Script in Figure 5.2 below.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Finally, for testing multiple conditions, we can employ an “else if”.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Finally, for testing multiple conditions, we can employ an “else if”.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Figure 5.3
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Explanation of Figure 5.3
5.2 Conditionals: If, Else, Else If
5.2 Conditionals: If, Else, Else If Taking our simple mouse example a step
further, we could say the following, with
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If The results shown in Figure 5.4.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Script in Figure 5.4.
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Exercise 5-1: Consider a grading system
where number are turned into letters. Fill
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Exercise 5-1:
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Exercise 5-1:
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Exercise 5-1:
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Exercise 5-1:
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If
Exercise 5-2: Examine the following
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Problem #1 : Determine if a number
is between 0 and 25, 26 and 50, or
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If Problem #2 : if a number is 5, chanse
it to 6. If a number is 6, chanse it to
5.2 Conditionals: If, Else,
5.2 Conditionals: If, Else, Else If Else If What is the diferences between two
thinss in below
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch tasks based on the result of certain conditions. This is a very example of a program that performs diferent
Our pseudocode is below
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-1 : Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-1 : Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-1 : Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
solution to the constrain problem, Processing While using if statements is a perfectly valid
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
we intend to constrain, the minimum limit, and Constrain() takes three arguments: the value
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
variable. Note the use of constrain() for all three
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-2: More Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-2: More Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-2: More Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-2: More Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-2: More Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Example 5-2: More Conditionals
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Exercise 5-3: Move a rectangle
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Exercise 5-3:
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Exercise 5-3:
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Exercise 5-3: (if statement)
5.3 Conditionals in a Sketch
5.3 Conditionals in a Sketch
Exercise 5-3: (constraint
5.4 Logical Operators
5.4 Logical Operators
We will commonly want to do the same thing in programming from time
5.4 Logical Operators
5.4 Logical Operators
Our frst instinc mught be to write
5.4 Logical Operators
5.4 Logical Operators
Code using a nested if statement,
5.4 Logical Operators
5.4 Logical Operators
Code using a nested if statement,
5.4 Logical Operators
5.4 Logical Operators
In other words, we would have to bypass two if statements before we can reach the
5.4 Logical Operators
5.4 Logical Operators
5.4 Logical Operators
5.4 Logical Operators
5.4 Logical Operators
5.4 Logical Operators
The logical operator “not” (exclamation point)
5.4 Logical Operators
5.4 Logical Operators
The logical operator “not” (exclamation point)
5.4 Logical Operators
5.4 Logical Operators
The logical operator “not” (exclamation point)
5.4 Logical Operators
5.4 Logical Operators
Exercise 5-4: Are the following boolean expression true or false ?
5.4 Logical Operators
5.4 Logical Operators
Exercise 5-5: Write a program that
implements a simple rollover. In other
5.4 Logical Operators
5.4 Logical Operators
Code
5.5 Multiple Rollovers
5.5 Multiple Rollovers
Let’s solve a simple problem together, a slightly more advanced version of
5.5 Multiple Rollovers
5.5 Multiple Rollovers
Let’s frst write the logic of our program in pseudocode (i.e., English).
5.5 Multiple Rollovers
5.5 Multiple Rollovers
Draw: 1. Draw a white backsround.
5.5 Multiple Rollovers
5.5 Multiple Rollovers
Script Example 5-3:
5.5 Multiple Rollovers
5.5 Multiple Rollovers
Script Example 5-3:
5.6 Boolean Variables
5.6 Boolean Variables
The natural next step up from programming a rollover is a button.
5.6 Boolean Variables
5.6 Boolean Variables
Button example will include one boolean variable with a starting value of false
5.6 Boolean Variables
5.6 Boolean Variables
In the case of a rollover, any time the mouse hovered the rectangle, it turned
5.6 Boolean Variables
5.6 Boolean Variables
We can check to see if the mouse location is inside the rectangle and if the
5.6 Boolean Variables
5.6 Boolean Variables
Output Example 5-4: Hold down the button
5.6 Boolean Variables
5.6 Boolean Variables
Example 5-4: Hold down the button
5.6 Boolean Variables
5.6 Boolean Variables
Example 5-4: Hold down the button
5.6 Boolean Variables
5.6 Boolean Variables
Example 5-4: Hold down the button
5.6 Boolean Variables
5.6 Boolean Variables
We now need to write some code that “tossles” the switch, chanses its state
5.6 Boolean Variables
5.6 Boolean Variables
See this code:
5.6 Boolean Variables
5.6 Boolean Variables
Output Example 5-5: Button as switch
5.6 Boolean Variables
5.6 Boolean Variables
Script Example 5-5: Button as switch
5.6 Boolean Variables
5.6 Boolean Variables
Script Example 5-5: Button as switch
5.6 Boolean Variables
5.6 Boolean Variables
Script Example 5-5: Button as switch
5.6 Boolean Variables
5.6 Boolean Variables
Exercise 5-7: Why doesn’t the followins code work properly when
5.6 Boolean Variables
5.6 Boolean Variables
Exercise 5-8: Example 4-3 in the previous chapter moved a circle
5.6 Boolean Variables
5.6 Boolean Variables
Exercise 5-8:
5.7 Bouncing Ball
5.7 Bouncing Ball
Reversins the Polarity of a Number
5.7 Bouncing Ball
5.7 Bouncing Ball
Reversins the Polarity of a Number
5.7 Bouncing Ball
5.7 Bouncing Ball
Running the sketch, we now have a circle turns around when it reaches the right-
5.7 Bouncing Ball
5.7 Bouncing Ball
If the ball goes of their the right or left edge, turn the ball around.
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-6 : Bouncins ball
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-6 : Bouncins ball
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-6 : Bouncins ball
5.7 Bouncing Ball
5.7 Bouncing Ball
Furtheremore, consider a rectangle that follows the edges of a window.
5.7 Bouncing Ball
5.7 Bouncing Ball State #0: left to right.
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-8: Square followins edse, uses a “state” variable
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-8: Square followins edse, uses a “state” variable
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-8: Square followins edse, uses a “state” variable
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-8: Square followins edse, uses a “state” variable
5.7 Bouncing Ball
5.7 Bouncing Ball
Example 5-8: Square followins edse, uses a “state” variable
5.8 Physics 101
5.8 Physics 101
masses. Gravity is a force of attraction between all
5.8 Physics 101
5.8 Physics 101
Acceleration increases (or decreases) speed.
5.8 Physics 101
5.8 Physics 101
Example 5-9: Simple Gravity
5.8 Physics 101
5.8 Physics 101
Example 5-9: Simple Gravity
5.8 Physics 101
5.8 Physics 101
Example 5-9: Simple Gravity
5.8 Physics 101
5.8 Physics 101
Example 5-9: Simple Gravity
5.8 Physics 101
5.8 Physics 101
How a simple version with Zoos in Physics?
5.8 Physics 101
5.8 Physics 101
Example 5-10: Zoos and conditionals
5.8 Physics 101
5.8 Physics 101
Example 5-10: Zoos and conditionals
5.8 Physics 101
5.8 Physics 101
Example 5-10: Zoos and conditionals
5.8 Physics 101
5.8 Physics 101
Example 5-10: Zoos and conditionals
Subjects
In this chapter: The concept of iteration
6.1 What is iteration?
Iteration is the generative process of
repeating a set of rules or steps over and
6.1 What is iteration?
Example 6-1: If we want to many line in Processing.
6.1 What is iteration?
Example 6-1: Many Lines
6.1 What is iteration?
Example 6-1: Many Lines
6.1 What is iteration?
In the example 6-1, line are drawn from
x = 50 pixels all the way to x 150 pixels,
6.1 What is iteration?
First, we set up variables for each parameter of our system: the line ’ x , y
6.1 What is iteration?
Example 6-2: Many Lines with variables
6.1 What is iteration?
Example 6-2: Many Lines with variables
6.1 What is iteration?
Example 6-2: Many Lines with variables
6.2 WHILE Loop
6.2 WHILE Loop
loop, the do-while loop, and the for loop. There are three types of loops, the while
6.2 WHILE Loop
6.2 WHILE Loop
condition. A while loop employs a boolean test
6.2 WHILE Loop
6.2 WHILE Loop
A while loop structure
6.2 WHILE Loop
6.2 WHILE Loop Let’s take the code from lines problem.
6.2 WHILE Loop
6.2 WHILE Loop
Example 6-3: While Loop
6.2 WHILE Loop
6.2 WHILE Loop
Output of Example 6-3: While Loop
6.2 WHILE Loop
6.2 WHILE Loop
Instead of writing “ line(x,y,x,y+ len); ” many times as we did at frst, we now
6.2 WHILE Loop
6.2 WHILE Loop
Figure 6.4 : 6.2 WHILE Loop
6.2 WHILE Loop
Let’s look at one more example, this time using rectangles instead of lines, as
6.2 WHILE Loop
6.2 WHILE Loop 1.
What is the initial condition for your loop? Here, since the frst rectangle is
6.2 WHILE Loop
6.2 WHILE Loop
2. When should your loop stop? Since we want
to display rectangles all the way to the6.2 WHILE Loop
6.2 WHILE Loop
case, each time through the loop, we
6.2 WHILE Loop
6.2 WHILE Loop
The code will be
6.2 WHILE Loop
6.2 WHILE Loop
Exercise 6-1 : Fill in the blanks in the code to recreate the followins
6.2 WHILE Loop
6.2 WHILE Loop
Exercise 6-1 : Fill in the blanks in the code to recreate the followins
6.3 EXIT Conditions
6.3 EXIT Conditions
Loops, as you are probably starting to realize, are quite handy.
6.3 EXIT Conditions
6.3 EXIT Conditions Figure 6.6 .
6.3 EXIT Conditions
6.3 EXIT Conditions Figure 6.6 .
6.3 EXIT Conditions
6.3 EXIT Conditions
Examining the “lines” in Example 6-3, we can see that as soon as x is greater than
6.3 EXIT Conditions
6.3 EXIT Conditions
Processing will not give you an error should your exit condition never occur.
6.3 EXIT Conditions
6.3 EXIT Conditions Output : .
6.3 EXIT Conditions
6.3 EXIT Conditions
Recalling the constrain() function
described in Chapter 4, we can
6.3 EXIT Conditions
6.3 EXIT Conditions
Example 6-5:
6.3 EXIT Conditions
6.3 EXIT Conditions
Example 6-5:
6.3 EXIT Conditions
6.3 EXIT Conditions
Output : Example 6-5: (with the mouse)
6.4 FOR Loop
6.4 FOR Loop
A certain style of while loop where one
value is incremented repeatedly
6.4 FOR Loop
6.4 FOR Loop
Write in For :
6.4 FOR Loop
6.4 FOR Loop
Initialization —Here, a variable is declared and initialized for use within the
6.4 FOR Loop
6.4 FOR Loop
Iteration Expression —The last
element is an instruction that you want
6.4 FOR Loop
6.4 FOR Loop
Figure 6.7
6.4 FOR Loop
6.4 FOR Loop
Note :
6.4 FOR Loop
6.4 FOR Loop
The same exact loop can be programmed with the while format.
6.4 FOR Loop
6.4 FOR Loop
Rewriting the lines drawing code to use a
for statement looks like this:
6.4 FOR Loop
6.4 FOR Loop
Examples 6-6: Lines with a for loop
6.4 FOR Loop
6.4 FOR Loop
Examples 6-6: Lines with a for loop
6.4 FOR Loop
6.4 FOR Loop
Exercise 6-2: Rewrite Exercise 6-1 using for a loop.
6.4 FOR Loop
6.4 FOR Loop
Exercise 6-2: Rewrite Exercise 6-1 using for a loop.
6.4 FOR Loop
6.4 FOR Loop
Exercise 6-3: Following are some
additional examples of loops. Match the
6.4 FOR Loop
6.4 FOR Loop
Exercise 6-3:
6.4 FOR Loop
6.4 FOR Loop
Exercise 6-3:
6.4 FOR Loop
6.4 FOR Loop
Exercise 6-3:
6.4 FOR Loop
6.4 FOR Loop
Exercise 6-3:
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Consider the following loop (which happens to be the answer to Exercise 6-
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Let’s say we want to take the above loop and display each line one at a time so
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example :
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example :
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Displaying the lines one at a time is something we can do with a global
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example 6-8: Lines one at a time
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example 6-8: Lines one at a time
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example 6-9: Simple while loop with interactivity
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example 6-9: Simple while loop with interactivity
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example 6-9: Simple while loop with interactivity
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Example 6-9: Simple while loop with interactivity
6.5 Loop Inside the Main
6.5 Loop Inside the Main Loop Loop
Exercise 6-8: Create a grid of squares (each colored randomly) using a for The End and Thank You
Shifman, Daniel. 2008. Learning Processing : A Beginners Guide to