05_functions.md

Organization: Functions

book - Getting Started with p5.js

• Getting Started with p5.js book
  • Ebook (free with NYU Library login)
  • git source code
• Chapter 9 Functions
  • sketches

tutorials: Modularity

• video 5.1: Function Basics (~13 min)
  • sketch - Function Basics ball
  • sketch - Bouncing ball with functions

tutorials: Re-usability

• video 5.2: Function Parameters and Arguments (~11 min)
  • sketch - lollipop
  • sketch - Dice no functions
  • sketch - Dice w/ functions
  • sketch - Robots from Getting Started with p5.js Code Example

• video 5.3: Functions and Return (~8 min)
  • sketch - milesToKm
  • sketch - Implementing distance function

tutorials: Object Literals

• Video Object Literals
  • sketch - JavaScript Objects

Going Further

• Coding Challenge video: Recursion
  • sketch - recursion code example
• Coding Challenge video: Fractal Tree - note this video uses the p5.dom function createSlider() which we have yet to cover in class!
  • sketch - fractal tree code example
  • Tutorial: Recode Morisawa series by John Maeda

---

5. Recap, Explore and Experiment - Functions

Ex 5.1 bouncing ball

Functions are a versatile tool for organizing your code and building more complex sketches. Let's explore using an example sketch from the video tutorial.

sketch - Ex 5.1 bouncing ball

Sketch of a ball bounding within the edges of the canvas.

sketch - Ex 5.1 bouncing ball function

Same behavior using a user defined function draw_ball and the object literal ball.

A few things to note about the second sketch:

• The intent of the code is hinted at by the function name draw_ball.
• The intent of the variables is hinted at by the variable name of the object literal, ball.

As we go from simple sketches to more complex ones functions and object literals can help us by making our intention for the code more explicit.

Study the code and note the differences.

> bouncing ball code

let x = 160;
let y = 90;
let xspeed = 5;
let yspeed = 2;
let r = 20;

function setup() {
  createCanvas(320, 180);
}

function draw() {
  background(0);
  ellipse(x, y, r * 2, r * 2);
  x += xspeed;
  y += yspeed;
  if (x > width - r || x < r) {
    xspeed = -xspeed;
  }
  if (y > height - r || y < r) {
    yspeed = -yspeed;
  }
}

> bouncing ball function code

let ball = {
  x: 160,
  y: 90,
  xspeed: 5,
  yspeed: 2,
  r: 20,
};

function setup() {
  createCanvas(320, 180);
}

function draw() {
  background(0);
  draw_ball();
}

function draw_ball() {
  ellipse(ball.x, ball.y, ball.r * 2, ball.r * 2);
  ball.x += ball.xspeed;
  ball.y += ball.yspeed;
  if (ball.x > width - ball.r || ball.x < ball.r) {
    ball.xspeed = -ball.xspeed;
  }
  if (ball.y > height - ball.r || ball.y < ball.r) {
    ball.yspeed = -ball.yspeed;
  }
}

> Object Literals and naming

The object literal begins at the top of the sketch with the code let ball = { .... All the variables related to the ball are grouped inside the object literal which begins with the curly bracket. The variables inside the object literal are later refered to using the dot syntax: ball.x. eg. ellipse(ball.x, ...

It's a good practice to use object literal for related global variables to avoid naming conflicts with p5js. For example a global variable named scale or image can unintentionally conflict with the p5js global of the same name.

Also recommended is to use underscore in your global function names, eg. draw_ball, to avoid p5js naming conflict.

> Try

• add a color variable to the sketch

sketch - Ex 5.1 bouncing color

• create a button to adjust the speed of the ball

sketch - Ex 5.1 bouncing speed

Ex 5.2 parameter variables

What if we wanted to have two balls bouncing?

We could duplicate the ball variable and add variable ball2.

What about the draw_ball function? It is tied to the ball variable. Do we need to create a draw_ball2 function for ball2?

Not necessarily, we could generalize the function draw_ball to work with any ball using a parameter variable. Here is the sketch re-mixed for two balls:

sketch - Ex 5.2 bouncing two

let ball = {
  x: 160,
  y: 90,
  xspeed: 5,
  yspeed: 2,
  r: 20,
  c: 'red'
};

let ball2 = {
  x: 80,
  y: 90,
  xspeed: 2,
  yspeed: 5,
  r: 20,
  c: 'green'
};

function setup() {
  createCanvas(320, 180);
}

function draw() {
  background(0);
  draw_ball(ball);
  draw_ball(ball2);
}

function draw_ball(b) {
  fill(b.c);
  ellipse(b.x, b.y, b.r * 2, b.r * 2);
  b.x += b.xspeed;
  b.y += b.yspeed;
  if (b.x > width - b.r || b.x < b.r) {
    b.xspeed = -b.xspeed;
  }
  if (b.y > height - b.r || b.y < b.r) {
    b.yspeed = -b.yspeed;
  }
}

---

Getting Started with p5.js book sketches

Sketches from the Getting Started book
You are invited to remix and combine them to further explore.

• Chapter 9 Functions

Ex_09_01 Roll the Dice
Ex_09_02 Another Way
Ex_09_03 Draw the Owl
Ex_09_04 Two’s Company
Ex_09_05 An Owl Function
Ex_09_06 Increasing the Surplus Population
Ex_09_07 Owls of Different Sizes
Ex_09_08 Return a Value
Ex_09_99 Robot Function