HTML5 人体运动的解剖学

Anatomy of a running man 可在线调节机器人外形和行走节奏。

html5, robot, move

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2188
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* https://twitter.com/raurir/status/613300949407272960 */

var con = console;

var dom = (function() {

function setAttributes(el, attrs) {
        for (var p in attrs) {
            el.setAttribute(p, attrs[p]);
        }
        return el;
    }

function element(element, props) {
        var el = document.createElement(element);
        setProps(el, props);
        el.setSize = function(w, h) {
            el.style.width = w + "px";
            el.style.height = h + "px";
        };
        return el;
    }

function canvas(w, h) {

var c;
        c = element("canvas");
        c.width = w;
        c.height = h;

var ctx = c.getContext("2d");

var circleRads = Math.PI * 2;
        ctx.drawCircle = function(x, y, r) {
            ctx.arc(x, y, r, 0, circleRads, false);
        }

return {
            canvas: c,
            ctx: ctx
        }
    }

function button(txt, props) {
        props.innerHTML = txt;
        var b = element("div", props);
        return b;
    }

function svg(tag, props) {
        var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
        setAttributes(el, props);
        el.setSize = function(w, h) {
            el.setAttribute("width", w);
            el.setAttribute("height", h);
        };
        return el;
    }

return {
        element: element,
        canvas: canvas,
        button: button,
        svg: svg
    }

})();

var limbs = {
    "body": {
        "range": 0,
        "baserot": 0,
        "length": 0,
        "offset": 0
    },
    "torso": {
        "range": 0,
        "baserot": Math.PI,
        "length": 100,
        "offset": 0
    },
    "thigh": {
        "range": 1,
        "baserot": 0.3,
        "length": 90,
        "offset": 0
    },
    "calf": {
        "range": -0.6,
        "baserot": -0.9,
        "length": 90,
        "offset": 1.6
    },
    "foot": {
        "range": 0.5,
        "baserot": 1.4,
        "length": 25,
        "offset": 0
    },
    "bicep": {
        "range": 0.9,
        "baserot": -0.5,
        "length": 70,
        "offset": 0
    },
    "forearm": {
        "range": 1.5,
        "baserot": 1.5,
        "length": 60,
        "offset": -0.3
    }
};

var iceskating = {
    "body": {
        "range": 0,
        "baserot": 0,
        "length": 0,
        "offset": 0
    },
    "torso": {
        "range": 0,
        "baserot": 2.5,
        "length": 100,
        "offset": 0
    },
    "thigh": {
        "range": 0.5,
        "baserot": 0.3,
        "length": 100,
        "offset": 0
    },
    "calf": {
        "range": -0.8,
        "baserot": -0.7,
        "length": 110,
        "offset": 2.9
    },
    "foot": {
        "range": 0,
        "baserot": 1.6,
        "length": 40,
        "offset": 0
    },
    "bicep": {
        "range": 1.6,
        "baserot": -0.3,
        "length": 85,
        "offset": 0
    },
    "forearm": {
        "range": 1.5,
        "baserot": 1,
        "length": 70,
        "offset": -0.3
    }
};
//limbs = iceskating;

var human = [{
    name: "body",
    parent: null,
    movement: limbs.body,
    phase: 0
}, {
    name: "torso",
    parent: "body",
    movement: limbs.torso,
    phase: 0
}, {
    name: "thigh1",
    parent: "body",
    movement: limbs.thigh,
    phase: 0
}, {
    name: "calf1",
    parent: "thigh1",
    movement: limbs.calf,
    phase: 0
}, {
    name: "foot1",
    parent: "calf1",
    movement: limbs.foot,
    phase: 0
}, {
    name: "thigh2",
    parent: "body",
    movement: limbs.thigh,
    phase: Math.PI
}, {
    name: "calf2",
    parent: "thigh2",
    movement: limbs.calf,
    phase: Math.PI
}, {
    name: "foothigh2",
    parent: "calf2",
    movement: limbs.foot,
    phase: Math.PI
}, {
    name: "bicep1",
    parent: "torso",
    movement: limbs.bicep,
    phase: 0
}, {
    name: "forearm1",
    parent: "bicep1",
    movement: limbs.forearm,
    phase: 0
}, {
    name: "bicep2",
    parent: "torso",
    movement: limbs.bicep,
    phase: Math.PI
}, {
    name: "forearm2",
    parent: "bicep2",
    movement: limbs.forearm,
    phase: Math.PI
}, ];

var sw = 400;
var sh = 400;
var cx = sw / 2;
var cy = 0;
var horizon = sh - 50;
var blockSize = 10;
var creature = {};
var inputs = [];

function showRenderer(target) {
    var ids = ["jscanvas", "nested", "keyframes"];
    for (var i in ids) {
        var id = ids[i];
        document.getElementById(id).style.display = (id === target) ? "block" : "none";
        document.getElementById("button-" + id).className = (id === target) ? "button selected" : "button";
    }
}

function createButtons() {
    var buttons = dom.element("div", {
        style: {
            position: "absolute",
            top: sh + 20 + "px"
        }
    });
    document.body.appendChild(buttons);

function createEditor(limbs) {

var editor = dom.element("div", {
        id: "editor",
        style: {
            color: "white",
            "font-size": "10px",
            position: "absolute",
            top: 10 + "px",
            left: sw + "px"
        }
    });
    var output = dom.element("pre", {
        id: "output",
        style: {
            position: "absolute",
            top: 0 + "px",
            left: 270 + "px"
        }
    });

function outputSettings() {
        output.innerHTML = "var limbs = " + JSON.stringify(limbs, null, "\t") + ";";
    };
    outputSettings();

function edit(l, k) {
        var min = 0,
            multiplier = 0.001,
            max = Math.PI * 2 / multiplier;
        if (k === "length") {
            max = 200;
            multiplier = 1;
        }

var value = limbs[l][k];

editor.appendChild(edit);
        edit.appendChild(label);
        edit.appendChild(input);
        edit.appendChild(display);
        input.addEventListener("change", function(e) {
            showRenderer("jscanvas");
            var newValue = parseFloat(e.target.value) * multiplier;
            limbs[l][k] = newValue;
            display.value = newValue;
            outputSettings();
        })
        return input;
    }

for (var l in limbs) {
        for (var k in limbs[l]) {
            inputs.push(edit(l, k));
        }
    }

// var randomise = createButton("Random", function(e) {
    // 	for (var i in inputs) {
    // 		inputs[i].value = inputs[i].value * (0.8 + Math.random() * 0.4);
    // 		inputs[i].dispatchEvent(new Event('change'));
    // 	}
    // });

// var morph = createButton("Morph", function(e) {
    // 	for (var i in inputs) {
    // 		inputs[i].newValue = inputs[i].value * (0.8 + Math.random() * 0.4);
    // 	}
    // });

document.body.appendChild(editor);
    editor.appendChild(output);
}

function createLimbKeyframe(options) {
    var parent = options.parent;

// con.log("createLimbKeyframe", options)

var translationX = options.movement.length;
    var translationY = 0;
    var rotationStart = options.movement.baserot - options.movement.range;
    var rotationEnd = options.movement.baserot + options.movement.range;

var divKeyframe = dom.element("div", {
        id: options.name,
        className: "limb"
    });
    var divJoint = dom.element("div", {
        id: options.name + "-joint",
        className: "joint"
    });

if (parent) {
        parent.divJoint.appendChild(divKeyframe);
    } else {
        document.body.appendChild(divKeyframe);
    }
    divKeyframe.appendChild(divJoint);

var time = 2;
    // 0.63 is a magic number - on my machine syncs up css keyframes with js.
    var delay = (-0.63 + -time * (options.movement.offset + options.phase) / (Math.PI * 2));
    var animation = options.name + "-animation " + time + "s " + delay + "s ease-in-out infinite;"
    var animationOpposite = options.name + "-joint-animation " + time + "s " + delay + "s ease-in-out infinite;"

"#" + options.name + "-joint {",
        "animation: " + animationOpposite,
        "-webkit-animation: " + animationOpposite,
        "};",
        "@keyframes " + options.name + "-joint-animation {",
        transformJoint.join(""),
        "}",
        "@-webkit-keyframes " + options.name + "-joint-animation {",
        transformJoint.join(""),
        "}"

];

return {
        divKeyframe: divKeyframe,
        divJoint: divJoint,
        css: css,
    }

}

function createLimb(options) {

var parent = options.parent;
    if (parent) {
        options.parent = creature[parent];
        parent = options.parent;
    }

var keyframe = createLimbKeyframe(options),
        css = keyframe.css,
        divKeyframe = keyframe.divKeyframe,
        divJoint = keyframe.divJoint;

return {
        name: options.name,
        options: options,
        div: div,

css: css,
        divKeyframe: divKeyframe,
        divJoint: divJoint,

pos: {
            sx: 0,
            sy: 0,
            ex: 0,
            ey: 0
        },
        calc: function(time) {
            var osc = options.movement.baserot + Math.sin(time + options.movement.offset + options.phase) * options.movement.range;
            this.position(osc);
            return Math.max(this.pos.sy, this.pos.ey);
        },
        position: function(osc) {
            this.osc = osc;
            var pos = {
                sx: 0,
                sy: 0,
                ex: 0 + Math.sin(osc) * options.movement.length,
                ey: 0 + Math.cos(osc) * options.movement.length
            }

var translationX = 0,
                rotation = osc;

if (options.parent) {
                var parent = options.parent;
                pos.sx += parent.pos.ex;
                pos.sy += parent.pos.ey;
                pos.ex += parent.pos.ex;
                pos.ey += parent.pos.ey;

translationX = parent.options.movement.length;
                rotation = -parent.osc + osc;
            }

this.translationX = translationX;
            this.rotationRad = rotation;
            this.pos = pos;
        },
        render: function(x, y) {
            ctx.beginPath();
            ctx.lineWidth = 3;
            ctx.strokeStyle = "#090";
            ctx.fillStyle = "#0a0";
            ctx.moveTo(x + this.pos.sx, y + this.pos.sy);
            ctx.lineTo(x + this.pos.ex, y + this.pos.ey);
            ctx.stroke();
            ctx.closePath();

ctx.beginPath();
            ctx.drawCircle(x + this.pos.sx, y + this.pos.sy, blockSize / 2);
            ctx.drawCircle(x + this.pos.ex, y + this.pos.ey, blockSize / 2);
            ctx.closePath();
            ctx.fill();

var parent = options.parent;
            var tx = parent ? this.translationX : y,
                ty = parent ? 0 : sw / 2;
            div.style.transform = "translate(" + tx + "px," + ty + "px)rotate(" + this.rotationRad + "rad)";
        }
    }
}

function render(t) {

for (var i in inputs) {
        if (inputs[i].newValue && inputs[i].newValue != inputs[i].value) {
            inputs[i].value -= (inputs[i].value - inputs[i].newValue) * 0.1;
            inputs[i].dispatchEvent(new Event('change'));
        }
    }

var time = t * Math.PI / 1000;

ctx.fillStyle = "#030";
    ctx.fillRect(0, 0, sw, sh);
    ctx.fillStyle = "#060";
    ctx.fillRect(cx - sw / 2, horizon, sw, 10);

// calculate impact with ground, ie maximum y position.
    // we can hope it's either the end of the calf or the end of the foot.
    // but walking on knees or head IS accepted.
    var max = 0;
    for (var l in creature) {
        max = Math.max(max, creature[l].calc(time)); // calculate each limb position
    }
    var x = cx,
        y = horizon - max - blockSize / 2;
    for (l in creature) {
        creature[l].render(x, y); // render each limb
    }

requestAnimationFrame(render);

}

function init(settings, limbs) {

bmp = dom.canvas(sw, sh);
    bmp.canvas.id = "jscanvas";
    bmp.canvas.style.display = "none";
    ctx = bmp.ctx;
    document.body.appendChild(bmp.canvas);

creature = {};
    for (var c in settings) {
        var bit = settings[c];
        creature[bit.name] = createLimb(bit);
    }
    con.log(creature);

createEditor(limbs);

createButtons();

var divnested = dom.element("div", {
        id: "nested",
        style: {
            position: "absolute",
            display: "none",
            left: 0,
            top: 0,
            width: sh + "px",
            height: sw + "px",
            transform: "rotate(-90deg)scale(-1,1)",
            background: "rgba(255,0,0,0.2)"
        }
    });
    document.body.appendChild(divnested);
    divnested.appendChild(creature.body.div);

var divKeyframes = dom.element("div", {
        id: "keyframes",
        style: {
            position: "absolute",
            // display: "none",
            top: 0,
            left: 0,
            width: sh + "px",
            height: sw + "px",
            transform: "rotate(-90deg)scale(-1,1)",
            background: "rgba(0,0,255,0.2)"
        }
    });
    document.body.appendChild(divKeyframes);
    divKeyframes.appendChild(creature.body.divKeyframe);

render(0);
}

init(human, limbs);

编译

CSS

HTML

Anatomy of a running man 可在线调节机器人外形和行走节奏。

html5, robot, move

编辑器支持Emmet

快捷键

Anatomy of a running man 可在线调节机器人外形和行走节奏。

html5, robot, move

HTML5 GSAP 做引体向上体育运动的小O同学

HTML5 Canvas三角形网格组成的球体在水面颠簸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：