1. Function we are calling 'ellipse function" to make ellipse..
ellipse(100,100,100,100);
But we did not make/define this function as "ellipse(x, y, width, height){ .... .... ...}"
We are just using the function!!
2. Function setup started functioning when the page opens without calling it...
But we made/defined it.
function setup() {
createCanvas(500, 500);
}
Both are functions but it was either 'Defined Previously' OR 'Functioning before Calling it.'
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,
Function needs "Define" and "Call"
function setup()
We defined setup:
function setup(){
ellipse(10,10,10,10);
}
But we did not call:
setup();
ellipse()
We did not define:
function ellipse(){
stroke(10,10,10,10);
rotate(1,1,1,10);
}
But we called:
ellipse(10,10,10,10);
These are library functions... we are using p5.js library.
Let's 'Define' and 'Call' Your Own Function.
Modular
Reusable
We made ball bouncing with ball object.
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;
}