1. Function with Parameters
Define with Parameter
Copy 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
You can call many more
Copy sun(10,10,100);
sun(20,20,110);
sun(30,30,120);
sun(40,40,130); Example
Let's draw a lolipop..
Copy 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()
Copy 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
Copy 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 .....
Copy lolipop(100,100,50);
lolipop(200,120,100);
lolipop(300,200,150);
Copy 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
Copy elipse(10,10,10,10); // no value returned just drawing a circle. Value returned
Copy random(0,255); // it returns VALUE/NUMBER between 0 - 255. Let's Define with Parameter AND Return
Copy function farenToCels(ff){
var calculation = (ff - 32) * (5/9);
return calculation;
} Let's Call
Copy var room = farenToCels(100);
print(room); // Will return a value
Copy 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.
Copy var bubble = {
x:200,
y:200
} Object with function
Copy 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
Copy ellipse(this.x,this.y, 30,30); How to read object elements.
Copy bubble.x;
bubble.y;
bubble.display(); Example
Define functions inside of the object : display and move
Copy 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()
Copy function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
bubble.display();
bubble.move();
} 4. Array
List of values in the [ ]
Copy var number = 3;
var numbers = [5,3,4,3]; Similar to object in the { }
Copy var object = {
x:3,
y:5,
} Array has indices, indexes : 0, 1, 2, 3, 4, 5, 6....
Copy var numbers = [2,4,7,-3]; // We have 0,1,2,3 indexes A. Access Values in the Array
Copy 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
Copy 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.
Copy var world = ["Spain", "Canada", "Austrailia", "Japan", "United_States", "Korea"];
print(world[4]); // United_States Example
Copy 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
Copy if(indexxx == world.length) // 6 Example
Drawing 4 ellipses
Copy 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.
Copy 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:
Copy for(i = 0;i<numbers.length;i++){
ellipse(100*i+50,200, numbers[i], numbers[i]);
} 5. Array and Object (w/ Functions)
Copy 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
Copy 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
Copy 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.
Copy 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.
Copy 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:
Copy 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()
Copy numbers = [4, 23, 42, 1, 4, 24]
//index 0 1 2 3 4 5
numbers.push(12);
Copy 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()
Copy 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.
Copy 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;
}
}
Copy 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)
Copy numbers = [42, 370, 59, 438, 6, -93, 502]
//index 0 1 .2. 3 4 5 6
numbers.splice(2,1);
Copy numbers = [42, 370, 438, 6, -93, 502]
//index 0 1 .2. 3 4 5 Assignment: if Confident > with Array.
