Javascript Animation Example Using requestAnimFrame, Basic Trigonometry & HTML5 Canvas – Part 3

Updating previous version to remove the use of “new function()” from the JS code.

Alternate JS version, without classical inheritance

The original code works fine but it feels weird to be using classical inheritance in a prototypal language – “new function” inside “TIMSHAYA.Triganimation = new function()”. Below is version of the JS code that removes “new function” and replaces it with “function()”, adding a “return” statement that in turn exposes the public “init” method, while maintaining closure (inner function init()’s access to it’s external function’s private members like “numsqr”, “drawRect()” & “animate()”).

KEEP IN MIND: using the “new function” version might turn out to be faster in some cases as far as performance goes. In this case, jsPerf shows that Chrome 16 is the only browser where “new function” is faster than the inline version (unless I’m screwing up the test somehow).

Note: Don’t forget to define requestAnimFrame (see HTML file here).

var TIMSHAYA   = TIMSHAYA || {}; //create your own namespace 

(function(whichCanvas){ 

   TIMSHAYA.Triganimation = function(){     
            var numsqr = 40;
            var mShapes = [];   
            var canvas = document.getElementById(whichCanvas);
            var context = canvas.getContext("2d");    

            function drawRect(myRect)
            {            
                context.beginPath();
                context.rect(myRect.x, myRect.y, myRect.width, myRect.height);
                
                context.fillStyle = "#8ED6FF";
                context.fill();
                context.lineWidth = myRect.borderWidth;
                context.strokeStyle = "black";
                context.stroke();
            }

            function animate(lastTime, mShapes, animProp)
            {
                if (animProp.animate) 
                {            
                    var date = new Date();
                    var time = date.getTime();
                    var timeDiff = time - lastTime;

                    for(var j = 0; j < numsqr; j++)
                    {
                        mShapes[j].x = mShapes[j].centerX + Math.cos( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius;   
                        mShapes[j].y = mShapes[j].centerY + Math.sin( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius; 

                        (mShapes[j].angle < 360) ? mShapes[j].angle += 1 : mShapes[j].angle = 0;      
                    }                            
                    lastTime = time;
                    
                    // clear canvas
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    
                    // draw                    
                    for(var l = 0; l < numsqr; l++)
                       drawRect(mShapes[l]);                    
                    
                    // request new frame
                    requestAnimFrame(function(){
                        animate(lastTime,  mShapes, animProp);
                    })
                }
            }
         
            return {
                init: function() {           
                        
                         for(var i = 0; i < numsqr; i++)
                         {                     
                             mShapes[i] = {
                                angle:0,
                                width:20,
                                height:20,
                                x: 100 + i*10,
                                y: 270,
                                centerX: 290,
                                centerY: 290,      
                                radius: 250 - (1 + i * 5),            
                                borderWidth: 1
                            }
                         }
                     
                        var animProp = {
                            animate: false
                        }
                      
                        document.getElementById(whichCanvas).addEventListener("click", function(){
                            if (animProp.animate) {
                                animProp.animate = false;
                            }
                            else {
                                animProp.animate = true;
                                var date = new Date();
                                var time = date.getTime();
                                animate(time,  mShapes, animProp);
                            }
                        })
                      
                        for(var k = 0; k < numsqr; k++)
                           drawRect( mShapes[k] );                                   
                    
                }    
            };        

    }(); 
 
    TIMSHAYA.Triganimation.init();

})("myCanvas");

Advertisements