Usando arreglo de objetos para animaciones (ver 0.3)

objetos-animacion.js

var av = new Avatar(0);
var mov = [ // coreografia
    [ // paso 1
      {scale:0.3, rotate:10, x:200, y:200},
      {a:1,g:45}, {a:3,g:-43}, {a:5, g:5}
    ], 
    [ // paso 2
      {scale:0.5, rotate:0, x:210, y:210},
      {a:1,g:90}, {a:3,g:-88}, {a:5,g:10}
    ],
    [ // paso 3
      {scale:0.7, rotate:-10, x:200, y:200},
      {a:1,g:105}, {a:3,g:-102}, {a:5,g:5}
    ],
    [  // paso 4
      {scale:0.9, rotate:0, x:190, y:210},
      {a:1,g:128}, {a:3,g:-126}, {a:5,g:0}
    ]
];

var paso=0, inc=1, maxp=mov.length, pausa=false;
frameRate(2);

var draw = function() {
    if ( paso<0 ) { inc=1; paso=0; } //.3 end-dec
    if ( paso>=maxp ) { inc=-1; paso=maxp-1; } //.3 end-inc
    background(255, 200, 0);
    var sim = mov[paso];
    paso += inc;
    for (var i=1; i<sim.length; i++) {
        var pos = sim[i];
        av.setAngle(pos.a,pos.g);
    }
    var f = sim[0]; 
    av.scale(f.scale);
    av.rotateAvatar(f.rotate);
    av.draw(f.x,f.y);
    av.scale(1.0/f.scale);
};

var mouseClicked = function() { //.3 (des)congela animacion
    if (pausa) { loop(); } else { noLoop(); }
    pausa = !pausa;
};

//Ardilla que festeja saltando
//Codigo en http://podcast.itch.edu.mx/live-editor/
//Utizando arreglos de metodos
//Con un clic se para o se reanuda la animacion
var av = new Avatar(0);
var mov = [ // coreografia ver 0.3


    [{scale:0.3, rotate:0, x:200, y:200}, {art:1,ang:0},  {art:2,ang:0}, {art:3,ang: 0}, {art:4,ang:-0},  {art:5,ang:0}, {art:6,ang:0},{art:7,ang:0}, {art:8,ang:-0}, {art:9,ang:-0}, {art:0,ang:0}], // paso 0
    
    [{scale:0.5, rotate:-10, x:220, y:200}, {art:1,ang:60},  {art:2,ang:60}, {art:3,ang: -60}, {art:4,ang:-60},  {art:5,ang:60}, {art:6,ang:20},{art:7,ang:20}, {art:8,ang:-20}, {art:9,ang:-20}, {art:0,ang:-45}], // paso 1
    
    [{scale:0.6, rotate:10, x:200, y:200}, {art:1,ang:45},  {art:2,ang:-45}, {art:3,ang: -60}, {art:4,ang:-46},  {art:5,ang:40}, {art:6,ang:45},{art:7,ang:10}, {art:8,ang:-45}, {art:9,ang:-10}, {art:0,ang:45}], // paso 2
    
    [{scale:0.8, rotate:-10, x:220, y:200}, {art:1,ang:45},  {art:2,ang:45}, {art:3,ang: -45}, {art:4,ang:-46},  {art:5,ang:40}, {art:6,ang:60},{art:7,ang:10}, {art:8,ang:-62}, {art:9,ang:-10}, {art:0,ang:-45}], // paso 3
    
    [{scale:1, rotate:10, x:200, y:200}, {art:1,ang:45},  {art:2,ang:51}, {art:3,ang: -45}, {art:4,ang:-63},  {art:5,ang:40}, {art:6,ang:45},{art:7,ang:10}, {art:8,ang:-44}, {art:9,ang:-10}, {art:0,ang:46}], // paso 4


];

var paso = 0, maxp = mov.length,  pausa=false;
av.scale(0.8);
frameRate(1);

var draw = function() {
    if ( paso >= maxp ) { return; }
    background(255, 255, 0);
    var sim = mov[paso];
    paso++;
    for (var i=1; i<sim.length; i++) {
        var pos = sim[i];
        var art = pos.art;
        var ang = pos.ang;
        av.setAngle(art,ang);
    }

    var f = sim[0]; 
    av.scale(f.scale);//Escala el avatar con el parámetro de cada arreglo en el primer método
    av.rotateAvatar(f.rotate);//Rota el avatar con el parámetro de cada arreglo en el primer método
    av.draw(f.x,f.y);//Posiciona el avatar con el parámetro de cada arreglo en el primer método
    av.scale(1.0/f.scale);
    if(paso===mov.length){
        paso=0;
    }
};
/*Funcion para parar o reanudar la animacion*/
var mouseClicked = function() { //.3 (des)congela animacion
    if (pausa) { loop(); } else { noLoop(); }
    pausa = !pausa;
};