1. Computer Science I Looping. User input. Classwork/Homework: Incorporate looping & user input into a sketch.

2. Looping …. Doing the same or similar things over and over. Processing has many statements (compound statement types) for looping. There also is looping done by the draw function.

3. Preview: animation Unless you (your code) changes it, the draw function is invoked over and over The rate of invocation of draw is the frameRate. The default value is 60 frames/second. It can be changed. Animation is produced by erasing the screen and then drawing (again), generally changing the positions of what is draw.

4. Looping: for loop The for statement has loop variable, and an initial value for the loop variable, a condition to be checked, and an increment expression. Also demonstrate console. void setup() { int sum = 0; for (int i=0; i<5; i++) {sum = sum + i; } print(sum); //prints value of sum on console }

5. Looping: for loop Change the name of the loop variable, the initial value, the condition and the increment expression // add up odd numbers less than 10 void setup() { int sum = 0; for (int k=1; k<10; k=k+2) {sum = sum + k; } print(sum); //prints value of sum on console }

6. Preparation for next example Use built-in variables width and height : refer to dimensions of screen. Use line function: line(x1,y1,x2,y2); Use trig functions Sine(a) Cosine(a) a

7. Polygon To draw an n-sided shape, we (our code) draws n lines (chords) between successive points on a circle. Think of the circle as a pie (no pun intended) divided up into pieces.

8. Plan Use a function named polygon Parameters are – x, y location indicating the center of the circle – width of the polygon – Number of sides

9. Start of sketch //polygon void setup() { size(800,600); } void draw() { polygon(.5*width,.5*height, 100.0, 3); }

10. void polygon(float x, float y, float w, int n) { float angle = TWO_PI / n; float rad = w/2; for (int i=0;i<n;i++) { float pangle1 = angle * i; float pangle2 = angle * (i+1); float xp1 = x + rad * cos(pangle1); float yp1 = y + rad * sin(pangle1); float xp2 = x + rad* cos(pangle2); float yp2 = y + rad * sin(pangle2); line(xp1,yp1,xp2,yp2); }

11. Check it out for different values of n What if parameter n is negative??? – Semantic problem. Should put in a check. What if n is even, say 4? Okay or not?

12. Pop quiz There is another way to draw shapes, namely shape Look up how to do this and change the program.

13. Processing Events Note: we still haven't used the fact that Processing sets up repeated calls (invocations) of draw. BUT, for the mouse and certain other events to work, we need draw to be defined and to work in the normal, default way, that is repeat.

14. Processing events: mouse Processing keeps track of the position of the mouse, setting the variables mouseX and mouseY. Processing also allows us (programmers) to define various functions, for example void mouseReleased() { } This function, if it is defined, is invoked when the mouse button is pressed, then released.

15. Planning We have a function that draws a polygon at a given location, width, number of sides. So…let's code our mouseRelease to invoke that function at the mouse location, fixed width, fixed number of sides. Next version will be fancier.

16. Implementation Take the polygon program and add void mouseReleased() { polygon(mouseX,mouseY,100.0,4); }

17. Fancier version Vary the type of polygon. Specifically, cycle through 3, 4, 5, 6, 7, 8, 9, 10, 3… Do this by definition variables int choices = 3; //minimum for a // polygon int limit = 10; Use ++ operator that returns value and THEN increments Use an if statement

18. Implementation void mouseReleased() { polygon(mouseX,mouseY, 100.0,choices++); if (choices > limit) { choices = 3;} }

19. One more thing Provide directions for user Use text, textSize, fill functions. Reset fill back to black. Do it all in setup. – Will need to move to draw, if draw erases screen each time.

20. Change (expand) setup void setup() { size(800,600); fill(255,0,0); textSize(18); text("Click on screen",20,20); fill(0); }

21. Pop quiz What does ellipseMode do? Describe uses. Record website.

22. Classwork / Homework Incorporate for-loop and/or mouseRelease into a sketch – You can start by building on one of mine. – Consider drawing something other than a polygon, but DO USE A FUNCTION and VARIABLES Look up how to set up response to pressing a key on the keyboard – This is termed as setting up event handler for a key event.