HTML5 Game - Canvas Animation Oscillation

Creating oscillation

The following code shows how to do oscillation.

Demo

<!DOCTYPE HTML>
<html>
    <head>
        <script>
class MyObject{/*from w w w.ja  va  2 s  . com*/
   draw(animationController){
      let canvas = animationController.getCanvas();
      let context = animationController.getContext();

      let centerX = canvas.width / 2 - this.width / 2;
      let amplitude = 150; // pixels
      let period = 2000; // ms
                                   
      this.x = amplitude * Math.sin(animationController.getTime() * 2 * Math.PI / period) + centerX;
    
      animationController.clear();
      context.beginPath();
      context.fillStyle = "blue";
      context.fillRect(this.x, this.y, this.width, this.height);
   }
   constructor(){
      this.x = 0;
      this.y = 20;
      this.width = 10;
      this.height = 10;

      this.vx = 0;
      this.vy = 0;
   }
   
}    
class MyAnimation {
   constructor(canvasId){
        this.canvas = document.getElementById(canvasId);
        this.context = this.canvas.getContext("2d");
        this.t = 0;
        this.timeInterval = 0;
        this.startTime = 0;
        this.lastTime = 0;
        this.frame = 0;
        this.animating = false;
        
        window.requestAnimFrame = (function(callback){
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback){
                window.setTimeout(callback, 1000 / 60);
            };
        })();
   }
   getContext(){
      return this.context;
   };

   getCanvas(){
      return this.canvas;
   };

   clear(){
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
   };

   setDrawStage(func){
       this.drawStage = func;
   };

   isAnimating = function(){
       return this.animating;
   };

   getFrame(){
      return this.frame;
   };

   start(){
        this.animating = true; 
        let date = new Date();
        this.startTime = date.getTime();
        this.lastTime = this.startTime;
        
        if (this.drawStage !== undefined) {
            this.drawStage();
        }
        
        this.animationLoop();
   };

   stop(){
       this.animating = false;
   };

   getTimeInterval(){
       return this.timeInterval;
   };

   getTime(){
    return this.t;
   };

   getFps(){
      return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
   };

   animationLoop(){
        let that = this;
        
        this.frame++;
        let date = new Date();
        let 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();
            });
        }
    }   
} 
            window.onload = function(){
                let myAnimation = new MyAnimation("myCanvas");
                let canvas = myAnimation.getCanvas();
                let context = myAnimation.getContext();
                let myObject = new MyObject();
                myAnimation.setDrawStage(function(){
                    myObject.draw(myAnimation);
                });
                
                myAnimation.start();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Note

The equation of harmonic oscillation:

x(t) = A * sin (t * 2pi / T + delta) + x0

In the code above, we've set the amplitude A to 150, the period T to 2 seconds, and the offset x0 and the phase difference delta to 0.

HTML5 Game - Canvas Animation Oscillation

Creating oscillation

Demo

Note

Related Topics