bpeck/Halton.html

## Halton.html
<!DOCTYPE html>
<html>
<head>
    <title>GameJS Application</title>
<!-- Styling -->
    <style type=text/css>
        body{
           background:#fff;
           color:#222;
           margin:1em 0 2em 6em;
           padding:0;
        }
        #gjs-loader {
            width: 50%;
            height: 50%;
            background: url('ajax-loader.gif');
        }
        #gjs-canvas {
        	border: 1px solid black;
        	width: 700px;
        	height: 300px;
        }
    </style>
<!-- Start javascript/main.js -->
    <script src="./javascript/yabble.js"></script>
    <script src="./javascript/gamejs.min.js"></script>
    <script>
        require.setModuleRoot('./javascript/');
        require.run('main')
    </script>
</head>
<!-- Html -->
<body>
    <div>
        <div id="gjs-loader">
         Loading...
        </div>
        <canvas id="gjs-canvas"></canvas>
        <p>
        Powered by <a href="http://gamejs.org">GameJs</a>.
        </p>
    </div>
</body>
</html>

## main.js
/**
 * Demonstration of the halton sequence
 * http://en.wikipedia.org/wiki/Halton_sequence
 */

var gamejs = require('gamejs');
var draw = require('gamejs/draw');

function halton(index, base) {
	var result = 0;
    var f = 1 / base;
    var i = index;
    while(i > 0) {
       result = result + f * (i % base);
       i = Math.floor(i / base);
       f = f / base;
    }
    return result;
};

function main() {
   // screen setup
   var w = 718;
   var h = 300;
   // These base values are used by the halton sequence function. Use different
   // values for the x and y axes (and z if you have one)
   var baseX = 2;
   var baseY = 3;
   var display = gamejs.display.setMode([w, h]);

   var numCircles = 32;

   // This is a callback that gets called every iteration in the mainloop
   // msDuration = time since last tick() call
   var tick = function(msDuration) {
         display.fill("#000000");

         // poll for keyboard events
         gamejs.event.get().forEach(function(event) {
         if (event.type === gamejs.event.KEY_DOWN) {
            if (event.key === gamejs.event.K_UP) {
               // go forward in sequence
               numCircles++;
            };
            if (event.key === gamejs.event.K_DOWN) {
               // go backward in sequence
               numCircles = Math.max(numCircles - 1, 1);
            };
         }
         });

         // draw the circles
         for (var i=0; i<numCircles; i++) {
             // draw a white circle of radius 2, width 1 at halton coordinates
             draw.circle(display, '#FFFFFF', [halton(i,baseX)*w, halton(i,baseY)*h], 2, 1);
         }
   };
   gamejs.time.fpsCallback(tick, this, 20);
}

/**
 * M A I N
 */
gamejs.ready(main);
	<!DOCTYPE html>
	<html>
	<head>
	<title>GameJS Application</title>
	<!-- Styling -->
	<style type=text/css>
	body{
	background:#fff;
	color:#222;
	margin:1em 0 2em 6em;
	padding:0;
	}
	#gjs-loader {
	width: 50%;
	height: 50%;
	background: url('ajax-loader.gif');
	}
	#gjs-canvas {
	border: 1px solid black;
	width: 700px;
	height: 300px;
	}
	</style>
	<!-- Start javascript/main.js -->
	<script src="./javascript/yabble.js"></script>
	<script src="./javascript/gamejs.min.js"></script>
	<script>
	require.setModuleRoot('./javascript/');
	require.run('main')
	</script>
	</head>
	<!-- Html -->
	<body>
	<div>
	<div id="gjs-loader">
	Loading...
	</div>
	<canvas id="gjs-canvas"></canvas>
	<p>
	Powered by <a href="http://gamejs.org">GameJs</a>.
	</p>
	</div>
	</body>
	</html>
	/**
	* Demonstration of the halton sequence
	* http://en.wikipedia.org/wiki/Halton_sequence
	*/

	var gamejs = require('gamejs');
	var draw = require('gamejs/draw');

	function halton(index, base) {
	var result = 0;
	var f = 1 / base;
	var i = index;
	while(i > 0) {
	result = result + f * (i % base);
	i = Math.floor(i / base);
	f = f / base;
	}
	return result;
	};

	function main() {
	// screen setup
	var w = 718;
	var h = 300;
	// These base values are used by the halton sequence function. Use different
	// values for the x and y axes (and z if you have one)
	var baseX = 2;
	var baseY = 3;
	var display = gamejs.display.setMode([w, h]);

	var numCircles = 32;

	// This is a callback that gets called every iteration in the mainloop
	// msDuration = time since last tick() call
	var tick = function(msDuration) {
	display.fill("#000000");

	// poll for keyboard events
	gamejs.event.get().forEach(function(event) {
	if (event.type === gamejs.event.KEY_DOWN) {
	if (event.key === gamejs.event.K_UP) {
	// go forward in sequence
	numCircles++;
	};
	if (event.key === gamejs.event.K_DOWN) {
	// go backward in sequence
	numCircles = Math.max(numCircles - 1, 1);
	};
	}
	});

	// draw the circles
	for (var i=0; i<numCircles; i++) {
	// draw a white circle of radius 2, width 1 at halton coordinates
	draw.circle(display, '#FFFFFF', [halton(i,baseX)w, halton(i,baseY)h], 2, 1);
	}
	};
	gamejs.time.fpsCallback(tick, this, 20);
	}

	/**
	* M A I N
	*/
	gamejs.ready(main);