Eibwen · June 14, 2016 14:57
diff --git a/estimationTest.html b/estimationTest.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title>Canvas tutorial</title>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
 <script src="estimationTest.js"></script>
 <script>
 var canvas, radius;
 var count;
 window.onload = function() {
 	canvas = document.getElementById('gameArea');
 	setupCanvasSize();
 	radius = determineRadius();
 }

 function draw(){
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
 	
 	//var radius = 5;
    
 	count = getCount();

 	
 	//Clear:
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
 	
 	console.log("Drawing: " + count);
 	var blackedOutAreas = buildBlackoutStorage();
 	for (var i = 0; i < count; ++i) {
 		var loc = getDrawLocation(blackedOutAreas);
 		//console.log(x + ", " + y);
 		ctx.beginPath();
 		ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, true);
 		ctx.fill();
 	}
 	
 	
 //	ctx.beginPath();
 //	ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
 //	ctx.moveTo(110,75);
 //	ctx.arc(75,75,35,0,Math.PI,false);  // Mouth (clockwise)
 //	ctx.moveTo(65,65);
 //	ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
 //	ctx.moveTo(95,65);
 //	ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
 //	ctx.stroke();
  }
 }
 function getCount() {
 	//return 1000; //TODO testing
 	return randIntLog(2, 35);
 }
 function buildBlackoutStorage() {
 	return [];
 }
 function getDrawLocation(blackedOutAreas) {
 	//TODO DOUBLE CHECK THISsss
 	var distance = function(x1, x2) { return Math.sqrt(x1*x1+x2*x2); };
 	var isOutOfRangeOfOthers = function(x, y) {
 		for (var i = 0; i < blackedOutAreas.length; ++i) {
 			var t = blackedOutAreas[i];
 			var dist = distance(t.x - x, t.y - y);
 			//console.log(dist);
 			if (dist < (radius*2)) return false;
 		}
 		return true;
 	};
 	var addPosition = function(x, y) { blackedOutAreas.push({x:x, y:y }); };

 	var xMax = canvas.width - radius;
 	var yMax = canvas.height - radius;
 	
 	var x = randFloat(radius, xMax);
 	var y = randFloat(radius, yMax);
 	
 	var tryCount = 0;
 	//console.log(isBlackedout(x, y));
 	while (!isOutOfRangeOfOthers(x, y)) {
 		//console.log("Trying again");
 		
 		x = randFloat(radius, xMax);
 		y = randFloat(radius, yMax);
 		if (tryCount++ > 20) {
 			console.log("FUCK FAILED");
 			return { x: 0, y: 0 }; //TODO testing
 			break;
 		}
 	}
 	addPosition(x, y);
 	
 	return { x: x, y: y };
 }


 function setupCanvasSize() {
 	var v = viewportSize();
 	canvas.width = Math.min(v.width * 0.9, 400);
 	canvas.height = Math.min(v.height * 0.9, 400);
 }
 function viewportSize() {
 	//TODO google and copy/paste to make sure this is right
 	var w = window,
 		d = document,
 		e = d.documentElement,
 		g = d.getElementsByTagName('body')[0],
 		x = w.innerWidth || e.clientWidth || g.clientWidth,
 		y = w.innerHeight || e.clientHeight || g.clientHeight;
 	return { width: x, height: y };
 }

 function determineRadius() {
 	//5% of smallest dimension
 	return 0.05 * Math.min(canvas.width, canvas.height);
 }


 function testRand() {
 	var min = 3, max = 10;
 	var array = [];
 	for (var i = 0; i < max+3; ++i) {
 		array[i]= (i >= min && i < max) ? 0 : -1;
 	}
 	
 	for (var i = 0; i < 1000; ++i) {
 		var idx = randInt(min, max);
 		array[idx]++;
 	}
 	console.log(array);
 }

 function randFloat(min, max) {
 	var base = Math.random();
 	return min + base*(max-min);
 }
 function randInt(min, max) {
 	return Math.floor(randFloat(min, max));
 }
 function testRandLog() {
 	var max = -100, min = 100;
 	
 	var E2 = Math.E-1;
 	for (var i = 0; i < 1000; ++i) {
 		//WANT: function that returns between 1 and Math.E*Math.E
 		var a = Math.log(Math.random()*E2+1);
 		if (a > max) max = a;
 		if (a < min) min = a;
 	}
 	console.log("max: " + max);
 	console.log("min: " + min);
 	
 	
 	
 	var testSize = 10;
 	var array = [];
 	for (var i = 0; i < testSize; ++i) {
 		array[i]=0;
 	}
 	
 	for (var i = 0; i < 1000; ++i) {
 		array[randIntLog(0, testSize)]++;
 	}
 	console.log(array);
 }
 //This function should return random values in an inverse logrithmic distribution (more values closer to min than to max)
 function randIntLog(min, max) {
 	var EMax = Math.E-1;
 	var base = 1 - Math.log(Math.random()*EMax+1);
 	var inRange = min + base*(max-min);
 	return Math.floor(inRange);
 }
 </script>
 <script>
 function buildButtons(labelsArray) {
 	var buttons = $("#buttonHolder");
 	
 	for (var i = 0; i < labelsArray.length; ++i) {
 		var label = labelsArray[i];
 		buttons.append(createButton(label));
 	}
 }
 function createButton(label) {
 	var button = $("<div class='button'>" + label + "<div>");
 	button.onclick(function () { recordClick(label); });
 }
 function recordClick(label) {
 	//TODO record it somewhere... calculate stats somewhere
 	console.log("Actual was: " + count + ".  Guessed: " + label);
 }
 </script>

 <style>
 canvas { border: 1px solid black; }

 </style>

 </head>

 <body>
  <canvas id="gameArea">
  </canvas>
  <div id="buttonHolder">
  <div>
  
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Canvas tutorial</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
	<script src="estimationTest.js"></script>
	<script>
	var canvas, radius;
	var count;
	window.onload = function() {
	canvas = document.getElementById('gameArea');
	setupCanvasSize();
	radius = determineRadius();
	}

	function draw(){
	if (canvas.getContext) {
	var ctx = canvas.getContext('2d');

	//var radius = 5;

	count = getCount();


	//Clear:
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	console.log("Drawing: " + count);
	var blackedOutAreas = buildBlackoutStorage();
	for (var i = 0; i < count; ++i) {
	var loc = getDrawLocation(blackedOutAreas);
	//console.log(x + ", " + y);
	ctx.beginPath();
	ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, true);
	ctx.fill();
	}


	// ctx.beginPath();
	// ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
	// ctx.moveTo(110,75);
	// ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
	// ctx.moveTo(65,65);
	// ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
	// ctx.moveTo(95,65);
	// ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
	// ctx.stroke();
	}
	}
	function getCount() {
	//return 1000; //TODO testing
	return randIntLog(2, 35);
	}
	function buildBlackoutStorage() {
	return [];
	}
	function getDrawLocation(blackedOutAreas) {
	//TODO DOUBLE CHECK THISsss
	var distance = function(x1, x2) { return Math.sqrt(x1x1+x2x2); };
	var isOutOfRangeOfOthers = function(x, y) {
	for (var i = 0; i < blackedOutAreas.length; ++i) {
	var t = blackedOutAreas[i];
	var dist = distance(t.x - x, t.y - y);
	//console.log(dist);
	if (dist < (radius*2)) return false;
	}
	return true;
	};
	var addPosition = function(x, y) { blackedOutAreas.push({x:x, y:y }); };

	var xMax = canvas.width - radius;
	var yMax = canvas.height - radius;

	var x = randFloat(radius, xMax);
	var y = randFloat(radius, yMax);

	var tryCount = 0;
	//console.log(isBlackedout(x, y));
	while (!isOutOfRangeOfOthers(x, y)) {
	//console.log("Trying again");

	x = randFloat(radius, xMax);
	y = randFloat(radius, yMax);
	if (tryCount++ > 20) {
	console.log("FUCK FAILED");
	return { x: 0, y: 0 }; //TODO testing
	break;
	}
	}
	addPosition(x, y);

	return { x: x, y: y };
	}


	function setupCanvasSize() {
	var v = viewportSize();
	canvas.width = Math.min(v.width * 0.9, 400);
	canvas.height = Math.min(v.height * 0.9, 400);
	}
	function viewportSize() {
	//TODO google and copy/paste to make sure this is right
	var w = window,
	d = document,
	e = d.documentElement,
	g = d.getElementsByTagName('body')[0],
	x = w.innerWidth \|\| e.clientWidth \|\| g.clientWidth,
	y = w.innerHeight \|\| e.clientHeight \|\| g.clientHeight;
	return { width: x, height: y };
	}

	function determineRadius() {
	//5% of smallest dimension
	return 0.05 * Math.min(canvas.width, canvas.height);
	}


	function testRand() {
	var min = 3, max = 10;
	var array = [];
	for (var i = 0; i < max+3; ++i) {
	array[i]= (i >= min && i < max) ? 0 : -1;
	}

	for (var i = 0; i < 1000; ++i) {
	var idx = randInt(min, max);
	array[idx]++;
	}
	console.log(array);
	}

	function randFloat(min, max) {
	var base = Math.random();
	return min + base*(max-min);
	}
	function randInt(min, max) {
	return Math.floor(randFloat(min, max));
	}
	function testRandLog() {
	var max = -100, min = 100;

	var E2 = Math.E-1;
	for (var i = 0; i < 1000; ++i) {
	//WANT: function that returns between 1 and Math.E*Math.E
	var a = Math.log(Math.random()*E2+1);
	if (a > max) max = a;
	if (a < min) min = a;
	}
	console.log("max: " + max);
	console.log("min: " + min);



	var testSize = 10;
	var array = [];
	for (var i = 0; i < testSize; ++i) {
	array[i]=0;
	}

	for (var i = 0; i < 1000; ++i) {
	array[randIntLog(0, testSize)]++;
	}
	console.log(array);
	}
	//This function should return random values in an inverse logrithmic distribution (more values closer to min than to max)
	function randIntLog(min, max) {
	var EMax = Math.E-1;
	var base = 1 - Math.log(Math.random()*EMax+1);
	var inRange = min + base*(max-min);
	return Math.floor(inRange);
	}
	</script>
	<script>
	function buildButtons(labelsArray) {
	var buttons = $("#buttonHolder");

	for (var i = 0; i < labelsArray.length; ++i) {
	var label = labelsArray[i];
	buttons.append(createButton(label));
	}
	}
	function createButton(label) {
	var button = $("<div class='button'>" + label + "<div>");
	button.onclick(function () { recordClick(label); });
	}
	function recordClick(label) {
	//TODO record it somewhere... calculate stats somewhere
	console.log("Actual was: " + count + ". Guessed: " + label);
	}
	</script>

	<style>
	canvas { border: 1px solid black; }

	</style>

	</head>

	<body>
	<canvas id="gameArea">
	</canvas>
	<div id="buttonHolder">
	<div>

	</body>
	</html>