var vertices = [];

function mouseDragged()
{
	if (document.getElementById("info").innerHTML != "")
		return;
	if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > width)
		return;
	stroke(0);
	vertices.push([mouseX, mouseY]);
	if (vertices.length > 1)
		line(mouseX, mouseY, vertices[vertices.length-2][0], vertices[vertices.length-2][1]);
}

function circumference()
{
	var total = 0;
	for (var i = 1; i < vertices.length; i++)
	{
		total += dist(vertices[i-1][0], vertices[i-1][1], vertices[i][0], vertices[i][1]);
	}
	return total;
}

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;
	}
	return [centerX, centerY];
}

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;
	for (var i = 0; i < vertices.length; i++)
	{
		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]);
	stroke(255, 0, 0);
	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()
{
	createCanvas(500, 500);
	stroke(255, 0, 0);
	line(0, 0, width-1, 0);
	line(width-1, 0, width-1, height-1);
	line(0, height-1, width-1, height-1);
	line(0, 0, 0, height-1);
}

function calculate()
{
	var approx = twoPiApprox();
	var avgPi = approx;
	var percentError;
	if (avgPi > PI)
	{
		percentError = 100*(avgPi/PI - 1);
	}
	else
	{
		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>"
	+ "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 π";
}