Move toward an object at a constant speed

Shows how to move one object towards another at a constant speed.

by loktar

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 500,
    height = 500,
    mX = width/2,
    mY = height/2;

canvas.width = width;
canvas.height = height;

canvas.addEventListener("click", function (e) {
    mX = e.pageX;
    mY = e.pageY;
});


var Ball = function (x, y, radius, color) {
    this.x = x || 0;
    this.y = y || 0;
    this.radius = radius || 10;
    this.speed = 5;
    this.color = color || "rgb(255,0,0)";

    this.velX = 0;
    this.velY = 0;
}

Ball.prototype.update = function (x, y) {
    // get the target x and y
    this.targetX = x;
    this.targetY = y;

    // We need to get the distance this time around
    var tx = this.targetX - this.x,
        ty = this.targetY - this.y,
        dist = Math.sqrt(tx * tx + ty * ty);

    /* 
     * we calculate a velocity for our object this time around
     * divide the target x and y by the distance and multiply it by our speed
     * this gives us a constant movement speed.
     */

    this.velX = (tx / dist) * this.speed;
    this.velY = (ty / dist) * this.speed;

    // Stop once we hit our target. This stops the jittery bouncing of the object. 
    if (dist > this.radius / 2) {
        // add our velocities
        this.x += this.velX;
        this.y += this.velY;
    }
};

Ball.prototype.render = function () {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    // draw our circle with x and y being the center
    ctx.arc(this.x - this.radius / 2, this.y - this.radius / 2, this.radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
};

var ball1 = new Ball(width / 2, height / 2, 10);

function render() {
    ctx.clearRect(0, 0, width, height);
    ball1.update(mX, mY);
    ball1.render();

    requestAnimationFrame(render);

}

render();