Skip to content

Instantly share code, notes, and snippets.

@FirstWhack

FirstWhack/balls.js

Last active August 29, 2015 13:57
Show Gist options
  • Save FirstWhack/9553515 to your computer and use it in GitHub Desktop.
Save FirstWhack/9553515 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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);
};
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment