Week 06

Function II, Object and Array

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

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

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()

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

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