box2d

b2.jsとbox2d-html5.jsの読み込み

●物理空間の生成
b2newWorld(30, createVector(0, 9.8));
●物体の生成
b2Body(type, isDynamic, xy, wh, density密度, friction摩擦, restitutionはね返り係数, angle);

type ='box' 'circle' 'polygon' 'edge'
density = 10.0; // 材質の密度（重さ）
friction = .5; // 摩擦係数 0(摩擦なし)から1(摩擦MAX)
restitution = .8; // はね返り係数
//＿＿＿＿＿＿＿＿＿＿＿＿＿＿
function setup() {
createCanvas(300, 300);
b2newWorld(30, createVector(0, 9.8));
new b2Body('box',false,createVector(width/2,height-2), createVector(width,30));
new b2Body('circle',true,createVector(width/2, 20),createVector(40,40), 1, 0.5, 0.9);
}
function draw() {
background(227);
b2Update();
b2Draw(true);
}

preview

//////////////////////////
p5.js ellipseを指定する

var a, b;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
b2newWorld(30, createVector(0, 9.8));
a=new b2Body('box',false,createVector(width/2,height-5), createVector(width,10));
a.display(attr1);
b=new b2Body('circle',true,createVector(width/2,30), createVector(60,60), 1, 0.5, 0.9);
b.display(attr2);
}

function draw() {
background(227);
b2Update();
b2Draw(false); //trueではなくfalse
}
function attr1(body, fixture, position) {
fill(255,0,0);
noStroke();
b2Display(body, fixture, position);
}

function attr2(body, fixture, position) {
fill(0,0,255);
noStroke();
ellipse(position.x,position.y,body.wh(0).x,body.wh(0).y);
}

preview

////////////////////////////

//box2d test

var b, c, d;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
b2newWorld(30, createVector(0, 9.8));
d=new b2Body('box',false,createVector(140,height-130), createVector(width-93, 20));
d.display(attr, 0);
new b2Body('box',false,createVector(width*0.9,height-220), createVector(width-50, 20),0,0,0,(Math.PI/180 *-9));
new b2Body('edge', false, v(width /2, height-2),
[v(-width/2, 0), v(width/2,0)]);
new b2Body('edge', false, v(0,0),
[v(width, 0), v(0,0)]);
new b2Body('edge', false, v(0,0),
[v(height, 0), v(height,width)]);
new b2Body('edge', false, v(0,0),
[v(0, height), v(0,0)]);
b = new b2Body('circle', true, v(width / 3,20), v(39,39),1, 0.1, 0.96);
b.color = color(255,150,0);
b.display(drawer);
c=new b2Body('circle',true, createVector(width/2.9,40), createVector(39,39), 1, 0.5, 0.9);
c.display(foo);
}

function draw() {
background(227);
b2Update();
b2Draw(false);
}
// stroke(0, 255, 0);
// strokeWeight(5);
var foo = function (body, fixture, pos) {
fill(255, 0, 0);
noStroke();
b2Display(body, fixture, pos);
}
function drawer(body, shape, position) {
fill(body.color);
noStroke();
ellipse(position.x, position.y, 40, 40);
}
function attr(body, fixture, position) {
fill(0,0,255);
noStroke();
rect(position.x,position.y,body.wh(0).x,body.wh(0).y, 10);
}
function v(x, y) {
return createVector(x, y);
}

preview

//////////////////////////////////////