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

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

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

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]);
}

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

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]);
}

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

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);
}
}

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);
}
}

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;
}
}

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.