We will now start to create our functions. As opposed to running lines of code inside the draw function, we will tell it run a different function inside the draw function. Functions which are built in already are mousePressed(), and keyPressed(), however we can create our own functions. When we define a function there are three parts:
-Return Type
-Function Name
-Arguments
It would like similar to this..
returnType functionName (arguments){
//Code
}
Imagine you wanted to draw a red circle inside the draw function you could create a function as follows:
void drawRedCircle(){
fill(255,0,0);
ellipse(50,50,20,20);
}
Then we need to write this in the body of the regular code and we would simply have:
void draw(){
background(255);
drawRedCiricle();
}
void drawRedCircle(){
fill(255,0,0);
ellipse(50,50,20,20);
}
-Return Type
-Function Name
-Arguments
It would like similar to this..
returnType functionName (arguments){
//Code
}
Imagine you wanted to draw a red circle inside the draw function you could create a function as follows:
void drawRedCircle(){
fill(255,0,0);
ellipse(50,50,20,20);
}
Then we need to write this in the body of the regular code and we would simply have:
void draw(){
background(255);
drawRedCiricle();
}
void drawRedCircle(){
fill(255,0,0);
ellipse(50,50,20,20);
}
TASK:
If we went back and changed the bouncing ball code (the one where the ball bounces back and forth across the screen to, you need to write the code in the various functions to make the code work.
int x = 0;
int speed = 1;
// Setup does not change
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
moveBall();
bounce();
displayBall();
}
void moveBall(){
//move the ball
}
void bounce(){
//determine if the ball should change direction
}
void displayBall(){
//draw the ball
}
If we went back and changed the bouncing ball code (the one where the ball bounces back and forth across the screen to, you need to write the code in the various functions to make the code work.
int x = 0;
int speed = 1;
// Setup does not change
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
moveBall();
bounce();
displayBall();
}
void moveBall(){
//move the ball
}
void bounce(){
//determine if the ball should change direction
}
void displayBall(){
//draw the ball
}
Now why do we do this?
Well simply it is easier to find errors than if it is 500 lines of code!
Well simply it is easier to find errors than if it is 500 lines of code!
Now lets talk about what else you can do. We actually could tell the ball to move N steps, where N is the argument used in the function. For example we can get the function to draw a circle with the following function:
void draw(){
background(255);
drawRedCiricle(16); //NOW IT DRAWS A CIRCLE WITH DIAMETER OF 16 UNITS
}
void drawRedCiricle(int diameter){
fill(255,0,0);
ellipse(50,50, diameter, diameter);
}
Taking this to the bouncing ball we could change the move to
void moveBall(int speedFactor){
x=x+ speed * speedFactor;
}
Now
move(2); //moves it twice as fast
move(1/4); //moves if 1/4 the speed
move(mouseX/10); //speed depends on where the mouse is
You can also do multiple parameters such as
void drawRedCiricle(int xpos, int ypos, int diameter){
fill(255,0,0);
ellipse(xpos, ypos, diameter,diameter);
}
Then
drawRedCircle(20, 40, 12); //draws a red circle at 20, 40 with a diameter of 12.
Important Things to Remember about Parameters:
• You must pass the same number of parameters as defined in the function.
• When a parameter is passed, it must be of the same type as declared within the arguments
in the function definition. An integer must be passed into an integer, a floating point into a floating point, and so on.
• The value you pass as a parameter to a function can be a literal value (20, 5, 4.3, etc.), a variable (x, y, etc.), or the result of an expression (8 3, 4 * x/2, random(0,10), etc.)
• Arguments act as local variables to a function and are only accessible within that function.
void draw(){
background(255);
drawRedCiricle(16); //NOW IT DRAWS A CIRCLE WITH DIAMETER OF 16 UNITS
}
void drawRedCiricle(int diameter){
fill(255,0,0);
ellipse(50,50, diameter, diameter);
}
Taking this to the bouncing ball we could change the move to
void moveBall(int speedFactor){
x=x+ speed * speedFactor;
}
Now
move(2); //moves it twice as fast
move(1/4); //moves if 1/4 the speed
move(mouseX/10); //speed depends on where the mouse is
You can also do multiple parameters such as
void drawRedCiricle(int xpos, int ypos, int diameter){
fill(255,0,0);
ellipse(xpos, ypos, diameter,diameter);
}
Then
drawRedCircle(20, 40, 12); //draws a red circle at 20, 40 with a diameter of 12.
Important Things to Remember about Parameters:
• You must pass the same number of parameters as defined in the function.
• When a parameter is passed, it must be of the same type as declared within the arguments
in the function definition. An integer must be passed into an integer, a floating point into a floating point, and so on.
• The value you pass as a parameter to a function can be a literal value (20, 5, 4.3, etc.), a variable (x, y, etc.), or the result of an expression (8 3, 4 * x/2, random(0,10), etc.)
• Arguments act as local variables to a function and are only accessible within that function.
Task:
Create a picture of an object made up of different shapes and colors (ex. below) where your code uses arugements for the color, size, etc have your code make multiple copies of the object.
Create a picture of an object made up of different shapes and colors (ex. below) where your code uses arugements for the color, size, etc have your code make multiple copies of the object.
WHY VOID?
Maybe you haven't wondered why "void" is written before all the functions, but I sure would have by now. Well...void is the "ReturnType" Void simply means that it will return no value. Hence, nothing is brought "back" when it runs the function. HOWEVER THIS CAN ALL CHANGE!
Imagine the function declared as:
float pythag(int a, int b){
float c=sqrt(a*a+b*b);
return c;
}
This now will return the value of c into the function. Therefore we if ran the code now
float hyp=pythag(5,7);
hyp will become the value of a hyptoneuse of a triangle with base 5 and height 7.
TASK: Copy the code below and describe in words how the program works
void setup() {
size(200,200);
}
void draw() {
background(0);
stroke(0);
// Top left square
fill(distance(0,0,mouseX,mouseY));
rect(0,0,width/2 - 1,height/2 - 1);
// Top right square
fill(distance(width,0,mouseX,mouseY));
rect(width/2,0,width/2 - 1,height/2 - 1);
// Bottom left square
fill(distance(0,height,mouseX,mouseY));
rect(0,height/2,width/2 - 1,height/2 - 1);
// Bottom right square
fill(distance(width,height,mouseX,mouseY));
rect(width/2,height/2,width/2 - 1,height/2 - 1);
}
float distance(float x1, float y1, float x2, float y2)
{
float dx = x1 - x2;
float dy = y1 - y2;
float d = sqrt(dx*dx + dy*dy);
return d;
}
Maybe you haven't wondered why "void" is written before all the functions, but I sure would have by now. Well...void is the "ReturnType" Void simply means that it will return no value. Hence, nothing is brought "back" when it runs the function. HOWEVER THIS CAN ALL CHANGE!
Imagine the function declared as:
float pythag(int a, int b){
float c=sqrt(a*a+b*b);
return c;
}
This now will return the value of c into the function. Therefore we if ran the code now
float hyp=pythag(5,7);
hyp will become the value of a hyptoneuse of a triangle with base 5 and height 7.
TASK: Copy the code below and describe in words how the program works
void setup() {
size(200,200);
}
void draw() {
background(0);
stroke(0);
// Top left square
fill(distance(0,0,mouseX,mouseY));
rect(0,0,width/2 - 1,height/2 - 1);
// Top right square
fill(distance(width,0,mouseX,mouseY));
rect(width/2,0,width/2 - 1,height/2 - 1);
// Bottom left square
fill(distance(0,height,mouseX,mouseY));
rect(0,height/2,width/2 - 1,height/2 - 1);
// Bottom right square
fill(distance(width,height,mouseX,mouseY));
rect(width/2,height/2,width/2 - 1,height/2 - 1);
}
float distance(float x1, float y1, float x2, float y2)
{
float dx = x1 - x2;
float dy = y1 - y2;
float d = sqrt(dx*dx + dy*dy);
return d;
}
Create a program where the user must click on certain things, and different things are altered. Your code must encorporate the knowledge learned in this lesson.