mbecica · June 4, 2012 03:38
diff --git a/index.html b/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>
diff --git a/physics.js b/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();
	});