html5 canvas animation along x- & y-axis

Question

Trying to animate an object along the canvas x- & y-axis in both positive and negative directions using 4 if statements. The thing that eludes(i'm new to JS) me is why im having problem animating along the negative x- & y-axis, also when i comment out the fourth if statement negative movement along the x-axis is possible but wont work when its active.

My guess is there is something wrong with the conditions in the if statements. But i am clueless at the moment.

http://pastebin.com/8ECXG4n0

Answer 1

The main pitfall is that because of the rotation, the direction size has to be used, which in this case always is the width. For the current size this isn't evident, if the width is different from the height you'd see the result (in the example below I've changed the dimensions for testing).

Trick 2 is to snap the x/y position after changing the direction, because then height becomes width and vice versa

     x += dirX * multiplier;
     y += dirY * multiplier;
     var margin = 10;

     if(dirX > 0 && x > cW - margin - width){
         degree = 90; dirX = 0; dirY = 1;
         x = cW - margin;
     }
     else if(dirY > 0 && y > cH - margin - width){
         degree = 180; dirX = -1; dirY = 0;
         y = cH - margin;
     }
     else if(dirX < 0 && x < margin + width){
         degree = 270; dirX = 0; dirY = -1;
         x = margin;
     }
     else if(dirY < 0  && y < margin + width){
         degree = 0; dirX = 1; dirY = 0;
         y = margin;
     }

Full code sample (the rest of the code is unchanged, except some switching of width and height to alter the shape):

  var canvas, ctx, x, y, dir, width, height, radius, height_rect, degree, dirX, dirY; function anim() { var multiplier = 3; var cW = canvas.width; var cH = canvas.height; width = 100; height = 60; radius = height / 2; height_rect = width - radius; ctx.clearRect(0, 0, cW, cH); ctx.fillStyle = "magenta"; ctx.strokeStyle = "magenta"; ctx.lineWidth = 1; ctx.save(); ctx.translate(x, y); ctx.rotate(degree * Math.PI / 180); ctx.translate(-x, -y); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + height_rect, y); ctx.arc(x + height_rect, y + radius, radius, - Math.PI / 2, Math.PI / 2); ctx.lineTo(x, y + height); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); x += dirX * multiplier; y += dirY * multiplier; var margin = 10; if(dirX > 0 && x > cW - margin - width){ degree = 90; dirX = 0; dirY = 1; x = cW - margin; } else if(dirY > 0 && y > cH - margin - width){ degree = 180; dirX = -1; dirY = 0; y = cH - margin; } else if(dirX < 0 && x < margin + width){ degree = 270; dirX = 0; dirY = -1; x = margin; } else if(dirY < 0 && y < margin + width){ degree = 0; dirX = 1; dirY = 0; y = margin; } requestAnimationFrame(anim); } function init() { canvas = document.getElementById("cvsAnim"); ctx = canvas.getContext("2d"); x = 10; y = 10; dirX = 1; dirY = 0; degree = Math.PI / 2; anim(); } init(); 

 canvas{ border: 1px solid; } 

 <canvas id="cvsAnim" width="400" height="400" style="background-color:"black"> <div id="animBox"></div>