JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://anzol.biz/physicsjs/physicsjs-full-0.6.0.js"></script>
<canvas id="viewport" width="500" height="500"></canvas>
JavaScript
Physics(function( world ){
var renderer = Physics.renderer('canvas', {
el: 'viewport', // id of the canvas element
width: 500,
height: 500
});
world.add( renderer );
var bounds = Physics.aabb(0, 0, 500, 500);
world.add( Physics.behavior('edge-collision-detection', {
aabb: bounds,
restitution: 0.3
}) );
world.add( Physics.behavior('interactive', { el: renderer.el }) );
world.add( Physics.behavior('body-impulse-response') );
world.add( Physics.behavior('constant-acceleration') );
world.add( Physics.behavior('body-collision-detection') );
world.add( Physics.behavior('sweep-prune') );
// add lever
var square = Physics.body('rectangle', {
name: 'lever',
x: 250,
y: 400,
vx: 0.0,
width: 350,
height: 10
});
world.add( square );
// add box, a square
var square = Physics.body('rectangle', {
name: 'box',
x: 350,
y: 200,
vx: 0.0,
width: 50,
height: 50
});
world.add( square );
// add box, a square
var square = Physics.body('rectangle', {
name: 'box',
x: 250,
y: 200,
vx: 0.0,
width: 50,
height: 50
});
world.add( square );
// fulcrum, triangle
world.add( Physics.body('convex-polygon', {
name: 'fulcrum',
x: 250,
y: 490,
treatment: 'static',
restitution: 0.0,
//vx: 0.05,
vertices: [
{x: 0, y: 0},
{x: 30, y: -40},
{x: 60, y: 0},
]
}) );
// subscribe to ticker to advance the simulation
Physics.util.ticker.on(function( time, dt ){
world.step( time );
});
// start the ticker
Physics.util.ticker.start();
world.on('step', function(){
world.render();
});
}); // Physics(function( world ){