450 likes | 528 Views
CSE 8A Lecture 11. Reading for next class: 6.4-6.7 Today’s topics: More practice with if-statements Building more complex programs (LIVE CODING!). Solo: (30 sec) Discuss: (1 min) Group: (30 sec). Does the order of the for loops matter?. public void fillBottom(Color newColor) {
E N D
CSE 8A Lecture 11 • Reading for next class: 6.4-6.7 • Today’s topics: • More practice with if-statements • Building more complex programs (LIVE CODING!)
Solo: (30 sec) • Discuss: (1 min) • Group: (30 sec) Does the order of the for loops matter? public void fillBottom(Color newColor) { Pixel pix; for (int y = 0; y < this.getHeight(); y++) { for (int x = 0; x < this.getWidth(); x++) { <<<SELECT LINE OF CODE>>>> { pix = this.getPixel(x,y); pix.setColor(newColor); } } } Yes, since we are changing the bottom half, we have to “fill in” across the rows in the inner loop Yes, because we need to make sure the if statement is checking y not x No, the if statement controls the assignment
Solo: (30 sec) • Discuss: (1 min) • Group: (30 sec) How many times is the variable pix assigned a value? public void fillBottom(Color newColor) { Pixel pix; for (int y = 0; y < this.getHeight(); y++) { for (int x = 0; x < this.getWidth(); x++) { pix = this.getPixel(x,y); pix.setColor(newColor); } } } • 1 • this.getWidth() times • this.getHeight() times • this.getHeight()* this.getWidth() times • this.getHeight()/2* this.getWidth() times
A stripy filter public void everyOtherColumn(Color newColor) { Pixel pix; for (int y = 0; y < this.getHeight(); y++) { for (int x = 0; x < this.getWidth(); x = x + 2) { pix = this.getPixel(x,y); pix.setColor(newColor); } } }
Solo: (45 sec) • Discuss: (1 min) • Group: (20 sec) How many iterations of the loop body are executed? public void everyOtherColumn(Color newColor) { Pixel pix; for (int y = 0; y < this.getHeight(); y++) { for (int x = 0; x < this.getWidth(); x = x + 2) { pix = this.getPixel(x,y); pix.setColor(newColor); } } } • (getHeight()-1) * (getWidth()-1) • (getHeight()-1) * (getWidth()-1)/2 • getHeight() * getWidth() • getHeight() * getWidth()/2 • None of the above are always true
Solo: (45 sec) • Discuss: (1 min) • Group: (20 sec) Same operation with if statement control public void everyOtherColumn(Color newColor) { Pixel pix; for (int y = 0; y < this.getHeight(); y++) { for (int x = 0; x < this.getWidth(); x++) { <<SELECT LINE OF CODE TO GO HERE>> pix = this.getPixel(x,y); pix.setColor(newColor); } } } Show missign {} tp Control two statements A) if(x<this.getWidth()/2) B) if(x<this.getHeight()/2) C) if ((x % 2) == 0) D) if ( (this.getPixel(x,y) % 2) == 0)
If you can do it both ways, which is “better”? • Efficiency • How much time (computer instructions) does it take? • How much space (computer memory) does it take? • Software Design • How readable is it for a human? • How easy is it to modify the code if needed, without introducing new bugs?
Which is more efficient? • We just looked at these two approaches for setting pixel color in even-indexed columns: • (A) Looping over only some (x,y) pixels • (B) Looping over all pixels, with if statement inside • Which is more efficient? • Why?
More complex control for color change • What’s the most efficient way to reduce red eye? • A) Restricted loop bounds, only loop overx,y in range • B) Unrestricted loopbounds, useif statement tocheck for x,y in range Pixels change if meet both a COLOR and COORDINATE criteria
Book code for RedEye reduction:Parameters for good Software Engineering public void removeRedEye (Color newColor, int startx, int endx, int starty, int endy ) { Pixel pix; for (int x = ; x < ; x++) { for (int y = ; y < ;y++) { pix = this.getPixel(x,y); if (pix.colorDistance(Color.red) < 167) { pix.setColor(newColor); } } } } Is there anything else We could parameterize?
Let’s do it the “inefficient” way • Assume we loop over ALL pixels in picture… • What if statement would we use to check for pixels in range?
Book code for RedEye reduction:Parameters for good Software Engineering public void removeRedEye(Color newColor, int startx, int endx, int starty, int endy ) { Pixel pix; for (int x = 0; x < getWidth(); x++) { for (int y = 0; y < getHeight(); y++) { if( ) { pix = this.getPixel(x,y); if (pix.colorDistance(Color.red) < 167) pix.setColor(newColor); } } } }
Solo: (30 sec) • Discuss: (1 min) • Group: (20 sec) Review: If-statements Which statement is most true about ONE execution of this code? • It is possible BOTH Section A AND Section B will be executed • Either Section A will be executed, OR Section B will be executed, but NOT BOTH • It is possible neither Section A nor Section B will be executed. if (Math.abs(topAv – botAv) < 10) topP.setColor(Color.WHITE); else topP.setColor(Color.BLACK);
Solo: (30 sec) • Discuss: (1 min) • Group: (20 sec) Review: If-statements Which statement is most true about ONE execution of this code? if (Math.abs(topAv – botAv) < 10) topP.setColor(Color.WHITE); else if (Math.abs(topAv – botAv < 50) topP.setColor(Color.GREY); else topP.setColor(Color.BLACK); • Exactly one of Section A, Section B, or Section C will be executed • It is possible that both Section B and Section C will be executed • It is possible that both Section A and Section C will be executed • It’s possible Sections A, B, and C will be executed Confused? See page 187 for execution flow diagram
The Mandelbrot Set Consider the following update rule for all complex numbers c: z0 = 0 zn+1 = zn2 + c If z does not diverge, c is in the M. Set. Benoit M. Imaginary axis z3 c z2 z1 z4 Real axis z0
The Mandelbrot Set Consider the following update rule for all complex numbers c: z0 = 0 zn+1 = zn2 + c If z does not diverge, c is in the M. Set. Benoit M. Imaginary axis z3 c z2 z1 z4 z0 Real axis example of a non-diverging cycle
The Mandelbrot Set Consider the following update rule for all complex numbers c: z0 = 0 zn+1 = zn2 + c The shaded area are points that do not diverge.
Challenge: Write the code to draw the Mandelbrot set (Today and Tuesday) Objective: Write a method that creates a new Picture object and plots the Mandelbrot set in the range (-2.0, -1.0) to (1.0, 1.0) Allow the user to specify the size of the Picture
CS Concept: Top-Down Design Objective: Write a method that creates a new Picture object and plots the Mandelbrot set in the range (-2.0, -1.0) to (1.0, 1.0) Allow the user to specify the size of the Picture Where to begin? • Determine the input and output • Develop an algorithm • Write the code
Challenge: Write the code to draw the Mandelbrot set Input and output Input: Output: User-specified width Point (0, 0) in Pixel space Point (-2.0, 1.0)in the complex plane
Challenge: Write the code to draw the Mandelbrot set Input and output Input: Width of picture (why not height too?) Output: A Picture object with the Mset drawn User-specified width Point (0, 0) in Pixel space Point (-2.0, 1.0)in the complex plane
CS Concept: Algorithm development Algorithm What sub-tasks can you think of that need to be solved? (Hint: think about what information you have or can get easily, and what information you need. E.g., it’s easyto loop through Pixels in the Pixel space, but how can yourelate this to a point in coordinate space?)
CS Concept: Algorithm Design/Pseudocode What is wrong with the following algorithm? • Calculate the height of the picture, call this height • Create a new Picture with the given width and height • For x from 0 to width: • For y from 0 to height: • If (x, y) is in the Mset, color p black • Return the newly created Picture • Nothing, it will plot the Mandelbrot set just fine. • It needs an else condition to specify what happens in (x, y) is not in the set • The point (x, y) is not the correct point to test • The loop will not cover the whole picture
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height • Create a new Picture with the given width and height • For x from 0 to width: • For y from 0 to height: • Get the Pixel, p, at (x, y) • Calculate (real, imag), the point in the complex plane corresponding to (x, y) • If (real, imag) is in Mset Color Pixel p black • Return the newly created Picture
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height Say width is 120, What should the height be? 120 • 60 • 80 • 90 • 120 • None of these (-2.0, 1.0) (1.0, -1.0)
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height What is the general formula for calculatingthe height from the width? width (-2.0, 1.0) (1.0, -1.0)
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height What is the general formula for calculatingthe height from the width? width (-2.0, 1.0) height/width= 2.0/3.0 so height = 2.0/3.0 * width (1.0, -1.0)
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height • Create a new Picture with the given width and height • For x from 0 to width: • For y from 0 to height: • Get the Pixel, p, at (x, y) • Calculate (real, imag), the point in the complex plane corresponding to (x, y) • If (real, imag) is in Mset Color Pixel p black • Return the newly created Picture
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height • Create a new Picture with the given width and height • For x from 0 to width: • For y from 0 to height: • Get the Pixel, p, at (x, y) • Calculate (real, imag), the point in the complex plane corresponding to (x, y) • If (real, imag) is in Mset Color Pixel p black • Return the newly created Picture
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): Calculate (real, imag), the point in the complex plane corresponding to (x, y) (real – (-2.0))/3.0 = x/width real + 2.0 = 3.0x / width real = ((3.0x) / width) – 2.0 (-2.0, 1.0) (1.0, -1.0)
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): Calculate (real, imag), the point in the complex plane corresponding to (x, y) (real – (-2.0))/3.0 = x/width real + 2.0 = 3.0x / width real = ((3.0x) / width) – 2.0 (-2.0, 1.0) (imag – (-1.0))/2.0 = (height – y)/height imag + 1.0 = 2.0((height – y)/height) imag = 2.0((height – y)/height) – 1.0 (1.0, -1.0)
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height • Create a new Picture with the given width and height • For x from 0 to width: • For y from 0 to height: • Get the Pixel, p, at (x, y) • Calculate (real, imag), the point in the complex plane corresponding to (x, y) • If (real, imag) is in Mset Color Pixel p black • Return the newly created Picture
Remember the update rule… Consider the following update rule for all complex numbers c: z0 = 0 zn+1 = zn2 + c If z does not diverge (i.e., absolute value stays under 2.0) after 25 iterations,it is in the Mandelbrot set. The shaded area are points that do not diverge.
public static boolean inMset( double real, double imag ) { double zReal = 0; double zImag = 0; double realUpdate; int numIter = 0; double absValZ = Math.sqrt(zReal*zReal + zImag*zImag); while (___________(1)__________________) { realUpdate = zReal*zReal-zImag*zImag + real; zImag = zReal*zImag*2+ imag; zReal = realUpdate; absValZ = Math.sqrt(zReal*zReal + zImag*zImag); numIter++; } if (______(2)____________) { return true; } else { return false; } } • What line of code should go in blank (1) • (more than one answer will work, but one is “better”) • absValZ < 2.0 • numIter < 25 • absValZ < 2.0 || numIter < 25 • numIter < 25 && absValZ < 2.0 • absValZ > 2.0 || numIter > 25
public static boolean inMset( double real, double imag ) { double zReal = 0; double zImag = 0; double realUpdate; int numIter = 0; double absValZ = Math.sqrt(zReal*zReal + zImag*zImag); while ( absValZ < 2.0 && numIter < 25 ) { realUpdate = zReal*zReal-zImag*zImag + real; zImag = zReal*zImag*2+ imag; zReal = realUpdate; absValZ = Math.sqrt(zReal*zReal + zImag*zImag); numIter++; } if (______(2)____________) { return true; } else { return false; } } • What line of code should go in blank (2) • absValZ < 2.0 • absValZ >= 2.0 • numIter >= 25 • numIter >= 25 && absValZ >= 2.0 • numIter == 25 && absValZ < 2.0
CS Concept: Booleans are values if ( absValZ < 2.0 ) { return true; } else { return false; } • Which of the following is equivalent to the above code? • return absValZ; • return absValZ < 2.0; • return absValZ >= 2.0; • None of these
Challenge: Write the code to draw the Mandelbrot set Algorithm for plotMset(int width): • Calculate the height of the picture, call this height • Create a new Picture with the given width and height • For x from 0 to width: • For y from 0 to height: • Get the Pixel, p, at (x, y) • Calculate (real, imag), the point in the complex plane corresponding to (x, y) • If (real, imag) is in Mset Color Pixel p black • Return the newly created Picture
public static Picture plotMSetAns( int width ) { int height = (int)(2.0/3.0 * width); Picture newPic = new Picture(width, height); for (int x = 0; x < width; x++) { for (int y = 0; y < height; y++) { Pixel p = newPic.getPixel(x, y); double real = ((3.0*x) / width) - 2.0; double imag = 2.0*(height - ((double)y))/height - 1.0; if (inMset( real, imag )) { p.setColor( new Color( 0, 255, 0 ) ); } } } return newPic; } What inefficiency can you find in this code? How could you make it more general?
Summary of Concepts • If-statements • Top-down design
TODO • Reading for next class: 6.3 • Finish PSA5