JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://wellcaffeinated.net/PhysicsJS/examples/physicsjs-full.js"></script>
<canvas id="viewport" width="500" height="400"></canvas>
CSS
#viewport {
border: solid 1px #000;
}
JavaScript
Physics(function (world) {
var renderer = Physics.renderer('canvas', {
el: 'viewport',
width: 500,
height: 400
});
world.add(renderer);
var nail = Physics.body('circle', {
x: 250,
y: 200,
radius: 5,
mass: 1,
fixed: true
});
world.add(nail);
var shelf = Physics.body('convex-polygon', {
x: 250,
y: 200,
vertices: [{
x: -100,
y: -10
}, {
x: 100,
y: -10
}, {
x: 100,
y: 10
}, {
x: -100,
y: 10
}],
mass: 100,
restitution: 0.5
});
world.add(shelf);
var ball = Physics.body('circle', {
x: 175,
y: 50,
radius: 20,
mass: 10
});
world.add(ball);
world.add(Physics.integrator('verlet', {
drag: 0.003
}));
var verletConstraints = Physics.behavior('verlet-constraints', {
iterations: 2
});
verletConstraints.distanceConstraint(shelf, nail, 1);
world.add(verletConstraints);
world.add(Physics.behavior('constant-acceleration'));
world.add(Physics.behavior('body-collision-detection'));
world.add(Physics.behavior('body-impulse-response'));
world.add(Physics.behavior('sweep-prune'));
world.add(Physics.behavior('verlet-constraints'));
var bounds = Physics.aabb(0, 0, 500, 400);
world.add(Physics.behavior('edge-collision-detection', {
aabb: bounds,
restitution: 0.01
}));
Physics.util.ticker.subscribe(function (time, dt) {
world.step(time);
});
world.render();
Physics.util.ticker.start();
world.subscribe('step', function () {
world.render();
});
});