jsdoでmatter その3

概要

jsdoでmatterやってみた。
倒立振子やってみた。

写真

サンプルコード

var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Body = Matter.Body,
    Events = Matter.Events,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    World = Matter.World,
    Constraint = Matter.Constraint,
    Bodies = Matter.Bodies;
var engine = Engine.create(),
    world = engine.world;
var render = Render.create({
    element: document.body,
    engine: engine,
    options: {
        width: 450,
        height: 450,
        showAngleIndicator: true
    }
});
Render.run(render);
var runner = Runner.create();
Runner.run(runner, engine);
World.add(world, [
    Bodies.rectangle(10, 225, 10, 450, { 
        isStatic: true
    }),
    Bodies.rectangle(440, 225, 10, 450, {
        isStatic: true
    }),
    Bodies.rectangle(225, 440, 450, 10, { 
        isStatic: true
    })
]);

var body = Bodies.rectangle(200, 0, 20, 100, {
    collisionFilter: { 
        group: -1
    } 
});
var ball = Bodies.circle(200, 70, 30, {
    collisionFilter: {
        group: -1 
    }
});
var furiko = Body.create({
    parts: [body, ball],
    isStatic: false
});
World.add(world, [furiko]);

var errd2 = 0;
var errd = 0;
var setd = 0;
function PDC(dt, input, setPoint) {
    var Kp = 0.03;
    var Kd = 0.0000005;
    var error;
    var u;
    error = setPoint - input;
    u = Kp * error + (Kd * (setPoint - setd) - Kd * (input - errd2)) / dt;
    errd2 = errd;
    errd = input;
    setd = setPoint;
    return u;
}

Events.on(engine, 'beforeUpdate', function(event) {    
    document.getElementById('helloWorld').innerHTML = furiko.angle.toFixed(2) + '<br>' + furiko.angularVelocity.toFixed(3) + '<br>';    
    var u = PDC(0.1, furiko.angle, 0);
    Body.setAngularVelocity(furiko, u);    
});

Render.lookAt(render, {
    min: {
        x: 0,
        y: 0 
    },
    max: { 
        x: 450,
        y: 450
    }
});

成果物

以上。