JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.6.0/physicsjs-full-0.6.0.js"></script>
CSS
body{
background: #1d1d1d;
margin: 0;
padding: 0;
}
JavaScript
Physics(function (world) {
var viewWidth = window.innerWidth
,viewHeight = window.innerHeight
// bounds of the window
,viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight)
,edgeBounce
,renderer
;
// create a renderer
renderer = Physics.renderer('canvas', {
el: 'viewport'
,width: viewWidth
,height: viewHeight
});
// add the renderer
world.add(renderer);
// render on each step
world.on('step', function () {
world.render();
});
// constrain objects to these bounds
edgeBounce = Physics.behavior('edge-collision-detection', {
aabb: viewportBounds
,restitution: 0.2
,cof: 1
});
var gravity = Physics.behavior('constant-acceleration', {
acc: { x : 0, y: 0.0004 } // this is the default: .0004
});
// resize events
window.addEventListener('resize', function () {
viewWidth = window.innerWidth;
viewHeight = window.innerHeight;
renderer.el.width = viewWidth;
renderer.el.height = viewHeight;
viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight);
// update the boundaries
edgeBounce.setAABB(viewportBounds);
}, true);
// for constraints
var rigidConstraints = Physics.behavior('verlet-constraints', {
iterations: 10
});
// the "basket"
var basket = [];
var fpos = window.innerWidth / 2;
var epos = window.innerHeight / 2;
for ( var i = fpos; i < fpos + epos; i += 5 ){
l = basket.push(
Physics.body('circle', {
x: i
,y: 50 - (i-fpos)
,radius: 1
,restitution: 0
,mass: 1000
,conf: 1
,hidden: true
})
);
rigidConstraints.distanceConstraint( basket[ l - 1 ], basket[ l - 2 ], 2 );
}
world.on('render', function( data ){
var...