textbook readings: chapter 4, examples 4-5, 4-6, 4-7, 4-8 ...€¦ · loops cs105 | loops 1...
TRANSCRIPT
![Page 1: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/1.jpg)
Loops
CS105 | Loops 1
Variable Scope
Remapping
Textbook Readings:Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9, 4-10, 4-11, 4-12, 4-13 Chapter 5, Examples 5-22, 5-23
Coding Train Videos:4.1: while and for Loops https://youtu.be/cnRD9o6odjk 4.2: Nested Loops https://youtu.be/1c1_TMdf8b8
![Page 2: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/2.jpg)
What could you see after 2 frames?
CS105 | Loops 2
let i;let a; function draw() { background(200); i = 0; while (i < 1000000) { a = random(0, 100); point(a, a); i++; }}
A B
C DIt never gets to frame 2 because
it’s an infinite loop
![Page 3: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/3.jpg)
From Lecture 10: Assignment Operator “Short Forms”
CS105 | Loops 3
These all add 1 to x (they are all equivalent):x = x + 1;
x += 1;
x++;
These both add 5 to x (they are both equivalent):x = x + 5;
x += 5;
Other examples// same as x = x + 10 * y;
x += 10 * y;
// same as x = x + random(-2, 2);
x += random(-2, 2);
increment operator
![Page 4: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/4.jpg)
From Lecture 10: More Assignment Operator “Short Forms”
CS105 | Loops 4
x--;
x -= 10; // subtract 10 from x
x *= 10; // multiply x by 10
x /= 10; // divide x by 10
decrement operator
coding
![Page 5: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/5.jpg)
What is scope?
CS105 | Loops 5CREDIT: https://upload.wikimedia.org/wikipedia/commons/2/2b/Edit_4x_rifle_scope.jpg
▪ A device used to see something in distance
![Page 6: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/6.jpg)
What is scope?
CS105 | Loops 6CREDIT: https://upload.wikimedia.org/wikipedia/commons/2/2b/Edit_4x_rifle_scope.jpg
▪ A device used to see something in distance
![Page 7: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/7.jpg)
What is scope?
CS105 | Loops 7CREDIT: https://upload.wikimedia.org/wikipedia/commons/2/2b/Edit_4x_rifle_scope.jpg
▪ An area in which something acts or operates
![Page 8: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/8.jpg)
8CS105 | Loops
What is variable scope?
▪ An area in which variable operates
![Page 9: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/9.jpg)
▪ An area in which variable operates
▪ This area can be either global or local
- We say that “variables have global or local scope”
9CS105 | Loops
What is variable scope?
![Page 10: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/10.jpg)
What is global scope?
CS105 | Loops 10
▪ We have been declaring variables “outside” of functions
- These are called global variables
let w = 100; let y = w;
function setup() { let h = w * 3; createCanvas(w, h); }
function draw() { . . .
global variables
![Page 11: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/11.jpg)
What is global scope?
CS105 | Loops 11
▪ We have been declaring variables “outside” of functions
- These are called global variables
▪ Global variables can be used anywhere in your program after
they're declared let w = 100; let y = w;
function setup() { let h = w * 3; createCanvas(w, h); }
function draw() { . . .
global variables w, y can be used anywhere
in the program
variable scope
![Page 12: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/12.jpg)
What is global scope?
CS105 | Loops 12
▪ We have been declaring variables “outside” of functions
- These are called global variables
▪ Global variables can be used anywhere in your program after
they're declared
- Since the area in which they operate
is the entire program, we say that
they have global scope
let w = 100; let y = w;
function setup() { let h = w * 3; createCanvas(w, h); }
function draw() { . . .
variable scope
![Page 13: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/13.jpg)
What is global scope?
CS105 | Loops 13
▪ We have been declaring variables “outside” of functions
- These are called global variables
▪ Global variables can be used anywhere in your program after
they're declared
- Since the area in which they operate
is the entire program, we say that
they have global scope
- Built-in Processing variables are global
e.g. width, frameCount, mouseX,
key, mouseIsPressed
let w = 100; let y = w;
function setup() { let h = w * 3; createCanvas(w, h); }
function draw() { . . .
variable scope
![Page 14: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/14.jpg)
function setup() {let w = 100;let y = w;
let h = w * 3; createCanvas(w, h); }
function draw() { . . .
What is local scope?
CS105 | Loops 14
▪ We can also declare variables “inside” functions
- These are called local variables
local variables
![Page 15: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/15.jpg)
function setup() {let w = 100;let y = w;
let h = w * 3; createCanvas(w, h); }
function draw() { . . .
What is local scope?
CS105 | Loops 15
▪ We can also declare variables “inside” functions
- These are called local variables
▪ Local variables can be used anywhere in that code block after
they're declared
local variables w, ycan be used anywhere
in this code block
variable scope
![Page 16: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/16.jpg)
function setup() {let w = 100;let y = w;
let h = w * 3; createCanvas(w, h); }
function draw() { . . .
What is local scope?
CS105 | Loops 16
▪ We can also declare variables “inside” functions
- These are called local variables
▪ Local variables can be used anywhere in that code block after
they're declared
▪ Recall, a code block is anything
in between { and }
- loops have code blocks
- conditionals have code blocks
- functions have code blocks
variable scope
![Page 17: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/17.jpg)
function setup() {let w = 100;let y = w;
let h = w * 3; createCanvas(w, h); }
function draw() { print(w); print(y);
What is local scope?
CS105 | Loops 17
▪ We can also declare variables “inside” functions
- These are called local variables
▪ Local variables can be used anywhere in that code block after
they're declared
can local variables w, ybe used in the draw()
function?
![Page 18: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/18.jpg)
function setup() {let w = 100;let y = w;
let h = w * 3; createCanvas(w, h); }
function draw() { . . .
What is local scope?
CS105 | Loops 18
▪ We can also declare variables “inside” functions
- These are called local variables
▪ Local variables can be used anywhere in that code block after
they're declared and ONLY in that block
local variables w, ycannot be used in the
draw() function
![Page 19: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/19.jpg)
function setup() {let w = 100;let y = w;
let h = w * 3; createCanvas(w, h); }
function draw() { . . .
What is local scope?
CS105 | Loops 19
▪ We can also declare variables “inside” functions
- These are called local variables
▪ Local variables can be used anywhere in that code block after
they're declared and ONLY in that block
▪ Local variables cease to exist after
the code block is exited
- they have local scope
variable scope
![Page 20: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/20.jpg)
spaced-lines-local
CS105 | Loops 20
function draw() { background(200); // x is a local variable only visible to draw()! let x = 0; while (x < width) { line(x, 10, x, height - 10); x += spacing; }}
https://editor.p5js.org/cs105/sketches/sBVgkmfUT
Starter: https://editor.p5js.org/cs105/sketches/OmmqVprVz
![Page 21: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/21.jpg)
21CS105 | Loops
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
![Page 22: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/22.jpg)
scope of w global scope
22CS105 | Loops
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
![Page 23: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/23.jpg)
23CS105 | Loops
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
scope of y
scope of w global scope
![Page 24: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/24.jpg)
scope of w global scope
scope of y
24CS105 | Loops
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
scope of hlocal scope
![Page 25: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/25.jpg)
scope of w global scope
scope of y
25CS105 | Loops
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
scope of n
scope of hlocal scope
![Page 26: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/26.jpg)
scope of n
scope of w global scope
scope of y
26CS105 | Loops
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
scope of hlocal scope
scope of i
![Page 27: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/27.jpg)
scope of y
scope of w global scope
scope of n
scope of i
27CS105 | Loops
scope of hlocal scope
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
scope of px
![Page 28: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/28.jpg)
scope of n
scope of i
scope of px
scope of y
scope of w global scope
28CS105 | Loops
scope of hlocal scope
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = int(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
scope of py
![Page 29: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/29.jpg)
Memory and Variables
CS105 | Loops 29
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
![Page 30: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/30.jpg)
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
Memory and Variables
CS105 | Loops 30
w
100
![Page 31: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/31.jpg)
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
Memory and Variables
CS105 | Loops 31
y
100
height
100
w
100
![Page 32: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/32.jpg)
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
Memory and Variables
CS105 | Loops 32
y
100
w
100
height
100
setup() variables
![Page 33: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/33.jpg)
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
Memory and Variables
CS105 | Loops 33
y
100
w
100
height
100
setup() variables
![Page 34: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/34.jpg)
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
Memory and Variables
CS105 | Loops 34
setup() variablesy
100
w
100
height
100
h
300
![Page 35: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/35.jpg)
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
Memory and Variables
CS105 | Loops 35
y
100
w
100
height
300
setup() variables
h
300
![Page 36: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/36.jpg)
Memory and Variables
CS105 | Loops 36
draw() variables
let w = 100;let y = w;
function setup() { let h = w * 3; createCanvas(w, h);}
function draw() { background(240); line(0, y, w, y); let n = let(random(0, 500)); for(let i = 0; i < n; i++) { let px = random(0, w); let py = random(0, y); point(px, py); } y--;}
y
100
w
100
height
300
![Page 37: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/37.jpg)
Declare global or local variable?
CS105 | Loops 37
local(use it then throw it out)
global(remember it)
global(remember it and update it)
![Page 38: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/38.jpg)
When to use local variables
CS105 | Loops 38
▪ When you don't need to "remember" the value after the code block completes- a loop variable- an intermediate calculation- to re-use a common value in a function call
![Page 39: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/39.jpg)
(local variable for intermediate calculation)
CS105 | Loops 39
function draw() { …
// calculate start and end angles let start = radians(dir – mouthOpening/2); let end = radians(dir + mouthOpening/2); // use those angles to draw an arc arc(width/2, height/2, mouseX, mouseX, start, end); …
}
local variables
![Page 40: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/40.jpg)
(local variable for re-use)
CS105 | Loops 40
function draw() {
… } else if (shape == 3) { // half size let hs = size / 2; triangle(mouseX - hs, mouseY + hs, mouseX, mouseY – hs, mouseX + hs, mouseY + hs); } …
}
local variable
![Page 41: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/41.jpg)
Potential errors when using local variables
CS105 | Loops 41
▪ “out of scope” syntax error▪ logic error
![Page 42: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/42.jpg)
(“out of scope” errors)
CS105 | Loops 42
function draw() { …
} else if (shape == 3) {
triangle(mouseX - hs, mouseY + hs, mouseX, mouseY – hs, mouseX + hs, mouseY + hs);
// half size let hs = size / 2; } …}
cannot find variable named "hs"
local variable hs is defined after it is used
![Page 43: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/43.jpg)
(“out of scope” errors)
CS105 | Loops 43
let x = 0; function setup() { // local variable // only accessible to setup() let speed = 2;} function draw() { ellipse(x, 50, 20, 20); // this will cause an error: there is no // variable called 'speed' accessible to draw() x += speed;}
"speed“ is not defined
speed is defined as a local variable in setup()
![Page 44: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/44.jpg)
(logic errors with local variables)
CS105 | Loops 44
function draw() {
let x = 0;
ellipse(x, 50, 20, 20);
x += 2;}
x is declared as a local variable, it will have a
value of 0 every frame.
the local variable x will be incremented, but then x will be thrown away as soon as draw finishes
![Page 45: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/45.jpg)
(logic errors with local variables)
CS105 | Loops 45
let x = 0;
function draw() {
let x = 0;
ellipse(x, 50, 20, 20);
x += 2;}
the local x will be incremented, but then x will be thrown away
as soon as draw finishes
x is declared as a local variable and it will "shadow" (hide) the
global variable x.
The local variable x will be assigned a value of 0 each
frame
![Page 46: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/46.jpg)
create a vertical grayscale gradient
example of varying more than one variable
1. What do I want to repeat?
2. What do I want to change each time?
3. Where do they start, how do they change?
4. How long should it repeat?
gradient
CS105 | Loops 46https://editor.p5js.org/cs105/sketches/U_fvzbRqx
![Page 47: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/47.jpg)
Make a rainbow.
1. What do I want to repeat?
2. What do I want to change each time?
3. Where do they start, how do they change?
4. How long should it repeat?
Changing Multiple “Things” in One Loop
CS105 | Loops 47https://editor.p5js.org/sanghosuh/sketches/DvA4ytkk
![Page 48: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/48.jpg)
Recap: p5 Colour Tutorial (from Lecture 04 Attributes)
▪ https://p5js.org/learn/color.html- Note the section on “Custom Color Ranges” and changing
colorModel to HSB
CS105 - Attributes 48
![Page 49: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/49.jpg)
Recap: HSB (Lecture 04 Attributes)
CS105 - Attributes 49
▪ Hue- color type
▪ Saturation- vibrancy of color
▪ Brightness- brightness of color
H S B(Hue, Saturation, Brightness)
![Page 50: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/50.jpg)
Recap: p5 Colour Tutorial (from Lecture 04 Attributes)
// switch color mode to HSB
colorMode(HSB);
colorMode(HSB, 100, 100);
CS105 - Attributes 50
Reference: https://p5js.org/reference/#/p5/colorMode
![Page 51: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/51.jpg)
Changing Multiple “Things” in One Loop
CS105 | Loops 51
Make a rainbow in a 100 by 400 canvas.
HINT: Use colorMode to switch to HSB colour model.
1. What do I want to repeat? - a line
2. What do I want to change each time? - the y position and the stroke hue
3. Where do they start, how do they change?- start y at 0, increment by 1- start hue at 0, increment by ???
4. How long should it repeat?- as long as y is less than the canvas height
![Page 52: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/52.jpg)
rainbow
CS105 | Loops 52
Make a rainbow in a 100 by 400 canvas.
HINT: Use colorMode to switch to HSB colour model.
ideas:1. [HACK] createCanvas(360, 100);
2. [GOOD] start hue at 0, increment so hue = 360 when y = height
3. [BEST] express hue as a “function of y”
https://editor.p5js.org/cs105/sketches/xgRuIsdFP
Starter: https://editor.p5js.org/cs105/sketches/DB5GxfifW
![Page 53: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/53.jpg)
Remapping Height to Hue
CS105 | Loops 53
![Page 54: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/54.jpg)
rainbow-margin
CS105 | Loops 54
draw rainbow with top and bottom margin
https://editor.p5js.org/cs105/sketches/6JBffsBzM
![Page 55: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/55.jpg)
Remapping with Height to Hue with Margin
CS105 | Loops 55
![Page 56: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/56.jpg)
Remapping Different Scales
CS105 | Loops 56
▪ draw a gradient from hue 100° to 200°
![Page 57: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/57.jpg)
value2 = map(value1, start1, stop1, start2, stop2)
CS105 | Loops 57
value1 the incoming value to be converted
start1 lower bound of the value's current range
stop1 upper bound of the value's current range
start2 lower bound of the value's target range
stop2 upper bound of the value's target range
![Page 58: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/58.jpg)
rainbow-map
CS105 | Loops 58
remap variable using map()
let hue = map(y, yStart, yStop, hueStart, hueStop);
https://editor.p5js.org/cs105/sketches/kWxRVPKz9
![Page 59: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/59.jpg)
What does this loop output?
CS105 | Loops 59
let a = 2; function setup() { for (let i = 0; i < a; i++) { print("duck"); } print("goose");}
A B Cduckduckduckgoose
duckgooseduckgoose
duckduckgoose
Dduckgooseduckgooseduckgoose
![Page 60: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/60.jpg)
What does this loop output?
CS105 | Loops 60
let a = 2; function setup() { let a = 3; for (let i = 0; i < a; i++) { print("duck"); } print("goose");}
A B Cduckduckduckgoose
duckgooseduckgooseduckgoose
duckduckgoose
Derror: can't redefine variable "a"
![Page 61: Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8 ...€¦ · Loops CS105 | Loops 1 Variable Scope Remapping Textbook Readings: Chapter 4, Examples 4-5, 4-6, 4-7, 4-8, 4-9,](https://reader033.vdocument.in/reader033/viewer/2022053015/5f168c8936c94c40cb5de5f9/html5/thumbnails/61.jpg)
▪ Survey FAQhttps://docs.google.com/document/d/1nWs0RuQ2hZblR5mhVja35TaqETQo_B9uhNAW53n1wcg/edit?usp=sharing
▪ I will hold office hours on Wednesdays after the class as well, but you must sign up
Announcement
61