Functions: the basics

ellipse(100,100,100,100);

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

These are library functions. It is done by P5js library. For example, tone.js is a musical library which has functions already defined by the developer, Yotam Mann

**We did not define:**

function ellipse(){stroke(10,10,10,10);rotate(1,1,1,10);}

**But we called: **

ellipse(10,10,10,10);

Modular

Reusable

var ball = {x : 300,y : 200,xspeed : 4,yspeed : -5}function setup() {createCanvas(400, 400);}function draw() {background(220);ellipse(ball.x,ball.y,20,20);if (ball.x>width || ball.x<0){ball.xspeed = ball.xspeed*-1;}if (ball.y>height || ball.y<0){ball.yspeed = ball.yspeed*-1;}ball.y = ball.y + ball.yspeed;ball.x = ball.x + ball.xspeed;}

Drawing

Bouncing

Moving

function move(){ball.y = ball.y + ball.yspeed;ball.x = ball.x + ball.xspeed;}

function bounce(){if (ball.x>width || ball.x<0){ball.xspeed = ball.xspeed*-1;}if (ball.y>height || ball.y<0){ball.yspeed = ball.yspeed*-1;}}

function display(){ellipse(ball.x,ball.y,20,20);}

var ball = {x : 300,y : 200,xspeed : 4,yspeed : -5}function setup() {createCanvas(400, 400);}function draw() {background(220);move();bounce();display();}function move(){ball.y = ball.y + ball.yspeed;ball.x = ball.x + ball.xspeed;}function bounce(){if (ball.x>width || ball.x<0){ball.xspeed = ball.xspeed*-1;}if (ball.y>height || ball.y<0){ball.yspeed = ball.yspeed*-1;}}function display(){ellipse(ball.x,ball.y,20,20);}

**Define functions:**

function move(){ball.y = ball.y + ball.yspeed;ball.x = ball.x + ball.xspeed;}function bounce(){if (ball.x>width || ball.x<0){ball.xspeed = ball.xspeed*-1;}if (ball.y>height || ball.y<0){ball.yspeed = ball.yspeed*-1;}}function display(){ellipse(ball.x,ball.y,20,20);}

**Call functions:**

move();bounce();display();