CODEWITHSUNDEEP
javascriptcanvas
CaptainAmerica16
CaptainAmerica16

Reputation: 236

Why is My Canvas Animation Slowing Down When it Should Speeding Up?

I am working on a canvas animation. The idea is that the blue circle should speed up every time it's clicked, but for some reason after 3 or 4 clicks, it stops speeding up and slows down. Could anyone help me figure out where I went wrong? I'm thinking the problem is within the bClick function because everything else works fine. 

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
//Variables for the blue ball
var bx = Math.random() * innerWidth;
var by = Math.random() * innerHeight;
var bbdx = 1.5;
var bbdy = 1.5;
var bRadius = 12;
//Variables for the red ball
var rx = Math.random() * innerWidth;
var ry = Math.random() * innerHeight;
var rrdx = 1.5;
var rrdy = 1.5;
var rRadius = 12;
//Mouse coordinate object
/*var mouse = {
  x: undefined,
  y: undefined
}*/
function bCircle(){
    c.beginPath();
    c.arc(bx, by, bRadius, 0, Math.PI * 2, false);
    c.strokeStyle = "white";
    c.stroke();
    c.fillStyle = "cornflowerblue";
    c.fill();
    c.closePath();

  //Ball bouncing Conditional



}
function rCircle(){
        c.beginPath();
        c.arc(rx, ry, rRadius, 0, Math.PI*2, false);
        c.strokeStyle = "pink";
        c.stroke();
        c.fillStyle = "red";
        c.fill();
        c.closePath();
        //Ball Bouncing Conditional



      }

  //Interactivity function
function bClick(e){
  var mouseX = e.clientX;
  var mouseY = e.clientY;
  //Tracking clicks on blue circle
  if(mouseX - bx < 50 && mouseX - bx > -50
  && mouseY - by < 50 && mouseY - by > -50){
    bbdx ++;
    bbdy ++;
   
  }
  //Tracking clicks on red circle
  if(mouseX - rx < 50 && mouseX - rx > -50
  && mouseY - ry < 50 && mouseY - ry > -50){
      console.log("bad");
  }
}
document.addEventListener("click", bClick);
//event listerner syntax: element.addEventListener(event, function, useCapture);


        function draw(){
          c.clearRect(0, 0, innerWidth, innerHeight);
          bCircle();
          rCircle();


          //bCircle Conditional
         if (bx + bRadius > innerWidth || bx - bRadius < 0){
            bbdx = -bbdx;
          }
          //Conditional to mall the ball bounce up and down
          if (by + bRadius > innerHeight || by - bRadius < 0){
            bbdy = -bbdy;
          }
          //Add 1 to x continously for it to move
            bx += bbdx;
          //Add 1 constantly to y for it to move up and down also
            by += bbdy;

            //rCircle Conditional
            if (rx + rRadius > innerWidth || rx - rRadius < 0){
              rrdx = -rrdx;
            }
            if (ry + rRadius > innerHeight || ry - rRadius < 0){
              rrdy = -rrdy;
            }
            rx += rrdx;
            ry += rrdy;

            /*interactivty Conditional
            if (mouse.x - bbdx < 50 && mouse.x - bbdx > -50
              && mouse.y - bbdy < 50 && mouse.y - bbdy > -50){
              rCircle();
            }*/
            //console.log(bx, by);

            window.requestAnimationFrame(draw);

        }


draw();
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset="UTF-8">
  <title>Ball</title>

  <style type = "text/css">
    canvas {
      border: 1px solid black;
    }
    body {
      margin: 0;
      background-color: black;
    }
    </style>
</head>

<body>
  <canvas></canvas>

  <script src = "ball.js" type = "text/javascript"></script>
  
</body>

</html>

Upvotes: 1

Views: 71

Answers (2)

Wolfgang
Wolfgang

Reputation: 896

please notice that bbdx & bbdy may be negative values, so increasing them using ++ means slowing the ball down. Just try by replace this with e.g. bbdx *= 1.5;

Upvotes: 0

ibrahim tanyalcin
ibrahim tanyalcin

Reputation: 6491

Update your click function. This is happening because if your ball has a negative speed when you increment it, infact you are not making it faster, but slower, so based on the sign you should increment or decrement, I'll leave the solution open, Math.sign is not available in ie so you should use a ternary to increment or decrement there,

https://jsfiddle.net/ibowankenobi/bnwzfq2q/1/

function bClick(e){
  var mouseX = e.clientX;
  var mouseY = e.clientY;
  //Tracking clicks on blue circle
  if(mouseX - bx < 50 && mouseX - bx > -50
  && mouseY - by < 50 && mouseY - by > -50){
   bbdx = (Math.abs(bbdx)+1)*Math.sign(bbdx);
   bbdy = (Math.abs(bbdy)+1)*Math.sign(bbdy);

  }
  //Tracking clicks on red circle
  if(mouseX - rx < 50 && mouseX - rx > -50
  && mouseY - ry < 50 && mouseY - ry > -50){
      console.log("bad");
  }
}

Upvotes: 1

Related Questions