canvas ball physics animation

Question

I want to animate ball in html canvas like this.

ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();

start position is left top corner and ball's maximum height position is always the same

also I don't want to use javascript physics libraries

thanks

Answer 1

Theres a few ways to do this. Heres one way that keeps some physics like properties to make the balls look like they are bouncing realistically

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
balls = [];

canvas.width = 600;
canvas.height = 400;

var ball = function(){
    this.x = Math.random()*10;    
    this.y= Math.random()*400;
    this.speed =(Math.random()*10)*.1;
    this.force = -this.speed*10;
    this.curForce = this.force;
};

ball.prototype.update = function(){
    this.x +=this.speed;
    this.y += this.curForce+=0.1;

    if(this.y >= 400){
        this.curForce = this.force;               
    }
};

ball.prototype.render = function(){
   ctx.beginPath();
   ctx.arc(this.x,this.y,5,0,360);
   ctx.fill();
};


function init(){
    for(var i = 0; i < 10; i++){
        balls.push(new ball());   
    }
    tick();
};


function tick(){
    ctx.clearRect(0,0,600,400);
    var i = 10;
    while(i--){
       balls[i].update(); 
       balls[i].render();        
    }

    setTimeout(tick, 10);
};

init();

Live Demo 1

And heres a second way thats even easier and probably more of what you are looking for, but has no realistic physic properties to it at all.

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

canvas.width = 600;
canvas.height = 200;

// Ball stuffs
var x = 0;
    y =  0,
    angle = 0;

function drawBall(){
     x+= 0.5;    // this is the speed at which the ball moves to the right
     y+= Math.sin(angle);
     angle+=0.008; // To get exactly what you want play with this line

     ctx.clearRect(0,0,600,400);
     ctx.beginPath();
     ctx.arc(x,y,5,0,360);
     ctx.fill();

    if(y>=canvas.height){
      angle = -angle; // if the ball hits the bottom of the canvas reverse the angle.
    }
    setTimeout(drawBall, 10);
}

drawBall();​

Live Demo 2

Answer 2

There are two ways to do this, one is to do it using an image, and the other is to do it as you have started here, drawing the ball bouncing.

If you want to draw it, you will need an animation loop. In the loop you need to update the position of the ball, clear the contents of the canvas, and draw the ball in its position, and then repeat.

Your moving from left to right, so that should be at a constant rate, and then your bouncing. the basic way to bounce would be to use a sin() function to determine the position of the ball, when you reach the bottom you need to adjust to flip the arc so that it goes back up instead of continuing, a *-1 works, or the inverse of sin.

Lastly, if you want it to be realistic, you will need to ease the ball up and down, using an easing function. Check this link out for the easing function. http://jstween.sourceforge.net/moveSquare.html