p5: Objects

Objects exist in most programming languages but they may vary significantly in the way they are implemented. What follows is pertinent to javascript, not specifically to p5.

Object-Oriented Programming (OOP) is a programming model organized around the construction of “objects” rather than procedures and sequences of instruction.

Let’s start from this example:

var bug; // Declare object instance

function setup() {
createCanvas(800, 800);
// Create an instance of Jitter
bug = new Jitter();
}

function draw() {
background(50, 89, 100);
//call the method in the class
bug.update();
}

// Jitter class note how it's capitalized
function Jitter() {

//"this" is a reference to the instance
//we are switching perspective

//x y diameters are properties
this.x = random(width);
this.y = random(height);
this.diameter = random(10, 30);
this.speed = 1;

//update is a method
this.update = function() {
this.x += random(-this.speed, this.speed);
this.y += random(-this.speed, this.speed);
ellipse(this.x, this.y, this.diameter, this.diameter);
};

}

Now let’s make a second bug.

-An object is a model, a representation of something, anything in your program.

-Objects are especially used when you need multiples instances of something
e.g. many bullets in a game.

-Objects are often used to abstract components we can use and reuse as black boxes, without modifying them internally
e.g. the sound or the grammars add-ons we used before

-An object is defined by a class. It’s the abstract platonic idea of that thing, the blueprint, the cookie-cutter function
e.g. function Jitter()

-Objects exist in your program as instances of a class. Instances are clones, they have the same internal structure but their properties (variables belonging to the object) can change
e.g. the Jitter position bug.x

-The methods of an object are its specific functions. You should conceptualize them from the perspective of the object itself
e.g. this.x -= 2; //I move left two pixels

Arrays of objects

Objects can be stored in arrays like variables.


var bugs = []; // Declare object instance

function setup() {
createCanvas(800, 800);

}

function draw() {
background(50, 89, 100);
//call the method in the class

for(var i=0; i<bugs.length; i++) {
bugs[i].update();
}
}

function mousePressed() {
// Create an instance of Jitter put it in a temporary variable
var newBug = new Jitter();

// add it to an array of objects
bugs.push(newBug);

}

// Jitter class note how it's capitalized
function Jitter() {

//"this" is a reference to the instance
//we are switching perspective

//x y diameters are properties
this.x = random(width);
this.y = random(height);
this.diameter = random(10, 30);
this.speed = 1;

//update is a method
this.update = function() {
this.x += random(-this.speed, this.speed);
this.y += random(-this.speed, this.speed);
ellipse(this.x, this.y, this.diameter, this.diameter);
};

}

Technically you are storing a reference to that object, which is a kind of link. It means that unlike with variables, you will not create a copy of the object if you assign it like this:
var otherBug = bugs[1];
otherBug and bugs[1] will point to the same object.

Now make the bugs appear at the current mouse position

Make the bugs move across the screen in a random direction

Make them wrap around the screen

Removing Objects from Arrays

In the previous example we constantly create new objects that stick around. In many cases you also want to delete them or they waste memory and slow down your program.

You could simply not update them, making them invisible but they will be still consuming memory and processing power.
The way to remove an object is to get rid of all the references that point to that object.

Let’s analyze this example:


var bugs = []; // Declare object instance

function setup() {
createCanvas(800, 800);
noStroke();
}

function draw() {
background(50, 89, 100);
//call the method in the class

for(var i=0; i<bugs.length; i++) {
bugs[i].update();
}


//remove the expired objects after the update
//note how I iterate throught the array backward so the removal won't
//make me skip elements

for(var i=bugs.length-1; i>=0; i--) {
//if the counter is greater that 30
if(bugs[i].counter>30) {
// Starting at index position i, remove 1 element
bugs.splice(i, 1);

}
}

}

function mousePressed() {
// Create an instance of Jitter put it in a temporary variable
var newBug = new Jitter(mouseX, mouseY);

// add it to an array of objects
bugs.push(newBug);

}

// Jitter class note how it's capitalized
function Jitter(x, y) {

this.counter = 0;
this.x = x;
this.y = y;

//update is a method
this.update = function() {
this.counter++;
var diameter = map(this.counter, 0, 30, 100, 0);
ellipse(this.x, this.y, diameter, diameter);
};

}

Now make an endless rain

Add gravity acceleration and wind!

Make a snowfall