JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://wellcaffeinated.net/PhysicsJS/examples/physicsjs-full.js"></script>
<canvas id="viewport" width="300" height="300"></canvas>
JavaScript
Physics.behavior('a', function (parent) {
return {
behave: function (data) {
var bodies = this.getTargets();
//more code here to define the custom behavior
}
}
});
Physics(function(world){
window.world = world;
var viewWidth = 500;
var viewHeight = 300;
var renderer = Physics.renderer('canvas', {
el: 'viewport',
width: viewWidth,
height: viewHeight,
meta: false, // don't display meta data
});
var c = Physics.body('circle', {
x: 200,
y: 30,
radius: 60
});
world.add( c );
// add the renderer
world.add( renderer );
// render on each step
world.subscribe('step', function(){
world.render();
});
// bounds of the window
var viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight);
// subscribe to ticker to advance the simulation
Physics.util.ticker.subscribe(function( time, dt ){
world.step( time );
});
b = Physics.behavior('a');
world.add(b);
// start the ticker
Physics.util.ticker.start();
});