Cleaned up code and improved website layout.

22 files changed, 622 insertions, 664 deletions

diff --git a/js/2d23d.js b/js/2d23d.js
index c3ac565..1e597e9 100644
--- a/js/2d23d.js
+++ b/js/2d23d.js
@@ -29,7 +29,7 @@ function draw()
 	if (waiting)
 	{
 		iterations++;
-		
+
 		if (iterations > 150)
 		{
 			iterations = 0;
@@ -39,45 +39,45 @@ function draw()
 		}
 		return;
 	}
-	var ca = cos(angle) * radius + radius + 50;
-	var sa = sin(angle) * radius + radius + 50;
-	
+	var x  = cos(angle) * radius + radius + 50;
+	var y  = sin(angle) * radius + radius + 50;
+
 	angle += 0.1/6;
-	
+
 	if (angle > TWO_PI)
 		rotations++;
-			
+
 	checkRotations();
-	
+
 	angle %= TWO_PI;
-	
+
 	if (state == 0)
-		ellipse(ca, sa, 50, 50);
-	
+		ellipse(x, y, 50, 50);
+
 	else if (state == 1)
-		rect(ca, sa, 50, 50);
+		rect(x, y, 50, 50);
 
 	else if (state == 2)
-		triangle(ca, sa, ca+50, sa, ca, sa+50);
+		triangle(x, y, x+50, y, x, y+50);
+
 
-	
 	else if (state == 3)
-		triangle(ca, sa, ca+25, sa+25, ca, sa+50);
+		triangle(x, y, x+25, y+25, x, y+50);
+
 
-	
 	else if (state == 4)
-		ellipse(ca, sa, 100, 50);
+		ellipse(x, y, 100, 50);
+
 
-	
 	else if (state == 5)
-		line(ca, sa, ca+50, sa);
+		line(x, y, x+50, y);
+
 
-	
 	else if (state == 6)
-		line(ca, sa, ca, sa+50);
+		line(x, y, x, y+50);
 
 	else if (state >= 7)
-		arc(ca, sa, 50, 50, 0, (HALF_PI + state) % TWO_PI);
+		arc(x, y, 50, 50, 0, (HALF_PI + state) % TWO_PI);
+
 
-	
-}
\ No newline at end of file
+}
diff --git a/js/2d23dcustom.js b/js/2d23dcustom.js
index 3b55fd9..4465d28 100644
--- a/js/2d23dcustom.js
+++ b/js/2d23dcustom.js
@@ -27,7 +27,7 @@ function outOfBounds(x)
 
 function mouseDragged()
 {
-	if (outOfBounds(pmouseX) || outOfBounds(mouseX) || 
+	if (outOfBounds(pmouseX) || outOfBounds(mouseX) ||
 		outOfBounds(pmouseY) || outOfBounds(mouseY))
 		return;
 	stroke(0, 0, 0);
@@ -37,13 +37,12 @@ function mouseDragged()
 
 function mouseClicked()
 {
-	
 	if (straightLine)
 	{
 		line(slFirstPos[0], slFirstPos[1], mouseX, mouseY);
 		drawing.line(slFirstPos[0], slFirstPos[1], mouseX, mouseY);
 		straightLine = false;
-		return;	
+		return;
 	}
 	slFirstPos = [mouseX, mouseY];
 }
@@ -70,21 +69,21 @@ function draw()
 	cursor(ARROW);
 	if (!ret_pressed)
 		return;
-	
+
 	if (done)
 		return;
-		
+
 	if (angle > TWO_PI)
 		return;
-	
+
 	stroke(255, 0, 0);
 	tint(255, 0, 0);
-	var ca = cos(angle) * radius + radius + 50;
-	var sa = sin(angle) * radius + radius + 50;
-	
-	
-	image(drawing, ca, sa);
+	var x = cos(angle) * radius + radius + 50;
+	var y = sin(angle) * radius + radius + 50;
+
+
+	image(drawing, x, y);
 
 	angle += 0.1/6;
-	
-}
\ No newline at end of file
+
+}
diff --git a/js/2pi.js b/js/2pi.js
index 54d59d7..0316a90 100644
--- a/js/2pi.js
+++ b/js/2pi.js
@@ -27,7 +27,7 @@ function center()
 	var centerX = 0;
 	var centerY = 0;
 	for (var i = 0; i < vertices.length; i++)
-	{ 
+	{
 		centerX += vertices[i][0] / vertices.length;
 		centerY += vertices[i][1] / vertices.length;
 	}
@@ -38,12 +38,12 @@ function twoPiApprox()
 {
 	var o = center();
 	var c = circumference();
-	
+
 	ellipseMode(CENTER);
 	fill(0, 0, 200);
 	noStroke();
 	ellipse(o[0], o[1], 5, 5);
-	
+
 	var avgR = 0;
 	var minLocation;
 	var maxLocation;
@@ -51,9 +51,9 @@ function twoPiApprox()
 	{
 		var d = dist(vertices[i][0], vertices[i][1], o[0], o[1]);
 		avgR += d / vertices.length;
-		 
+
 	}
-	
+
 	stroke(0, 255, 0);
 	noFill();
 	line(o[0], o[1], o[0]+avgR, o[1]);
@@ -61,10 +61,10 @@ function twoPiApprox()
 	ellipse(o[0], o[1], 2*avgR, 2*avgR);
 	stroke(255, 200, 0);
 	ellipse(o[0], o[1], c/PI, c/PI);
-	
-	
+
+
 	return c/(2*avgR);
-	
+
 }
 
 function setup()
@@ -90,11 +90,12 @@ function calculate()
 	{
 		percentError = 100*(PI/avgPi - 1);
 	}
-	var div = document.getElementById("info");
-	div.innerHTML = "Your approximation&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;True value<br> 2π = " + 2 * avgPi + " | " + TWO_PI + "<br> π = " +
-	+ avgPi + " | " + PI + ".<br>" + percentError + "% error.<br>"
+	$("#info").html("<div class='col-xs-12 col-sm-8 col-md-6 col-lg-4'>"
+	+ "<table class='table table-bordered table-hover'> <tr><th></th><th>Your approximation</th><th>True value</th></tr><tr><td>2π</td><td>" + 2 * avgPi
+	+ "</td><td>" + TWO_PI + "</td></tr><tr><td>π</td><td>" +
+	+ avgPi + "</td><td>" + PI + "</table>" + percentError + "% error.<br>"
 	+ "The blue dot is the center of your shape. The green line is the average radius of the shape.<br>"
 	+ "The red circle is a circle with the same radius as your shape, and the orange circle is a<br>"
 	+ "circle with the same circumference as your shape. The closer they are, the better your<br>"
-	+ "approximation of π";
-}
\ No newline at end of file
+	+ "approximation of π</div>");
+}
diff --git a/js/AutoAudio.js b/js/AutoAudio.js
index d3cf4f0..f3376d7 100644
--- a/js/AutoAudio.js
+++ b/js/AutoAudio.js
@@ -1,32 +1,11 @@
-var length;
 var single = ["Math.sqrt", "Math.cos", "Math.sin"]; //Operations on a single number
-var singleweights = {};
 var binary = ["*", "+", "-", "/"]; //Operations for 2 numbers
-var binaryweights = {};
 var varlist = ["x"];
 var numlist = ["Constant"];
 numlist = numlist.concat(varlist);
-var numberweights = {"Constant":1};
 var numberweight = 1;
 var singleweight = 1;
-var eqlength;
-var notify;
-var functionp = document.getElementById('Function');
-
-for(var i = 0; i < single.length; i++)
-{
-	singleweights[single[i]] = 1;
-}
-
-for(var i = 0; i < binary.length; i++)
-{
-	binaryweights[binary[i]] = 1;
-}
-
-for(var i = 0; i < varlist.length; i++)
-{
-	numberweights[varlist[i]] = 1;
-}
+var flength;
 
 function randItem(l)
 {
@@ -64,10 +43,10 @@ function rmvmath(str)
 	return newstr;
 }
 
-function randEquation()
+function randFunction()
 {
 	var hasx = false;
-	var equation;
+	var func;
 	var lasttype;
 	var thistype;
 	var chanceend;
@@ -79,7 +58,7 @@ function randEquation()
     while (!hasx)
 	{
         //Types: b for binary, s for single, f for first, n for number
-        equation = '';
+        func = '';
         lasttype = 'f';
         thistype = 0;
         hasx = false;
@@ -88,7 +67,7 @@ function randEquation()
 
         while (true)
 		{
-            chanceend = Math.pow((1.0 - (1.0 / length)), eqlength);
+            chanceend = Math.pow((1.0 - (1.0 / length)), flength);
             if (lasttype == 'n')
 			{
                 number = Math.random();
@@ -96,16 +75,16 @@ function randEquation()
 				{
                     break;
 				}
-                equation = '(' + equation + ')' + randItem(binary);
+                func = '(' + func + ')' + randItem(binary);
                 lasttype = 'b';
 			}
             else if (lasttype == 's' || lasttype == 'b' || lasttype == 'f')
 			{
-                equation += '(';
+                func += '(';
                 thistype = Math.random();
                 if (thistype < singleweight / (singleweight + numberweight))
 				{
-                    equation += randItem(single);
+                    func += randItem(single);
                     lasttype = 's';
 				}
                 else
@@ -113,98 +92,86 @@ function randEquation()
                     what = randItem(numlist);
                     if (what == 'Constant')
 					{
-                        equation += (Math.random()*100+100).toString();
+                        func += (Math.random()*100+100).toString();
 					}
                     else
 					{
-                        equation += what;
+                        func += what;
                         if (what == 'x')
 						{
                             hasx = true;
 						}
 					}
                     lasttype = 'n';
-                    equation += ')';
+                    func += ')';
 				}
 			}
             length++;
 		}
 	}
-    while (countChar(equation, '(') > countChar(equation, ')'))
+    while (countChar(func, '(') > countChar(func, ')'))
 	{
-        equation += ')';
+        func += ')';
 	}
-    return equation;
+    return func;
 }
 
-function evalEquation(eq, x)
-{
-	try
-	{
-		eval('var result = ' + eq);
-		return result;
-	}
-	catch(err)
-	{
-		return 0;
-	}
-}
 
 function create()
 {
+	var notify;
+	var length;
 	var date = new Date();
 	var start = date.getTime();
-	var form = document.getElementById('Options');
-	var errtag = document.getElementById('Error');
 
+	$("#Error").html("");
 
-	errtag.innerHTML = '';
-	for (var i = 0; i < form.elements.length; i++)
-	{
-		if (form.elements[i].value == '')
-		{
-			errtag.innerHTML = 'Please enter a valid number.';
-			return;
-		}
-	}
+	length = parseInt($("#length").val());
+	notify = $("#notify").prop("checked");
 
-	length = parseInt(form.elements[1].value);
-	notify = form.elements[2].checked;
+	singleweight = parseFloat($("#single").val());
+	numberweight = parseFloat($("#number").val());
+	flength = parseFloat($("#flength").val());
 
-	singleweight = parseFloat(form.elements[4].value);
-	numberweight = parseFloat(form.elements[5].value);
-	eqlength = parseFloat(form.elements[6].value);
+	if (isNaN(length) || isNaN(singleweight) || isNaN(numberweight) || isNaN(flength))
+	{
+		$("#Error").html("Please enter a valid number.");
+		stopLoading();
+		return;
+	}
 
 	var data = [];
-	var equation = randEquation();
+	var func = randFunction();
+
+	eval(
+	"for (var x=0; x<length * 10000; x++)"
+	+ "{"
+	+ "var value = (" + func + ") % 1;"
+	+ "data[x] = Math.abs(255 * value);"
+	+ "}");
 
-	for (var i=0; i<length * 10000; i++)
-	{
-		var value = evalEquation(equation, i);
-		value %= 1;
-		data[i] = Math.abs(255 * value);
-	}
 	var wave = new RIFFWAVE(data);
-	audio = document.getElementById('Audio');
+	var audio = document.getElementById('Audio');
 	audio.src = wave.dataURI;
 	date = new Date();
-	end = date.getTime();
-	var timeparagraph = document.getElementById('Time');
+	var end = date.getTime();
 	var timetaken = Math.round((end-start)/1000);
 	if (timetaken == 1)
 	{
-		timeparagraph.innerHTML = 'The time it took was 1 second.';
+		$("#Time").html("The time it took was 1 second.");
 	}
 	else
 	{
-		timeparagraph.innerHTML = 'The time it took was ' + timetaken + ' seconds.';
+		$("#Time").html("The time it took was " + timetaken + " seconds.");
 	}
 
-	functionp.innerHTML = '$Function: $' + rmvmath(equation);
+	$("#Function").html("$Function: $" + rmvmath(func));
 	LatexIT.render('*',false);
 
 	stopLoading();
 
+	$("#Audio").show();
+
 	if(notify)
 	{
 		alert('Your audio has finished.');
@@ -233,3 +200,8 @@ function start()
 	startLoading();
 	window.setTimeout(create, 1);
 }
+
+$(function()
+{
+	$("#Audio").hide();
+});
diff --git a/js/AutoHarmonograph.js b/js/AutoHarmonograph.js
index b4158db..95eb357 100644
--- a/js/AutoHarmonograph.js
+++ b/js/AutoHarmonograph.js
@@ -24,7 +24,7 @@ var Pendulum = function()
 		this.p = random(-PDIF, PDIF)+basepx;
 	else
 		this.p = random(-PDIF, PDIF)+basepy;
-		
+
 	pendulums.push(this);
 }
 
@@ -63,16 +63,22 @@ function calculate()
 
 function setup()
 {
-	document.getElementById("npendulums").value = 10;
-	document.getElementById("DMAX").value = DMAX;
+	createCanvas(600, 600);
 }
 
 function start()
 {
-	
+	$("#start").prop("disabled", true);
 	createCanvas(800, 800);
 	frameRate(1000);
-	DMAX = document.getElementById("DMAX").value;
+	DMAX = parseFloat($("#DMAX").val());
+	var npendulums = parseInt($("#npendulums").val());
+
+	if (isNaN(DMAX) || isNaN(npendulums))
+	{
+		$("#Error").html("Please enter a valid number.");
+	}
+
 	basepx = random(PMAX);
 	basepy = random(PMAX);
 	Ax = random(AMAX);
@@ -81,12 +87,12 @@ function start()
 	fy = random(FMAX);
 	dx = random(DMIN, DMAX);
 	dy = random(DMIN, DMAX);
-	
+
 	pendulums = [];
-	
-	for (var i = 0; i < document.getElementById("npendulums").value; i++)
+
+	for (var i = 0; i < npendulums; i++)
 		new Pendulum();
-	
+
 }
 
 function saveCanvas()
@@ -100,8 +106,8 @@ function draw()
 	curr = calculate();
 	if (t !== 0)
 		line(pp[0], pp[1], curr[0], curr[1]);
-	
-	
+
+
 	t++;
 	pp = curr;
 }
diff --git a/js/AutoImages.js b/js/AutoImages.js
index 502fff6..12d6957 100644
--- a/js/AutoImages.js
+++ b/js/AutoImages.js
@@ -1,6 +1,7 @@
 
-var canvas = document.getElementById('Canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("Canvas");
+var ctx = canvas.getContext("2d");
+var flength;
 
 var single = ["Math.sqrt", "Math.cos", "Math.sin"]; //Operations on a single number
 var singleweights = {};
@@ -12,13 +13,6 @@ numlist = numlist.concat(varlist);
 var numberweights = {"Constant":1}
 var numberweight;
 var singleweight;
-var eqlength;
-var xsize;
-var ysize;
-var functionp = document.getElementById('Function');
-var notify;
-var latex;
-var mathjax;
 
 for(var i = 0; i < single.length; i++)
 {
@@ -38,10 +32,10 @@ for(var i = 0; i < varlist.length; i++)
 function rmvmath(str)
 {
 	//A function that removes all the Math.'s in a string
-	var newstr = '';
+	var newstr = "";
 	for(var i = 0; i < str.length - 5; i++)
 	{
-		if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== 'Math.')
+		if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== "Math.")
 		{
 			newstr += str[i]
 		}
@@ -73,11 +67,11 @@ function countChar(string, letter)
 
 
 
-function randEquation()
+function randFunction()
 {
 	var hasx = false;
     var hasy = false;
-	var equation;
+	var func;
 	var lasttype;
 	var thistype;
 	var chanceend;
@@ -88,8 +82,8 @@ function randEquation()
     while (!(hasx && hasy))
 	{
         //Types: b for binary, s for single, f for first, n for number
-        equation = '';
-        lasttype = 'f';
+        func = "";
+        lasttype = "f";
         thistype = 0;
         hasx = false;
         hasy = false;
@@ -98,152 +92,151 @@ function randEquation()
 
         while (true)
 		{
-            chanceend = Math.pow((1.0 - (1.0 / length)), eqlength);
-            if (lasttype === 'n')
+            chanceend = Math.pow((1.0 - (1.0 / length)), flength);
+            if (lasttype === "n")
 			{
                 number = Math.random();
                 if (number < chanceend)
 				{
                     break;
 				}
-                equation = '(' + equation + ')' + randItem(binary);
-                lasttype = 'b';
+                func = "(" + func + ")" + randItem(binary);
+                lasttype = "b";
 			}
-            else if (lasttype === 's' || lasttype === 'b' || lasttype === 'f')
+            else if (lasttype === "s" || lasttype === "b" || lasttype === "f")
 			{
-                equation += '(';
+                func += "(";
                 thistype = Math.random();
                 if (thistype < singleweight / (singleweight + numberweight))
 				{
-                    equation += randItem(single);
-                    lasttype = 's';
+                    func += randItem(single);
+                    lasttype = "s";
 				}
                 else
 				{
                     what = randItem(numlist);
-                    if (what === 'Constant')
+                    if (what === "Constant")
 					{
-                        equation += (Math.random(100, 200)).toString();
+                        func += (Math.random(100, 200)).toString();
 					}
                     else
 					{
-                        equation += what;
-                        if (what === 'x')
+                        func += what;
+                        if (what === "x")
 						{
                             hasx = true;
 						}
-                        else if (what === 'y')
+                        else if (what === "y")
 						{
                             hasy = true;
 						}
 					}
-                    lasttype = 'n';
-                    equation += ')';
+                    lasttype = "n";
+                    func += ")";
 				}
 			}
             length++;
 		}
 	}
-    while (countChar(equation, '(') > countChar(equation, ')'))
+    while (countChar(func, "(") > countChar(func, ")"))
 	{
-        equation += ')';
+        func += ")";
 	}
-    return equation;
+    return func;
 }
 
 
 function create()
 {
+	var width;
+	var height;
+	var notify;
+
 	var date = new Date();
 	var start = date.getTime();
 
-	form = document.getElementById('Options');
+	$("#Error").html("");
 
-	var errtag = document.getElementById('Error');
-	errtag.innerHTML = '';
 
-	for (var i = 0; i < form.elements.length; i++)
-	{
-		if (form.elements[i].value === '')
-		{
-			errtag.innerHTML = 'Please enter a valid number.';
-			return;
-		}
-	}
+	width = parseInt($("#width").val());
+	height = parseInt($("#height").val());
+	notify = $("#notify").prop("checked");
 
-	xsize = parseInt(form.elements[1].value);
-	ysize = parseInt(form.elements[2].value);
-	notify = form.elements[3].checked;
+	singleweight = parseFloat($("#single").val());
+	numberweight = parseFloat($("#number").val());
+	flength = parseFloat($("#flength").val());
 
-	singleweight = parseFloat(form.elements[5].value);
-	numberweight = parseFloat(form.elements[6].value);
-	eqlength = parseFloat(form.elements[7].value);
+	if (isNaN(width) || isNaN(height) || isNaN(singleweight) || isNaN(numberweight) || isNaN(flength))
+	{
+		stopLoading();
+		$("#Error").html("Please enter a valid number.");
+		return;
+	}
 
-	canvas.width = xsize;
-	canvas.height = ysize;
-	var imgData = ctx.createImageData(xsize, ysize);
-	var requation = randEquation();
-	var gequation = randEquation();
-	var bequation = randEquation();
+	canvas.width = width;
+	canvas.height = height;
+	var imgData = ctx.createImageData(width, height);
+	var rfunction = randFunction();
+	var gfunction = randFunction();
+	var bfunction = randFunction();
 	var x;
 	var y;
 	var r;
 	var g;
 	var b;
 	eval(
-	'for (var i=0;i<imgData.data.length;i+=4)'+
-	'{'+
-	'	x = (i/4) % xsize;'+
-	'	y = Math.floor((i/4) / xsize);'+
-	'	r = (' + requation + ') % 255;'+
-	'	g = (' + gequation + ') % 255;'+
-	'	b = (' + bequation + ') % 255;'+
-	'	r = Math.abs(Math.round(r));' +
-	'	g = Math.abs(Math.round(g));' +
-	'	b = Math.abs(Math.round(b));' +
-
-	'	imgData.data[i] = r;' +
-	'	imgData.data[i+1] = g;' +
-	'	imgData.data[i+2] = b;' +
-	'	imgData.data[i+3] = 255;' +
-	'}');
+	"for (var i=0;i<imgData.data.length;i+=4)"+
+	"{"+
+	"	x = (i/4) % width;"+
+	"	y = Math.floor((i/4) / width);"+
+	"	r = (" + rfunction + ") % 255;"+
+	"	g = (" + gfunction + ") % 255;"+
+	"	b = (" + bfunction + ") % 255;"+
+	"	r = Math.abs(Math.round(r));" +
+	"	g = Math.abs(Math.round(g));" +
+	"	b = Math.abs(Math.round(b));" +
+
+	"	imgData.data[i] = r;" +
+	"	imgData.data[i+1] = g;" +
+	"	imgData.data[i+2] = b;" +
+	"	imgData.data[i+3] = 255;" +
+	"}");
 	ctx.putImageData(imgData,0,0);
 	var date = new Date();
 	var end = date.getTime();
-	var timeparagraph = document.getElementById('Time');
 	var timetaken = Math.round((end-start)/1000);
 	if (timetaken === 1)
 	{
-		timeparagraph.innerHTML = 'The time it took was 1 second.';
+		$("#Time").html("The time it took was 1 second.");
 	}
 	else
 	{
-		timeparagraph.innerHTML = 'The time it took was ' + timetaken + ' seconds.';
+		$("#Time").html("The time it took was " + timetaken + " seconds.");
 	}
 
 
-	functionp.innerHTML = '$Functions: \\newline\\newline Red: $' + rmvmath(requation) + '$\\newline\\newline Green: $' + rmvmath(gequation) + '$\\newline\\newline Blue: $' + rmvmath(bequation) + '$';
-	LatexIT.render('*',false);
+	$("#Function").html("$Functions: \\newline\\newline Red: $" + rmvmath(rfunction) + "$\\newline\\newline Green: $" + rmvmath(gfunction) + "$\\newline\\newline Blue: $" + rmvmath(bfunction) + "$");
+	LatexIT.render("*",false);
 
 	stopLoading();
 
 	if(notify)
 	{
-		alert('Your image has finished.');
+		alert("Your image has finished.");
 	}
-	document.getElementById('Download').innerHTML = "Download";
+	document.getElementById("Download").innerHTML = "Download";
 }
 
 function startLoading()
 {
-	$('#Create').prop('disabled', true);
-	$('#Create').html('Loading...');
+	$("#Create").prop("disabled", true);
+	$("#Create").html("Loading...");
 }
 
 function stopLoading()
 {
-	$('#Create').prop('disabled', false);
-	$('#Create').html('Create');
+	$("#Create").prop("disabled", false);
+	$("#Create").html("Create");
 }
 
 function start()
@@ -254,9 +247,9 @@ function start()
 
 function download()
 {
-    var dt = canvas.toDataURL('image/png');
+    var dt = canvas.toDataURL("image/png");
     this.href = dt;
 }
 
-var downloadLink = document.getElementById('Download');
-downloadLink.addEventListener('click', download, false);
+var downloadLink = document.getElementById("Download");
+downloadLink.addEventListener("click", download, false);
diff --git a/js/AutoVideos.js b/js/AutoVideos.js
index f92ea9d..5e13195 100644
--- a/js/AutoVideos.js
+++ b/js/AutoVideos.js
@@ -9,7 +9,7 @@ numlist = numlist.concat(varlist);
 var numberweights = {"Constant":1};
 var numberweight;
 var singleweight;
-var eqlength;
+var flength;
 var notify;
 
 for(var i = 0; i < single.length; i++)
@@ -30,10 +30,10 @@ for(var i = 0; i < varlist.length; i++)
 function rmvmath(str)
 {
 	//A function that removes all the Math.'s in a string
-	var newstr = '';
+	var newstr = "";
 	for(var i = 0; i < str.length - 5; i++)
 	{
-		if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== 'Math.')
+		if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== "Math.")
 		{
 			newstr += str[i]
 		}
@@ -64,12 +64,12 @@ function countChar(string, letter)
 }
 
 
-function randEquation()
+function randFunction()
 {
 	var hasx = false;
     var hasy = false;
 	var hast = false;
-	var equation;
+	var func;
 	var lasttype;
 	var thistype;
 	var chanceend;
@@ -81,8 +81,8 @@ function randEquation()
     while (!(hasx && hasy && hast))
 	{
         //Types: b for binary, s for single, f for first, n for number
-        equation = '';
-        lasttype = 'f';
+        func = "";
+        lasttype = "f";
         thistype = 0;
         hasx = false;
         hasy = false;
@@ -92,148 +92,131 @@ function randEquation()
 
         while (true)
 		{
-            chanceend = Math.pow((1.0 - (1.0 / length)), eqlength);
-            if (lasttype == 'n')
+            chanceend = Math.pow((1.0 - (1.0 / length)), flength);
+            if (lasttype == "n")
 			{
                 number = Math.random();
                 if (number < chanceend)
 				{
                     break;
 				}
-                equation = '(' + equation + ')' + randItem(binary);
-                lasttype = 'b';
+                func = "(" + func + ")" + randItem(binary);
+                lasttype = "b";
 			}
-            else if (lasttype == 's' || lasttype == 'b' || lasttype == 'f')
+            else if (lasttype == "s" || lasttype == "b" || lasttype == "f")
 			{
-                equation += '(';
+                func += "(";
                 thistype = Math.random();
                 if (thistype < singleweight / (singleweight + numberweight))
 				{
-                    equation += randItem(single);
-                    lasttype = 's';
+                    func += randItem(single);
+                    lasttype = "s";
 				}
                 else
 				{
                     what = randItem(numlist);
-                    if (what == 'Constant')
+                    if (what == "Constant")
 					{
-                        equation += (Math.random(100, 200)).toString();
+                        func += (Math.random(100, 200)).toString();
 					}
                     else
 					{
-                        equation += what;
-                        if (what == 'x')
+                        func += what;
+                        if (what == "x")
 						{
                             hasx = true;
 						}
-                        else if (what == 'y')
+                        else if (what == "y")
 						{
                             hasy = true;
 						}
-						else if (what == 't')
+						else if (what == "t")
 						{
 							hast = true;
 						}
 					}
-                    lasttype = 'n';
-                    equation += ')';
+                    lasttype = "n";
+                    func += ")";
 				}
 			}
             length++;
 		}
 	}
-    while (countChar(equation, '(') > countChar(equation, ')'))
+    while (countChar(func, "(") > countChar(func, ")"))
 	{
-        equation += ')';
-	}
-    return equation;
-}
-
-function evalEquation(eq, x, y, t)
-{
-	try
-	{
-		eval('var result = ' + eq);
-		return result;
-	}
-	catch(err)
-	{
-		return 0;
+        func += ")";
 	}
+    return func;
 }
 
 function create()
 {
 	var d = new Date();
 	var start = d.getTime();
-	var xsize;
-	var ysize;
+	var width;
+	var height;
 	var length;
 	var framerate;
 
-	var form = document.getElementById('Options');
+	$("#Error").html("");
 
-	var errtag = document.getElementById('Error');
-	errtag.innerHTML = '';
+	width = parseInt($("#width").val());
+	height = parseInt($("#height").val());
+	length = parseFloat($("#length").val());
+	framerate = parseInt($("#framerate").val());
+	notify = $("#notify").prop("checked");
 
-	for (var i = 0; i < form.elements.length; i++)
+	singleweight = parseFloat($("#single").val());
+	numberweight = parseFloat($("#number").val());
+	flength = parseFloat($("#flength").val());
+
+	if (isNaN(width) || isNaN(height) || isNaN(length) || isNaN(framerate) || isNaN(singleweight) || isNaN(numberweight) || isNaN(flength))
 	{
-		if (form.elements[i].value == '')
-		{
-			errtag.innerHTML = 'Please enter a valid number.';
-			return;
-		}
+		stopLoading();
+		$("#Error").html("Please enter a valid number.");
+		return;
 	}
 
-	xsize = parseInt(form.elements[1].value);
-	ysize = parseInt(form.elements[2].value);
-	length = parseFloat(form.elements[3].value);
-	framerate = parseInt(form.elements[4].value);
-	notify = form.elements[5].checked;
-
-	singleweight = parseFloat(form.elements[7].value);
-	numberweight = parseFloat(form.elements[8].value);
-	eqlength = parseFloat(form.elements[9].value);
-
-	var requation = randEquation();
-	var gequation = randEquation();
-	var bequation = randEquation();
+	var rfunction = randFunction();
+	var gfunction = randFunction();
+	var bfunction = randFunction();
+	console.log("1Hi");
 	var x;
 	var y;
 	var r;
 	var g;
 	var b;
 	var encoder = new Whammy.Video(framerate);
-	var video = document.getElementById('Video');
-	var canvas = document.getElementById('Canvas');
-	video.width = xsize;
-	video.height = ysize;
-	canvas.width = xsize;
-	canvas.height = ysize;
-	var ctx = canvas.getContext('2d');
-	var apx = ctx.getImageData(0, 0, xsize, ysize);
+	var video = document.getElementById("Video");
+	var canvas = document.getElementById("Canvas");
+	video.width = width;
+	video.height = height;
+	canvas.width = width;
+	canvas.height = height;
+	var ctx = canvas.getContext("2d");
+	var apx = ctx.getImageData(0, 0, width, height);
 	var data = apx.data;
 
 
 	eval(
-	'for(var t = 0; t < Math.round(framerate * length); t++)'+
-	'{'+
-	'	for(var i = 0; i < data.length; i+=4)'+
-	'	{'+
-	'		x = (i/4) % xsize;'+
-	'		y = Math.floor((i/4) / xsize);'+
-	'		r = Math.abs(Math.round((' + requation + ') % 255));'+
-	'		g = Math.abs(Math.round((' + gequation + ') % 255));'+
-	'		b = Math.abs(Math.round((' + bequation + ') % 255));'+
-	'		data[i] = r;'+
-	'		data[i+1] = g;'+
-	'		data[i+2] = b;'+
-	'		data[i+3] = 255;'+
-	'	}'+
-	'	apx.data = data;'+
-	'	ctx.putImageData(apx, 0, 0);'+
-	'	encoder.add(ctx);'+
-	'}'
+	"for(var t = 0; t < Math.round(framerate * length); t++)"+
+	"{"+
+	"	for(var i = 0; i < data.length; i+=4)"+
+	"	{"+
+	"		x = (i/4) % width;"+
+	"		y = Math.floor((i/4) / width);"+
+	"		r = Math.abs(Math.round((" + rfunction + ") % 255));"+
+	"		g = Math.abs(Math.round((" + gfunction + ") % 255));"+
+	"		b = Math.abs(Math.round((" + bfunction + ") % 255));"+
+	"		data[i] = r;"+
+	"		data[i+1] = g;"+
+	"		data[i+2] = b;"+
+	"		data[i+3] = 255;"+
+	"	}"+
+	"	apx.data = data;"+
+	"	ctx.putImageData(apx, 0, 0);"+
+	"	encoder.add(ctx);"+
+	"}"
 	);
 	var output = encoder.compile();
 	var url = webkitURL.createObjectURL(output);
@@ -246,36 +229,37 @@ function create()
 	var timetaken = Math.round((end-start)/1000);
 	if (timetaken == 1)
 	{
-		$("#Time").html('The time it took was 1 second.');
+		$("#Time").html("The time it took was 1 second.");
 	}
 	else
 	{
-		$("#Time").html('The time it took was ' + timetaken + ' seconds.');
+		$("#Time").html("The time it took was " + timetaken + " seconds.");
 	}
 
-	$("#Function").html('$Functions: \\newline\\newline Red: $' + rmvmath(requation) + '$\\newline\\newline Green: $' + rmvmath(gequation) + '$\\newline\\newline Blue: $' + rmvmath(bequation) + '$');
-	LatexIT.render('*',false);
+	$("#Function").html("$Functions: \\newline\\newline Red: $" + rmvmath(rfunction) + "$\\newline\\newline Green: $" + rmvmath(gfunction) + "$\\newline\\newline Blue: $" + rmvmath(bfunction) + "$");
+	LatexIT.render("*",false);
 
 	stopLoading();
 
-	if(notify)
+	if (notify)
 	{
-		alert('Your video has finished.');
+		alert("Your video has finished.");
 	}
 
+	stopLoading();
 
 }
 
 function startLoading()
 {
-	$('#Create').prop('disabled', true);
-	$('#Create').html('Loading...');
+	$("#Create").prop("disabled", true);
+	$("#Create").html("Loading...");
 }
 
 function stopLoading()
 {
-	$('#Create').prop('disabled', false);
-	$('#Create').html('Create');
+	$("#Create").prop("disabled", false);
+	$("#Create").html("Create");
 }
 
 function start()
diff --git a/js/Harmonograph.js b/js/Harmonograph.js
index a2e12a6..be219b8 100644
--- a/js/Harmonograph.js
+++ b/js/Harmonograph.js
@@ -14,8 +14,8 @@ var started = false;
 
 function sinExp(A, t, f, p, d)
 {
-	
-	
+
+
 	return A*sin(t*f + p) * exp(-d*t);
 }
 
@@ -42,7 +42,7 @@ Pendulum.prototype.swing = function()
 		var x = 0;
 		var y = sinExp(this.a, t, this.f, this.p, this.d);
 	}
-	
+
 	return [x, y];
 }
 
@@ -75,7 +75,7 @@ function addPendulum()
 	txt.id = "pt" + npendulums;
 	document.body.appendChild(txt);
 	document.body.appendChild(p);
-	
+
 	txt = document.createElement("p");
 	txt.innerHTML = "Amplitude:";
 	txt.id = "at" + npendulums;
@@ -85,7 +85,7 @@ function addPendulum()
 	a.id = "A" + npendulums;
 	document.body.appendChild(txt);
 	document.body.appendChild(a);
-	
+
 	txt = document.createElement("p");
 	txt.innerHTML = "Damping:";
 	txt.id = "dt" + npendulums;
@@ -95,8 +95,8 @@ function addPendulum()
 	d.id = "d" + npendulums;
 	document.body.appendChild(txt);
 	document.body.appendChild(d);
-	
-	
+
+
 	txt = document.createElement("p");
 	txt.innerHTML = "Frequency:";
 	var f = document.createElement("input");
@@ -106,7 +106,7 @@ function addPendulum()
 	txt.id = "ft" + npendulums;
 	document.body.appendChild(txt);
 	document.body.appendChild(f);
-	
+
 	txt = document.createElement("p");
 	txt.innerHTML = "Is it a Y pendulum? (you should have at least one X and Y pendulum) ";
 	var xy = document.createElement("input");
@@ -119,8 +119,8 @@ function addPendulum()
 	var br = document.createElement("br");
 	br.id = "br" + npendulums;
 	document.body.appendChild(br);
-	
-	
+
+
 	txt = document.createTextNode("Delete this pendulum");
 	var delBtn = document.createElement("button");
 	delBtn.setAttribute("onclick", "deletePendulum(" + npendulums + ");");
@@ -138,16 +138,16 @@ function deletePendulum(x)
 	document.body.removeChild(document.getElementById("f" +x));
 	document.body.removeChild(document.getElementById("A" +x));
 	document.body.removeChild(document.getElementById("xy" +x));
-	
+
 	document.body.removeChild(document.getElementById("pt" +x));
 	document.body.removeChild(document.getElementById("dt" +x));
 	document.body.removeChild(document.getElementById("ft" +x));
 	document.body.removeChild(document.getElementById("at" +x));
 	document.body.removeChild(document.getElementById("xyt" +x));
-	
+
 	document.body.removeChild(document.getElementById("db" +x));
 	document.body.removeChild(document.getElementById("br" +x));
-	
+
 	for (var i = x+1; i < npendulums; i++)
 	{
 		document.getElementById("p"+i).id = "p"+(i-1);
@@ -175,15 +175,14 @@ function start()
 	frameRate(1000);
 	for (var i = 0; i < npendulums; i++)
 	{
-		//document.write("Hello");
-		var a = document.getElementById("A" + i).value;
-		var f = document.getElementById("f" + i).value;
-		var p = document.getElementById("p" + i).value;
-		var d = document.getElementById("d" + i).value;
-		var xy = document.getElementById("xy"+i).checked;
+		var a = $("#A" + i).value;
+		var f = $("#f" + i).value;
+		var p = $("#p" + i).value;
+		var d = $("#d" + i).value;
+		var xy = $("#xy"+i).checked;
 		new Pendulum(parseFloat(a), parseFloat(d), parseFloat(f), parseFloat(p), xy);
 	}
-	
+
 }
 
 function saveCanvas()
@@ -199,8 +198,8 @@ function draw()
 	curr = calculate();
 	if (t !== 0)
 		line(pp[0], pp[1], curr[0], curr[1]);
-	
-	
+
+
 	t++;
 	pp = curr;
-}
\ No newline at end of file
+}
diff --git a/js/NameGenerator.js b/js/NameGenerator.js
index 2a11411..c7ffa09 100644
--- a/js/NameGenerator.js
+++ b/js/NameGenerator.js
@@ -5,19 +5,19 @@ var sumStartsWith = {};
 
 function loadTrigrams(responseText)
 {
-	var lines = responseText.split('\n');
+	var lines = responseText.split("\n");
 	for (var i = 0; i < lines.length; i++)
 	{
 		var trigram = lines[i].substring(0, 3);
 		var value = parseInt(lines[i].substring(4, lines[i].length));
-		if (trigram == '' || isNaN(value))
+		if (trigram == "" || isNaN(value))
 			continue;
 		trigrams[trigram] = value;
 	}
 
 	trigramKeyList = Object.keys(trigrams);
 
-	document.getElementById("loading").innerHTML = "";
+	$("#loading").html("");
 }
 
 function start()
@@ -43,7 +43,7 @@ function pickFirst2()
 
 	for (var i = 0; i < trigramKeyList.length; i++)
 	{
-		if (trigramKeyList[i][0] == ' ')
+		if (trigramKeyList[i][0] == " ")
 		{
 			sum += trigrams[trigramKeyList[i]];
 		}
@@ -54,7 +54,7 @@ function pickFirst2()
 
 	for (var i = 0; i < trigramKeyList.length; i++)
 	{
-		if (trigramKeyList[i][0] == ' ')
+		if (trigramKeyList[i][0] == " ")
 		{
 			count += trigrams[trigramKeyList[i]];
 			if (selected < count)
@@ -103,14 +103,14 @@ function generateName()
 {
 	var first = pickFirst2();
 	var name = first;
-	var next = '';
+	var next = "";
 	var length = 0;
 	do
 	{
 		name += next;
 		next = nextChar(name);
 	}
-	while (next != ' ');
+	while (next != " ");
 
 	name = name[0].toUpperCase() + name.substring(1);
 
@@ -121,41 +121,36 @@ function generateName()
 
 function createNames()
 {
-	var nameStr = '';
-	var numNames = document.getElementById("numNames").value;
-	var nameDiv = document.getElementById("names");
+	var nameStr = "";
+	var numNames = $("#numNames").val();
 
-	window.setTimeout(50, function() {document.getElementById("loading").innerHTML = "Loading...";});
-
-	nameDiv.innerHTML = "";
+	$("#names").html();
 
 	for (var i = 0; i < numNames; i++)
 		nameStr += generateName() + "<br>";
 
-	if (document.getElementById("outputNames").checked)
-		nameDiv.innerHTML = nameStr;
+	if ($("#outputNames").prop("checked"))
+		$("#names").html(nameStr);
 
-	document.getElementById("loading").innerHTML = "";
+	$("#loading").html("");
 
-	var dload;
-	dload = document.getElementById("download");
-	dload.innerHTML = "Download names (.txt)";
+	$("#download").html("Download names (.txt)");
 	var txt = nameStr.replace(/<br>/g, "\n");
-	dload.href = "data:text/plain;charset=utf-8," + encodeURI(txt);
+	$("#download").prop("href", "data:text/plain;charset=utf-8," + encodeURI(txt));
 
 	stopLoading();
 }
 
 function startLoading()
 {
-	$('#button').prop('disabled', true);
-	$('#button').html('Loading...');
+	$("#button").prop("disabled", true);
+	$("#button").html("Loading...");
 }
 
 function stopLoading()
 {
-	$('#button').prop('disabled', false);
-	$('#button').html('Create Names!');
+	$("#button").prop("disabled", false);
+	$("#button").html("Create Names!");
 }
 
 
diff --git a/js/anagramgame.js b/js/anagramgame.js
index f313452..c50c403 100644
--- a/js/anagramgame.js
+++ b/js/anagramgame.js
@@ -67,16 +67,16 @@ function findWord()
 
 function play()
 {
-	document.getElementById("hidden").style = "visibility: hidden;";
-	document.getElementById("again").style = "visibility: hidden;";	
-	document.getElementById("answer").style = "visibility: hidden;";	
-	document.getElementById("guess").value = "";
-	document.getElementById("loading").innerHTML = "Finding a word with an anagram...";
+	$("#hidden").attr("style", "visibility: hidden;");
+	$("#again").attr("style", "visibility: hidden;");
+	$("#answer").attr("style", "visibility: hidden;");
+	$("#guess").val("");
+	$("#loading").html("Finding a word with an anagram...");
 	findWord();
-	document.getElementById("loading").innerHTML = "";
-	document.getElementById("word").innerHTML = "Find an anagram of " + word + ".";
-	document.getElementById("hidden").style = "";
-	
+	$("#loading").html("");
+	$("#word").html("Find an anagram of " + word + ".");
+	$("#hidden").attr("style", "");
+
 }
 
 function isWord(x)
@@ -100,34 +100,34 @@ function loadWords()
 			}
 			play();
 		}
-	};	
+	};
 	xhttp.open("GET", "https://raw.githubusercontent.com/sindresorhus/word-list/master/words.txt", true);
 	xhttp.send();
 }
 
 function submit()
 {
-	var guess = document.getElementById("guess").value.toLowerCase();
+	var guess = $("#guess").val().toLowerCase();
 	if (guess != word && letterCounts(guess).equals(letterCounts(word)) && isWord(guess))
 	{
-		document.getElementById("answer").style = "";
-		document.getElementById("answer").innerHTML = "<span style='color: green'>Correct!</span>";
-		
-		document.getElementById("again").style = "";
+		$("#answer").attr("style", "");
+		$("#answer").html("<span style='color: green'>Correct!</span>");
+
+		$("#again").attr("style", "");
 	}
 	else
 	{
-		document.getElementById("answer").style = "";
-		document.getElementById("answer").innerHTML = "<span style='color: red'>Incorrect!</span>";
+		$("#answer").attr("style", "");
+		$("#answer").html("<span style='color: red'>Incorrect!</span>");
 	}
 }
 
 function giveUp()
 {
-	document.getElementById("answer").style = "";
-	document.getElementById("answer").innerHTML = "<span style='color: red'>The answer was " + anagram + ".</span>";
-	
-	document.getElementById("again").style = "";
+	$("#answer").attr("style", "");
+	$("#answer").html("<span style='color: red'>The answer was " + anagram + ".</span>");
+
+	$("#again").attr("style", "");
 }
 
 loadWords();
diff --git a/js/ant.js b/js/ant.js
index f6ef4c6..6a2b27d 100644
--- a/js/ant.js
+++ b/js/ant.js
@@ -20,7 +20,17 @@ function turnright(d)
 
 function turnleft(d)
 {
-	return turnright(turnright(turnright(d)));
+	switch(d)
+	{
+	case 'u':
+		return 'l';
+	case 'd':
+		return 'r';
+	case 'r':
+		return 'u';
+	case 'l':
+		return 'd';
+	}
 }
 
 
@@ -29,7 +39,7 @@ function setup()
 	frameRate(100);
 	createCanvas(500, 500);
 	antPos = [width/2, height/2];
-	
+
 	for (var i = 0; i < height; i++)
 	{
 		cells.push([]);
@@ -75,27 +85,32 @@ function draw()
 {
 	if (!running)
 		return;
-	
-	for (var i = 0; i < parseInt(document.getElementById("speed").value); i++)
+
+	var speed = parseInt($("#speed").val());
+
+	if (isNaN(speed))
+		speed = 0;
+
+	for (var i = 0; i < speed; i++)
 	{
-		
+
 		if (antPos[0] < 0 || antPos[0] >= width || antPos[1] < 0 || antPos[1] >= height)
 		{
 			running = false;
 		}
-		
+
 		if (!running)
 			return;
-	
+
 		if (cells[antPos[1]][antPos[0]] == 1)
 			direction = turnright(direction);
 		else
 			direction = turnleft(direction);
-	
-	
+
+
 		cells[antPos[1]][antPos[0]] = 1-cells[antPos[1]][antPos[0]];
 		drawCell(antPos[0], antPos[1]);
-	
+
 		if (direction == 'u')
 			antPos[1]--;
 		else if (direction == 'l')
@@ -104,13 +119,13 @@ function draw()
 			antPos[1]++;
 		else if (direction == 'r')
 			antPos[0]++;
-	
+
 		stroke(255, 0, 0);
 		point(antPos[0], antPos[1]);
 	}
 }
 
-function mouseDragged() 
+function mouseDragged()
 {
 	if (mouseX < 0 || mouseX >= width || mouseY < 0 || mouseY >= height)
 		return;
@@ -132,4 +147,4 @@ function clearCells()
 	background(255);
 	stroke(255, 0, 0);
 	point(antPos[0], antPos[1]);
-}
\ No newline at end of file
+}
diff --git a/js/ballbounce.js b/js/ballbounce.js
index 15c3a53..e0b9f6f 100644
--- a/js/ballbounce.js
+++ b/js/ballbounce.js
@@ -1,7 +1,7 @@
 var WIDTH = 500;
 var HEIGHT = 500;
 var ball_radius = 25;
-var ball_pos = [WIDTH/2, 0];
+var ball_pos = [WIDTH/2, HEIGHT/4];
 var ball_vel = [0, 0];
 var score = 0;
 var started = false;
@@ -22,7 +22,7 @@ function reset()
 
 function draw()
 {
-	
+
 	fill(0,0,0);
 	ellipse(ball_pos[0], ball_pos[1], ball_radius*2, ball_radius*2);
 	fill(255, 0, 0);
@@ -34,21 +34,21 @@ function draw()
 			ball_pos[1] -= 10;
 			score++;
 			started = true;
-		}		
+		}
 	}
 	if (started)
 		ball_vel[1] += 0.1;
-	
+
 	ball_pos[0] += ball_vel[0];
 	ball_pos[1] += ball_vel[1];
-	
+
 	if (ball_pos[1] > HEIGHT)
 	{
 		alert("You lost. Score: " + score);
 		reset();
-		ball_pos = [WIDTH/2, 0];
+		ball_pos = [WIDTH/2, HEIGHT/4];
 		ball_vel = [0, 0];
 		score = 0;
 		started = false;
 	}
-}
\ No newline at end of file
+}
diff --git a/js/elementarycellularautomata.js b/js/elementarycellularautomata.js
index 402c9c7..2d079a2 100644
--- a/js/elementarycellularautomata.js
+++ b/js/elementarycellularautomata.js
@@ -85,89 +85,114 @@ function getNewValue(rule, above, c, binStrings)
     return rule[binStrings.indexOf(above)];
 }
 
+function startLoading()
+{
+	$("#run").prop("disabled", true);
+	$("#run").html("Loading...");
+}
 
-$(document).ready(function() {
-    $("#run").click(function()
+function stopLoading()
+{
+	$("#run").prop("disabled", false);
+	$("#run").html("Run");
+}
+
+function run()
+{
+    $("#error").html("");
+    /* An elementary cellular automaton (e.g. Rule 110 (https://en.wikipedia.org/wiki/Rule_110)) */
+    var time = parseInt($("#time").val()); /* Amount of time to run the automaton for. */
+    var size = parseInt($("#size").val()); /* Size of the starting automaton (bits). */
+    var c = parseInt($("#c").val());
+    var startingConfig = $("#start").val(); /* Starting configuration for the automaton. */
+    var ruleNumber = parseInt($("#rule").val()); /* Rule number (e.g. 110). (0 <= x < 256) This must be converted to a binary number before use. */
+
+    if (!check(time > 0, "Error - The value " + time + " is an invalid time. Time &gt; 0."))
     {
-        $("#error").html("");
-        /* An elementary cellular automaton (e.g. Rule 110 (https://en.wikipedia.org/wiki/Rule_110)) */
-        var time = parseInt($("#time").val()); /* Amount of time to run the automaton for. */
-        var size = parseInt($("#size").val()); /* Size of the starting automaton (bits). */
-        var c = parseInt($("#c").val());
-        var startingConfig = $("#start").val(); /* Starting configuration for the automaton. */
-        var ruleNumber = parseInt($("#rule").val()); /* Rule number (e.g. 110). (0 <= x < 256) This must be converted to a binary number before use. */
-
-        if (!check(time > 0, "Error - The value " + time + " is an invalid time. Time &gt; 0."))
-        {
-            /* Check for invalid time argument. */
-            return;
-        }
+        /* Check for invalid time argument. */
+        stopLoading();
+        return;
+    }
 
-        if (!check(ruleNumber >= 0 && ruleNumber < Math.pow(2, Math.pow(2, 2*c+1)),
-                    "Error - Rule number " + ruleNumber +  " does not exist. 0 &le; Rule number &le; 2<sup>2<sup>2c+1</sup></sup>"))
-        {
-            /* Check for an out-of-bounds rule number. */
-            return;
-        }
-        if (!check(startingConfigValid(startingConfig), "Error - Starting configuration invalid: " + startingConfig))
+    if (!check(ruleNumber >= 0 && ruleNumber < Math.pow(2, Math.pow(2, 2*c+1)),
+                "Error - Rule number " + ruleNumber +  " does not exist. 0 &le; Rule number &le; 2<sup>2<sup>2c+1</sup></sup>"))
+    {
+        /* Check for an out-of-bounds rule number. */
+        stopLoading();
+        return;
+    }
+    if (!check(startingConfigValid(startingConfig), "Error - Starting configuration invalid: " + startingConfig))
+    {
+        /* Check for an invalid starting configuration. e.g. 024930283848 */
+        stopLoading();
+        return;
+    }
+
+    if (!check(startingConfig.length <= size, "Error - Starting configuration length is greater than size!"))
+    {
+        stopLoading();
+        return;
+    }
+
+    if (!check(size > 0, "Error - Invalid size: " + size + ". Size > 0"))
+    {
+        /* Check for invalid size argument. */
+        stopLoading();
+        return;
+    }
+
+    var rule = bin(ruleNumber, Math.pow(2, 2*c+1));
+
+    $("#canvas").prop("width", size*2);
+    $("#canvas").prop("height", time*2);
+
+
+    ctx = document.getElementById("canvas").getContext("2d");
+
+    ctx.fillStyle = "#ffffff"
+    ctx.fillRect(0, 0, size, time);
+    ctx.fillStyle = "#000000"
+
+    startingConfig = padConfiguration(startingConfig, size);
+    /* Run the automaton. */
+
+    drawState(startingConfig, 0);
+    var binStrings = Array.from(Array(Math.pow(2, 2*c+1)).keys()).map(function(x) { return bin(x, 2*c+1); }).reverse();
+    var lastState = startingConfig;
+
+    for (var t = 1; t < time; t++)
+    {
+        var nextState = "";
+        for (var i = 0; i < c; i++)
         {
-            /* Check for an invalid starting configuration. e.g. 024930283848 */
-            return;
+            nextState += getNewValue(rule, pad(lastState.substring(0, i+c+1), 2*c+1), c, binStrings)
         }
 
-        if (!check(startingConfig.length <= size, "Error - Starting configuration length is greater than size!"))
+        for (var i = c; i < size-c; i++)
         {
-            return;
+            nextState += getNewValue(rule, lastState.substring(i-c, i+c+1), c, binStrings);
         }
 
-        if (!check(size > 0, "Error - Invalid size: " + size + ". Size > 0"))
+        for (var i = size-c; i < size; i++)
         {
-            /* Check for invalid size argument. */
-            return;
+            nextState += getNewValue(rule, pad(lastState.substring(i-c, size), 2*c+1), c, binStrings);
         }
 
-        var rule = bin(ruleNumber, Math.pow(2, 2*c+1));
-
-        document.getElementById("canvas").width = size*2;
-        document.getElementById("canvas").height = time*2;
-
-
-        ctx = document.getElementById("canvas").getContext("2d");
+        drawState(nextState, t);
+        lastState = nextState;
+    }
 
-        ctx.fillStyle = "#ffffff"
-        ctx.fillRect(0, 0, size, time);
-        ctx.fillStyle = "#000000"
+    stopLoading();
 
-        startingConfig = padConfiguration(startingConfig, size);
-        /* Run the automaton. */
+}
 
-        drawState(startingConfig, 0);
-        var binStrings = Array.from(Array(Math.pow(2, 2*c+1)).keys()).map(function(x) { return bin(x, 2*c+1); }).reverse();
-        var lastState = startingConfig;
-        
-        for (var t = 1; t < time; t++)
-        {
-            var nextState = "";
-            for (var i = 0; i < c; i++)
-            {
-                nextState += getNewValue(rule, pad(lastState.substring(0, i+c+1), 2*c+1), c, binStrings)
-            }
-
-            for (var i = c; i < size-c; i++)
-            {
-                nextState += getNewValue(rule, lastState.substring(i-c, i+c+1), c, binStrings);
-            }
-
-            for (var i = size-c; i < size; i++)
-            {
-                nextState += getNewValue(rule, pad(lastState.substring(i-c, size), 2*c+1), c, binStrings);
-            }
-
-            drawState(nextState, t);
-            lastState = nextState;
-        }
 
+$(document).ready(function() {
+    $("#run").click(function()
+    {
 
+        startLoading();
+        window.setTimeout(run, 1);
 
 
     });
diff --git a/js/h.js b/js/h.js
index d23530f..584841d 100644
--- a/js/h.js
+++ b/js/h.js
@@ -1,5 +1,3 @@
-try
-{
 var lineLength = 5;
 var canvas;
 var ctx;
@@ -46,14 +44,14 @@ function multiple(e)
 		if (allendpoints[i].equals(e))
 		{
 			count++;
-			
+
 			if (count > 1)
 				return true;
 		}
 	}
-	
+
 	return false;
-			
+
 }
 
 function rmvAll(e)
@@ -70,30 +68,30 @@ function iterate()
 {
 	var indexOfThis = endpoints.indexOf(this);
 	endpoints.splice(indexOfThis, 1);
-	
-	if (this.direction == 'h')
+
+	if (this.direction == "h")
 	{
 		line(this.x-lineLength, this.y, this.x+lineLength, this.y);
-		var e1 = new Endpoint(this.x-lineLength, this.y, 'v');
-		var e2 = new Endpoint(this.x+lineLength, this.y, 'v');
-		
+		var e1 = new Endpoint(this.x-lineLength, this.y, "v");
+		var e2 = new Endpoint(this.x+lineLength, this.y, "v");
+
 
 	}
 	else
 	{
 		line(this.x, this.y-lineLength, this.x, this.y+lineLength);
-		var e1 = new Endpoint(this.x, this.y-lineLength, 'h');
-		var e2 = new Endpoint(this.x, this.y+lineLength, 'h');
-		
+		var e1 = new Endpoint(this.x, this.y-lineLength, "h");
+		var e2 = new Endpoint(this.x, this.y+lineLength, "h");
+
 	}
-	
+
 	if (Math.random() < chance)
 		endpoints.push(e1);
 	if (Math.random() < chance)
 		endpoints.push(e2);
 	allendpoints.push(e1);
 	allendpoints.push(e2);
-	
+
 }
 
 Endpoint.prototype.equals=equals;
@@ -102,34 +100,33 @@ Endpoint.prototype.iterate=iterate;
 
 function iterateAll()
 {
-	
+
 	var cpy = endpoints.slice();
-	
+
 	for (var i = 0; i < cpy.length; i++)
 		if (multiple(cpy[i]))
 			rmvAll(cpy[i]);
-			
+
 	cpy = endpoints.slice();
 	for (var i = 0; i < cpy.length; i++)
 		cpy[i].iterate();
-		
+
 	iterateTimeout = setTimeout(iterateAll, delay);
 }
 
 function stop()
 {
+	$("#stop").hide();
 	running = false;
+
 	if (!stopped)
 	{
 		clearTimeout(iterateTimeout);
-		var download = document.createElement('a');
-		download.innerHTML = 'Download H';
-		download.href = canvas.toDataURL();
-		download.download = 'h.png';
-		download.id = 'download';
-		document.body.appendChild(download);
+		$("#download").show();
+		$("#link").prop("href", canvas.toDataURL());
 		stopped = true;
 	}
+
 }
 
 function start()
@@ -137,13 +134,13 @@ function start()
 	if (!running)
 	{
 		running = true;
-		
-	
+
+
 		w = canvas.width;
 		h = canvas.height;
 		endpoints = [];
 		allendpoints = [];
-		var a = new Endpoint(w/2, h/2, 'h');
+		var a = new Endpoint(w/2, h/2, "h");
 		endpoints.push(a);
 		a.iterate();
 		iterateAll();
@@ -153,51 +150,39 @@ function start()
 
 function beginH()
 {
-try{
+	$("#begin").hide();
 	if (!stopped)
 	{
-		canvas = document.getElementById('canvas');
-		
-		var w = parseInt(document.getElementById('w').value);
-		var h = parseInt(document.getElementById('h').value);
+		canvas = document.getElementById("canvas");
+
+		var w = parseInt($("#w").val());
+		var h = parseInt($("#h").val());
 		canvas.width = w;
 		canvas.height = h;
-		
-		ctx = canvas.getContext('2d');
+
+		ctx = canvas.getContext("2d");
 		ctx.strokeStyle = "#000";
-		ctx.fillStyle = '#fff';
-		
+		ctx.fillStyle = "#fff";
+
 		ctx.fillRect(0, 0, w, h);
-	
-		lineLength= document.getElementById('lineLength').value;
-		lineLength = parseInt(lineLength);
-	
-		delay = parseInt(document.getElementById('delay').value);
-
-		document.body.appendChild(canvas);
-		document.body.appendChild(document.createElement('br'));
-		
-		chance = parseFloat(document.getElementById('chance').value);
-	
-	
+
+		lineLength = parseInt($("#lineLength").val());
+
+		delay = parseInt($("#delay").val());
+
+		chance = parseFloat($("#chance").val());
+
+
 		start();
 	}
 	else
 	{
-		document.body.removeChild(document.getElementById('download'));
 		iterateAll();
 		stopped = false;
 	}
-	}
-catch(e)
-{
-	document.write(e);
 }
-}
-
 
-}
-catch(e)
+$(function()
 {
-	document.write(e);
-}
\ No newline at end of file
+	$("#download").hide();
+});
diff --git a/js/magnets.js b/js/magnets.js
index 7d82507..c532e74 100644
--- a/js/magnets.js
+++ b/js/magnets.js
@@ -65,7 +65,7 @@ function draw()
     safe_zone_radius *= 0.9995;
     ellipse(mouseX, mouseY, safe_zone_radius, safe_zone_radius);
 
-    if ((mouseX > width || mouseY > height) && magnets.length > 0)
+    if ((mouseX > width || mouseY > height || mouseY < 0) && magnets.length > 0)
     {
         gameOver = true;
         alert("You went out of bounds. Score: " + magnets.length);
diff --git a/js/mandelbrot.js b/js/mandelbrot.js
index cdfc467..93929ce 100644
--- a/js/mandelbrot.js
+++ b/js/mandelbrot.js
@@ -37,7 +37,7 @@ function cpower(re, im, power)
 		i++;
 	}
 	return x;
-	
+
 }
 
 function iterate(z, power, c)
@@ -66,14 +66,12 @@ function num_iterations(power, c, max_iterations)
 function draw_mandelbrot()
 {
 	var size = width*increment;
-	
-	
-	
+
 	var endI = startI+size;
 	var endJ = startJ+size;
-	
+
 	var imgData = ctx.createImageData(width, height);
-	
+
 	for (var i = startI; i < endI; i+=increment)
 	{
 		for (var j = startJ; j < endJ; j+=increment)
@@ -82,14 +80,14 @@ function draw_mandelbrot()
 			var jpos = j*(1.0/increment)-startJ*(1.0/increment);
 			jpos = Math.floor(Math.round(jpos));
 			ipos = Math.floor(Math.round(ipos));
-			
+
 			var x = num_iterations(power, [i, j], iterations)/iterations * 255
 			imgData.data[4*(jpos*width+ipos)] = x;
 			imgData.data[1+4*(jpos*width+ipos)] = x;
 			imgData.data[2+4*(jpos*width+ipos)] = x;
 			imgData.data[3+4*(jpos*width+ipos)] = 255;
-			
-			
+
+
 		}
 	}
 	ctx.putImageData(imgData, 0, 0);
@@ -109,25 +107,25 @@ function mousePressed(e)
 {
 	var x;
 	var y;
-	if (e.pageX || e.pageY) { 
+	if (e.pageX || e.pageY) {
 	  x = e.pageX;
 	  y = e.pageY;
 	}
-	else { 
-	  x = e.clientX; 
-	  y = e.clientY; 
-	} 
+	else {
+	  x = e.clientX;
+	  y = e.clientY;
+	}
 	x -= canvas.offsetLeft;
 	y -= canvas.offsetTop;
 	if (x < 0 || x > width || y < 0 || y > height)
 		return;
-		
+
 	if (e.button == 0)
 	{
 		increment /= 2;
 		startI = map(x, 0, width, startI, startI+width*increment);
 		startJ = map(y, 0, height, startJ, startJ+width*increment);
-	 
+
 		draw_mandelbrot();
 	}
 }
@@ -141,7 +139,7 @@ function keyPressed(e)
 		increment /= 2;
 		startI = startI+width*increment/2;
 		startJ = startJ+height*increment/2;
-		
+
 		draw_mandelbrot();
 	}
 	if (key == "Q")
@@ -176,4 +174,3 @@ canvas.addEventListener("mousedown", mousePressed);
 document.body.addEventListener("keydown", keyPressed);
 
 draw_mandelbrot();
-	
\ No newline at end of file
diff --git a/js/mazesolver.js b/js/mazesolver.js
index c2b5b89..815aa59 100644
--- a/js/mazesolver.js
+++ b/js/mazesolver.js
@@ -1,6 +1,5 @@
 
-var canvas = document.getElementById('Canvas');
-var form = document.getElementById('Form');
+var canvas = document.getElementById("Canvas");
 
 
 var X;
@@ -26,7 +25,7 @@ for (var i = 0; i < Y; i++)
 }
 
 
-var ctx = canvas.getContext('2d');
+var ctx = canvas.getContext("2d");
 
 var mouseDown = false;
 
@@ -37,7 +36,6 @@ var begun = false;
 var start; //(location)
 var end; //(location)
 
-var doesItWorkParagraph = document.getElementById('DoesItWork');
 
 function reset()
 {
@@ -198,38 +196,21 @@ function getTilesToGoal()
 	while (!(equals2d(tilesToGoal, oldTTG)));
 
 
-
-	/*for (var y = 0; y < tilesToGoal.length; y++)
-	{
-		for (var x = 0; x < tilesToGoal[y].length; x++)
-			document.write(tilesToGoal[y][x] + ' ');
-
-		document.write('<br>');
-	}*/
-
-
 	if (tilesToGoal[start[1]][start[0]] < 0)
 		return false;
 
 	return true;
 }
 
-function remove(element)
-{
-	element.parentNode.removeChild(element);
-}
-
 function startCreation()
 {
-	var size = form.elements[0].value;
+	var size = $("#size").val();
 	X = size;
 	Y = size;
-	var button = document.getElementById('StartButton');
-	button.innerHTML = 'Solve Maze';
-	button.onclick = function(){try{begin();}catch(err){document.write(err)}};
-	remove(form);
-	canvas.width = 500;
-	canvas.height = 500;
+	$("#Canvas").show();
+	$("#begin").show();
+	$("#StartButton").html("Clear maze");
+	$("#form").hide();
 	reset();
 	clear();
 
@@ -240,7 +221,7 @@ function begin()
 
 	if (!(startPlaced && endPlaced))
 	{
-		doesItWorkParagraph.innerHTML = 'You must choose a start and end location (right-click).';
+		$("#Error").html("You must choose a start and end location (right-click).");
 		reset();
 		clear();
 		return;
@@ -250,7 +231,7 @@ function begin()
 	var mazeWorks = getTilesToGoal();
 	if (mazeWorks === false)
 	{
-		doesItWorkParagraph.innerHTML = 'Maze cannot be solved.';
+		$("#Error").html("Maze cannot be solved.");
 		reset();
 		clear();
 		return;
@@ -268,7 +249,7 @@ function begin()
 		x = location[0];
 		y = location[1];
 
-		circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), '#ffaaaa');
+		circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), "#aaf");
 		surroundingTiles = [[x+1, y], [x, y+1], [x-1, y], [x, y-1]];
 		if (y === tilesToGoal.length - 1) surroundingTiles = rmvArray(surroundingTiles, [x, y+1]);
 		if (y === 0) surroundingTiles = rmvArray(surroundingTiles, [x, y-1]);
@@ -287,7 +268,7 @@ function begin()
 	x = location[0];
 	y = location[1];
 
-	circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), '#ffaaaa');
+	circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), "#aaf");
 
 	reset();
 
@@ -320,7 +301,7 @@ function mouseMoved(event)
 
 	if (button === 1)
 	{
-		rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#dddddd');
+		rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#dddddd");
 		tiles[tiley][tilex] = false;
 		if (equals([tilex, tiley], start))
 		{
@@ -343,7 +324,7 @@ function mouseMoved(event)
 
 	if (notClickedOnStart && notClickedOnEnd)
 	{
-		rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#aaaaaa');
+		rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#aaaaaa");
 		tiles[tiley][tilex] = true;
 	}
 
@@ -351,7 +332,7 @@ function mouseMoved(event)
 
 function clear()
 {
-	rect(0, 0, canvas.width, canvas.height, '#dddddd');
+	rect(0, 0, canvas.width, canvas.height, "#dddddd");
 	started = false;
 }
 
@@ -388,13 +369,13 @@ function mousePressed(event)
 		if ((!startPlaced) && (!tiles[tiley][tilex]))
 		{
 			start = [tilex, tiley];
-			rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#00ff00');
+			rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#00ff00");
 			startPlaced = true;
 		}
 		else if ((!endPlaced) && (!tiles[tiley][tilex]))
 		{
 			end = [tilex, tiley];
-			rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#ffff00');
+			rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#ffff00");
 			endPlaced = true;
 			return;
 		}
@@ -408,9 +389,9 @@ function mouseReleased(event)
 
 
 
-canvas.addEventListener('mousemove', mouseMoved, false);
-canvas.addEventListener('mousedown', mousePressed, false);
-canvas.addEventListener('mouseup', mouseReleased, false);
+canvas.addEventListener("mousemove", mouseMoved, false);
+canvas.addEventListener("mousedown", mousePressed, false);
+canvas.addEventListener("mouseup", mouseReleased, false);
 
 function circle(x, y, r, colour)
 {
@@ -430,14 +411,14 @@ function rect(x, y, w, h, colour)
 
 function text(str, x, y)
 {
-	ctx.font = "20px Helvetica";
-	ctx.fillStyle = '#000000';
+	ctx.font = "20px Arial";
+	ctx.fillStyle = "#000000";
 	ctx.fillText(str, x, y);
 }
 
 function line(x1, y1, x2, y2)
 {
-	ctx.strokeStyle = '#000000';
+	ctx.strokeStyle = "#000000";
 	ctx.beginPath();
 	ctx.moveTo(x1, y1);
 	ctx.lineTo(x2, y2);
@@ -453,4 +434,10 @@ function line(x1, y1, x2, y2, color)
 	ctx.stroke();
 };
 
-rect(0, 0, canvas.width, canvas.height, '#dddddd');
+rect(0, 0, canvas.width, canvas.height, "#dddddd");
+
+$(function()
+{
+	$("#begin").hide();
+	$("#Canvas").hide();
+});
diff --git a/js/modularcircles.js b/js/modularcircles.js
index 8b588f9..8e346e0 100644
--- a/js/modularcircles.js
+++ b/js/modularcircles.js
@@ -5,45 +5,45 @@ function setup()
 

 function nPoints()

 {

-	return document.getElementById("npoints").value;

+	return parseInt($("#npoints").val());

 }

 

 function shouldMul()

 {

-	return document.getElementById("should_mul").checked;

+	return $("#should_mul").prop("checked");

 }

 

 function amount()

 {

-	return parseFloat(document.getElementById("amount").value);

+	return parseFloat($("#amount").val());

 }

 

 function getPos(number)

 {

-	angle = 2*PI * number/(nPoints()); 

+	angle = 2*PI * number/(nPoints());

 	return [cos(angle)*250+300, sin(angle)*250+300];

 }

 

 function draw()

 {

 	if (shouldMul())

-		document.getElementById("amount").step = 0.1;

+		$("#amount").prop("step", 0.1);

 	else

-		document.getElementById("amount").step = 1;

+		$("#amount").prop("step", 1);

 	background(255);

 	ellipseMode(CENTER);

 	noStroke();

 	fill(0);

 	for (var i = 0; i < nPoints(); i++)

 		ellipse(getPos(i)[0], getPos(i)[1], 3, 3);

-	

+

 	stroke(0);

 	for (var i = 0; i < nPoints(); i++)

 	{

 		if (shouldMul())

 		{

 			stroke(map(map((amount()*i)%nPoints(), 0, nPoints(), 0, 256) - map(i, 0, nPoints(), 0, 256), -256, 256, 0, 256), map(i, 0, nPoints(), 0, 256), map((amount()*i)%nPoints(), 0, nPoints(), 0, 256));

-			line(getPos(i)[0], getPos(i)[1], getPos((amount()*i)%nPoints())[0], getPos((amount()*i)%nPoints())[1]); 

+			line(getPos(i)[0], getPos(i)[1], getPos((amount()*i)%nPoints())[0], getPos((amount()*i)%nPoints())[1]);

 		}

 		else

 		{

@@ -51,4 +51,4 @@ function draw()
 			line(getPos(i)[0], getPos(i)[1], getPos((amount()+i)%nPoints())[0], getPos((amount()+i)%nPoints())[1]);

 		}

 	}

-}
\ No newline at end of file
+}

diff --git a/js/modularpascal.js b/js/modularpascal.js
index ea91de1..a2c4c1a 100644
--- a/js/modularpascal.js
+++ b/js/modularpascal.js
@@ -1,15 +1,16 @@
-var triangle = [];

-var colors = [];

-var currentX;

+

 function getX()

 {

-	return document.getElementById("mod").value;

+	return $("#mod").val();

 }

 

 

 

 function updateTriangle()

 {

+	var triangle = [];

+	var colors = [];

+	var currentX;

 	var x = getX();

 	triangle = [];

 	currentX = x;

diff --git a/js/shaperoller.js b/js/shaperoller.js
index f0360d6..cd67fac 100644
--- a/js/shaperoller.js
+++ b/js/shaperoller.js
@@ -33,7 +33,7 @@ function deleteShape(num)
 	removeElementById("radius"+num);
 	removeElementById("del"+num);
 	removeElementById("br"+num);
-	
+
 }
 
 function updateShapes()
@@ -49,7 +49,7 @@ function updateShapes()
 		radii.push(document.getElementById("radius" + i).value);
 	}
 	speed = parseFloat(document.getElementById("speed").value);
-	
+
 }
 
 function loadShapes()
@@ -69,7 +69,7 @@ function addShape()
 	updateShapes();
 	var nShapes = getNumShapes();
 	var shapesDiv = document.getElementById("shapes");
-	shapesDiv.innerHTML += '<span id="rt' + nShapes + '">Radius:</span> <input type="number" value="50" id="radius' + nShapes + '"> <span id="st' + nShapes + '">Shape:</span> ' + 
+	shapesDiv.innerHTML += '<span id="rt' + nShapes + '">Radius:</span> <input type="number" value="50" id="radius' + nShapes + '"> <span id="st' + nShapes + '">Shape:</span> ' +
 	'<select id="shape' + nShapes + '"><option value="circle">Circle</option><option value="square">Square</option></select> <button id="del' + nShapes + '" onclick="deleteShape(' + nShapes + ');">Delete</button><br id="br' + nShapes + '">';
 	shapes.push(0);
 	radii.push(50);
@@ -104,7 +104,7 @@ function squos(angle)
 	if (angle > QUARTER_PI && angle < 3*QUARTER_PI)
 		return -map(angle, QUARTER_PI, 3*QUARTER_PI, -1, 1);
 	return map(angle, 5*QUARTER_PI, 7*QUARTER_PI, -1, 1);
-	
+
 }
 
 function getPointOnShape(shape, radius, centerX, centerY, angle)
@@ -123,7 +123,7 @@ function setup()
 }
 
 function draw()
-{	
+{
 	updateShapes();
 	try{
 	if (drawing)
@@ -131,36 +131,36 @@ function draw()
 		background(255);
 		stroke(0);
 		noFill();
-		
+
 		var centerX = width/2;
 		var centerY = height/2;
 		var nextPoint;
-		
+
 		for (var i = 0; i < shapes.length; i++)
 		{
-			
+
 			var angle = map(currentAngle%radii[i], 0, radii[i], 0, TWO_PI);
 			nextPoint = getPointOnShape(shapes[i], radii[i], centerX, centerY, angle);
 			centerX = nextPoint[0];
 			centerY = nextPoint[1];
-			
+
 		}
-		
-		
+
+
 		points.push([centerX, centerY]);
-		
-		
-		
+
+
+
 		if (points.length != 1 && dist(points[0][0], points[0][1], points[points.length-1][0], points[points.length-1][1]) < speed)
 			drawing = false;
-		
-		
+
+
 		for (var i = 1; i < points.length; i++)
 		{
 			line(points[i-1][0], points[i-1][1], points[i][0], points[i][1]);
 		}
-		
-		
+
+
 		currentAngle += speed;
 		if (drawing)
 		{
@@ -169,4 +169,4 @@ function draw()
 			ellipse(centerX, centerY, 7, 7);
 		}
 	}}catch(e){document.write(e + "<br>");}
-}
\ No newline at end of file
+}
diff --git a/js/tree.js b/js/tree.js
index 64cd2f3..f3c977d 100644
--- a/js/tree.js
+++ b/js/tree.js
@@ -1,24 +1,24 @@
-
 function draw_branch(x, y, t)
 {
-  if (t > 8)
-    return;
-  var sz = (400 * pow(0.5, t)) * map(255-frameCount%256, 0, 255, 0, 1);
-  var angle = map(mouseX, 0, width, 0, HALF_PI) + t * map(mouseY, 0, height, -HALF_PI, HALF_PI);
-  line(x, y, x+cos(angle)*sz, y-sin(angle)*sz);
-  line(x, y, x-cos(angle)*sz, y-sin(angle)*sz);
-  draw_branch((x+cos(angle)*sz), (y-sin(angle)*sz), t+1);
-  draw_branch((x-cos(angle)*sz), (y-sin(angle)*sz), t+1);
+    if (t > 8)
+        return;
+    var sz = (400 * pow(0.5, t)) * map(255-frameCount%256, 0, 255, 0, 1);
+    var angle = map(mouseX, 0, width, 0, HALF_PI) + t * map(mouseY, 0, height, -HALF_PI, HALF_PI);
+    line(x, y, x+cos(angle)*sz, y-sin(angle)*sz);
+    line(x, y, x-cos(angle)*sz, y-sin(angle)*sz);
+    draw_branch((x+cos(angle)*sz), (y-sin(angle)*sz), t+1);
+    draw_branch((x-cos(angle)*sz), (y-sin(angle)*sz), t+1);
 }
+
 function setup()
 {
-  
-  createCanvas(700, 700);
-  background(255);
-  draw_branch(width/2, height, 0);
+    createCanvas(700, 700);
+    background(255);
+    draw_branch(width/2, height, 0);
 }
+
 function draw()
 {
-  background(255);
-  draw_branch(width/2, height, 0);
+    background(255);
+    draw_branch(width/2, height, 0);
 }
diff --git a/js/treegenerator.js b/js/treegenerator.js
index 225c639..599cade 100644
--- a/js/treegenerator.js
+++ b/js/treegenerator.js
@@ -1,37 +1,36 @@
-
 var size;
 var start_angle;
 var angle_decay;
+
 function draw_branch(x, y, t)
 {
-  if (t > 8)
-    return;
-  var sz = size * pow(0.5, t);
-  var angle = start_angle + angle_decay * t;
-  line(x, y, x+cos(angle)*sz, y-sin(angle)*sz);
-  line(x, y, x-cos(angle)*sz, y-sin(angle)*sz);
-  draw_branch(x+cos(angle)*sz, y-sin(angle)*sz, t+1);
-  draw_branch(x-cos(angle)*sz, y-sin(angle)*sz, t+1);
-  
+    if (t > 8)
+        return;
+    var sz = size * pow(0.5, t);
+    var angle = start_angle + angle_decay * t;
+    line(x, y, x+cos(angle)*sz, y-sin(angle)*sz);
+    line(x, y, x-cos(angle)*sz, y-sin(angle)*sz);
+    draw_branch(x+cos(angle)*sz, y-sin(angle)*sz, t+1);
+    draw_branch(x-cos(angle)*sz, y-sin(angle)*sz, t+1);
+
 }
+
 function setup()
 {
-	
-  createCanvas(700, 700);
-  stroke(0);
+    createCanvas(750, 750);
+    stroke(0);
 }
 
 function draw()
 {
-  size = parseFloat(document.getElementById("size").value);
-  start_angle = parseFloat(document.getElementById("angle").value);
-  angle_decay = parseFloat(document.getElementById("angledecay").value);
-  background(255);
-  draw_branch(width/2, height, 0);
+    size = parseFloat($("#size").val());
+    start_angle = parseFloat($("#angle").val());
+    angle_decay = parseFloat($("#angledecay").val());
+    background(255);
+    draw_branch(width/2, height, 0);
 }
 
 function saveTree()
-{	
+{
 	save("tree.png");
-	
-}
\ No newline at end of file
+}