physics engine

by Abdul Ahmad

HTML

<div id='playground'>
  <div class='circle teal physics'>

  </div>
  <div class='circle teal physics right'>

  </div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
}
#playground {
  width: 500px;
  margin: 0 auto;
  height: 700px;
  background-color: white;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}
.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}
.teal {
  background-color: teal;
}
.right {
  right: 0;
}

JavaScript

var intervalNum = 1;
var intervalids = {};
var mainIntervalName = 'renderingInterval';
var physicsObjects = {};
var playground = null;
var engineFps = 20;

$(function() {
	playground = $('#playground');
  var jqueryObjects = $('.physics');
  physicsObjects = setupPhysicsObjects(jqueryObjects);
	startEngine();
});

/*********************************************
	engine start/stop
  also helpers for engine to start/stop
  engine works by starting an interval that runs 
  every x number of seconds
*/
function startEngine() {
	if(!intervalids[mainIntervalName]) {
  	startFiftyPerSecond();
  }
}
function stopEngine() {
	stopMainInterval();
}

function addIntervalToDict(name, intervalid) {
	intervalids[name] = intervalid;
}
function removeIntervalFromDict(name) {
	intervalids[name] = null;
}
function startFiftyPerSecond() {
    var intervalid = setInterval(render, engineFps);
    addIntervalToDict(mainIntervalName, intervalid);
}
function stopMainInterval() {
	clearInterval(intervalids[mainIntervalName]);
  removeIntervalFromDict(mainIntervalName);
}

/*
	end engine start/stop
**********************************************/


/*********************************************
	render
*/
function render() {
  incrementIntervalNum();
  var keys = Object.keys(physicsObjects);
  console.log(keys);
  var keysLength = keys.length;


  if(keysLength === 0) {
  	stopEngine();
  } else {
  	startEngine();
    for(var i = 0; i < keysLength; i++) {
    	var key = parseInt(keys[i], 10);
      var physicsObject = physicsObjects[key];
      applyGravity(physicsObject);
    }
  }
}
/*
	end render
**********************************************/

function incrementIntervalNum() {
	intervalNum++;
  if(intervalNum === 51) {
  	intervalNum = 1;
  }
}

/*********************************************
	gravity

*/
function applyGravity(object) {
	var playgroundHeight = transformAndParseCssString($(playground).css('height'));
  var objectPosition =...