What is programming?

Programming is explaining to a computer how to solve a task. Imagine you go on holiday and a friend has to take care of your home and other tasks. You have to explain him what to do. He is very precise but a little dumb. So you have to explain it step by step.

Static sketches and Interactive sketches

Static sketches are static, meaning they can't show a moving ball or so. They just run once.

This is a typical static sketch in processing:

 size(600,600);
 rect (200,200,30,40);

You can't have functions in static mode.

This is a typical Interactive sketch:

void setup() {
  size(400, 400);
  stroke(255);
  background(192, 64, 0);
}
   
void draw() {
  line(150, 25, mouseX, mouseY);
}

quote:

A program written as a list of statements (like the 1st examples) 
is called a static sketch. In a static sketch, a series of functions are 
used to perform tasks or create a single image without any animation or 
interaction. Interactive sketches are drawn as a series of frames, 
which you can create by adding functions titled setup() and 
draw() as shown in the 2nd code. These are built-in functions 
that are called automatically.

This quote stems from a tutorial:

https://www.processing.org/tutorials/overview/

General rules:

• In Interactive sketches you can write your own functions (only in interactive sketches).

• setup and draw are Functions. They are built-in functions that are called automatically.

• They are required (at least setup is).

• Nearly all sketches are Interactive sketches.

• You need setup() to write your own functions.

• We can't have functions inside another function in Java.

• setup() runs once, draw() runs on and on.

What is a function?

In math a function receives some values (x), works with them and returns a value (y):

f(x) = 3*x + 4;

f(3) = 13;

In programming, a function is a block of code. You can think of a function as defining a new command for the computer to learn.

Again, it receives some values (the parameters), works with them and returns a value (the result or return value). So it is like a small factory.

Let's look at the functions we already know:

void setup() { 
  size(400, 400);
  stroke(255);
  background(192, 64, 0);
}

The function setup has

• a name: setup

• it doesn't receive any parameters. Therefore the brackets ( and ) are empty.

• it doesn't return anything, therefore it says void before it. It returns nothing (empty, void).

• its text/body is within { and }

Your own functions always follow the same structure.

Also line() is a function. It receives 4 parameters inside the brackets ( and ) and returns nothing (void). It just does something, drawing the line according to its parameters. Hence the parameters are very important.

Also draw() is a function.

A function that just does something

A function that just does something without getting a parameter or without returning something is rather dumb. Nevertheless it's still recommend since it can structure what happens in draw(): With functions you have defined blocks of code that get called from draw() instead of having endless lines within draw(). The function draw() gets easier to read.

The function rightAngle() is declared after draw() and is called in draw().

A function never gets called automatically (apart from setup(), draw() and other in-build functions of processing).

void setup() {
  size(600, 500);
  noFill();
  stroke(255, 200, 120);
  strokeWeight(3);
}
  
void draw() { 
  background(0);
  rightAngle();
} 
    
void rightAngle() {
  line (100, 100, 200, 100);
  line (200, 100, 200, 200);
}

A function with parameters

A function with parameters is more useful:

void setup() {
  size(600, 500);
  noFill();
  stroke(255, 200, 120);
  strokeWeight(3);
}
        
void draw() {
  background(0);
  rightAngle(260, 180);
}
    
void rightAngle(float startX, float startY) {
  line (startX, startY, startX+100, startY);
  line (startX+100, startY, startX+100, startY+100);
}

A function that returns a result

Now let's look at a function that really returns something.

void setup() {
   // init (runs only once)
   size(800, 600);
} // func`
       
void draw() {
  // runs on and on
  background(255); 
  int a1;
  // get a value from the function 
  a1 = add( 3, 6);
  // show the value
  fill(0);
  text(a1, 100, 100);
} // func
     
int add(int toAdd1, int toAdd2) {  // start of function 
  int buffer;
  // we evaluate a result
  buffer =  toAdd1 + toAdd2;
  // we return the result
  return buffer;
} // func

add() is the function that really returns something. It can receive 2 parameters which are added together. The result is returned.

Instead of void, the line of the function starts with int since it returns a value of the type int.

The function add() isn't called automatically (like setup and draw) but we have to call it ourselves in draw(). When we call it, we need to pass it 2 parameters (3 and 6) and let draw() receive a result which we store in the variable a1 (which is of type int like the return type of the function).

Please read this sketch carefully. You must understand everything in it. If not come back and ask. Copy the sketch into processing and play with it. Make a new sketch with a function minus() and test it.

We have to distinguish where we define the function and where we call the function.

The call of the function must match the definition of the function:

• Number of parameters (2)

• Type of parameters (two times int)

• the type of the return value must match the type of a1.

We now taught processing a new command: add().