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
Functions (aka methods): code
Later
Classes: define objects, which are ways of connecting code and data (called methods & variables)
Objects have data (information) and behavior that uses the data.

3. Terminology
Since Processing is based on Java, the proper term is method. The Processing books will use function and 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, 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*QUARTER_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 Declaration 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 working on an assignment.
When you are satisfied, Save As using naming convention.
Compress the folder
Upload to moodle dropbox.
Will demonstrate.