Week 5 — Functions and Interactions

Introduction

• Functions perform predefined/user defined actions.
• They provide modularity.
• They provide reusability or parameterization.

Modularity

Anatomy of a function

// Follow camel casing for the function name
function functionName()
{
    /*
    This is the function body
    Code to execute
    */
}

The function is declared as shown the above code-block.

When a function needs to be invoked / or to make a function call the following syntax is used.

/* function call */
functionName();

In P5js, there is no need to call functions setup() and draw()

To make a function modular, related logic in one function can be written as separate function.

For example

Normal code

function setup() {
    createCanvas(400, 400);
    background(220);
    /* Aligns text to be at center */
    textAlign(CENTER);
    text("Hello there!", width / 2, height / 2);
}

The idea of modularity is a follows.

function setup() {
    createCanvas(400, 400);
    background(220);
    greetings();
}

function greetings() {
    /* Aligns text to be at center */
    textAlign(CENTER);
    text("Hello there!", width / 2, height / 2);
}

Reusability

A function can be called/invoked as many times as desired to the same thing. If a function takes arguments, it can be called to the same things slightly differently.

For example, here is a function that takes in coordinates and size to make a red circle.

function setup(){
    createCanvas(400,400);
    background(220);
}

function draw(){
    redCircle(50, 50, 100);
    redCircle(300,300,50);
    redCircle(200,200,75);
}

function redCircle(x-center, y-center, radius){
    fill('red');
    circle(x-center, y-center, radius);
}

Functions that return data

A function that returns nothing is considered to return void. They just perform actions and no data is retrieved from them to assign them to a variable.

Functions can also return data in the form of all the fundamental data types and well as user defined objects.

For example

function setup() {
    createCanvas(400, 400);
    background(220);
    /* Aligns text to be at center */
    textAlign(CENTER);
    data = greetings();
    text(data, width / 2, height / 2);
}

function greetings() {
    return "Hello there! " + floor(random(30000, 750000));
}

Built-in Functions

Some useful built-in functions in P5js are

keyPressed()

mousePressed()

mouseClicked()

mouseMoved()

These functions are used just like setup and draw functions in P5js. i.e., Declare the function write the desired logic in the function body.

function setup(){
    createCanvas(400,400);
    // write setup
}

function draw(){
    // write code to draw
}

function keyPressed(){
    // write what to do on key press
}

More information on these functions here

• keyPressed()
• mousePressed()
• mouseClicked()
• mouseMoved()

Note:

• keyPressed() and keyTyped() are similar functions except keyTyped is case sensitive.
• mouseClicked() does what both mousePressed() and mouseReleased() together do.

Example sketches

The p5 sketches for this week, from the course repo.

function setup() {
  createCanvas(400, 400);
  background(220);
  greetings();
}

function greetings() {
  /* Aligns text to be at center */
  textAlign(CENTER);
  text("Hello there!", width / 2, height / 2);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  redCircle(mouseX, mouseY, 50);
}

function redCircle(x, y, circleRadius) {
  fill("red");
  ellipse(x, y, circleRadius * 2);
}

var rectPosX, rectPosY;

function setup() {
  createCanvas(400, 400);
  background(220);
  rectPosX = 0;
  rectPosY = height / 2;
}

function draw() {
  /* Depending on the value of the randomBool()
    The position of the rect angle is changed
  */
  if (randomBool() === true) {
    rectPosX += 12;
    rectPosY += 12;
  } else {
    rectPosY -= 12;
  }
  fill(0);
  rect(rectPosX, rectPosY, 12);
}

/* Returns a boolean */
function randomBool() {
  /* This function essentially replicates coin toss */
  var isTrue = true;
  var toss = random(0, 1);
  if (toss > 0.5) {
    isTrue = true;
  } else {
    isTrue = false;
  }
  return isTrue;
}

var posX, posY;
var spaceShipColor;

function setup() {
  createCanvas(400, 400);
  posX = width / 2;
  posY = height / 2;
  spaceShipColor = color(180);
}

function draw() {
  background(240);
  drawSpaceShip(posX, posY);
}

function drawSpaceShip(posX, posY) {
  fill(spaceShipColor);
  beginShape();
  vertex(posX - 45, posY - 45);
  vertex(posX + 45, posY);
  vertex(posX - 45, posY + 45);
  endShape(CLOSE);
}

/* 
 ASCII Values for Keys
 More info on 
 keyPressed: https://p5js.org/reference/#/p5/keyPressed
 keyCode: https://p5js.org/reference/#/p5/keyCode

 W = 87
 A = 65
 S = 83
 D = 68

*/

function keyPressed() {
  /* This moves the space ship */
  if (keyCode === 87) {
    posY -= 12;
  } else if (keyCode === 65) {
    posX -= 12;
  } else if (keyCode === 83) {
    posY += 12;
  } else if (keyCode === 68) {
    posX += 12;
  }
}

function mouseClicked() {
  /* Acts as both mousePressed and mouseReleased */
  /* sets a random space shit color */
  spaceShipColor = color(random(255), random(255), random(255));
}

/* Uncomment as needed! */

/* function mouseMoved() {
  posX = mouseX;
  posY = mouseY;
} */

/* function mousePressed() {
  // sets space shit color
  spaceShipColor = color("blue");
}

function mouseReleased() {
  // Resets space ship color 
  spaceShipColor = color(180);
} */