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

https://tonejs.github.io/

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

https://editor.p5js.org/kdoodoo/sketches/SJyXQ_g5m

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);
}

https://editor.p5js.org/kdoodoo/sketches/ByW1H_x9X

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.

https://goo.gl/forms/FslZlLy46wAns0HI3

Schedule for Next Week Thursday OR Friday

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

https://goo.gl/forms/WFa0kI75GirvCU8B3