Week 05

We have used functions before......
1. Function we are calling 'ellipse function" to make ellipse..
1
ellipse(100,100,100,100); 
Copied!
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.
1
function setup() {
2
  createCanvas(500, 500);  
3
}
Copied!
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:
1
function setup(){    
2
  ellipse(10,10,10,10);
3
 }
Copied!
But we did not call: 
1
 setup();
2
 
Copied!
ellipse()
We did not define:
1
 function ellipse(){
2
      stroke(10,10,10,10);
3
      rotate(1,1,1,10); 
4
 }
5
​
Copied!
But we called: 
1
ellipse(10,10,10,10);
2
​
Copied!
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.
1
var ball = {    
2
  x : 300,    
3
  y : 200,    
4
  xspeed : 4,    
5
  yspeed : -5
6
}
7
​
8
function setup() {
9
  createCanvas(400, 400);
10
}
11
​
12
function draw() {
13
  background(220);
14
	ellipse(ball.x,ball.y,20,20);
15
  
16
  
17
  	if (ball.x>width || ball.x<0){
18
    ball.xspeed = ball.xspeed*-1;
19
    }
20
  	if (ball.y>height || ball.y<0){
21
    ball.yspeed = ball.yspeed*-1;
22
    }
23
  
24
    ball.y = ball.y + ball.yspeed;
25
    ball.x = ball.x + ball.xspeed;
26
  
27
}
Copied!
​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
1
function move(){
2
  ball.y = ball.y + ball.yspeed;
3
  ball.x = ball.x + ball.xspeed;
4
}
Copied!
function bounce
1
function bounce(){
2
	if (ball.x>width || ball.x<0){
3
    ball.xspeed = ball.xspeed*-1;
4
    }
5
  	if (ball.y>height || ball.y<0){
6
    ball.yspeed = ball.yspeed*-1;
7
    }
8
}
Copied!
function display
1
function display(){
2
  	ellipse(ball.x,ball.y,20,20);
3
}
Copied!
​https://editor.p5js.org/kdoodoo/sketches/ByW1H_x9X​
1
var ball = {    
2
  x : 300,    
3
  y : 200,    
4
  xspeed : 4,    
5
  yspeed : -5
6
}
7
​
8
function setup() {
9
  createCanvas(400, 400);
10
}
11
​
12
function draw() {
13
  background(220);  
14
  move();
15
  bounce();
16
  display();
17
}
18
​
19
function move(){
20
  
21
    ball.y = ball.y + ball.yspeed;
22
    ball.x = ball.x + ball.xspeed;
23
}
24
​
25
function bounce(){
26
  	if (ball.x>width || ball.x<0){
27
    ball.xspeed = ball.xspeed*-1;
28
    }
29
  	if (ball.y>height || ball.y<0){
30
    ball.yspeed = ball.yspeed*-1;
31
    }
32
}
33
​
34
function display(){
35
  	ellipse(ball.x,ball.y,20,20);
36
}
Copied!
Define and Call
Define
Define functions:
1
function move(){
2
  
3
    ball.y = ball.y + ball.yspeed;
4
    ball.x = ball.x + ball.xspeed;
5
}
6
​
7
function bounce(){
8
  	if (ball.x>width || ball.x<0){
9
    ball.xspeed = ball.xspeed*-1;
10
    }
11
  	if (ball.y>height || ball.y<0){
12
    ball.yspeed = ball.yspeed*-1;
13
    }
14
}
15
​
16
function display(){
17
  	ellipse(ball.x,ball.y,20,20);
18
}
Copied!
Call
Call functions:
1
  move();
2
  bounce();
3
  display();
Copied!
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​