1. 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.

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? ?
Makes code easier to understand than "naked numbers".
Can be used to define relationship between values.

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, load register 1 with contents of memory at location 3000
AR 1, add the contents of registers 1 and 3 and put them in 1
JUMP 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
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.
void setup() {
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( );