正确使用 Physics.aabb.union()
Proper use of Physics.aabb.union()
我正在学习 PhysicsJS, and I tried using union 像这样:
// Window bounds
var rect1 = Physics.aabb(0, 100, 300, 200);
var rect2 = Physics.aabb(100, 0, 200, 300);
var viewportBounds = Physics.aabb.union(rect1, rect2);
// Constrain bodies to these bounds
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.99
}));
但是球刚从底部掉下来。
Physics(function(world){
var viewWidth = 300;
var viewHeight = 300;
var renderer = Physics.renderer('canvas', {
el: 'viewport',
width: viewWidth,
height: viewHeight,
meta: false
});
// add the renderer
world.add(renderer);
// render on each step
world.subscribe('step', function(){
world.render();
});
// Window bounds
var rect1 = Physics.aabb(0, 100, 300, 200);
var rect2 = Physics.aabb(100, 0, 200, 300);
var viewportBounds = Physics.aabb.union(rect1, rect2);
// Constrain bodies to these bounds
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.99
}));
// Add the ball
world.add(
Physics.body('circle', {
x: 0, // x-coordinate
y: 0, // y-coordinate
vx: 0.2, // x-velocity
vy: 0.01, // y-velocity
radius: 2.0
})
);
// ensure objects bounce when edge collision is detected
world.add( Physics.behavior('body-impulse-response') );
// add some gravity
world.add( Physics.behavior('constant-acceleration') );
// subscribe to ticker to advance the simulation
Physics.util.ticker.subscribe(function( time, dt ){
world.step( time );
});
// start the ticker
Physics.util.ticker.start();
});
body {
/*background: #121212;*/
}
.pjs-meta {
display: none;
}
#viewport {
border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.5.0/physicsjs-full-0.5.0.min.js'></script>
<canvas id="viewport" width="300" height="300"></canvas>
我在 GitHub 上或任何使用它的地方都找不到任何代码。有人可以提供一些指导吗?
I can't find any code on GitHub or anywhere using it. Can someone lend some guidance, please?
您可以尝试阅读 unit tests in the .spec, on Github。
示例测试,即使几乎不了解也应该看起来非常可读 Javascript:
it("should initialize provided a width/height and point", function() {
var aabb = Physics.aabb( 4, 5, { x: 20, y: 9 } );
matches( aabb, { x: 20, y: 9, hw: 2, hh: 2.5 });
});
spec.js 看起来是测试代码。测试实际上兼作文档,像 spec 这样的库可以使测试代码 read 像文档一样。此外,测试代码当然是如何使用代码的示例集合。享受吧。
想通了。我当时使用的是超旧版本 (physicsjs-0.5.0). I linked to the latest version (physicsjs-0.7.0),它具有 多 的功能(这两个版本之间有 4,088 行新代码)。我不得不稍微重构我的代码以匹配更新后的规范,但一切都很好!
我正在学习 PhysicsJS, and I tried using union 像这样:
// Window bounds
var rect1 = Physics.aabb(0, 100, 300, 200);
var rect2 = Physics.aabb(100, 0, 200, 300);
var viewportBounds = Physics.aabb.union(rect1, rect2);
// Constrain bodies to these bounds
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.99
}));
但是球刚从底部掉下来。
Physics(function(world){
var viewWidth = 300;
var viewHeight = 300;
var renderer = Physics.renderer('canvas', {
el: 'viewport',
width: viewWidth,
height: viewHeight,
meta: false
});
// add the renderer
world.add(renderer);
// render on each step
world.subscribe('step', function(){
world.render();
});
// Window bounds
var rect1 = Physics.aabb(0, 100, 300, 200);
var rect2 = Physics.aabb(100, 0, 200, 300);
var viewportBounds = Physics.aabb.union(rect1, rect2);
// Constrain bodies to these bounds
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.99
}));
// Add the ball
world.add(
Physics.body('circle', {
x: 0, // x-coordinate
y: 0, // y-coordinate
vx: 0.2, // x-velocity
vy: 0.01, // y-velocity
radius: 2.0
})
);
// ensure objects bounce when edge collision is detected
world.add( Physics.behavior('body-impulse-response') );
// add some gravity
world.add( Physics.behavior('constant-acceleration') );
// subscribe to ticker to advance the simulation
Physics.util.ticker.subscribe(function( time, dt ){
world.step( time );
});
// start the ticker
Physics.util.ticker.start();
});
body {
/*background: #121212;*/
}
.pjs-meta {
display: none;
}
#viewport {
border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.5.0/physicsjs-full-0.5.0.min.js'></script>
<canvas id="viewport" width="300" height="300"></canvas>
我在 GitHub 上或任何使用它的地方都找不到任何代码。有人可以提供一些指导吗?
I can't find any code on GitHub or anywhere using it. Can someone lend some guidance, please?
您可以尝试阅读 unit tests in the .spec, on Github。
示例测试,即使几乎不了解也应该看起来非常可读 Javascript:
it("should initialize provided a width/height and point", function() { var aabb = Physics.aabb( 4, 5, { x: 20, y: 9 } ); matches( aabb, { x: 20, y: 9, hw: 2, hh: 2.5 }); });
spec.js 看起来是测试代码。测试实际上兼作文档,像 spec 这样的库可以使测试代码 read 像文档一样。此外,测试代码当然是如何使用代码的示例集合。享受吧。
想通了。我当时使用的是超旧版本 (physicsjs-0.5.0). I linked to the latest version (physicsjs-0.7.0),它具有 多 的功能(这两个版本之间有 4,088 行新代码)。我不得不稍微重构我的代码以匹配更新后的规范,但一切都很好!