mbecica/index.html

## index.html
<!DOCTYPE html>
<head>
<title>Some Physics</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
<script type="text/javascript" src="physics.js"></script>
<style>
body {
margin:0;
}
</style>
</head>
<body>

## physics.js
var width  = $('#display').width(),
		height = $('#display').height();

$('#display').empty();
$('#display').append("<canvas width=" + width + " height= " + height + "></canvas>")

var canvas = $('canvas')[0],
    ctx = canvas.getContext('2d');

var size = [1,1],
		interval = 40,
		alpha = 1.8,
		gravity = .1,
		friction = 1,
		charge = -30,
		charges,
		last = Date.now(),
		o = o || {x: 20, y: 20, v: {x:30, y:30}, a: {t: 1.2, x:0, y:0}},
		c = c || {x: 50, y: 250},
		stop = false;

$(document).mousemove(function(e) {
	c.x = e.pageX;
	c.y = e.pageY;
});
	// shim layer with setTimeout fallback
	window.requestAnimFrame = (function(){
  	return	window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
	})();

window.force = {
	repulse : function(node) {
		//repulse here
	},
	direction : function() {

	},
	render : function() {
		if (stop) return false;
		//Gravity
		if (o.y >= canvas.height || o.y > c.y) {
			down = false;
		}
		if (o.y < 15) {
			down = true;
		}
		if (o.x >= canvas.width || o.x > c.x) {
			right = false;
		}
		if (o.x < 15) {
			right = true;
		}
		var dy = (c.y-o.y)*(c.y-o.y),
				dx = (c.x-o.x)*(c.x-o.x),
				d = dy + dx,
				theta = Math.atan(dy/dx),
				A = 100000/d;

		o.a.x = A * Math.cos(theta) * (c.x-o.x > 0 ? 1 : -1);
		o.a.y = A * Math.sin(theta) * (c.y-o.y > 0 ? 1 : -1);

		o.v.y += o.a.y * 1/interval;
		o.v.x += o.a.x * 1/interval;

		o.y += o.v.y * 1/interval;
		o.x += o.v.x * 1/interval;

		//draw a circle
		force.clear();
		force.renderCursor();
		ctx.beginPath();
		ctx.fillStyle = 'rgba(56,74,114, .5)';
		ctx.arc(o.x, o.y, 20, 0, 2*Math.PI, true);
		ctx.fill();
	},
	renderCursor: function() {
		ctx.beginPath();
		ctx.fillStyle = '#444';
		ctx.arc(c.x, c.y, 40, 0, 2*Math.PI, true);
		ctx.fill();
	},
	clear: function() {
		// Store the current transformation matrix
		ctx.save();

		// Use the identity matrix while clearing the canvas
		ctx.setTransform(1, 0, 0, 1, 0, 0);
		ctx.clearRect(0, 0, canvas.width, canvas.height);

		// Restore the transform
		ctx.restore();
	},
	loop : function() {
		requestAnimFrame(force.loop);
		if (Date.now() - last < interval) return;
    last = Date.now();
    force.render();
	},
	stop: function() {
		stop = true;
	}
}
$(function() {
  force.loop();
});
	<!DOCTYPE html>
	<head>
	<title>Some Physics</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
	<script type="text/javascript" src="physics.js"></script>
	<style>
	body {
	margin:0;
	}
	</style>
	</head>
	<body>
	var width = $('#display').width(),
	height = $('#display').height();

	$('#display').empty();
	$('#display').append("<canvas width=" + width + " height= " + height + "></canvas>")

	var canvas = $('canvas')[0],
	ctx = canvas.getContext('2d');

	var size = [1,1],
	interval = 40,
	alpha = 1.8,
	gravity = .1,
	friction = 1,
	charge = -30,
	charges,
	last = Date.now(),
	o = o \|\| {x: 20, y: 20, v: {x:30, y:30}, a: {t: 1.2, x:0, y:0}},
	c = c \|\| {x: 50, y: 250},
	stop = false;

	$(document).mousemove(function(e) {
	c.x = e.pageX;
	c.y = e.pageY;
	});
	// shim layer with setTimeout fallback
	window.requestAnimFrame = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function( callback ){
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	window.force = {
	repulse : function(node) {
	//repulse here
	},
	direction : function() {

	},
	render : function() {
	if (stop) return false;
	//Gravity
	if (o.y >= canvas.height \|\| o.y > c.y) {
	down = false;
	}
	if (o.y < 15) {
	down = true;
	}
	if (o.x >= canvas.width \|\| o.x > c.x) {
	right = false;
	}
	if (o.x < 15) {
	right = true;
	}
	var dy = (c.y-o.y)*(c.y-o.y),
	dx = (c.x-o.x)*(c.x-o.x),
	d = dy + dx,
	theta = Math.atan(dy/dx),
	A = 100000/d;

	o.a.x = A * Math.cos(theta) * (c.x-o.x > 0 ? 1 : -1);
	o.a.y = A * Math.sin(theta) * (c.y-o.y > 0 ? 1 : -1);

	o.v.y += o.a.y * 1/interval;
	o.v.x += o.a.x * 1/interval;

	o.y += o.v.y * 1/interval;
	o.x += o.v.x * 1/interval;

	//draw a circle
	force.clear();
	force.renderCursor();
	ctx.beginPath();
	ctx.fillStyle = 'rgba(56,74,114, .5)';
	ctx.arc(o.x, o.y, 20, 0, 2*Math.PI, true);
	ctx.fill();
	},
	renderCursor: function() {
	ctx.beginPath();
	ctx.fillStyle = '#444';
	ctx.arc(c.x, c.y, 40, 0, 2*Math.PI, true);
	ctx.fill();
	},
	clear: function() {
	// Store the current transformation matrix
	ctx.save();

	// Use the identity matrix while clearing the canvas
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Restore the transform
	ctx.restore();
	},
	loop : function() {
	requestAnimFrame(force.loop);
	if (Date.now() - last < interval) return;
	last = Date.now();
	force.render();
	},
	stop: function() {
	stop = true;
	}
	}
	$(function() {
	force.loop();
	});