# Week 06

## 1. Function with Parameters

#### Define with Parameter

```
fxunction sun(x,y,rays){
   ellipse(x,y,20,20);
      for(i = 0; i < rays; i++){
          rect(x-30,y+20,30,30);        
      }
}
```

#### Call with Parameters

```
 sun(10,10,100); 
```

#### You can call many more

```
 sun(10,10,100); 
 sun(20,20,110); 
 sun(30,30,120); 
 sun(40,40,130); 
```

## Example

#### Let's draw a lolipop..

```
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  fill(25,20,255);
  rect(90,120,20,100);
  
  fill(255,20,0);
  ellipse(100,100,100,100);

}

```

<https://editor.p5js.org/kdoodoo/sketches/HyAmvbGj7>

#### Lolipop with 'define' and 'call' function lolipop()

```
function setup() {  
  createCanvas(400, 400);
}

function draw() {  
  background(220);  
  lolipop();
  
  }
  
function lolipop(){    
  fill(25,20,255); 
  rect(90,120,20,100);    
  fill(255,20,0);  
  ellipse(100,100,100,100);
  
}
```

### Now lolipop function with parameters

#### Define with parameters: x, y, diameter&#x20;

```
function lolipop(x,y,diameter){    
  fill(25,20,255); 
  rect(x-10,y,20,100);
  
  fill(255,20,0);  
  ellipse(x,y,diameter,diameter);
}
```

#### Call with parameters: 100, 120, 150, 200, 300 .....

```
  lolipop(100,100,50);
  lolipop(200,120,100);
  lolipop(300,200,150);
```

#### <https://editor.p5js.org/kdoodoo/sketches/HJA4tbGsm>

```
function setup() {  
  createCanvas(400, 400);
}

function draw() {  
  background(220); 
  
  lolipop(100,100,50);
  lolipop(200,120,100);
  lolipop(300,200,150);


}
  
function lolipop(x,y,diameter){    
  fill(25,20,255); 
  rect(x-10,y,20,diameter);
  
  fill(255,20,0);  
  ellipse(x,y,diameter,diameter);
  
  
}
```

## 2. Function that returns a value

#### No value returned

```
elipse(10,10,10,10);  // no value returned just drawing a circle.
```

#### Value returned

```
random(0,255);    // it returns VALUE/NUMBER between 0 - 255.
```

### Let's Define with Parameter AND Return

```
function farenToCels(ff){
		var calculation = (ff - 32) *  (5/9);
    return calculation;    

}
```

### Let's Call

```
 var room = farenToCels(100);
 print(room);  // Will return a value
```

#### <https://editor.p5js.org/kdoodoo/sketches/HyLwxmfiQ>

```
function setup() {
  createCanvas(400, 400);
  var room = farenToCels(100);
  print(room);
  
  
  var ok = celsToFaren(37.777);
  print(ok);
  
}

function draw() {
  background(220);
}


function farenToCels(ff){
	var calculation = (ff - 32) *  (5/9);
    return calculation;    

}


function celsToFaren(cc){
	var calculation = (cc *(9/5) ) + 32;
    return calculation;    

}
```

## 3. Object

#### We learned simple object.

```
var bubble = {
    x:200,
    y:200
}
```

```
bubble.x;
bubble.y;
```

#### Object with function

```
var bubble = {
    x:200,
    y:200,
    display: function(){
        ellipse(this.x,this.y, 30,30);
    }
}
```

#### Function in the object  uses this.x and this.y &#x20;

```
ellipse(this.x,this.y, 30,30);
```

#### How to read object elements.

```
bubble.x;
bubble.y;

bubble.display();
```

## Example

### Define functions inside of the object : display and move

```
var bubble = {
  x:100,
  y:200,
  display: function(){
  		ellipse(this.x, this.y, 20,20);
  },
  move: function(){
  		this.x = this.x + random(-1,1);
    	this.y = this.y + random(-1,1);
  },
}
```

### Call functions inside of the object: bubble.display() and bubble.move()&#x20;

```
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
	
  bubble.display();
  bubble.move();
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/rk-AvQfim>

## 4. Array

#### List of values in the \[    ]

```
var number = 3;
var numbers = [5,3,4,3];
```

#### Similar to object in the {  }

```
var object = {
    x:3,
    y:5,
}
```

#### Array has indices, indexes    : 0, 1, 2, 3, 4, 5, 6....

```
var numbers = [2,4,7,-3]; // We have 0,1,2,3 indexes
```

### A. Access Values in the Array

```
var numbers = [2,4,7,-3]; // We have 0,1,2,3 indexes

var a = numbers[0];  // 2
var b = numbers[1];  // 4
var c = numbers[2];  // 7
var d = numbers[3];  // -3
```

```
var numbers = [100,50,90,70];
var number = 30;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill('red');
  ellipse(100,150, number, number);

  fill('blue');
  ellipse(200,250, numbers[1], numbers[1]);
  
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/Sk4k1NGj7>

### B. Array can have numbers, strings, objects.

```
var world = ["Spain", "Canada", "Austrailia", "Japan", "United_States", "Korea"];
print(world[4]);  // United_States
```

## Example

```
var world = ["Spain", "Canada", "Austrailia", "Japan", "United_States", "Korea"];
var indexxx = 0;

function setup() {  
  createCanvas(400, 400);
  }

function draw() {  
  background(220);      
  textSize(32);  
  text(world[indexxx], 40,300);  
  }

function mousePressed(){	
  indexxx = indexxx + 1;	

  if(indexxx == 4){	  // We NEVER get to Korea !!
    indexxx = 0;	    // indexxx == world.length
  }
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/H1jPb4Mom>

### world.length gives the last index of the array&#x20;

```
if(indexxx == world.length) // 6
```

## Example

#### Drawing 4 ellipses

```
var numbers = [100,50,90,70];
var number = 30;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill('red');
  ellipse(50,200, numbers[0], numbers[0]);
  ellipse(150,200, numbers[1], numbers[1]);
  ellipse(250,200, numbers[2], numbers[2]);
  ellipse(350,200, numbers[3], numbers[3]);  
  
}
```

#### Drawing 4 ellipses with for loop.

```
var numbers = [100,50,90,70];
var number = 30;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill('red');
  
  for(i = 0;i<4;i++){           
  		ellipse(100*i+50,200, numbers[i], numbers[i]);
  }
}
```

#### As we discussed, we can use .length here:

```
for(i = 0;i<numbers.length;i++){            
  		ellipse(100*i+50,200, numbers[i], numbers[i]);
  }
```

#### <https://editor.p5js.org/kdoodoo/sketches/By0YvVfoQ>

## 5. Array and Object (w/ Functions)

```
var bubble ={
	x:100,
  y:200,
  display: function(){
  		ellipse(this.x, this.y, 20,20);
  },
  move: function(){
  		this.x = this.x + random(-1,1);
    	this.y = this.y + random(-1,1);
  },
};
```

## Example

```
var bubbles = []; //empty

function setup() {
  createCanvas(400, 400);

for(i = 0; i < 500; i++){
	bubbles[i] ={
	    x:random(0,width),
  	    y:random(0,height),
  	    display: function(){
  		    ellipse(this.x, this.y, 20,20);
  	    },
     	move: function(){
  		this.x = this.x + random(-1,1);
    	this.y = this.y + random(-1,1);
        },
     }
  }
}

function draw() {
  background(220);
	
  for(i=0;i<bubbles.length;i++){
    bubbles[i].display();
    bubbles[i].move();
  }
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/S1cjoVGs7>

## 6. It is complex :(   So, Let's do 'Constructor Functions'

Make(construct) object

```
var bubbles = []; //empty

function setup() {
  createCanvas(400, 400);

  for(i = 0; i < 500; i++){
	  bubbles[i] = new bubble();
  }
}

function draw() {
  background(220);
	
  for(i=0;i<bubbles.length;i++){
    bubbles[i].display();
    bubbles[i].move();
  }

}
  
function bubble(){
  this.x = random(0,width);
  this.y = random(0,height);
  
  this.display = function(){
  ellipse(this.x,this.y,10,10);
  }
  this.move = function(){
  this.x = this.x + random(-1,1);
  this.y = this.y + random(-1,1);
  
  }
}
```

#### Constructor function is to make a 'new' object.

```
function bubble(){
  this.x = random(0,width);
  this.y = random(0,height);
  
  this.display = function(){
  ellipse(this.x,this.y,10,10);
  }
  this.move = function(){
  this.x = this.x + random(-1,1);
  this.y = this.y + random(-1,1);
  
  }
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/ryzlPfmoX>

## 7. Add and Remove object for the array.

```
push(value that goes into the last index);
splice(index you want to remove, the number of indexes you want to delete after);
```

#### We can add value to the array like this:

```
numbers = [4, 23, 42, 1, 4, 24]
//index    0  1   2   3  4  5
numbers[6] = 12; 
//Only if when you know the last index is 5
```

### A. So we use push()

```
numbers = [4, 23, 42, 1, 4, 24]
//index    0  1   2   3  4  5
numbers.push(12);
```

```
numbers = [4, 23, 42, 1, 4, 24, 12]
//index    0  1   2   3  4  5   6
numbers.push(12);
```

### Add bubble into bubbles\[ ] by push()

```
var bubbles = []; //empty

function setup() {
  createCanvas(400, 400);
}

function mousePressed(){
		bubbles.push(new bubble(mouseX,mouseY));
}

function mouseDragged(){
		bubbles.push(new bubble(mouseX,mouseY));
		//var b = new bubble(mouseX,mouseY);
		//bubbles.push(b);
}

function draw() {
  background(220);
	
  for(i=0;i<bubbles.length;i++){
    bubbles[i].display();
    bubbles[i].move();
  }

}
  
function bubble(xx,yy){
  this.x = xx;
  this.y = yy;
  this.display = function(){
  ellipse(this.x,this.y,10,10);
  }
  this.move = function(){
  this.x = this.x + random(-1,1);
  this.y = this.y + random(-1,1);
  
  }
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/H1DifHGiQ>

### B. Splice is checking code and remove the value.

```
var bubbles = []; //empty

function setup() {
  createCanvas(400, 400);

}

function mousePressed(){
		bubbles.push(new bubble(mouseX,mouseY));
}

function mouseDragged(){
		bubbles.push(new bubble(mouseX,mouseY));
}


function draw() {
  background(220);
	
  for(i=0;i<bubbles.length;i++){
  // for(i=bubbles.length -1;i>=0; i--){

    bubbles[i].display();
    bubbles[i].move();
    if(bubbles[i].delaytime < 0){
       bubbles.splice(i,1);
       }
  }

}
  
function bubble(xx,yy){
  this.x = xx;
  this.y = yy;
  this.delaytime = 255;
  
  this.display = function(){
  fill(this.delaytime);
  ellipse(this.x,this.y,20,20);
  }
  this.move = function(){
  this.x = this.x + random(-1,1);
  this.y = this.y + random(-1,1);
  this.delaytime = this.delaytime - 1;
  }
}
```

#### <https://editor.p5js.org/kdoodoo/sketches/BJ8byLMjQ>

```
for(i=0;i<bubbles.length;i++){
// Starting from the start will skip
for(i=bubbles.length -1 ; i>=0 ;  i--){
//Starting from the end will not skip
```

#### Splice (index, how many items from index)

```
numbers = [42, 370, 59, 438, 6, -93, 502]
//index     0   1   .2.   3  4    5    6
numbers.splice(2,1);
```

```
numbers = [42, 370, 438, 6, -93, 502]
//index     0    1  .2.  3   4    5    
```

## Assignment: if Confident > with Array.

#### <https://goo.gl/forms/iacdNBqXLv3gi4X82>


---

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