Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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();

enter image description here

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

share|improve this question

migrated from stackoverflow.com May 21 '12 at 16:56

This question came from our site for professional and enthusiast programmers.

1  
What have you tried? –  therefromhere May 20 '12 at 2:52
add comment

2 Answers 2

up vote 4 down vote accepted

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

share|improve this answer
1  
Thanks! this is exactly what I want –  Nick Sanders May 22 '12 at 4:06
add comment

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

share|improve this answer
1  
thanks. I've tried but I need example –  Nick Sanders May 20 '12 at 3:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.