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

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

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

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

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

  1. Study the horizontal ball bouncing sketch below

        

                        Sketch –  ball bouncing sketch

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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

}

  1. 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.