7

I want to make "animation" of my Rect more smooth. Currently it's really clunky. I know the reason for it. One of the coordinates becomes wanted value before the other.

For example if I'm currently at (0,0) and I need to go to (150,75) and I increment each one equally every second , y-cord will come much sooner than x-cord.

enter image description here

var canvas = document.getElementById('canvas');
var ctx = document.getElementById('canvas').getContext('2d');

var aniTimer;

var x;
var y;

var tx = tx || 0;
var ty = ty || 0;

var xDir;
var yDir;

function followMouse(e) {
  x = e.offsetX;
  y = e.offsetY;
  cancelAnimationFrame(aniTimer);
  moveObject();
}

function moveObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  if (x < tx) {
    xDir = -1;
  } else {
    xDir = 1;
  }
  if (y < ty) {
    yDir = -1;
  } else {
    yDir = 1;
  }
  tx = tx != x ? tx + xDir : tx;
  ty = ty != y ? ty + yDir : ty;
  
  
  ctx.fillRect(tx - 25 , ty + 25, 50, 10);
  if ( tx != x || ty != y ) {
    aniTimer = window.requestAnimationFrame(moveObject);
  }
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

canvas.addEventListener('mousemove', _.throttle(function(e) {
  followMouse(e);
}, 100));

window.addEventListener('resize', resizeCanvas, false);

resizeCanvas();
html,
body {
  margin: 0;
  height: 100%;
}

canvas {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<canvas id="canvas"></canvas>
Paran0a
  • 3,359
  • 3
  • 23
  • 48

1 Answers1

6

That's because you set dir [+-1, +-1] instead [dx, dy] (the actual displacement), which are not always proportional.

Have a look at the modified snippet: 

var canvas = document.getElementById('canvas');
var ctx = document.getElementById('canvas').getContext('2d');

var x;
var y;

var tx = tx || 0;
var ty = ty || 0;

var xDir;
var yDir;

function followMouse(e) {
  x = e.pageX;
  y = e.pageY;
  moveObject();
}

function moveObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var scale =  0.2 * Math.max(canvas.width, canvas.height);
  xDir = (x - tx) / scale;
  yDir = (y - ty) / scale;
  tx = tx != x ? tx + xDir : tx;
  ty = ty != y ? ty + yDir : ty;


  ctx.fillRect(tx - 25, ty + 25, 50, 10);
  if (tx != x || ty != y) {
    window.requestAnimationFrame(moveObject);
  }
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

canvas.addEventListener('mousemove', _.throttle(function(e) {
  followMouse(e);
}, 100));

window.addEventListener('resize', resizeCanvas, false);

resizeCanvas();
html,
body {
  margin: 0;
  height: 100%;
}
canvas {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<canvas id="canvas" style="border: 1px solid black"></canvas>
Regis Portalez
  • 4,675
  • 1
  • 29
  • 41
  • I'll take some time to try to understand your answer. I'll mark it as correct then. Any chance you know why it starts to lag after you move your mouse a bit. Try to move your mouse up and down / right and left for like 20 sec, after that you'll see that movement is not smooth anymore. Atleast in my case. – Paran0a May 02 '16 at 12:36
  • it lags a bit because 100ms delay is quite large. Put 30 ms to have something smoother. But Honestly I didn't try to fix the entire code, just the direction issue you mentioned – Regis Portalez May 02 '16 at 12:41
  • Ok , just wondered if you maybe knew. Thanks for the answer tho! – Paran0a May 02 '16 at 12:45