Une classe est comme un modèle, un gabarit de quelque chose. Elle va nous permettre de créer des objets JS (qui seront des instances de cette chose) Elle permet de rationaliser un peu notre code lorsque nous réutilisons un élément un grand nombre de fois par exemple. Le constructeur est une méthode spéciale pour créer (instancier) un élément de cette classe. C'est en fait la liste des propriétés, variables, paramètres, de cet élément.

Ensuite viendront les différentes méthodes qui permettent de faire évoluer ces propriétés.

new est le mot-clé pour créer un objet (une instance) de cette classe.

Pour utiliser une analogie courante, nous sommes (chacun.e de nous) un objet de la classe Humains et partageons un certain nombre de fonctions (manger, respirer, dormir, s'exprimer..) et de propriétés (couleur des yeux, taille, caractère, ..) dont les valeurs varient de l'un.e à l'autre et nous sont propres.

Un premier exemple

L'exemple ci-dessous est repris tel quel de la documentation de P5.js. Ce qui va être intéressant, bien évidemment, c'est lorsque nous allons utiliser les tableaux et les boucles pour instancier nos éléments. Cela nous permettra, avec un code plus réduit que celui-ci, de créer des milliers d'objets utilisant une même classe (construits sur le même modèle).

let bug1; // Declare objects
let bug2;
let bug3;
let bug4;

function setup() {
  createCanvas(710, 400);
  // Create object
  bug1 = new Jitter();
  bug2 = new Jitter();
  bug3 = new Jitter();
  bug4 = new Jitter();
}

function draw() {
  background(50, 89, 100);
  bug1.move();
  bug1.display();
  bug2.move();
  bug2.display();
  bug3.move();
  bug3.display();
  bug4.move();
  bug4.display();
}

// Jitter class
class Jitter {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.diameter = random(10, 30);
    this.speed = 1;
  }

  move() {
    this.x += random(-this.speed, this.speed);
    this.y += random(-this.speed, this.speed);
  }

  display() {
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

Étape par étape

let boule;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(220);
    boule = new Boule();
    console.log(boule);
}

class Boule {
    constructor() { // Le constructeur est comme l'initialisation de l'objet.
        this.x = 0; // x est une variable qui est en fait une propriété de cet objet précis. this est une référence à l'objet qui l'appelle.
        this.y = 0;  
        this.speedX = 3;
        this.speedY = 3;
        this.size = 10  
    }
}

L'intérêt va être de pouvoir ajouter des fonctionalités et, surtout, de pouvoir créer un grand nombre de ces éléments, tous indépendants les uns des autres.

let boule;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(220);
    boule = new Boule();
    console.log(boule);
}

class Boule {
    constructor() { // Le constructeur est comme l'initialisation de l'objet.
        this.x = 0; // x est une variable qui est en fait une propriété de cet objet précis. this est une référence à l'objet qui l'appelle.
        this.y = 0;  
        this.speedX = 3;
        this.speedY = 3;
        this.size = 10  
    }
    deplace() {
        this.x = this.x += this.speedX;
        this.y = this.y += this.speedY;
    }
    affiche() {
        ellipse(this.x, this.y, this.size);
    }
}

Afin que nos différentes boules aient des tailles et vitesses différentes, nous allons passer différents arguments à chacune.

let boules = [];
let nombreDeBoules = 20;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(220);
    for (let i = 0; i < nombreDeBoules; i++) {
        let randomX = random(width);
        let randomY = random(height);
        let randomSize = random(5,30);
        let boule = new Boule(randomX, randomY, randomSize);
        boules.push(boule);
        console.log(boule);
    }
}

function draw() {
    background(220);
    for (let i = 0; i < boules.length; i++) {
        boules[i].deplace();
        boules[i].affiche();
    }
}

class Boule {
    constructor(x, y, size) { 
        this.x = x; 
        this.y = y;  
        this.speedX = 3;
        this.speedY = 3;
        this.size = size; 
    }
    deplace() {
        this.x = this.x += this.speedX;
        this.y = this.y += this.speedY;
    }
    affiche() {
        ellipse(this.x, this.y, this.size);
    }
}

Un code un peu plus complet...

let boules = [];
let nombreDeBoules = 20;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(220);
    for (let i = 0; i < nombreDeBoules; i++) {
        let randomSize = random(5,30);
        let randomX = random(width);
        let randomY = random(height);
        let speedX = random(-randomSize,randomSize);
        let speedY = random(-randomSize,randomSize);
        let boule = new Boule(randomX, randomY, speedX, speedY, randomSize);
        boules.push(boule);
        console.log(boule);
    }
}

function draw() {
    background(220);
    for (let i = 0; i < boules.length; i++) {
        boules[i].deplace();
        boules[i].affiche();
    }
}

class Boule {
    constructor(x, y, speedX, speedY, size) { 
        this.x = x; 
        this.y = y;  
        this.speedX = speedX;
        this.speedY = speedY;
        this.size = size; 
    }
    deplace() {
        this.x = this.x += this.speedX;
        this.y = this.y += this.speedY;
        if(this.x > width || this.x < 0) {
            this.speedX = this.speedX*(-1);
        }
        if(this.y > height || this.y < 0) {
            this.speedY = this.speedY*(-1);
        }
    }
    affiche() {
        ellipse(this.x, this.y, this.size);
    }
}

XR6 1

Crééz un script basé sur le même principe mais avec une image (ou des images aléatoires) à la place de l'ellipse. Faites-en une deuxième version avec un GIF animé. Tout se passe-t-il comme prévu? Si ce n'est pas le cas, pourquoi? Quelles conclusions tirez-vous?