Inverse Kinematics

README

#本を参考にIKを作っていきます。

jsdoit.css

@import "compass/reset";

canvas {
    border: solid 1px #999;
}

jsdoit.html

<canvas id="canvas" width="400" height="400"></canvas>
<script src="http://jsrun.it/assets/r/6/s/P/r6sPF"></script>
<script src="http://jsrun.it/assets/7/K/r/9/7Kr9z"></script>

jsdoit.js

(function (win, doc) {

    'use strict';

    var canvas = doc.getElementById('canvas'),
        context = canvas.getContext('2d'),

        //segments.
        segment0 = new Segment(50, 15),
        segment1 = new Segment(50, 10),
        segment2 = new Segment(50, 15),
        segment3 = new Segment(50, 10),

        //sliders.
        speedSlider      = new Slider(0, 0.2, 0.08),
        thighRangeSlider = new Slider(0, 90, 45),
        thighBaseSlider  = new Slider(0, 180, 90),
        calfRangeSlider  = new Slider(0, 90, 45),
        calfOffsetSlider = new Slider(-3.14, 3.14, -1.57),
        gravitySlider    = new Slider(0, 1, 0.2),

        vx    = 0,
        vy    = 0,
        cycle = 0;

    function walk(segA, segB, cyc) {

        var angle0 = (Math.sin(cyc) * thighRangeSlider.value + thighBaseSlider.value) * Math.PI / 180,
            angle1 = (Math.sin(cyc + calfOffsetSlider.value) * calfRangeSlider.value + calfRangeSlider.value) * Math.PI / 180;

        segA.rotation = angle0;
        segB.rotation = segA.rotation + angle1;
        segB.x = segA.getPin().x;
        segB.y = segA.getPin().y;
    }

    function setVelocity() {
        vy += gravitySlider.value;
        segment0.x += vx;
        segment0.y += vy;
        segment2.x += vx;
        segment2.y += vy;
    }

    function checkFloor(seg) {
        var yMax = seg.getPin().y + (seg.height / 2);
        
        if (yMax > canvas.height) {
            var dy = yMax - canvas.height;
            segment0.y -= dy;
            segment1.y -= dy;
            segment2.y -= dy;
            segment3.y -= dy;
        }
    }


    segment0.x = 200;
    segment0.y = 200;
    segment2.x = 200;
    segment2.y = 200;

    speedSlider.x = 10;
    speedSlider.y = 10;
    speedSlider.captureMouse(canvas);

    thighRangeSlider.x = 30;
    thighRangeSlider.y = 10;
    thighRangeSlider.captureMouse(canvas);

    thighBaseSlider.x = 50;
    thighBaseSlider.y = 10;
    thighBaseSlider.captureMouse(canvas);

    calfRangeSlider.x = 70;
    calfRangeSlider.y = 10;
    calfRangeSlider.captureMouse(canvas);

    calfOffsetSlider.x = 90;
    calfOffsetSlider.y = 10;
    calfOffsetSlider.captureMouse(canvas);

    gravitySlider.x = 110;
    gravitySlider.y = 10;
    gravitySlider.captureMouse(canvas);

    (function drawFrame() {
        window.requestAnimationFrame(drawFrame, canvas);

        context.clearRect(0, 0, canvas.width, canvas.height);

        cycle += speedSlider.value;

        setVelocity();
        walk(segment0, segment1, cycle);
        walk(segment2, segment3, cycle + Math.PI);
        checkFloor(segment1);
        checkFloor(segment3);

        segment0.draw(context);
        segment1.draw(context);
        segment2.draw(context);
        segment3.draw(context);

        speedSlider.draw(context);
        thighRangeSlider.draw(context);
        thighBaseSlider.draw(context);
        calfRangeSlider.draw(context);
        calfOffsetSlider.draw(context);
        gravitySlider.draw(context);
    }());
}(window, document));