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

What did we do last class?

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

Why use variables? ? Makes code easier to understand than "naked numbers". Can be used to define relationship between values.

What did you do for the homework assignment ?

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.

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.

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.

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

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); }

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

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!

void positionDrop() { dropy = dropy+ dropchange; if ((dropy+. 5 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);

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); }

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

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

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

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

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

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

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))

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.

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( );