# Week 05

## 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://yotammann.info/)

#### <https://tonejs.github.io/>

## Function needs "Define" and "Call"

#### function setup()

{% hint style="success" %}

#### We defined setup:

```
function setup(){    
  ellipse(10,10,10,10);
 }
```

{% endhint %}

{% hint style="danger" %}

#### But we did not call:&#x20;

```
 setup();
 
```

{% endhint %}

#### ellipse()

{% hint style="danger" %}
**We did not define:**

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

```

{% endhint %}

{% hint style="success" %}
**But we called:**&#x20;

```
ellipse(10,10,10,10);

```

{% endhint %}

### These are library functions... we are using p5.js library.

## Let's 'Define' and 'Call' Your Own Function.&#x20;

1. Modular&#x20;
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

{% hint style="success" %}
**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);
}
```

{% endhint %}

#### Call

{% hint style="success" %}
**Call functions:**

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

{% endhint %}

## 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>