Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
175 lines (145 sloc) 4.83 KB
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #ddd;
margin:0;
padding:0;
font-size:16px;
line-height:1.3em;
font-family:Georgia;
/* this makes my olde laptop cry...
* background: -webkit-linear-gradient( rgb(0,20,100), rgb(60,100,180) 40%, rgb(0,0,0) 41%, rgb(80,80,80));
*
*/
}
#controls {
position: absolute;
top:0;
left:0;
background-color:#ddd;
padding:5px;
border:1px solid #bbb;
}
</style>
<script type="text/javascript">
//gamma = 160 seconds
//longest pendulum N = 51
//
//$GLOBALS
var $canvas = null, $2d = null, $num_pendulums = 15;
//lists
var $objects = [], $pendulums = [], $algorithms = [];
//counters
var $timer = 0, $ticker = 0;
//parameters
var $frame_delay = 25, $algorithm = 0;
//flags
var $movement = true, $colors = true;
function setup(){
$canvas = document.getElementById('canvas');
$2d = canvas.getContext('2d'); // for later, maybe inspect the experimental-webgl context?
// build out some pendulums
var j;
for (i = 0; i < $num_pendulums; i ++) {
j = new pendulum( 650, 100, i, 160, 51 - i )
$pendulums.push( j );
}
for (i in $pendulums)
$objects.push( $pendulums[i] );
// hang the pendulums from a "bar" at the top
var b = new ball(650,100,5);
b.fill = true;
$objects.push( b );
//make a picker for the algorithms
var picker = document.getElementById('picker');
for (i in $algorithms)
picker.options[picker.options.length] = new Option($algorithms[i].name,i);
//event the picker
picker.onchange = function(e){
$algorithm = e.target.options[e.target.selectedIndex].value;
}
//event the background chooser
var gradienter = document.getElementById('gradienter');
gradienter.onclick = function(e){
var ele = document.body;
if (e.target.checked){
ele.style.background = '-webkit-linear-gradient( rgb(0,20,100), rgb(60,100,180) 40%, rgb(0,0,0) 41%, rgb(80,80,80))';
} else {
ele.style.background = 'none';
}
}
//default the background when on github
if (window.location.href.indexOf('github') > -1){
//dirty, dirty, dirty hack...
gradienter.checked = true;
gradienter.onclick({target: gradienter});
} else {
$movement = false;
sort();
}
draw();
$timer = setInterval(draw, $frame_delay);
}
function draw(){
$ticker ++;
colorit();
$2d.clearRect(0,0, $canvas.width,$canvas.height);
for (i in $objects) {
if ($movement && $objects[i].increment)
$objects[i].increment();
if ($objects[i].draw)
$objects[i].draw($2d);
}
}
function colorit(){
if (!$colors) return;
var algorithm = $algorithms[$algorithm];
if (algorithm.callback != null)
algorithm = algorithm.callback;
for (i in $pendulums){
algorithm($pendulums[i].ball, i, $ticker);
}
}
function sort(){
for (i in $pendulums){
$pendulums[i].angle = ((9 * i + 120) / 180) * Math.PI;
}
}
function reinitialize(){
for (i in $pendulums){
$pendulums[i].initialize();
}
}
onload = setup;
</script>
<script type="text/javascript" src="ball.js"></script>
<script type="text/javascript" src="color.js"></script>
<script type="text/javascript" src="pendulum.js"></script>
<script type="text/javascript" src="point.js"></script>
<!-- coloring algorithms...in order that you want them listed in the box, first is default -->
<script type="text/javascript" src="pulsar.js"></script>
<script type="text/javascript" src="rainbow.js"></script>
<script type="text/javascript" src="black-white.js"></script>
</head>
<body>
<div id="controls">
Everything: <a href="javascript:clearInterval($timer);">Stop</a> <a href="javascript:clearInterval($timer); $timer = setInterval(draw, $frame_delay);">Run</a>
<br>
Movement: <a href="javascript:$movement = false;">Pause</a> <a href="javascript:$movement = true;">Play</a>
<br>
Position: <a href="javascript:sort();">Sort</a> <a href="javascript:reinitialize();">Reinit</a>
<br>
Colors: <a href="javascript:$colors = false;">Pause</a> <a href="javascript:$colors = true;">Play</a>
<br>
Coloring Algorithm: <select id="picker"></select>
<br>
<label for="gradienter">
<input type="checkbox" id="gradienter">
Draw a background gradient for more realism.
</label>
</div>
<canvas id="canvas" width="1400" height="800"></canvas>
</body>
</html>