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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://icl.doyoki.com/week-05.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.