HTML Canvas Animation Bouncing ball

Description

HTML Canvas Animation Bouncing ball

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  var Animation = function(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext("2d");
    this.t = 0;//from www.j ava 2 s.  c  o m
    this.timeInterval = 0;
    this.startTime = 0;
    this.lastTime = 0;
    this.frame = 0;
    this.animating = false;

    // provided by Paul Irish
    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame
          || window.webkitRequestAnimationFrame
          || window.mozRequestAnimationFrame
          || window.oRequestAnimationFrame
          || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
    })();
  };

  Animation.prototype.getContext = function() {
    return this.context;
  };

  Animation.prototype.getCanvas = function() {
    return this.canvas;
  };

  Animation.prototype.clear = function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  };

  Animation.prototype.setDrawStage = function(func) {
    this.drawStage = func;
  };

  Animation.prototype.getFrame = function() {
    return this.frame;
  };

  Animation.prototype.start = function() {
    this.animating = true;
    var date = new Date();
    this.startTime = date.getTime();
    this.lastTime = this.startTime;

    if (this.drawStage !== undefined) {
      this.drawStage();
    }

    this.animationLoop();
  };

  Animation.prototype.stop = function() {
    this.animating = false;
  };
  Animation.prototype.getTimeInterval = function() {
    return this.timeInterval;
  };

  Animation.prototype.animationLoop = function() {
    var that = this;

    this.frame++;
    var date = new Date();
    var thisTime = date.getTime();
    this.timeInterval = thisTime - this.lastTime;
    this.t += this.timeInterval;
    this.lastTime = thisTime;

    if (this.drawStage !== undefined) {
      this.drawStage();
    }

    if (this.animating) {
      requestAnimFrame(function() {
        that.animationLoop();
      });
    }
  };
                function applyPhysics(anim, particle){ 

                    var gravity = 1500; // pixels / second^2 
                    var collisionDamper = 0.99; // 1% velocity lost when collision occurs 
                    var floorFriction = 100; // pixels / second^2 
                    var timeInterval = anim.getTimeInterval(); 
                    var canvas = anim.getCanvas(); 
                     
                    // gravity 
                    particle.vy += gravity * timeInterval / 1000; 
                     
                    // position 
                    particle.y += particle.vy * timeInterval / 1000; 
                    particle.x += particle.vx * timeInterval / 1000; 
                     
                    // floor condition 
                    if (particle.y > (canvas.height - particle.radius)) { 
                        particle.y = canvas.height - particle.radius; 
                        particle.vy *= -1; 
                        particle.vy *= collisionDamper; 
                    } 
                     
                    // floor friction 
                    if (particle.y == canvas.height - particle.radius) { 
                        if (particle.vx > 0.1) { 
                            particle.vx -= floorFriction * timeInterval /  1000; 
                        } 
                        else if (particle.vx < -0.1) { 

                            particle.vx += floorFriction * timeInterval / 1000; 
                        } 
                        else { 
                            particle.vx = 0; 
                        } 
                    } 
                     
                    // ceiling  condition 
                    if (particle.y < (particle.radius)) { 
                        particle.y = particle.radius; 
                        particle.vy *= -1; 
                        particle.vy *= collisionDamper; 
                    } 
                     
                    // right wall condition 
                    if (particle.x > (canvas.width - particle.radius)) { 
                        particle.x = canvas.width - particle.radius; 
                        particle.vx *= -1; 
                        particle.vx *= collisionDamper; 
                    } 
                     
                    // left wall condition 
                    if (particle.x < (particle.radius)) { 
                        particle.x = particle.radius; 
                        particle.vx *= -1; 
                        particle.vx *= collisionDamper; 
                    } 
                } 

                window.onload = function(){ 
                    var anim = new Animation("myCanvas"); 
                    var canvas = anim.getCanvas(); 
                    var context = anim.getContext(); 

                    var particle = { 
                        x: 10, 
                        y: canvas.height - 10, 
                        vx: 800, // px / second 
                        vy: -900, // px / second 
                        radius: 10 
                    }; 

                     anim.setDrawStage(function(){ 
                         // update 
                         applyPhysics(this, particle); 
                          
                         // clear 
                         this.clear(); 
                          
                         // draw  
                         context.beginPath(); 
                         context.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI, false); 
                         context.fillStyle = "blue"; 
                         context.fill(); 
                     }); 
                     anim.start(); 
                 }; 

</script>
</head>
<body>
  <canvas id="myCanvas" width="600" height="350"
    style="border: 1px solid black;">
        </canvas>
</body>
</html>



PreviousNext

Related