Classes & Objects in P5JS

Classes in P5 are reusable modular blocks of code. They are templates for objects and, just like in Processing they have data and functionality.
In P5 the basic class syntax is shown in the example below:

//This example uses a simple class with 4 arguments
 
//This example uses a simple class with 4 arguments
 
var pulse; //all variables are var even for an object
var pulse2; //declare a second pulse object
 
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
  pulse = new Pulser(width/2, height/2, 250, 250); //initialize the object
  pulse2 = new Pulser(random(width), random(height), 100, 100); //initialize the object
  noStroke();
}
 
function draw() {
  background(255);
  pulse.display(); //run the display function of the object
  pulse.move();
  pulse2.display();//run the display function of the object
  pulse2.move();
}
 
//class in p5js
 
class Pulser {
 
    //The constructor (note no variable declarations above the constructor)  
    constructor(x, y, w, h) { //pulser has 4 arguments 
    this.x = x; //this refers to the variables in the class. Need to use this in front of all variables.
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = "red";
    this.n=random(2);//generate a random starting noise variable; 
    this.p=0; //position variable
    this.inc=0.005; //noise variable increment
  }
 
   //Functions 
  display() {
    fill(255, 0, 0,100);
    ellipse(this.x, this.y, this.w, this.h); 
 	this.w += random(-1, 1);
   	this.h += random(-1, 1);
 
  }
 
 
  move() {
   this.p=noise(this.n);
   this.x=map(this.p,0,1,0,width); 
   this.n=this.n+this.inc;
  }
}

If you need to use a class you probably will want to create an array of the resultant objects. In P5 arrays can change length. Objects can be added and removed from them as the program runs. They are not of a fixed length like in Processing.

Here is the last example with an array of Pulser objects:

//This example uses a simple class with 4 arguments
 
var pulse=[];
 
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
 
  //fill array
  for(var i=0;i<5;i++){ //loop 5 times
    //put an object in the array for each loop
    var d=random(100,200);
    pulse[i] = new Pulser(width/2, height/2, d,d); 
 
  }
  noStroke();
}
 
function draw() {
  background(255);
  for(var i=0;i<5;i++){ //loop 5 times
    pulse[i].display(); //run the display function of the object
    pulse[i].move();
  }
}
 
//class in p5js
 
class Pulser {
 
    //The constructor (note no variable declarations above the constructor)  
    constructor(x, y, w, h) { //pulser has 4 arguments 
    this.x = x; //this refers to the variables in the class. Need to use this in front of all variables.
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = "red";
    this.n=random(2);//generate a random starting noise variable; 
    this.p=0; //position variable
    this.inc=0.005; //noise variable increment
  }
 
   //Functions 
  display() {
    fill(255, 0, 0,100);
    ellipse(this.x, this.y, this.w, this.h); 
 	this.w += random(-1, 1);
   	this.h += random(-1, 1);
 
  }
 
 
  move() {
   this.p=noise(this.n);
   this.x=map(this.p,0,1,0,width); 
   this.n=this.n+this.inc;
  }
}

And what if we want to add a new pulser object to the array every time the mouse is clicked? Because P5 arrays can change in length, we can use the push function to add a new object to the array in function mousePressed().
Note that the for loop in draw needs to be changed to

for(var i=0;i<pulse.length;i++){ //loop

The array changes length, so avoid hard coding the number of loops into the code, rather use the .length function.

//This example uses a simple class with 4 arguments
 
var pulse=[];
 
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
 
  //fill array
  for(var i=0;i<2;i++){ //loop 5 times
    //put an object in the array for each loop
    var d=random(100,200);
    pulse[i] = new Pulser(width/2, height/2, d,d); 
 
  }
  noStroke();
}
 
function draw() {
  background(255);
  for(var i=0;i<pulse.length;i++){ //loop 5 times
    pulse[i].display(); //run the display function of the object
    pulse[i].move();
  }
}
 
//ADD an object to the array when mouse is clicked
function mousePressed(){
  var d=random(100,200);
  pulse.push(new Pulser(width/2, height/2, d,d));
  console.log("pushing");
}
 
//class in p5js
 
class Pulser {
 
    //The constructor (note no variable declarations above the constructor)  
    constructor(x, y, w, h) { //pulser has 4 arguments 
    this.x = x; //this refers to the variables in the class. Need to use this in front of all variables.
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = "red";
    this.n=random(2);//generate a random starting noise variable; 
    this.p=0; //position variable
    this.inc=0.005; //noise variable increment
  }
 
   //Functions 
  display() {
    fill(255, 0, 0,100);
    ellipse(this.x, this.y, this.w, this.h); 
 	this.w += random(-1, 1);
   	this.h += random(-1, 1);
 
  }
 
 
  move() {
   this.p=noise(this.n);
   this.x=map(this.p,0,1,0,width); 
   this.n=this.n+this.inc;
  }
}