Simple Spin example for PhysicsJS

PhysicsJS by Jasper Palfree <wellcaffeinated.net> http://wellcaffeinated.net/PhysicsJS

HTML

<script src="http://wellcaffeinated.net/PhysicsJS/examples/physicsjs-full.js"></script>
<div id="viewport" width="300" height="300">
    <div id="myEL" style="width:50px;height:50px;background-color:red;"></div>
    <div id="myELb" style="width:60px;height:60px;background-color:green;"></div>
</div>

JavaScript

/**
 * PhysicsJS by Jasper Palfree <wellcaffeinated.net>
 * http://wellcaffeinated.net/PhysicsJS
 *
 * Simple Spin example for PhysicsJS
 */
Physics(function(world){
    
    var viewWidth = 500;
    var viewHeight = 300;
    
    var renderer = Physics.renderer('dom', {
        el: 'viewport',
        width: viewWidth,
        height: viewHeight,
        meta: false, // don't display meta data
        styles: {
            // set colors for the circle bodies
            'circle' : {
                strokeStyle: 'hsla(60, 37%, 17%, 1)',
                lineWidth: 1,
                fillStyle: 'hsla(60, 37%, 57%, 0.8)',
                angleIndicator: 'hsla(60, 37%, 17%, 0.4)'
            }
        }
    });
    
    // 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);
    
    // constrain objects to these bounds
    world.add(Physics.behavior('edge-collision-detection', {
        aabb: viewportBounds,
        restitution: 0.99,
        cof: 0.99
    }));
    
    Physics.body('wheel', 'circle', function( parent ){
        
        return {
            // no need for an init
            
            // spin the wheel at desired speed
            spin: function( speed ){
                // the wheels are spinning...
                this.state.angular.vel = speed;
            }
        };
    });
    
    var myWheel = Physics.body('wheel', {
        x: 40,
        y: 30,
        radius: 70,
        fixed: false
    });    
    world.add( myWheel );
	
    var myEL = Physics.body('wheel', {
        x: 10,
        y: 30,
        radius: 50,
        restitution: 0.9,
        fixed: false
    });    
	var el = document.getElementById('myEL'); 
	myEL.view = el;
    world.add( myEL );
    
    var myELb = Physics.body('wheel', {
        x: 10,
        y: 30,
        radius: 80,
  ...