Week 05

Functions: the basics

We have used functions before......

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, Yotam Mann

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.

  1. Modular

  2. 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;
}

Here we have 3 functions:

  1. Drawing

  2. Bouncing

  3. Moving

Let's make with functions.

function move

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

function bounce

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

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 and Call

Define

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

Call functions:

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

Assignment

Make a project with your own function.

Schedule for Next Week Thursday OR Friday

보강 시간 입력 바랍니다. 다음 주 목/금 중 가능시간