JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script src="http://mete-30.com/physicsjs-full.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)
    ,center = Physics.vector(viewWidth, viewHeight).mult(0.5)
        ,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();
    });
    
    attractor = Physics.behavior('attractor', {
        pos: center
        ,strength: .0015
        ,order: .1
    });
        
    world.add(attractor);
    // 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
    });
    
    document.body.addEventListener('mousemove', function( e ){
        attractor.position({ x: e.pageX, y: e.pageY });
    });

    // 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: 25
    });

    // 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', {
               ...