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