FirstWhack/balls.js

## balls.js
controls = function () {
	this.phi = Math.random() * 10;
	this.ballSize = Math.random() * 10;
};

var fps = 60;
var frameStart = 1;
var frameEnd = 5500;
var frame = frameStart;

var canvasW = 800;
var canvasH = 800;

var white = "#000000";
var black = "#7FFF00";


var PI_2 = Math.PI * 2;


var canvas = document.getElementById('c'),
	ctx = canvas.getContext('2d');


var drawPhiLayout = function (x, y, r, n) {
	for (var i = 0; i < n; i++) {
		var phi = controls.phi;
		var theta = phi * (n - i);

		var r_n = Math.sqrt(r * r * (i) / n);

		var x_n = Math.max(0, Math.min(canvasW, x + r_n * Math.cos(PI_2 * theta)));
		var y_n = Math.max(0, Math.min(canvasH, y + r_n * Math.sin(PI_2 * theta)));

		//             console.log(i, x_n, y_n);
		ctx.beginPath();
		ctx.arc(x_n, y_n, controls.ballSize, 0, 2 * Math.PI, true);
		ctx.closePath();
		ctx.fill();
	}
};

var drawFrame = function () {

	ctx.fillStyle = white;
	ctx.fillRect(0, 0, 800, 800);

	if (frame++ > frameEnd) {
		frame = controls.frame;
	}


	ctx.fillStyle = black;
	drawPhiLayout(canvasW / 2, canvasH / 2, 300, frame);

};

setInterval(function () {
	drawFrame();

}, 250 / fps);


window.onload = function () {
	controls = new controls();
	var gui = new dat.GUI();
	gui.add(controls, 'phi', 1, 9);
	gui.add(controls, 'ballSize', 1, 9);
};

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>Interesting Balls</title>
	<script src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
</head>

<body>
	<canvas id="c" width="800" height="800"></canvas>
</body>

</html>
	controls = function () {
	this.phi = Math.random() * 10;
	this.ballSize = Math.random() * 10;
	};

	var fps = 60;
	var frameStart = 1;
	var frameEnd = 5500;
	var frame = frameStart;

	var canvasW = 800;
	var canvasH = 800;

	var white = "#000000";
	var black = "#7FFF00";



	var PI_2 = Math.PI * 2;


	var canvas = document.getElementById('c'),
	ctx = canvas.getContext('2d');


	var drawPhiLayout = function (x, y, r, n) {
	for (var i = 0; i < n; i++) {
	var phi = controls.phi;
	var theta = phi * (n - i);

	var r_n = Math.sqrt(r * r * (i) / n);

	var x_n = Math.max(0, Math.min(canvasW, x + r_n * Math.cos(PI_2 * theta)));
	var y_n = Math.max(0, Math.min(canvasH, y + r_n * Math.sin(PI_2 * theta)));

	// console.log(i, x_n, y_n);
	ctx.beginPath();
	ctx.arc(x_n, y_n, controls.ballSize, 0, 2 * Math.PI, true);
	ctx.closePath();
	ctx.fill();
	}
	};

	var drawFrame = function () {

	ctx.fillStyle = white;
	ctx.fillRect(0, 0, 800, 800);

	if (frame++ > frameEnd) {
	frame = controls.frame;
	}


	ctx.fillStyle = black;
	drawPhiLayout(canvasW / 2, canvasH / 2, 300, frame);

	};

	setInterval(function () {
	drawFrame();

	}, 250 / fps);



	window.onload = function () {
	controls = new controls();
	var gui = new dat.GUI();
	gui.add(controls, 'phi', 1, 9);
	gui.add(controls, 'ballSize', 1, 9);
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Interesting Balls</title>
	<script src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
	</head>

	<body>
	<canvas id="c" width="800" height="800"></canvas>
	</body>

	</html>