Functions – Divide and conquer

Functions allow us to divide our code into small jobs/tasks. Functions allow us to reuse code. The Syntax of a function is as follows

Let us define a function called drawBall() that will draw a ball on the canvas

var y=200;

var x=200;

function drawBall() {

var size=50;

fill(255, 0, 0); // set brush color

ellipse(x, y, size, size);

}

Note: A variable created inside a function is not visible to other functions. In the above code variable size will not be visible to other functions.

Calling/Executing a function

To use the function i.e. make the computer execute the code inside the function, we have to call the function. To call a function type the function name followed by round brackets and a semi colon. See line 18 of the below sketch

In the sketch below we have called the function twice (at line 18 and 21). This is why we see 2 balls when we run the sketch

Sketch – drawBall() function

var y=200;

var x;

function drawBall() {

var size=50;

fill(255, 0, 0);

ellipse(x, y, size, size);

}

function setup() {

createCanvas(600, 400);

}

function draw() {

background(220);

x=200;

drawBall();// execute drawBall()

x=270;

drawBall();//execute drawBall()

}

Exercise: Define a function called drawCart() to draw a cart on the canvas. Call the function 3 times inside draw() to display 3 carts on the canvas. See figure below

Sketch – drawCart() function

var y=200;

var x;

function drawCart() {

fill(16,48,90); // wheel color

ellipse(x-36, y, 30, 30); // left wheel

ellipse(x+36, y, 30, 30); // right wheel

fill(104,163,242); // body color

rect(x,y-15,120,12); // draw body

}

function setup() {

createCanvas(600, 400);

rectMode(CENTER);

}

function draw() {

background(220);

x=150;

drawCart();

x=300;

drawCart();

x=450;

drawCart();

}

Function Arguments (Parameters)

Functions can be defined to receive values. Let us modify the drawBall() function to receive 3 values

1. ball size

2. position of the ball on the x axis

3. position of the ball on the y axis

function drawBall(size, xPos, yPos) {

fill(255, 0, 0);

ellipse(xPos, yPos, size, size);

}

The variables in between the round brackets (size, xPOs, yPos) are called Parameters. Parameters receive the values passed to the function.

Now when we can call drawBall(), we can pass values to it. For example

drawBall(40,100,200); // draw ball of size 40 at 100,200

drawBall(60,200,200); // draw ball of size 60 at 200,200

Sketch – function parameters

function drawBall(size, xPos, yPos) {

fill(255, 0, 0);

ellipse(xPos, yPos, size, size);

}

function setup() {

createCanvas(600, 400);

rectMode(CENTER);

}

function draw() {

background(220);

drawBall(40,100,200);

drawBall(60,200,200);

drawBall(80,300,200);

}

Exercise: Add 2 parameters to the drawCart() function to receive the location of the cart on the x axis and the y axis. Then in draw call the drawCart() function 3 times. Each time pass diffrent values to draw the cart at different locations on the canvas.

Sketch – drawCart() with parameters

function drawCart(xPos, yPos) {

fill(16,48,90); // wheel color

ellipse(xPos-36, yPos, 30, 30); // left wheel

ellipse(xPos+36, yPos, 30, 30); // right wheel

fill(104,163,242); // bodyPos color

rect(xPos,yPos-15,120,12); // draw bodyPos

}

function setup() {

createCanvas(600, 400);

rectMode(CENTER);

}

function draw() {

background(220);

drawCart(100,200);

drawCart(300,200);

drawCart(500,200);

}

Practice Questions

Study the horizontal ball bouncing sketch below

Sketch – ball bouncing sketch

var xForward = true;

var x;

var y;

function setup() {

createCanvas(600, 400);

x=200;

y=height/2;

}

function draw() {

background(220);

// draw ball

fill(237, 34, 93);

ellipse(x, y, 50, 50);

//detect collision and change direction

var ballRight=x+(50 / 2);

var ballLeft=x-(50 / 2);

if (xForward == true && ballRight >= width) {

xForward=false;

}

else {

if (xForward == false && ballLeft <= 0) {

xForward=true;

}

//move ball

if (xForward == true) {

x++;

}else {

x--;

}

Divide the code in the draw function into 3 functions drawBall(), detectWallCollision() and moveBall(). The draw function should now be as follows

function draw() {

background(220);

drawBall(50,x,y);

detectWallCollision(x,50);

moveBall();

}

Draw a sketch to display multiple balls on the canvas, each bigger than the other. See figure below

Hint: Define 2 variables in draw(). First variable to keep track of where to draw the ball on the X axis and the other for the size of the ball and call drawBall() in a while loop.