1. Computer Science I Recap: variables & functions. Images. Pseudo-random processing.

2. Flow of control … in Processing Statements outside of any function (should be just declarations of variables) executed in order, one time. The statements in the setup function executed in order once when sketch (program) is run. The statements in the draw function are executed in order when draw is executed. The statements in any for-loop are executed and then repeated, as long as condition is true.

3. What is going on when a function is called? You (your code) may define a function (aka programmer defined functions; also called user-defined function, but this is bad term). Your code may invoke/execute/call a function. Flow of control goes to code in the function and, when function completes, back to where function was invoked. Processing (and other languages) use what is termed the stack / the program stack / the execution stack. This is information containing references to accessible variables and return point.

4. Global and local variables Variables declared inside a function are only accessible inside the function. They go away when function completes. The loop variable declared in header of for- loop and any other variables declared inside for-loop also go away when loop completes.

5. Planning Goal: write a coin toss sketch Program will respond to a mouse click by drawing an picture of something when mouse was clicked. The something is one of two images. We want to just show one "coin" at a time. We will want to keep track of heads versus tails and display on the screen.

6. What we… Know: How to respond to release of mouse button How to display text – Will expand How to write if statement – this will be variant if-else Don't know: How to do something randomly How to display images How to erase the screen

7. Pseudo-random processing The built-in function random returns a number from 0 up to but not including the parameter. So… random(1) produces a float, a fraction from 0 up to 1

8. Start Processing // coin flip void setup() { size(600,400); frameRate(1); //slow down frames } void draw() { } void mouseReleased(){ println(random(1)); // console }

9. Next stage: save as coinflip1 and modify Add if-else // coin flip void setup() { size(600,400); frameRate(1); } void draw() { } void mouseReleased() { if (.5<random(1)){ println("head"); } else { println("tail"); }

10. Comments Nothing is being displayed on the screen. Printing to console helps in debugging (and learning). Working in stages is the way to go!

11. Variable declarations PImage coinh,coint; PFont font; int headc,tailc;

12. Save As coinflip2 and modify Add the variable declarations (not using the Pimages yet) Change setup to set up font, initialize counting variables to zero. – You can experiment with font, Change mouseReleased

13. void setup() { size(600,400); frameRate(1); headc = 0; tailc = 0; font = createFont("Ariel",20); textFont(font); }

14. Notice calls to background and fill void mouseReleased() { background(255); //change background to white if (.5<random(1)){ headc = headc+1; } else { tailc = tailc+1; } fill(0,0,250); //changes color for subsequent text text("Heads ",10,20); text(headc,10,50); text(" Tails ",80,20); text(tailc,80,50); }

15. Get ready to incorporate images Save As sketch as coinflipImages Find two images. – Could be head and tail of a coin In Processing / Sketch / Add file … locate file one at a time and click Open. This adds the image file to the Processing data folder for this sketch. – Can now use image(Pimage,x,y,w,h) Modify setup – Removed frameRate reset. Go back to default. – Added loading of image files into Pimage variables Modify mouseReleased – Draw images (scaled) to window.

16. setup with 2 new statements void setup() { size(600,400); headc = 0; tailc = 0; font = createFont("Ariel",20); textFont(font); coinh = loadImage("smirk.JPG"); coint = loadImage("threesome.JPG"); } Names for your images

17. mouseReleased with additions void mouseReleased() { background(255); //change background to white if (.5<random(1)){ image(coinh,mouseX,mouseY,100,100); headc = headc+1; } else { image(coint,mouseX,mouseY,100,100); tailc = tailc+1; } fill(0,0,240); //change color of text to blue text("Heads ",10,20); text(headc,10,50); text(" Tails ",80,20); text(tailc,80,50); }

18. Classwork / Homework Complete your sketch with images and random processing. – Can experiment with re-positioning image under the mouse location. – Can experiment with more than 2 choices – Maybe you don't want to clear the window? How to make a biased coin?