Lesson Three: Organization

Chapter 7: Functions

Learning Processing

Daniel Shiffman

Presentation by Donald W. SmithGraphics from text

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

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

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

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

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

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

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

Exercise 7-2: Write and call a functionDisplay a multi-part graphic (or a Zoog!)

Learning Processing: Slides by Don Smith 9

Bouncing Ball without FunctionsGroup code into related ‘chunks’

Learning Processing: Slides by Don Smith 10

Bouncing Ball with FunctionsName the ‘chunks’, declare functions, call them!

Learning Processing: Slides by Don Smith 11

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

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

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 …}

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 …}

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

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}

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

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

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

Wuzzit Do?

Learning Processing: Slides by Don Smith 21

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

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

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…

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