Ejemplo de animacion de articulacion de marioneta usando arreglo

animacion-json.js

var av = new Avatar(5);
av.scale(0.75);
var pausa = false;
av.setLimit(6,-90,0);
av.setAngle(6,1);
av.setAngle(7,75);
var rep = 0;
var bola = {r:30, col:color(224, 85, 168), y:50, rep:0, sube:false};
var draw = function() {
    background(240, 232, 240);
    if (bola.sube) {
        if (--bola.y<90) {
            bola.sube=false;
        }
    } else {
        if (++bola.y>180) {
            bola.sube=true;
        }
    }
    fill(bola.col);
    ellipse(200,bola.y,bola.r,bola.r);
    var pos = av.getAngle(6);
    av.next(6);
    if (pos>=0) {
        if (++rep > 2) {
            av.setAngle(7,0);
            noLoop();
        }
    }
    av.draw(mouseX,mouseY);
};

var mouseClicked = function() {
    pausa = !pausa;
    if (pausa) {
        noLoop();
    } else {
        loop();   
    }
};

dominadas1.js

var av = new Avatar(5);
av.scale(0.75);
var pausa = false;
av.setLimit(6,-90,0);
//println(av.getLimit(6));
av.setAngle(7,75);
var rep = 0;
var draw = function() {
    background(240, 232, 240);
    av.next(6);
    var pos = av.getAngle(6);
    if (pos>=0) {
        if (++rep > 2) {
            av.setAngle(7,0);
            noLoop();
        }
    }
    av.draw(mouseX,mouseY);
};

var mouseClicked = function() {
    pausa = !pausa;
    if (pausa) {
        noLoop();
    } else {
        loop();   
    }
};

messi-using-next.js

var av = new Avatar(5);
av.scale(0.75);
var mov = [10,30,30,10,0,-10,-30,-30,-10];
//var i = 0;
var pausa = false;
//frameRate(15);
av.setLimit(6,-90,0);
av.setAngle(7,90);
var draw = function() {
    background(240, 232, 240);
    //i = (i+1) % mov.length;
    //av.rotate(6,-mov[i]);
    av.next(6);
    //av.rotate(7,mov[i]);
    //av.next(7);
    av.draw(mouseX,mouseY);
};

var mouseClicked = function() {
    pausa = !pausa;
    if (pausa) {
        noLoop();
    } else {
        loop();   
    }
};

panterita-messi.js

var av = new Avatar(5);
av.scale(0.75);
var mov = [10,30,30,10,0,-10,-30,-30,-10];
var i = 0;
var pausa = false;
frameRate(5);
var draw = function() {
    background(240, 232, 240);
    i = (i+1) % mov.length;
    av.rotate(6,-mov[i]);
    av.rotate(7,mov[i]);
    av.draw(mouseX,mouseY);
};

var mouseClicked = function() {
    pausa = !pausa;
    if (pausa) {
        noLoop();
    } else {
        loop();   
    }
};