Computer Science I

1. Computer Science I Animation example Classwork: Examine and enhance falling drop(s) or make your own.

2. What did we do last class? • ?

3. Hints on details • Wrote the body of the known Processing functions • setup • draw • Used built-in Processing functions • ? • I showed a programmer defined function I wrote called smiley and I declared and used several variables

4. Why use variables? • ?

5. What did you do for the homework assignment • ?

6. Computer languages • Many different types • Grace Hopper was one of people responsible for creating the "high level language" COBOL. • So what is high vs low? • Assembler language is low • LR 1, 3000 load register 1 with contents of memory at location 3000 • AR 1,3 add the contents of registers 1 and 3 and put them in 1 • JUMP 4000 jump to position 4000 in memory • Etc. • Machine language is essentially 1 to 1 correspondence with Assembler, but all in 1s and 0s. • More on this later. • Cobol was [more or less] readable. Cobol (like Processing and Java) needs to be translated (this is called compilation) • Cobol is still in use. • If time, I will talk about the Y2K problem. If we don't get to it, it is an extra credit opportunity.

7. Animation …is fooling our brain by showing a sequence of static pictures quickly. • One way to accomplish this is using the draw function to display slightly different screens each interval of time. • We may or may not choose to erase the whole screen each time.

8. Falling drop(s) • [One drop falls at a time] • The draw function is invoked over and over according to the frameRate. • Default value is 60 times/second • Unless and until noLoop(); • The command background(…); draws background of the whole screen, so can be used to erase everything.

9. Planning • 3 objects (not in the sense that we will learn later about classes and objects, but close…) • cup • drop • water • Will define a function for each of these • Another programmer defined function I made, positionDrop, does the work of re-positioning the drop and making some checks

10. The drop function • A half circle plus a triangle void drop(float x, float y) { fill(0,0,200); arc(x,y,dropw,dropboth,0,PI); triangle(dropx-.5*dropw,dropy,dropx+.5*dropw,dropy,dropx,dropy-droptriheight); }

11. The cup void cup() { noFill(); rect(cupx,cupy,cupwidth,cupheight); }

12. The positionDrop function • Does the hard work: when a drop hits the water, the waterlevel is increased and the next time the drop is drawn, it is starting off at the top again. Also, when the water fills up the cup, my code stops looping. • You can try to make something more dramatic happen!

13. void positionDrop() { dropy = dropy+ dropchange; if ((dropy+.5*dropboth)>(cupy+cupheight-waterlevel)) { waterlevel = waterlevel + waterchange; dropy = 20; } if (waterlevel>cupheight-dropboth) { noLoop(); } else { drop(dropx,dropy); } }

14. The water in the cup • This was problematic because I changed my mind on what the waterlevel variable represented. void water() { fill(0,0,100); rect(cupx,cupy+cupheight-waterlevel,cupwidth,waterlevel); }

15. Variables float cupx = 300; float cupwidth = 200; float cupy = 400; float cupheight = 400; float dropw = 30; float dropboth = 30; float droptriheight = 40;

16. Variables float dropx = cupx + .5*cupwidth; //does not change float dropy = 50; //changes float waterlevel = 0; //changes float dropchange = 3; float waterchange = 30;

17. The setup function • Nothing that this is different from previous examples. voidsetup() { size(800,1000); }

18. The draw function • Keeps repeating until the noLoop(); invoked. • Recall positionDrop invokes drop. void draw() { background(255); positionDrop(); cup(); water(); }

19. Assignment • Use variables and define and use a function, with parameters. • Invoke function with different parameters

20. Colors • You can specify color using rgb values or gray scale directly in fill() or stroke() statements • OR you can define variables of datatype color • More on datatypes later • More color examples later • Let’s look up how to do this:processing language color in google or go to Processing Reference page and look for color

21. Random color • One possibility is to set up an array (more on this later) of colors, call it myColors, and choose from this list, using myColors[random(myColors.length)] • Another way: color(random(256),random(256),random(256))

22. Recap • Save As… your work with a name following the naming convention. • jMeyerDrops • This will produce a folder with that name holding a pde file with that name. • In later projects, there will be other files in the folder, most notably a data folder containing images and, maybe, other things. • Zip (compress) the folder. This is what you upload to the assignment box.

23. Classwork • [Catch up on homework. Read my comments and, as appropriate, improve what you did.] • How can drops project be improved or enhanced? • One student did a different drops into cup sketch. He will present this in a few weeks. • You can use similar technique to build an animation using the function you defined for homework. • Your function must make use of parameters and/or global variables to make it do different things…. • Note: you (your code) can change something more or different than just the vertical position. • For an animated effect of moving around the screen, you (your code) will need to erase the whole screen, done using background( );