1. Computer Science I Variables. Methods. Classwork/Homework: Re-do or do new drawing using variables & function(s). Zip folder and upload to Moodle dropbox.

2. Extending the language Programming languages have facilities to extend the language: Variables: data Methods: code Later Classes: defining objects, which are ways of connecting code and data (called methods & variables)

3. Terminology In Processing, which is based on Java, the proper term is method. – We will talk about classes, which define objects, which have variables and methods later. I may slip and call them functions. There also is distinction in some, but not all programming languages, between – Function: calculates a value – Procedure or subroutine: performs a task

4. Angles How to measure angles? – Familiar system: 360 degrees in a circle. This was invented. It is arbitrary. Extra credit opportunity to post history. – Intrinsic measure: radians. Recall: the length of circumference of a circle is 2* pi *radius. Think of wrapping the radius around the circle. Processing provides built-in constants PI represents a half circle. We know this as 180 degrees TWO_PI corresponds to 360 degrees. QUARTER_PI to 45 degrees. HALF_PI to 90 degrees

5. Demonstrate variables with example // smiley face void setup() { size(800,600); ellipseMode(CENTER); } void draw() { ellipse(100,100,80,100); fill(0); ellipse(85,90,10,10); ellipse(115,90,10,10); noFill(); arc(100,110,40,30,QUARTER_PI,3*QUARTER_PI); }

6. Let's go to Processing Copy over smiley Test, enhance, test While we have it, let's save – Network drive, if you have one – Otherwise, "local" folder. Save with new name.

7. But What if I wanted to change something? What are all these numbers? What if I wanted to draw two faces? What if I wanted to change the face or draw 2 or more different faces?

8. Variables Variable is a construct for associating a name with a value. You can change the value. It can vary. In Processing, you DECLARE the variable. – This requires specifying what the datatype of the variable will be. Is it an integer (whole number)? Is it a number with a fraction part? Is it a string of characters? Is it a true or false value? Other? – Then use the name in place of the value. I will show the code and talk more about this later.

9. Example of use Expressions are combinations of literal values and variables. For example, recalling radians – Assume angle is a variable holding some angle in degrees, then angle * PI / 180 produces value in radians.

10. Function Processing provides a way to specify code. A Processing function has a signature line that indicates what parameters the function has and what value it returns. Again, I will demonstrate these concepts in the smiley example.

11. Planning Make variables out of all the values (numbers) in the example. Define a method called smiley.

12. Variables int ctrx, ctry; int faceWidth, faceHeight; int eyeXoffset, eyeYoffset; int eyeSize; int mouthYoffset, mouthWidth, mouthHeight; I make these all integers. I could (and maybe should) make them float.

13. What values for these variables? Notice just one eyeXoffset value. Why? It occurred to me that these values are not independent. Some are based on other values, namely faceWidth and faceHeight. Show first improved version. Make it draw 2 faces. Then improve it further.

14. So will set eyeXoffset equal to an expression based on faceWidth. I came up with the numbers 15/80. Improve it if you wish! Need to make sure it is an integer The declaration of eyeXoffset is int eyeXoffset = int((15.0/80.0)*faceWidth);

15. int ctrx = 100; int ctry = 100; int faceWidth = 80; int faceHeight = 100; int eyeXoffset = int((15.0/80.0)*faceWidth); int eyeYoffset = int(.10*faceHeight); int eyeSize = 10; int mouthYoffset = int(.10*faceHeight); int mouthWidth = int(.5*faceWidth); int mouthHeight = int(.3*faceHeight);

16. void setup() { size(800,600); ellipseMode(CENTER); } void draw() { smiley(ctrx,ctry); }

17. void smiley(int x,int y) { ellipse(x,y,faceWidth,faceHeight); fill(0); ellipse(x-eyeXoffset, y-eyeYoffset,eyeSize,eyeSize); ellipse(x+eyeXoffset, y-eyeYoffset,eyeSize,eyeSize); noFill(); arc(x, y+mouthYoffset, mouthWidth,mouthHeight, QUARTER_PI,3*QUARTER_PI); }

18. Claim: this an improvement! More typing but much clearer what is going on. No more naked numbers (aka literals). And, what if you wanted to draw 2 faces? – Same face Did need to fix bug: reset fill to white. Notice comments! – Change dimensions – Now significant saving in code

19. The smiley method is called twice void draw() { smiley(ctrx,ctry); smiley(2*ctrx, 2*ctry); } void smiley(int x,int y) { fill(255); //reset fill back to white ellipse(x,y,faceWidth,faceHeight); fill(0); // set fill to black ellipse(x-eyeXoffset,x-eyeYoffset,eyeSize,eyeSize); ellipse(x+eyeXoffset,x-eyeYoffset,eyeSize,eyeSize); noFill(); //no fill for mouth arc(x,y+mouthYoffset,mouthWidth,mouthHeight,QUARTER_PI,3*Q UARTER_PI); }

20. Change dimensions of face Need to include width and height as parameters to smiley function. Put code for setting related values into smiley Need to move some variables into smiley – This makes them LOCAL variables, as opposed to GLOBAL.

21. int ctrx = 100; int ctry = 100; int faceWidth = 80; int faceHeight = 100; int skinnyFaceWidth = 60; int skinnyFaceHeight = 130; int eyeSize = 10;

22. void setup() { size(800,600); ellipseMode(CENTER); } void draw() { smiley(ctrx,ctry,faceWidth, faceHeight ); smiley(3*ctrx, 3*ctry,skinnyFaceWidth, skinnyFaceHeight ); }

23. void smiley(int x,int y, int w, int h) { int eyeXoffset = int((15.0/80.0)*w); int eyeYoffset = int(.10*h); int mouthYoffset = int(.10*h); int mouthWidth = int(.5*w); int mouthHeight = int(.3*h); fill(255); ellipse(x,y,w,h); fill(0); ellipse(x-eyeXoffset,x- eyeYoffset,eyeSize,eyeSize); ellipse(x+eyeXoffset,x- eyeYoffset,eyeSize,eyeSize); noFill(); arc(x,y+mouthYoffset,mouthWidth,mouthHeight,QUARTER_ PI,3*QUARTER_PI); }

24. Admission In my first version of the program drawing two faces, I neglected to reset fill. This was a semantic error: an error of meaning. The program worked but didn't do what I wanted. A syntactic error is an error of form: like a grammatical error. The program will not run at all and Processing will tell me something.

25. Recap: variable, method Variable is programming construct to associate a name with a value. Variables need to be declared. Can be assigned values. A method is defined with a header (aka signature line) specifying return value and parameter values. IN the body of the method, the parameters values are used along with any local variables and global variables.

26. Recap: statements Assignment statement – An assignment statement uses a single = sign. Think of make the left hand variable equal to the current value of the expression on the right. Preview/warning: there also is a double equal sign that means: check if these two values are equal. – target = expression ; Declaration statement method definition method invocation (aka method call)

27. Note Some methods do not return any value. – void setup() { } – All our methods so far don't return values. Some methods compute a value and return it to where the method is invoked – total = balance + tax(balance); assumes there is a method named tax that has input for which it uses the name balance and computes based on the input

28. Classwork/Homework Take your drawing(s) from last class OR make new drawings Modify by using variables and your own methods. Save As – This creates a folder – Use Save for subsequent saving, but Do consider saving with new names – When you are satisfied, Save As using naming convention. Compress the folder Upload to moodle dropbox. – Will demonstrate.