Loops. Variable Scope Remapping Nested Loops. Donald Judd. CS Loops 1. CS Loops 2

Transcription

1 Loops Variable Scope Remapping Nested Loops CS Loops 1 Donald Judd CS Loops 2

2 judd while (expression) { statements CS Loops 3 Four Loop Questions 1. What do I want to repeat? - a rect 2. What do I want to change each time? - the y position of the rect 3. Where does it start, how does it change? - start at y = 10, draw a rect every 20 pixels 4. How long should it repeat? - until it reaches the bottom of the canvas CS Loops 4

3 Anatomy of a While Loop initialisation test expression update code block CS Loops 5 See 05 Loops (trace) CS Loops 6

4 Debugging Tracethrough CS Loops 7 draw() frames vs. while loop iterations the code block in draw is repeated every frame the code block in while is repeated every loop iteration frames loop iterations while (x < width) { CS Loops 8

5 What do you see after 5 frames? int a; background(200); a = 20; while (a < width) { ellipse(a, 50, 20, 20); a = a + 20; CS Loops 9 lines_rs draws lines randomly spaced across canvas width CS Loops 10

6 lines_es draws an exact number of lines spaced equally across canvas width notes: using width/height in variable assignment float vs. int margins CS Loops 11 lines_fs draws an exact number of lines with fixed spacing variations and notes: counter variable position variable (line location a function of counter) right to left variation CS Loops 12

7 Common Logic Errors Leading to Infinite Loops Adding a semicolon after the boolean expression means no code block. Without a code block, the loop variable won't update. x = 0; while (x < width); { line(x, 10, x, height - 10); x = x + 10; The loop variable is updated such that the loop condition will always be true. x = 0; while (x < width) { line(x, 10, x, height - 10); x = x - 10; The while statement will never end, and the program will freeze (infinite loop). Fix this by removing the semicolon after the boolean expression. The while statement will never end, and the program will freeze (infinite loop). Fix this by ensuring that your code eventually makes the loop repetition expression false. CS Loops 13 Debugging Loops Test a single loop operation first (without a loop) Simplify the loop operation Slow down draw frames with framerate(1) Use println x = 0; println("start loop"); // debug while (x < width) { println("loop", x); // debug line(x, 10, x, height - 10); x = x + 10; println("done loop"); // debug CS Loops 14

8 What do you see after 5 frames? int i; int x; background(200); i = 0; x = 20; while (i < 5) { ellipse(x, 50, 20, 20); i = i + 1; x = x + 20; CS Loops 15 gradient creates a grayscale gradient example of varying more than one variable CS Loops 16

9 (demos) convert while loop to for loop CS Loops 17 Assignment Operator Short Forms These all add 1 to x (they are all equivalent): x = x + 1; x += 1; x++; increment operator 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); CS Loops 18

10 More Assignment Operator Short Forms x--; decrement operator x -= 10; x *= 10; x /= 10; coding CS Loops 19 Anatomy of a For Loop initialization test expression update code block CS Loops 20

11 When to use for or while loop? for is a short form for while, and they re interchangeable. (You can always use while if you want) initialisation test expression update initialization test expression update CS Loops 21 When to use for or while loop? But sometimes one is easier to use in certain cases: Use for to loop an exact number of repetitions: - I want 10 pacmen - I want 3 lines - I want random(3,11) lines Use for to update by same amount: - I want to count by 10 from 0 to I want lines spaced 10 pixels apart the width of the canvas Use while to update by different amounts when you don t need to loop an exact number of repetitions: - I want lines spaced 2-10 pixels apart the width of the canvas CS Loops 22

12 Four Loop Questions 1. What do I want to repeat? - a line 2. What do I want to change each time? - the x position 3. Where does it start, how does it change? - start at x = 10, draw a line every 20 pixels 4. How long should it repeat? - I want to draw 7 lines Use for to loop an exact number of times CS Loops 23 lines_fs_for Use for to loop an exact number of times (a for loop version of lines_fs) // start line with margin from left x = spacing / 2; for (int i = 0; i < num; i++) { line(x, 10, x, height - 10); x += spacing; CS Loops 24

13 Four Loop Questions 1. What do I want to repeat? - a line 2. What do I want to change each time? - the x position 3. Where does it start, how does it change? - start at x = spacing/2, draw a line every spacing pixels 4. How long should it repeat? - I want to draw 11 lines (equally spaced) Use for to update by same amount CS Loops 25 lines_es_for Use for to update by same amount for (float x = spacing / 2; x < width; x += spacing) { line(x, 10, x, height - 10); CS Loops 26

14 Four Loop Questions 1. What do I want to repeat? - a line 2. What do I want to change each time? - the x position 3. Where does it start, how does it change? - start at x = 0, increment x randomly between 2 and 20 pixels 4. How long should it repeat? - I want to draw lines all the way across the canvas Use while to update by different amounts when you don t need to loop an exact number of repetitions CS Loops 27 lines_rs_for You can do this with for, but easier/clearer with while for (float x = 0; x < width; x += random (2, 20)) { line(x, 10, x, height - 10); CS Loops 28

15 What do you see after 1 frame? int i; int a; background(200); i = 0; while (i < ) { a = int(random(0, 100)); point(a, a); i++; CS Loops 29 Scope What parts of your code have access to a variable - i.e. what variables can a code statement "see" CREDIT: CS Loops 30

16 Global Scope We have been declaring variables outside of functions - These are called global variables Global variables can be used anywhere in a program after they are declared - They have global scope - They "remember" their value between calls to setup(), draw(), etc. - Built-in Processing variables are global e.g. width, height, framecount, mousex, key (see GS 52) CS Loops 31 Local Scope You can declare variables inside any code block - 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 - functions have code blocks - loops have code blocks - (conditionals have code blocks) local variables cease to exist after the code block is exited - they have local scope CS Loops 32

17 lines_es_local background(200); // x is a local variable only visible to draw()! float x = spacing / 2; while (x < width) { line(x, 10, x, height - 10); x += spacing; CS Loops 33 Variable Scope Analogy global (remember it) local (use it then throw it out) global (remember it and update it) CS Loops 34

18 scope of w scope of y scope of h int w = 100; int y = w; void setup() { int h = w * 3; size(w, h); background(240); line(0, y, w, y); scope of n scope of px scope of py int n = int(random(0, 500)); for(int i = 0; i < n; i++) { float px = random(0, w); float py = random(0, y); point(px, py); y--; CS Loops 35 Computer Memory and Variables y int w = 100; int y = w; w 100 void setup() { int h = w * 3; size(w, h); mousex 100 background(240); line(0, y, w, y); 67 TWO_PI int n = int(random(0, 5 for(int i = 0; i < n; i float px = random(0, float py = random(0, point(px, CS py); Loops 36

19 Computer Memory and Variables y setup() variables int w = 100; int y = w; w 100 h void setup() { int h = w * 3; size(w, h); mousex background(240); line(0, y, w, y); 67 TWO_PI int n = int(random(0, 5 for(int i = 0; i < n; i float px = random(0, float py = random(0, point(px, CS py); Loops 37 Computer Memory and Variables y setup() variables int w = 100; int y = w; w 100 h void setup() { int h = w * 3; size(w, h); mousex background(240); line(0, y, w, y); 67 TWO_PI int n = int(random(0, 5 for(int i = 0; i < n; i float px = random(0, float py = random(0, point(px, CS py); Loops 38

20 When to use local variables 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 CS Loops 39 (local variable for intermediate calculation) local variables // calculate start and end angles float start = radians(dir mouthopening/2); float end = radians(dir + mouthopening/2)); // use those angles to draw the arc arc(width/2, height/2, mousex, mousex, start, end); CS Loops 40

21 (local variable for re-use) else if (shape == 3) { local variable // half size int hs = size / 2; triangle(mousex - hs, mousey + hs, mousex, mousey hs, mousex + hs, mousey + hs); CS Loops 41 (out of scope errors with local variables) cannot find variable named "hs" else if (shape == 3) { triangle(mousex - hs, mousey + hs, mousex, mousey hs, mousex + hs, mousey + hs); // half size int hs = size / 2; hs is defined after it is used CS Loops 42

22 (out of scope errors with local variables) int x = 0; void setup() { // local variable // only accessible to setup() int speed = 2; speed is defined as a local variable in setup() ellipse(x, 50, 20, 20); // this will cause an error: there is no // variable called 'speed' accessible to draw() x += speed; cannot find variable named "speed" CS Loops 43 (logic errors with local variables) int x; x is declared as a local variable and it will be assigned a default value of 0 each frame ellipse(x, 50, 20, 20); x += 2; the local variable x will be incremented, but then x will be thrown away as soon as draw finishes CS Loops 44

23 (logic errors with local variables) int x = 0; int x; x is declared as a local variable and it will "shadow" (hide) the global variable x. The local variable x will be assigned a default value of 0 each frame ellipse(x, 50, 20, 20); x += 2; the local variable x will be incremented, but then x will be thrown away as soon as draw finishes CS Loops 45 What does this loop output? int a = 2; void setup() { int a = 3; for (int i = 0; i < a; i++) { println("duck"); println("goose"); CS Loops 46

24 Changing Multiple Things in One Loop 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 does 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 CS Loops 47 rainbow ideas: 1. [RESTRICTIVE] size(360, 100); 2. [HACK] colormode(hsb, height, 100, 100); 3. [GOOD] start hue at 0, increment so hue = 360 when y = height 4. [BEST] express hue as a function of y float vs. int, using float() conversion function or making constant values a float with.0 CS Loops 48

25 Remapping y- y height CS Loops 49 Remapping Different Scales ystart margin = margin y height ystop = height - margin height - margin CS Loops 50

26 rainbow draw rainbow with top and bottom margin CS Loops 51 Remapping Different Scales ystart margin = margin y ystop = height -margin height height - margin CS Loops 52

27 value2 = map(value1, start1, stop1, start2, stop2) 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 CS Loops 53 rainbow_map remap variable using map() variables for y range and hue range: current range: ystart to ystop target range: huestart to huestart float hue = map(y, ystart, ystop, huestart, huestop); CS Loops 54

28 rainbow_interactive use map to adjust start and stop colours based on mousey nested conditional show interactive feedback use keys to change margin CS Loops 55 (demos) creating an infinite loop: typical causes: forgetting to change the counter variable changing the counter variable incorrectly using wrong test an infinite loop is a logical error CS Loops 56

29 precision (from "04 Conditionals") float a = 0; void setup() { framerate(2); a += 0.1; if (a == 5) { background(255, 0, 0); // watch the console output! println(a); CS Loops 57 infinite loop due to float precision float a = 0; void setup() { framerate(2); // infinite loop while (a!= 5) { // watch the console output! println(a); a += 0.1; CS Loops 58

30 when to use int? when to use float? use int to count things (e.g. loop 10 times) use int to index things (e.g. array positions) use int if you want to check for equality (e.g. i == 10) use int if you don t care about decimals (e.g. pixel position) otherwise use float CS Loops 59 What does this code output? void setup() { int i = 0; for (int y = 0; y < 2; y++) { i = i + 1; for (int x = 0; x < 3; x++) { i = i + 1; print(i); CS Loops 60

31 spraypaint // draw many dots around the cursor stroke(0, 10); strokeweight(1); // typical "counting" loop for (int i = 0; i < dots; i++) { // local variables to make code easier to read int x = mousex + int(random(-spread, spread)); int y = mousey + int(random(-spread, spread)); point(x, y); CS Loops 61 hittest_loop int x = 0; while (x + size < width) { // the hit test if (mousex >= x && mousex <= x + size && mousey >= y && mousey <= y + size) { fill(#ff0000); // red else { fill(255); // draw the rectangle at the current position rect(x, y, size, size); x += size; CS Loops 62

32 Nested Loop outer code block inner code block CS Loops 63 nestedloop int a = 0; // count the cells int s = 25; // size of each cell // row for (int i = 0; i < 4; i++) { // column for (int j = 0; j < 3; j++) { // calculate coordinates based on cell int x = i * s; int y = j * s; // draw something point(x, y); text(a, x, y); a = a + 1; CS Loops 64

33 Tracethrough tracethrough using the Processing debugger CS Loops 65 Nested Loop Clock Analogy for (int h = 0; h < 24; h++) { for (int m = 0; m < 60; m++) { for (int s = 0; s < 60; s++ ) { println(h, m, s); CS Loops 66

34 nestedloop_columns void setup() { size(300, 300); colormode(hsb, 360, 100, 100, 100); // row for (int x = 0; x < width; x += 20) { // pick a hue for the column float hue = map(x, 0, width, 360, 0); // column for (int y = 0; y <= height; y += 40) { fill(hue, 80, 80); rect(x, y, 20, 40); CS Loops 67 nestedloop_rows // nested loop coloured rows void setup() { size(300, 300); colormode(hsb, 360, 100, 100, 100); // column for (int y = 0; y <= height; y += 40) { // pick a hue for the row float hue = map(y, 0, height, 360, 0); // row for (int x = 0; x < width; x += 20) { fill(hue, 80, 80); rect(x, y, 20, 40); CS Loops 68

35 What does this code output? void setup() { int i = 0; for (int y = 0; y < 2; y++) { for (int x = 0; x < 3; x++) { i++; print(i); CS Loops 69 hittest_nestedloop using two while loops CS Loops 70

36 randomnestedloop random number of loop iterations int conversion example loop from bottom of canvas to top more map() examples CS Loops 71