1. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 1 Class 13 - Animation r Summary of loops m while-do m for m do-while r while loop examples r for loop examples r for loops in applets

2. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 2 Review: Iteration r Three different forms of iteration  while  do-while m for

3. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 3 While loops while ( condition ) statement contains variables that are changed in loop repeat until condition becomes true Keep in mind that statement can be a compound statement.

4. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 4 For loops for ( init ; cond ; incr ) S init ; while ( cond ) { S incr ; } 

5. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 5 Do-while loops do S while ( cond ) S ; while ( cond ) S 

6. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 6 Loops are recursive statements while ( cond ) S If ( cond ){ S while ( cond ) S } 

7. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 7 for loops r Convenient syntax for loops with loop variables that are incremented or decremented each time through the loop (as in previous examples). r Recall: for ( init ; cond ; incr ) S init ; while ( cond ) { S incr ; } 

8. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 8 for loop examples Sum integers: s = 0; x = 5; while (x > 0) { s = s+x; x = x-1; } s = 0; for (x = 5; x > 0; x = x-1) s = s+x; 

9. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 9 for loop examples s = 0; for (x = 1; x <= 10; x = x+1) s = s+x;  s = 0; x = 1; while (x <= 10) { s = s+x; x = x+1; }

10. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 10 for loop usage for (i = 1; i <= n ; i = i+1) S One use of for loops is simply to execute a statement, or sequence of statements, a fixed number of times: executes S exactly n times.

11. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 11 Animation r Continuous change in displayed graphics. r Effect obtained by repainting scenes repeatedly.

12. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 12 Example: RollingEyesApplet This applet shows a pair of eyes with pupils, which roll when a button is pushed. Here, the loop is in the paint method. We structure this applet into three classes:  RollingEyesApplet : Construct a RollingEyes object. In the paint method, in a loop ranging from 0 to 360, call the draw method on that object.

13. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 13 Example: RollingEyesApplet (cont.)  RollingEyes : A pair of eyes next to each other. Its draw method calls the draw method on each eye.  RollingEye : An eye with a pupil. The draw method has an angle argument and draws the pupil at that angle.

14. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 14 Example: RollingEyesApplet (cont.) public class RollingEyesApplet extends Applet implements ActionListener { Button roll = new Button("Roll 'em"); RollingEyes pair1; public void init () { pair1 = new RollingEyes(200,100); add(roll); roll.addActionListener(this); } public void actionPerformed (ActionEvent e) { repaint(); }

15. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 15 Example: RollingEyesApplet (cont.) public void paint(Graphics g) { int i; for (i=0; i<360; i = i+1) pair1.draw(g, 2*Math.PI*i/360.0); }

16. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 16 Example: RollingEyesApplet (cont.) public class RollingEyes { RollingEye eye1, eye2; int x, y; final int EYE_RADIUS = 40, PUPIL_RADIUS = 10; RollingEyes (int x, int y) { eye1 = new RollingEye(x-EYE_RADIUS, y, EYE_RADIUS); eye2 = new RollingEye(x+EYE_RADIUS, y, EYE_RADIUS); }

17. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 17 Example: RollingEyesApplet (cont.) void draw (Graphics g, double theta) { eye1.draw(g, theta); eye2.draw(g, theta); }

18. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 18 Example: RollingEyesApplet (cont.) public class RollingEye { int x, y; int eye_rad, pupil_rad; int distToPupil; RollingEye (int x, int y, int rad) { this.x = x; this.y = y; eye_rad = rad; pupil_rad = rad/4; distToPupil = eye_rad - pupil_rad; }

19. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 19 Example: RollingEyesApplet (cont.) void draw (Graphics g, double theta) { // draw eye with pupil at angle theta int x0 = (int)(distToPupil * Math.cos(theta)), y0 = (int)(distToPupil * Math.sin(theta)); fillCircle(g, x, y, eye_rad, Color.pink); fillCircle(g, x+x0, y+y0, pupil_rad, Color.black); } void fillCircle(Graphics g, int x, int y, int rad, Color c) { g.setColor(c); g.fillOval(x-rad, y-rad, 2*rad, 2*rad); }

20. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 20 Example: Slower rolling eyes Speed of rolling eyes depends on speed of the computer. Often, such loops go so fast that they can’t easily be seen. To slow down the rolling, change the paint method to:

21. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 21 Example: Slower rolling eyes (cont.) r public void paint(Graphics g) { r int i; r for (i=0; i<360; i = i+1) { r pair1.draw(g, 2*Math.PI*i/360.0); r try { r Thread.sleep(10); r } catch (InterruptedException t) {} r } The highlighted portion creates a pause in the middle of a computation, here adding a 10 millisecond delay to each iteration of the loop.

22. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 22 The RollingEyes applet (cont.)  Previously saw how to put loop in paint method, and how to slow it down. r Next problem: how to reduce flicker. r Flicker caused by constant redrawing of entire applet window. r Better solution: Leave eyes alone, just redraw pupils.

23. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 23 The RollingEyes applet (cont.) r Idea: separate eye-drawing method from pupil-drawing method. Call eye-drawing method before loop, pupil-drawing method within loop. (Eye drawing is another example of a loop-invariant computation.)  Need changes in RollingEyes and RollingEye classes. Main change is in loop in paint method:

24. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 24 The RollingEyes applet (cont.) The applet stays the same except for the new version of paint : public void paint(Graphics g) { int i; pair1.drawEyes(g); for (i=0; i<360; i = i+1) pair1.drawPupils(g, 2*Math.PI*i/360.0); }

25. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 25 The RollingEyes applet (cont.) The RollingEyes class has the new methods drawEyes and drawPupils. void drawEyes (Graphics g) { eye1.drawEye(g); eye2.drawEye(g); } void drawPupils (Graphics g, double theta) { eye1.drawPupil(g, theta); eye2.drawPupil(g, theta); }

26. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 26 The RollingEyes applet (cont.) The RollingEye class has the new methods drawEyes and drawPupils, also. void drawEye (Graphics g) { fillCircle(g, x, y, eye_rad, Color.pink); } void drawPupil (Graphics g, double theta) { // draw eye with pupil at angle theta int x0 = (int)(distToPupil * Math.cos(theta)), y0 = (int)(distToPupil * Math.sin(theta)); fillCircle(g, x+x0, y+y0, pupil_rad, Color.black); }

27. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 27 Window not cleared r However, this doesn’t work. Here is a screen dump after rolling eyes once:

28. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 28 Window not cleared (cont.)  Problem: Window not cleared each time drawPupil is called on eyes. r Can get window cleared in various ways, but that would not solve problem: if we clear the window each time we draw pupils in a different location, we would have to redraw the eyes as well as the pupils, which is just what we’re trying to avoid.

29. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 29 “Draw incremental changes only” r Right way to do this is to draw what changes at each step. In this case, it means erasing the previous pupil and drawing the new one.  Add new method on RollingEye : redrawPupils. Arguments are Graphics object, angle, and previous angle.

30. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 30 Final version of RollingEyesApplet Change paint method in applet: public void paint(Graphics g) { int i; double one_degree = 2*Math.PI/360.0; pair1.drawEyes(g); pair1.drawPupils(g, 0.0); for (i=1; i<360; i = i+1) pair1.reDrawPupils(g, i*one_degree, (i-1)*one_degree); }

31. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 31 Final version of RollingEyesApplet (cont.) RollingEyes just calls corresponding methods in Rolling Eye : void drawPupils (Graphics g, double theta) { eye1.drawPupil(g, theta); eye2.drawPupil(g, theta); } void reDrawPupils (Graphics g, double theta, double thetaprev) { eye1.reDrawPupil(g, theta, thetaprev); eye2.reDrawPupil(g, theta, thetaprev); }

32. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 32 Final version of RollingEyesApplet (cont.) In RollingEye, drawPupils is unchanged, but redrawPupils erases old pupil first: void reDrawPupil (Graphics g, double theta, double thetaprev) { // erase previous pupil int x0 = (int)(distToPupil * Math.cos(thetaprev)), y0 = (int)(distToPupil * Math.sin(thetaprev)); fillCircle(g, x+x0, y+y0, pupil_rad, Color.pink); // and draw new pupil x0 = (int)(distToPupil * Math.cos(theta)); y0 = (int)(distToPupil * Math.sin(theta)); fillCircle(g, x+x0, y+y0, pupil_rad, Color.black); }

33. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 33 Aside: Rolling forever r Can have applet that simply rolls eyes forever. However, can’t do it like this: because it would tie up the browser. r Instead, need to relinquish control to the browser occasionally. public void paint(Graphics g) { int i; for (i=0; i<360; i = (i+1)%360) pair1.draw(g, 2*Math.PI*i/360.0); }

34. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 34 Aside: Rolling forever (cont.)  To relinquish control, call repaint (). repaint does not simply call paint, but deos something more complicated: It goes back to the browser, and tells it to schedule a call to paint at some later time (whenever the browser has nothing better to do). This gives the browser the opportunity to do other, more pressing work.

35. 17/3/00SEM107 © Kamin & Reddy Class 13 - Animation 35 Aside: Rolling forever (cont.) The new version of RollingEyesApplet : public class RollingEyesApplet6 extends Applet { RollingEyes5 pair1; int lastangle = 0; public void init () { pair1 = new RollingEyes5(200,100); } public void paint(Graphics g) { pair1.draw(g, 2*Math.PI*lastangle/360.0); lastangle = (lastangle+1) % 360; repaint(); }