Exemple de code : une ellipse se déplace aléatoirement.

var x = 320;
var y = 170;

function setup() {
  createCanvas(640,360);
  background(250);
}

function draw() {
  stroke(255);
  fill(236,36,94);
  var choix = floor(random(4)) // floor, calcule la valeur entière la plus proche.
  ellipse(x,y,10,10);
     if (choix === 0) {
      x = x + 10;
    } else if (choix == 1) {
      x = x - 10;
    } else if (choix == 2) {
      y = y + 10;
    } else {
     y = y - 10;
    }
   x = constrain(x,10,width-10);
   y = constrain(y,10,height-10);
  }

En Programmation Orientée Objet la même chose s’écrit :

var rond;

function setup() {
  createCanvas(640,360);
  rond = new Rond();
  background(250);
}

function draw() {
  rond.pas();
  rond.aspect();
}

function Rond() {
  this.x = width/2;
  this.y = height/2;

  this.aspect = function() {
    stroke(255);
    fill(236,36,94);
    ellipse(this.x, this.y, 10,10);
  };

  this.pas = function() {
    var choix = floor(random(4));
    if (choix === 0) {
      this.x = this.x + 10;
    } else if (choix == 1) {
      this.x = this.x - 10;
    } else if (choix == 2) {
      this.y = this.y + 10;
    } else {
      this.y = this.y - 10;
    }
    this.x = constrain(this.x,10,width-10);
    this.y = constrain(this.y,10,height-10);
  };
}

Pourquoi faire compliqué quand on peut faire simple ?

La Programmation Orientée Objet (POO) n’est pas plus facile. En revanche, elle aide à mieux organiser le code, le préparer à de futures évolutions et rend certaines portions réutilisables pour gagner en temps et en clarté.
Un Objet est une suite de variables et de fonctions rangées dans une boîte (l’objet). Les objets sont un moyen de grouper variables et fonctions associées. En POO, une variable est appelée une propriété (ou variable d’instance) et une fonction est appelée une méthode.

Prenons l’exemple suivant :
Objet : Fourmi
Propriétés : type (ouvrière, soldat), poids, longueur
Méthodes : marche, pince, libère des phéromones, mange

Propriétés = variables
Méthodes = fonctions

Dans p5.js la fonction constructeur de l’objet se rédige ainsi :

function Fourmi(){
   //déclaration des variables
   var type;
   var poids;
   var longueur;

      marche = function(){
      //  instructions 
      };
      pince = function(){
     // instructions
     };
     libèredesphéromones = function(){
     // instructions
     };
     mange = function(){
     // instructions
     };
}

3 étapes pour  créer la fonction constructeur :

1. Créez un bloc fonctionnel.

function Rond() {
}

2. Ajouter les propriétés et leur affecter des valeurs.

function Rond(){
  this.x = width/2;
  this.y = height/2;
}

3. Ajoutez les méthodes.

Parce que nous voulons faire de cette fonction une méthode de l’objet, il est nécessaire d’utiliser le mot clé this.
La syntaxe classique,

 function aspect(){
    stroke(255);
    fill(236,36,94);
    ellipse(x, y, 10,10);
  }

et transformée ainsi :

 this.aspect = function() {
    stroke(255);
    fill(236,36,94);
    ellipse(this.x, this.y, 10,10);
  };

Création de l’objet

Déclarer la variable de la même habituelle :

var rond;

Initialiser l’objet avec le mot-clef new.
L’objet est placé en mémoire avec toutes ses propriétés et méthodes. Le nom du constructeur est écrit à droite du mot-clé new, suivi par les paramètres dans le constructeur (si nécessaire) :

rond = new Rond();

Dans draw() les méthodes pas() et rendu() de l’objet sont appelées ainsi :

function draw() {
  rond.pas();
  rond.aspect();
}

Plusieurs objets

var rond;
var rond2;
 var couleur1;
 var couleur2;

function setup() {
  createCanvas(640,360);
 var couleur1 = color(255,36,95);
 var couleur2 = color(19,227,41);
  rond = new Rond(width/2, height/2,10,couleur1);
  rond2 = new Rond(0,0,10,couleur2);
  background(250);
}

function draw() {
  rond.pas();
  rond.aspect();
  rond2.pas();
  rond2.aspect();
}

function Rond(x,y, diametre, couleur) {
 this.x = x;
 this.y = y;
 this.diam = diametre;
this.couleur1 = couleur;
this.couleur2 = couleur;


  this.aspect = function() {
    stroke(255);
    fill(couleur);
    ellipse(this.x, this.y, this.diam,this.diam);
  };

  this.pas = function() {
    var choix = floor(random(4));
    if (choix === 0) {
      this.x = this.x + 10;
    } else if (choix == 1) {
      this.x = this.x - 10;
    } else if (choix == 2) {
      this.y = this.y + 10;
    } else {
      this.y = this.y - 10;
    }
    this.x = constrain(this.x,10,width-10);
    this.y = constrain(this.y,10,height-10);
  };
}