Cette activité va aborder l'utilisation de la programmation orientée objet. Si vous avez peu de souvenirs sur cette notion, n'hésitez pas à consulter de nouveau cette activité

À faire vous-même 11.1

Saisissez, analysez et testez ce code

Balle=function(){
    this.x=floor(random(20,380));
    this.y=floor(random(20,380));
    this.rayon=20;
    this.transp=floor(random(20,50))
    this.vx=3;
    this.vy=3;
    this.couleur={r:floor(random(0,255)),v:floor(random(0,255)),b:floor(random(0,255))}
    this.deplacement=function(){
        if (this.x<this.rayon || this.x>400-this.rayon){
            this.vx=-this.vx;
        }
        if (this.y<this.rayon || this.y>400-this.rayon){
            this.vy=-this.vy;
        }
        this.x=this.x+this.vx;
        this.y=this.y+this.vy;
    }
    this.affichage=function(){
       fill(this.couleur.r,this.couleur.v,this.couleur.b,this.transp);
       ellipse(this.x,this.y,this.rayon,this.rayon);
    }
}
function setup(){
  createCanvas(400,400);
  balle=new Balle();
}
function draw(){
  background(240);
  balle.deplacement();
  balle.affichage();
}

       

---

Ce code ne devrait pas vous poser de problème. Cependant, n'hésitez pas à poser des questions si nécessaire.

Dans le code ci-dessus, un seul objet est créé ("balle"), l'utilisation des objets prend tout son sens quand le programme crée une multitude d'objets. Ces objets sont "rangés" dans un tableau dès leur création.

À faire vous-même 11.2

Saisissez, analysez et testez ce code

Balle=function(){
    this.x=floor(random(20,380));
    this.y=floor(random(20,380));
    this.rayon=10;
    this.transp=floor(random(20,50));
    this.vx=floor(random(-3,3));
    this.vy=floor(random(-3,3));
    this.couleur={r:floor(random(0,255)),v:floor(random(0,255)),b:floor(random(0,255))}
    this.deplacement=function(){
        if (this.x<this.rayon || this.x>400-this.rayon){
            this.vx=-this.vx;
        }
        if (this.y<this.rayon || this.y>400-this.rayon){
            this.vy=-this.vy;
        }
        this.x=this.x+this.vx;
        this.y=this.y+this.vy;
    }
    this.affichage=function(){
       fill(this.couleur.r,this.couleur.v,this.couleur.b,this.transp);
       ellipse(this.x,this.y,2*this.rayon,2*this.rayon);
    }
}
var tabBalle=[];
function setup(){
  createCanvas(400,400);
  for (i=0;i<100;i=i+1){
      tabBalle.push(new Balle());
  }
}
function draw(){
  background(240);
  for (i=0;i<tabBalle.length;i=i+1){
      tabBalle[i].deplacement();
      tabBalle[i].affichage();
  }
}
       

---

Nous créons un tableau "tabBalle" et nous rangeons des objets de type "Balle" dans ce tableau. Dans la fonction "draw", nous passons en revue tous les objets contenus dans le tableau "tabBalle" grâce à une boucle "for".

Les variables systèmes "windowWidth" et "windowHeight" donnent respectivement, la largeur et la hauteur de la fenêtre de votre navigateur. Il est donc facile d'avoir une surface de dessin (canvas) qui prendra toute la fenêtre du navigateur, il suffira d'écrire :

createCanvas(windowWidth,windowHeight);
       

Si une fois votre navigateur ouvert, vous le redimensionnez, la fenêtre de dessin ne s'adaptera pas à cette nouvelle taille. Pour forcer la fenêtre de dessin à s'adapter, il faut ajouter la fonction suivante :

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
       

À faire vous-même 11.3

Saisissez, analysez et testez ce code

function setup(){
  createCanvas(windowWidth-20,windowHeight-20);
}
function draw(){
  background(240);
}
function windowResized() {
  resizeCanvas(windowWidth-20, windowHeight-20);
}
       

---

Comme vous pouvez le constater, la taille du canvas s'adapte à la taille de la fenêtre de votre navigateur. Pour éviter d'avoir des "ascenseurs" sur le côté de la fenêtre du navigateur, je vous conseille de soustraire 20 pixels, comme cela a été fait ci-dessus.