Link Search Menu Expand Document

Script 04 - Program Flow


ch02_01

Topics

  • Flow of a program
    • Functions
    • User interaction
    • if-condition

Learning Objectives

With this session you learn different ways to modify the execution flow of a program.
Specifically you

  • understand the basics of how code is structured and executed,
  • understand what function definition and function call are,
  • understand the difference between a function call and a code block,
  • know the importance of code readability,
  • know how to implement user mouse and key inputs,
  • know how to implement if, if..else, and while conditional statements, and
  • with that understand how you can control the flow of a program.

Program Flow

You can understand the flow of a program as the order in which commands and function calls are executed. It is crucially important to understand early on that the order in which you write and organize the code in the code file has little to do with the order in which commands are actually executed. This order depends on constructs such as functions, if- and while-statements.

Curly Brackets {}

The most important component for understanding program flow are {}. The brackets create one block of code. Code inside of the {} is executed line by line.

{} are attached to different types of program flow entities, such as functions, conditionals and loops. These entities have a “title line” indicating, what is defined in the following code block, followed by the {} for the actual code.

function draw(){ // "title line" + open bracket 

    // Code block 
    // Do something
}

Get in the habit of directly after writing the opening {, to also write the closing }. There is NEVER the case that you have only one of the brackets. They are BFFs and always, always appear together. Hence, write them together and then fill in the code inside of the brackets in the next step.

When trying to understand the flow of a program, look for the brackets first. They give you an understanding of the different code blocks.

Semicolons

JavaScript is quite flexible about semicolons. It usually gives no errors when you misplace them. However, you should get in the habit of using them correctly, as it helps to visually structure the code. Also, other programming languages are very strict about the correct placement of semicolons and if you ever want to switch to a different language you should know how to place them.

There is NEVER a ; directly after an opened parenthesis or bracket.

{; -> DOES NOT EXIST EVER!

After } there is also no ;. This is confusing, I know, because you are closing the code block. But also after code blocks, there are no ;.

You can remember it as

  • Whenever you define a block of code with {} there is no following ;
  • Whenever you call or execute something there is a following ;

We will get to know more cases where you need to use the ;, e.g., when defining variables.

Look at the following example and understand where there are semicolons and where not:

function setup() {
    createCanvas(250, 250);
    background(255); //short-cut for white
}


function draw() {
    fill(0,0,255);
    stroke(255, 0, 0);
    strokeWeight(10);
    ellipse(125, 125, 100, 100);
}

The same example with in line comments as explanations:


function setup() { // "title line" and open brackets, no semicolon

    createCanvas(250, 250);             //function call with semicolon
    background(255);                    //function call with semicolon
} //end of code block with a closing bracket, hence there is no semicolon


function draw() { // "title line" and open brackets, no semicolon
    fill(0,0,255);                  //function call with semicolon
    stroke(255, 0, 0);              //function call with semicolon
    strokeWeight(10);               //function call with semicolon
    ellipse(125, 125, 100, 100);    //function call with semicolon
} //end of code block with a closing bracket, hence there is no semicolon

Code Readability

You should have gotten an idea now that the structure of code is crucial. To better understand what is going on, the visible structure of code must always represent its functional structure.

Hence, there are many rules on how to layout your code. The most basic ones are:

  • One line per function call.
  • Opening curly brackets come after the title line.
  • Closing curly brackets get their own line.
  • Indent the content between two brackets.
// codeReadability
// https://openprocessing.org/sketch/1018271

// Not acceptable,
//...but the code still works:
function setup()
{
createCanvas(400, 400); background(255); } //short-cut for white

function 

draw(){fill(0,                   0,255);
  stroke(255,0,0);strokeWeight(10);
                 ellipse(125, 125, 100, 100);
}

// Also not acceptable,
//...but the code still works:
function setup() {createCanvas(400, 400); background(255); }function draw() {fill(0,0,255);stroke(255, 0 , 0);strokeWeight(10);ellipse(125, 125, 100, 100);}

On a Side Note: In the openProcessing editor, the hotkey command+B will auto-indent the code, meaning, structure the code properly for you.

Functions

So far, we have used many different function calls for drawing.

This is the call to the function line:

line(10, 10, 50, 50);

This means we are calling the function line, to be executed, which is the task of drawing a line from the point 10, 10 to the point 50, 50.

But where is it defined how the line is actually drawn, meaning the coloring of the pixels?

Well somewhere inside the p5 library. line() is a pre-defined function, which we don’t have to make from scratch but that we can simply use. Similar to if we were baking a pizza and we are using a can of pre-made tomato sauce. line is the tomate sauce. We can just use it and do not need to worry about how it is defined.

But somewhere inside the p5 library there must be defined what should actually happen if the function line() is called. This is called a function definition.

Function Definition

To define a function you need the keyword function followed by a functionname (given or of your choice), followed by (), followed by {...}. What a function does is enclosed in the curly brackets.

function functionname(){

    // Code that is executed when we call the function
}

Functions define functionality blocks with fixed responsibilities or tasks.

Working with functions consists of two parts: the definition of that function and calling that function to execute it.

With our current knowledge we could define a line() function as follow:

// functionDefinition
// https://openprocessing.org/sketch/1254236

function theBestLineEverDrawn(x1, y1, x2, y2) {
    beginShape();
    vertex(x1, y1);
    vertex(x2, y2);
    endShape();
}

Later on, we will frequently write functions from scratch. Don’t worry about writing you own functions for now. Here we are talking about it in order to understand the flow of a program.

Function Call

To execute what is inside of a function, you have to call it. You call a function with its functionname, followed by (), optional arguments inside of those parenthese, followed by a ; as last element. We know this already.

// functionDefinition
// https://openprocessing.org/sketch/1254236

function theBestLineEverDrawn(x1, y1, x2, y2) {
    beginShape();
    vertex(x1, y1);
    vertex(x2, y2);
    endShape();
}



theBestLineEverDrawn(10, 10, 20, 20); // Calling the function somewhere in the code

System Loop

The code we have learned to use as base structure is actually two function definitions, namely the definition of the function setup() and of the function draw():


function setup() {

    ...

}

function draw() {

    ...
}

By filling these functions with code, we are defining what happens when the commands are called, hence, we define their functionality.

But when are we actually calling these commands? Well, in this specific case p5 takes care of calling these commands for us.

Interaction

// colorCircle - Step 1
// https://openprocessing.org/sketch/1018283

function setup() {
    createCanvas(250, 250);
    background (255);
    fill(255, 0, 0);
    noStroke();
}

function draw() {
    ellipse(125, 125, 100, 100);
}

As the draw() function is continuously called, we can make changes to it over time.

Such changes could be based on user interaction

Mouse Interaction

p5 gives a function definition, with which we can defined what should happen if the mouse is pressed:

function mousePressed() {

    // Define what should happen
}

p5 calls this function for us whenever the mouse is pressed. This is the same principle as when p5 calls the function setup() for us when the program is started.

Now we want to do the following:

If the mouse was pressed, change the color of the circle

// colorCircle - Step 2
// https://openprocessing.org/sketch/1018283

function setup() {
    createCanvas(250, 250);
    background (255);
    fill(255, 0, 0);
    noStroke();
}

function draw() {
    ellipse(125, 125, 100, 100);
}

// Called if the mouse was pressed
function mousePressed() {

    // Set the fill color to
    // randomly chosen values
    fill(random(255), random(255), random(255));
}

The random Function

The random function generates a random number 😁.

random(-50, 50);

When we call this function, it returns a value, the random number. Yes, functions can return data. We will come back to this.

fill(random(255), random(255), random(255));

Above, we are directly piping the return value of the random function as argument into the fill(r, g, b) function call. Functions can be nested. As of now, this should remain an exception for us!

Back to the functionality of random():

  • The function is given to us by p5, hence it is defined somewhere in the p5 library.
  • Each time the random() function is called, it returns an unexpected value within the specified range.
    • random(-5, 5) returns values between -5 and 5 (starting at zero, and up to, but not including, 5)
  • If only one argument is passed to the function, it will return a float between zero and the value of argument
    • random(5) returns values between 0 and 5 (starting at zero, and up to, but not including, 5)
  • https://p5js.org/reference/#/p5/random

Careful

Why does the following not work?

// colorCircleProblem
// https://openprocessing.org/sketch/1018291

function setup() {
    createCanvas(250, 250);
    background (255);
}

function draw() {
    fill(255, 0, 0);
    noStroke();
    ellipse(125, 125, 100, 100);
}

// Called if the mouse was pressed
function mousePressed() {

    // Set the fill color to
    // randomly chosen values
    fill(random(255), random(255), random(255));
}

Mouse Position

We can also use the current mouse position as input. This is not done with a function but with two values, so called variables provided by p5. This specific type of variable is called system variable. System variable are the variables that are given from the system in contrast to the variables that you are going to define yourself. We will come back to this.

mouseX
mouseY

We still need to learn all about variables. This is not the time. For now you can just remember that “inside” of mouseX we can access the current mouse position in x at all times, and in mouseY the current mouse position in y.

// colorCircleMove
// https://openprocessing.org/sketch/1018301

// (the rest of the code remains the same)


function draw() {
    ellipse(mouseX, mouseY, 50, 50);
}

Keyboard Interaction

Similar to the mouse pressed function, we can define what should happen if a key is pressed:

function keyPressed() {

    ...
}

Again, p5 calls this function for us whenever a key is pressed.

// https://openprocessing.org/sketch/1018312
// Color Circle Key Input

// (the rest of the code remains the same)

function keyPressed() {

    fill(random(255), random(255), random(255));
}

Example - How to Clear the Screen?

Idea: Pressing the key ‘c’ should clear the screen.

How to do this? 😱

Break the problem into subproblems!

  • Problem 1: If the ‘c’ key is pressed…
  • Problem 2: …clear the screen.

Problem 1 - If the ‘c’ key is pressed

Break the problem into subproblems!

  • Problem 1.1: If…
  • Problem 1.2: Identify the ‘c’ key…

The if Statement

If… do something.

This is called a conditional statement. It structures the flow of a program.

ch02_02

We check for a condition to be true:

// Pseudo code

if(condition is true) {

    // do this…
}

Notice that this is a code block with curly brackets, hence no semicolon afterwards.

Once again we have the structure:

// Pseudo code

if(condition is true) { // title line with opening bracket

    // Code
} // Closing bracket without a ;
Problem 1.2 - Identify the ‘c’ key…

Now, we want to check if the condition “key c is pressed” is true

// Pseudo code

if(key ‘c' is pressed) {
    Clear the screen…
}

For knowing which key is pressed, we can use the system variable key, kindly provided by p5.

key

We can compare the variable’s value with a specific character

key == 'c'

The == operator

This operator tests Is equal? and results in true or false.

// Pseudo code

1 == 2 -> false
1 == 1 -> true
'hello' == 'hello' -> true
'hello' == 'Hello' -> false

Finally, we have everything in place to solve problem 1.1. “If the c key is pressed”

// Color Circle Clearing

if(key == 'c') {

    //Clear the screen…
}

☝🏻 Always test each newly added code snippet individually!☝🏻

Where do we need to put this line of code in our circle move example?

Problem 1 ✔️

  • Do something when the ‘c’ key is pressed

Problem 2 - Clear the Screen

Let’s just fill the background again…

// Color Circle Clearing

if(key == 'c') {
    background(255);
}

Problem 1 ✔️

  • Do something when the ‘c’ key is pressed

Problem 2 ✔️

  • Clear the screen

The else Statement

You can also define what should happen if the condition in the if statement is not true. For that you need to use else.

// Color Circle Clearing - Step 4

function keyPressed() {

    if (key == 'c') {
        //Clear the screen…
        background(255);
    } else {
        fill(random(255), random(255), random(255));
    }
}

You can also create a chain of conditions with adding else if blocks:

// Color Circle Clearing - Step 5

if(key == 'c') {

    background(255);
}
else if(key == 'x') {

    background(0);

} else {

    fill(random(255), random(255), random(255));
}

You can have as many else if statements as you want…

if(value < 10) {

    // For 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

} else if(value < 15) {

    // For 10, 11, 12, 13, 14

} else if(value < 18) {

    // For 15, 16, 17

} else if(value < 20) {

    // For 18, 19

} else {
    // For all values >= 20
}

ch02_03
[quora]

Summary

  • {} define blocks of code.
    • There is no ; after such a code block.
  • Functions
    • Are defined with within {}
    • Need to be called in order for the code to execute.
    • Function calls are followed by a ;
  • A proper layout of the code is important.
    • How the code looks like should represents its functionality.
  • We can structure the program flow with user input
    • mousePressed()
    • mouseX, mouseY
    • keyPressed()
    • key
  • We can also structure the program flow within the code with a conditional statement
    • if(condition is true)

Use the reference 🚒


The End

⛵️ 🎢 🎡