ICL
Search…
Week 06
Function II, Object and Array

1. Function with Parameters

Define with Parameter

1
fxunction sun(x,y,rays){
2
ellipse(x,y,20,20);
3
for(i = 0; i < rays; i++){
4
rect(x-30,y+20,30,30);
5
}
6
}
Copied!

Call with Parameters

1
sun(10,10,100);
Copied!

You can call many more

1
sun(10,10,100);
2
sun(20,20,110);
3
sun(30,30,120);
4
sun(40,40,130);
Copied!

Example

Let's draw a lolipop..

1
function setup() {
2
createCanvas(400, 400);
3
}
4
5
function draw() {
6
background(220);
7
8
fill(25,20,255);
9
rect(90,120,20,100);
10
11
fill(255,20,0);
12
ellipse(100,100,100,100);
13
14
}
15
Copied!

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

1
function setup() {
2
createCanvas(400, 400);
3
}
4
5
function draw() {
6
background(220);
7
lolipop();
8
9
}
10
11
function lolipop(){
12
fill(25,20,255);
13
rect(90,120,20,100);
14
fill(255,20,0);
15
ellipse(100,100,100,100);
16
17
}
Copied!

Now lolipop function with parameters

Define with parameters: x, y, diameter

1
function lolipop(x,y,diameter){
2
fill(25,20,255);
3
rect(x-10,y,20,100);
4
5
fill(255,20,0);
6
ellipse(x,y,diameter,diameter);
7
}
Copied!

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

1
lolipop(100,100,50);
2
lolipop(200,120,100);
3
lolipop(300,200,150);
Copied!
1
function setup() {
2
createCanvas(400, 400);
3
}
4
5
function draw() {
6
background(220);
7
8
lolipop(100,100,50);
9
lolipop(200,120,100);
10
lolipop(300,200,150);
11
12
13
}
14
15
function lolipop(x,y,diameter){
16
fill(25,20,255);
17
rect(x-10,y,20,diameter);
18
19
fill(255,20,0);
20
ellipse(x,y,diameter,diameter);
21
22
23
}
Copied!

2. Function that returns a value

No value returned

1
elipse(10,10,10,10); // no value returned just drawing a circle.
Copied!

Value returned

1
random(0,255); // it returns VALUE/NUMBER between 0 - 255.
Copied!

Let's Define with Parameter AND Return

1
function farenToCels(ff){
2
var calculation = (ff - 32) * (5/9);
3
return calculation;
4
5
}
Copied!

Let's Call

1
var room = farenToCels(100);
2
print(room); // Will return a value
Copied!
1
function setup() {
2
createCanvas(400, 400);
3
var room = farenToCels(100);
4
print(room);
5
6
7
var ok = celsToFaren(37.777);
8
print(ok);
9
10
}
11
12
function draw() {
13
background(220);
14
}
15
16
17
function farenToCels(ff){
18
var calculation = (ff - 32) * (5/9);
19
return calculation;
20
21
}
22
23
24
function celsToFaren(cc){
25
var calculation = (cc *(9/5) ) + 32;
26
return calculation;
27
28
}
Copied!

3. Object

We learned simple object.

1
var bubble = {
2
x:200,
3
y:200
4
}
Copied!
1
bubble.x;
2
bubble.y;
Copied!

Object with function

1
var bubble = {
2
x:200,
3
y:200,
4
display: function(){
5
ellipse(this.x,this.y, 30,30);
6
}
7
}
Copied!

Function in the object uses this.x and this.y

1
ellipse(this.x,this.y, 30,30);
Copied!

How to read object elements.

1
bubble.x;
2
bubble.y;
3
4
bubble.display();
Copied!

Example

Define functions inside of the object : display and move

1
var bubble = {
2
x:100,
3
y:200,
4
display: function(){
5
ellipse(this.x, this.y, 20,20);
6
},
7
move: function(){
8
this.x = this.x + random(-1,1);
9
this.y = this.y + random(-1,1);
10
},
11
}
Copied!

Call functions inside of the object: bubble.display() and bubble.move()

1
function setup() {
2
createCanvas(400, 400);
3
}
4
5
function draw() {
6
background(220);
7
8
bubble.display();
9
bubble.move();
10
}
Copied!

4. Array

List of values in the [ ]

1
var number = 3;
2
var numbers = [5,3,4,3];
Copied!

Similar to object in the { }

1
var object = {
2
x:3,
3
y:5,
4
}
Copied!

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

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

A. Access Values in the Array

1
var numbers = [2,4,7,-3]; // We have 0,1,2,3 indexes
2
3
var a = numbers[0]; // 2
4
var b = numbers[1]; // 4
5
var c = numbers[2]; // 7
6
var d = numbers[3]; // -3
Copied!
1
var numbers = [100,50,90,70];
2
var number = 30;
3
4
function setup() {
5
createCanvas(400, 400);
6
}
7
8
function draw() {
9
background(220);
10
fill('red');
11
ellipse(100,150, number, number);
12
13
fill('blue');
14
ellipse(200,250, numbers[1], numbers[1]);
15
16
}
Copied!

B. Array can have numbers, strings, objects.

1
var world = ["Spain", "Canada", "Austrailia", "Japan", "United_States", "Korea"];
2
print(world[4]); // United_States
Copied!

Example

1
var world = ["Spain", "Canada", "Austrailia", "Japan", "United_States", "Korea"];
2
var indexxx = 0;
3
4
function setup() {
5
createCanvas(400, 400);
6
}
7
8
function draw() {
9
background(220);
10
textSize(32);
11
text(world[indexxx], 40,300);
12
}
13
14
function mousePressed(){
15
indexxx = indexxx + 1;
16
17
if(indexxx == 4){ // We NEVER get to Korea !!
18
indexxx = 0; // indexxx == world.length
19
}
20
}
Copied!

world.length gives the last index of the array

1
if(indexxx == world.length) // 6
Copied!

Example

Drawing 4 ellipses

1
var numbers = [100,50,90,70];
2
var number = 30;
3
4
function setup() {
5
createCanvas(400, 400);
6
}
7
8
function draw() {
9
background(220);
10
fill('red');
11
ellipse(50,200, numbers[0], numbers[0]);
12
ellipse(150,200, numbers[1], numbers[1]);
13
ellipse(250,200, numbers[2], numbers[2]);
14
ellipse(350,200, numbers[3], numbers[3]);
15
16
}
Copied!

Drawing 4 ellipses with for loop.

1
var numbers = [100,50,90,70];
2
var number = 30;
3
4
function setup() {
5
createCanvas(400, 400);
6
}
7
8
function draw() {
9
background(220);
10
fill('red');
11
12
for(i = 0;i<4;i++){
13
ellipse(100*i+50,200, numbers[i], numbers[i]);
14
}
15
}
Copied!

As we discussed, we can use .length here:

1
for(i = 0;i<numbers.length;i++){
2
ellipse(100*i+50,200, numbers[i], numbers[i]);
3
}
Copied!

5. Array and Object (w/ Functions)

1
var bubble ={
2
x:100,
3
y:200,
4
display: function(){
5
ellipse(this.x, this.y, 20,20);
6
},
7
move: function(){
8
this.x = this.x + random(-1,1);
9
this.y = this.y + random(-1,1);
10
},
11
};
Copied!

Example

1
var bubbles = []; //empty
2
3
function setup() {
4
createCanvas(400, 400);
5
6
for(i = 0; i < 500; i++){
7
bubbles[i] ={
8
x:random(0,width),
9
y:random(0,height),
10
display: function(){
11
ellipse(this.x, this.y, 20,20);
12
},
13
move: function(){
14
this.x = this.x + random(-1,1);
15
this.y = this.y + random(-1,1);
16
},
17
}
18
}
19
}
20
21
function draw() {
22
background(220);
23
24
for(i=0;i<bubbles.length;i++){
25
bubbles[i].display();
26
bubbles[i].move();
27
}
28
}
Copied!

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

Make(construct) object
1
var bubbles = []; //empty
2
3
function setup() {
4
createCanvas(400, 400);
5
6
for(i = 0; i < 500; i++){
7
bubbles[i] = new bubble();
8
}
9
}
10
11
function draw() {
12
background(220);
13
14
for(i=0;i<bubbles.length;i++){
15
bubbles[i].display();
16
bubbles[i].move();
17
}
18
19
}
20
21
function bubble(){
22
this.x = random(0,width);
23
this.y = random(0,height);
24
25
this.display = function(){
26
ellipse(this.x,this.y,10,10);
27
}
28
this.move = function(){
29
this.x = this.x + random(-1,1);
30
this.y = this.y + random(-1,1);
31
32
}
33
}
Copied!

Constructor function is to make a 'new' object.

1
function bubble(){
2
this.x = random(0,width);
3
this.y = random(0,height);
4
5
this.display = function(){
6
ellipse(this.x,this.y,10,10);
7
}
8
this.move = function(){
9
this.x = this.x + random(-1,1);
10
this.y = this.y + random(-1,1);
11
12
}
13
}
Copied!

7. Add and Remove object for the array.

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

We can add value to the array like this:

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

A. So we use push()

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

Add bubble into bubbles[ ] by push()

1
var bubbles = []; //empty
2
3
function setup() {
4
createCanvas(400, 400);
5
}
6
7
function mousePressed(){
8
bubbles.push(new bubble(mouseX,mouseY));
9
}
10
11
function mouseDragged(){
12
bubbles.push(new bubble(mouseX,mouseY));
13
//var b = new bubble(mouseX,mouseY);
14
//bubbles.push(b);
15
}
16
17
function draw() {
18
background(220);
19
20
for(i=0;i<bubbles.length;i++){
21
bubbles[i].display();
22
bubbles[i].move();
23
}
24
25
}
26
27
function bubble(xx,yy){
28
this.x = xx;
29
this.y = yy;
30
this.display = function(){
31
ellipse(this.x,this.y,10,10);
32
}
33
this.move = function(){
34
this.x = this.x + random(-1,1);
35
this.y = this.y + random(-1,1);
36
37
}
38
}
Copied!

B. Splice is checking code and remove the value.

1
var bubbles = []; //empty
2
3
function setup() {
4
createCanvas(400, 400);
5
6
}
7
8
function mousePressed(){
9
bubbles.push(new bubble(mouseX,mouseY));
10
}
11
12
function mouseDragged(){
13
bubbles.push(new bubble(mouseX,mouseY));
14
}
15
16
17
function draw() {
18
background(220);
19
20
for(i=0;i<bubbles.length;i++){
21
// for(i=bubbles.length -1;i>=0; i--){
22
23
bubbles[i].display();
24
bubbles[i].move();
25
if(bubbles[i].delaytime < 0){
26
bubbles.splice(i,1);
27
}
28
}
29
30
}
31
32
function bubble(xx,yy){
33
this.x = xx;
34
this.y = yy;
35
this.delaytime = 255;
36
37
this.display = function(){
38
fill(this.delaytime);
39
ellipse(this.x,this.y,20,20);
40
}
41
this.move = function(){
42
this.x = this.x + random(-1,1);
43
this.y = this.y + random(-1,1);
44
this.delaytime = this.delaytime - 1;
45
}
46
}
Copied!
1
for(i=0;i<bubbles.length;i++){
2
// Starting from the start will skip
3
for(i=bubbles.length -1 ; i>=0 ; i--){
4
//Starting from the end will not skip
Copied!

Splice (index, how many items from index)

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

Assignment: if Confident > with Array.

Last modified 3yr ago