Canvas: cercles qui bougent

Signaler
Messages postés
146
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
4 mars 2021
-
Messages postés
320
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
8 mars 2021
-
Bonjour! A partir du canvas, j'essaie de générer un ensemble de cercles qui sont censés se déplacer. Cependant, aucun cercle n'est généré sur ma page.

La console ne m'affiche aucune erreur, donc je ne vois pas d'où cela vient. J'ai relu mon code, mais je ne vois pas non plus ce qui pourrait clocher. Auriez-vous une idée?

Voilà le code:

html
<!DOCTYPE html>
<html>

 <head>
  <title>Test web</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="page6style.css" />
      <link rel="stylesheet" href="navstyle.css" />
 </head>
  
  <body>
    
    <canvas></canvas>
   

    <script src="page6script.js"></script>
  </body>

</html>


css
canvas{
 border: 5px solid orange; 
}


javascript
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.height = (window.innerHeight)*80/100;
canvas.width = (window.innerWidth)*80/100;


// coordonates
var x, y, dx, dy, radius;

// generate Circle
function Circle(){

 this.x = Math.random()*innerWidth;
 this.y = Math.random()*innerHeight;
 this.dx = (Math.random()-0.5)*7;
 this.dy = (Math.random()-0.5)*7;
 this.radius = Math.random()*30;

 // anonymous function nameless to create circle
 this.draw = function(){
  ctx.beginPath();
  ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
  ctx.strokeStyle = "blue";
  ctx.stroke(); 
 }
}



// generate set of circles
var circleArray = [];

function setOfCircles(){
 for(var i = 0; i < 100; i++){
  circleArray.push(new Circle());
 }
}



// make circle move
function animate(){

 requestAnimationFrame(animate);
 ctx.clearRect(0,0,innerWidth,innerHeight);

 for (var i = 0; i<circleArray.length ; i++){
  
  // anonymous function nameless to make circle move
  circleArray[i].update = function(){
   if ((this.x+this.radius>innerWidth*80/100) || (this.x-this.radius<0)){
    this.dx = -this.dx;
   }

   if ((this.y+this.radius>innerHeight*80/100) || (this.y-this.radius<0)){
    this.dy = -this.dy;
   }
   this.x += this.dx;
   this.y += this.dy;
  }

 }//end for
}



// final result
setOfCircles();
animate();

3 réponses

Salut,
setOfCircles();
devrait être dans l'animation sinon il n'y a que les calculs de postions qui sont mis à jour(et l'effacement par clearRect).
en tout cas le dessin des cercles n'est pas dans la boucle il me semble.
Messages postés
146
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
4 mars 2021
1
Merci à toi, je vais arranger ça :)
Messages postés
320
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
8 mars 2021
68
Bonjour,

Les fonctions update() et draw() ne sont jamais appelées. Il faut les inclure dans animate() avant de fermer le for :

     circleArray[i].draw();
     circleArray[i].update();
}//end for