animation

HTML

<canvas id='cv' width=205 height=190></canvas>
<br>
<button id='switchAnim' style='margin-left:70px;'>switch Anim</button>
<!--- <output id='output'></output> --->

JavaScript

setupEverything();

/*   Available : 
     • cv, context, canvasWidth, canvasHeight
     • $ is getElementById
     • perfNow() with sub-ms accuracy, 
     • requestAnimationFrame(),
     • stop-watch : startCW(), stopCW(), lastCW().
     • basic rsc handling : 
           var myImg = addRsc(Image, 'http://...') ;
      or    var myTxt = addRsc(AnyFile, 'http://...') ;
                 AnyFile stands for a XMLHttpRequest
     • cl is console.log
     • isSafari, isiOS, isOpera, isChrome, isIE
     • mouse { x, y, down }
     • keyState [keycode]                             
     • by calling launchAnimate, animate will run, 
           and applicationTime is available.
*/

// Canvas setup
var cv = $('cv');
var context = cv.getContext('2d');
var canvasWidth = cv.width,
    canvasHeight = cv.height;
// button
var switchAnimButton = $('switchAnim');
switchAnimButton.addEventListener('click', switchAnim);

// -----------------------------------------------------
//            Interesting code goes here
// -----------------------------------------------------

// ---  main ---  
// called when ressources + window are loaded.
function main() {
    fillTextureCoords(myBird, 182, 168, 14)
    launchAnimate();
}

// --- rsc ---
var myBird = addRsc(Image, 'http://i.stack.imgur.com/Eisr7.png');



// ____--------------------------------------_______
//           --- Bird animation ----

// array containig texture coords of all frames.
var textureCoords = [];

// fill the textureCoords using image img, assuming
//   frames are tiled in a 'regular way', sized tw X th, 
//   uses only cnt frames.
function fillTextureCoords(img, tw, th, cnt) {
    var w = img.width,
        h = img.height;
    var hCount = Math.floor(w / tw),
        vCount = Math.floor(h / th);
    for (var vIndex = 0; vIndex < vCount; vIndex++)
    for (var hIndex = 0; hIndex < hCount; hIndex++) {
        textureCoords.push({
            u: hIndex * tw,
            v: vIndex * th,
            w: tw,
         ...