box2djsの作法 その3

# 概要

box2djsの作法、調べてみた。
大車輪にトライです。

# 写真


![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/01528a37-f2c5-c3db-52d0-c7e8375762a8.png)

# サンプルコード


```

function drawWorld(world, context) {
	for (var j = world.m_jointList; j; j = j.m_next) 
    {
		drawJoint(j, context);
	}
	for (var b = world.m_bodyList; b; b = b.m_next)
    {
		for (var s = b.GetShapeList(); s != null; s = s.GetNext()) 
        {
			drawShape(s, context);
		}
	}
}
function drawJoint(joint, context) {
	var b1 = joint.m_body1;
	var b2 = joint.m_body2;
	var x1 = b1.m_position;
	var x2 = b2.m_position;
	var p1 = joint.GetAnchor1();
	var p2 = joint.GetAnchor2();
	context.strokeStyle = '#00eeee';
	context.beginPath();
	switch (joint.m_type) 
    {
	case b2Joint.e_distanceJoint:
		context.moveTo(p1.x, p1.y);
		context.lineTo(p2.x, p2.y);
	break;
	case b2Joint.e_pulleyJoint:
	break;
	default:
		if (b1 == world.m_groundBody)
        {
			context.moveTo(p1.x, p1.y);
			context.lineTo(x2.x, x2.y);
		}
		else if (b2 == world.m_groundBody)
        {
			context.moveTo(p1.x, p1.y);
			context.lineTo(x1.x, x1.y);
		}
		else
        {
			context.moveTo(x1.x, x1.y);
			context.lineTo(p1.x, p1.y);
			context.lineTo(x2.x, x2.y);
			context.lineTo(p2.x, p2.y);
		}
	break;
	}
	context.stroke();
}
function drawShape(shape, context) {
	context.strokeStyle = '#ff0000';
	context.beginPath();
	switch (shape.m_type) 
    {
	case b2Shape.e_circleShape:
		{
			var circle = shape;
			var pos = circle.m_position;
			var r = circle.m_radius;
			var segments = 16.0;
			var theta = 0.0;
			var dtheta = 2.0 * Math.PI / segments;
			context.moveTo(pos.x + r, pos.y);
			for (var i = 0; i < segments; i++)
            {
				var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
				var v = b2Math.AddVV(pos, d);
				context.lineTo(v.x, v.y);
				theta += dtheta;
			}
			context.lineTo(pos.x + r, pos.y);
			context.moveTo(pos.x, pos.y);
			var ax = circle.m_R.col1;
			var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
			context.lineTo(pos2.x, pos2.y);
		}
	break;
	case b2Shape.e_polyShape:
		{
			var poly = shape;
			var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
			context.moveTo(tV.x, tV.y);
			for (var i = 0; i < poly.m_vertexCount; i++)
            {
				var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
				context.lineTo(v.x, v.y);
			}
			context.lineTo(tV.x, tV.y);
		}
	break;
	}
	context.stroke();
}

var worldAABB = new b2AABB();	
worldAABB.minVertex.Set(-1000, -1000);
worldAABB.maxVertex.Set(1000, 1000);
var gravity = new b2Vec2(0, 300);
var doSleep = false;		
var world = new b2World(worldAABB, gravity, doSleep);

var bouSd = new b2BoxDef();
bouSd.extents.Set(10, 10);
bouSd.restitution = 0.2;
var bouBd = new b2BodyDef();
bouBd.AddShape(bouSd);
bouBd.position.Set(200, 200);
var bou = world.CreateBody(bouBd);

var ueSd = new b2BoxDef();
ueSd.density = 1.0;
ueSd.extents.Set(20, 60);
var ueBd = new b2BodyDef();
ueBd.AddShape(ueSd);
ueBd.position.Set(200, 240);
var ue = world.CreateBody(ueBd);

var teJd = new b2RevoluteJointDef();
teJd.body1 = bou;
teJd.body2 = ue;
teJd.anchorPoint = bou.GetCenterPosition();
var te = world.CreateJoint(teJd);

var asiSd = new b2BoxDef();
asiSd.density = 1.0;
asiSd.extents.Set(20, 60);
var asiBd = new b2BodyDef();
asiBd.AddShape(asiSd);
asiBd.position.Set(200, 290);
var asi = world.CreateBody(asiBd);

var hipJd = new b2RevoluteJointDef();
hipJd.body1 = ue;
hipJd.body2 = asi;
hipJd.anchorPoint = new b2Vec2(asi.GetCenterPosition().x, asi.GetCenterPosition().y + 30);
hipJd.enableMotor = true;
hipJd.motorTorque = 100000000;
hipJd.motorSpeed = 0.9;
hipJd.lowerAngle = -Math.PI / 2;
hipJd.upperAngle = Math.PI; 
//hipJd.enableLimit = true;
var hip = world.CreateJoint(hipJd);

var xmax = -1.0;
var xmin = 1.0;

Event.observe(window, 'load', function(e) {
    var context = document.querySelector('#c').getContext('2d');
	var timeStep = 1.0 / 60;
	var iteration = 1;
	setInterval(function() {
		context.clearRect(0, 0, 400, 400);
		world.Step(timeStep, iteration);
		drawWorld(world, context);        
        var x = ue.m_linearVelocity.x / 1.0; 
        var str = "x: ";
        if (x < xmin)
        {
            xmin = x;
            hip.SetMotorSpeed(-0.9);
            str += "0";
        }
        else if (x > xmax)
        {
            xmax = x;
            hip.SetMotorSpeed(1.9);
            str += "1";
        }
        str += x;
        document.getElementById('helloWorld').innerHTML = str;
	}, 10);
});




```

# 成果物

https://embed.plnkr.co/plunk/eKQKA8hrQjLWdY25


以上。