Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by...
-
Upload
adrian-morton -
Category
Documents
-
view
216 -
download
0
Transcript of Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by...
![Page 1: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/1.jpg)
Lesson Three: Organization
Chapter 7: Functions
Learning Processing
Daniel Shiffman
Presentation by Donald W. SmithGraphics from text
![Page 2: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/2.jpg)
Learning Processing: Slides by Don Smith 2
Lesson Three: Organization
7: FunctionsModularity
Declaring and defining a function
Calling a function
Parameter passing
Returning a value
Reusability
8: Objects
![Page 3: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/3.jpg)
Learning Processing: Slides by Don Smith 3
ModularityWhat is a function?
A named block of codeSometimes called a ‘module’, ‘method’ or a ‘procedure’Some examples that you know are:setup() background()draw() ellipse()mousePressed() rect()
In pseudocode, they might be‘high-level’ headings:Erase backgroundDraw SpaceshipDraw enemiesMove spaceship based on user keyboard commandMove enemies
![Page 4: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/4.jpg)
Learning Processing: Slides by Don Smith 4
Pseudocode to Functions
Each time through draw:Erase backgroundDraw SpaceshipDraw enemiesMove spaceship
Get keyboard commandMove spaceship
Move enemies
Some functions are ‘built-in’You can write your own!
// Modularized draw()void draw() { background(0); drawSpaceShip(); drawEmenies(); moveShip(); moveEnemies();}
![Page 5: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/5.jpg)
Learning Processing: Slides by Don Smith 5
Why use functions?Is your draw()method getting a bit long?
Two key principles of good programming:1) Modularity
Break down code into smaller parts
More manageable and readable
Reduce the number of local variables inside a module
2) ReusabilityDuplicated code (copy/paste?) is not good
Must maintain in multiple places
Better to put duplicate code in a new function and ‘call’ it from multiple places
![Page 6: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/6.jpg)
Exercise 7.1: Modular ‘Pong’ Planning
Learning Processing: Slides by Don Smith 6
What functions might be used in the game of pong?
1) Decide on the ‘rules’One player or two player?
One player example
Two player example
2) Write Pong pseudocode (or flow chart)
3) Decide on function namesFor user-defined functions
4) Think about variables you will needLocal (inside a function) or ‘global’?
Create names you can remember
![Page 7: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/7.jpg)
The Function ‘Definition’Make a named ‘block’ with the following parts:
Return type Function name Parameters area start block
void drawShip ( ) { // Variables and code go here} // end drawShip
This is also called ‘declaring’ the functionYou are ‘telling’ the compiler that there is a new named block of code and how it works
Other Rules:Define function outside all other functions
Name with the same rules as variables (letters, digits, _)
Do not use ‘reserved’ words or already used names
Learning Processing: Slides by Don Smith 7
![Page 8: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/8.jpg)
Calling a FunctionNow that we have a function, let’s use it:void draw() {
drawShip(); // note the semicolon!
}
You ‘Call’ functions from ‘inside’ other functionsIn this case, inside draw()
You call functions by using the function name:Return type Function name Arguments area semicolon
<empty> drawShip ( ) ;
Learning Processing: Slides by Don Smith 8
![Page 9: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/9.jpg)
Exercise 7-2: Write and call a functionDisplay a multi-part graphic (or a Zoog!)
Learning Processing: Slides by Don Smith 9
![Page 10: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/10.jpg)
Bouncing Ball without FunctionsGroup code into related ‘chunks’
Learning Processing: Slides by Don Smith 10
![Page 11: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/11.jpg)
Bouncing Ball with FunctionsName the ‘chunks’, declare functions, call them!
Learning Processing: Slides by Don Smith 11
![Page 12: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/12.jpg)
Functions with Arguments and Parameters What if you wanted to use a function to do slightly different things?
Some examples you have seen that pass arguments to functions include:size(200,200);
color(100,150,0);
ellipse(x, y, width, height);
More?
What if you wanted to write your own function that receives parameters?
Learning Processing: Slides by Don Smith 12
![Page 13: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/13.jpg)
Arguments and ParametersWikipedia Reference:
http://en.wikipedia.org/wiki/Parameter_(computer_science)
The book (and many professionals) confuse the two words.
Per most texts and Wikipedia:Arguments are ‘sent’
Parameters are ‘received’
Learning Processing: Slides by Don Smith 13
// drawBlackCircle receives size parametervoid drawBlackCircle(int diameter) { fill(0); // passes arguments to ellipse() ellipse(50, 50, diameter, diameter);}
Argument comes before Parameter
![Page 14: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/14.jpg)
Multiple Arguments
Learning Processing: Slides by Don Smith 14
void draw() { background(0); // Pass drawCar four arguments drawCar( 100,100,64, color(200,200,0) ); drawCar( 50 ,75 ,32, color(0,200,100) ); drawCar( 80 ,175,40, color(200,0,0) );}
// drawCar receives four parametersvoid drawCar(int x, int y, int thesize, color c) { // Using a local variable "offset" int offset = thesize/4; // Draw main car body …}
![Page 15: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/15.jpg)
Passing Variables
Learning Processing: Slides by Don Smith 15
void draw() { background(0); int size = 32; // Pass drawCar four arguments drawCar( 100,100,size, color(200,200,0) ); size = size + 16; drawCar( 50 ,75 ,size, color(0,200,100) ); size = size + 16; drawCar( 80 ,175,size, color(200,0,0) );}
// drawCar receives four parametersvoid drawCar(int x, int y, int thesize, color c) { // Using a local variable "offset" int offset = thesize/4; // Draw main car body …}
![Page 16: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/16.jpg)
Keys to Passing ArgumentsYou must pass the same number of arguments as defined in the function parameter list.
When an argument is passed, it must be of the same type as declared within the parameters in the function definition.
An integer must be passed into an integer
a floating point into a floating point..
The value you pass as an argument to a function can be a:Literal value (20, 5, 4.3, etc.),
Variable (x, y, size, etc.)
The result of an expression (8 + 3, 4 * x/2, random(0,10), etc.)
Parameters act as local variables inside the receiving function
They are only accessible within that function
Learning Processing: Slides by Don Smith 16
![Page 17: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/17.jpg)
Exercise 7-5: Write a function definition:
Learning Processing: Slides by Don Smith 17
void draw() { float curHourly = 12.25; float raisePct = 9.0; showNewHourly(curHourly, raisePct);}
Write your own showNewHourly()function definition to match the function call
// Make a comment line above the name// return type function name ( parameters ) { // Indented code goes here // Print the new hourly rate}
![Page 18: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/18.jpg)
Exercise 7-6: Bouncing Car
Learning Processing: Slides by Don Smith 18
int globalX = 0;int globalY = 100;int speed = 1;
void draw() {background(0); // Call move // Call bounce // Call drawCar with global X and Y and other params;}
Write your own function calls to match the functions move, bounce and drawCar
![Page 19: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/19.jpg)
What am I really passing?Can the receiving function change the variable that you pass?
That might be… dangerous…
Here are the rules in Processing and Java:All primitive types (int, float, double, char…) are passed by copying the contents of the variable inside the argument into the new parameter variable.
Learning Processing: Slides by Don Smith 19
![Page 20: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/20.jpg)
20
Pass by Value (Animated)
Let's take a closer look at how this works.
void draw() {int n = 10;
println(n);byValue(n);
println(n);} // end draw()
void byValue(int num) {
num = 73;println(n);
} // end byValue()
RAM
10 n
num10 10
73
![Page 21: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/21.jpg)
Wuzzit Do?
Learning Processing: Slides by Don Smith 21
![Page 22: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/22.jpg)
Return types
Up until now, you have used a mysterious keyword named void before all of your functions
void setup() {
void draw() {
void byValue(int num) {
void drawCar(int x, int y, int thesize, color c) {
Remember the parts of a function definition?Return type Function name Parameters area start blockvoid drawShip ( ) {
Here is an example that ‘return’ an int:int sum(int a, int b, int c) {
int total = a + b + c;
return total; // Return a copy of a local variable
}
Learning Processing: Slides by Don Smith 22
![Page 23: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/23.jpg)
Assigning the return value to a variable
void draw() {
int answer;
answer = sum( 17, 42, 52);
println(answer);
noLoop();
}
int sum(int a, int b, int c) {
int total = a + b + c;
return total;
}Learning Processing: Slides by Don Smith 23
draw calls sum with arguments
sum receives values into parameters
sum method calculates local total
sum method returns copy of total
draw assigns returned val to answer
![Page 24: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/24.jpg)
A useful example: Distance between 2 pts
Learning Processing: Slides by Don Smith 24
float distance(float x1, float y1, float x2, float y2) {
float dx = x1 – x2; // one side of the right triangle
float dy = y1 – y2; // other side of the right triangle
float d = sqrt(dx*dx + dy*dy); // hypoteneuse length
return d;
}
Processing has a dist()function that does the same thing…
![Page 25: Lesson Three: Organization Chapter 7: Functions Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text.](https://reader030.fdocuments.us/reader030/viewer/2022032704/56649d6f5503460f94a503e4/html5/thumbnails/25.jpg)
Learning Processing: Slides by Don Smith 25
SummaryFunctions are useful for many tasks
1) Break code into smaller ‘named’ chunks2) Prevent duplication of code3) Make useful ‘utilities’ that can be reused
Processing is really a ‘function library’Provides functions such as line(), ellipse(), rect()You can write code inside functions that Processing calls
setup() and draw()
You can define your own functionsPass ‘arguments’ to functions to tell them what to do
They are received as ‘parameters’Primitive types are passed by value
Functions can return values