var vertexCount = 4; // Initial number of vertices
function addVertex() {
var vertexInputsDiv = document.getElementById('vertexInputs');
var newVertexRow = document.createElement('div');
newVertexRow.className = 'vertex-row';
newVertexRow.id = 'vertexRow_' + vertexCount;
newVertexRow.style.cssText = 'display: flex; align-items: center; margin-bottom: 10px; gap: 10px;';
newVertexRow.innerHTML = `
`;
vertexInputsDiv.appendChild(newVertexRow);
vertexCount++;
}
function removeVertex(index) {
var vertexRow = document.getElementById('vertexRow_' + index);
if (vertexRow) {
vertexRow.remove();
// Re-index remaining vertices for display purposes (optional, but good for UX)
var allVertexRows = document.querySelectorAll('.vertex-row');
vertexCount = 0; // Reset count to rebuild
for (var i = 0; i < allVertexRows.length; i++) {
var row = allVertexRows[i];
var oldXId = 'x_' + row.id.split('_')[1];
var oldYId = 'y_' + row.id.split('_')[1];
row.id = 'vertexRow_' + vertexCount;
row.querySelector('label[for="' + oldXId + '"]').setAttribute('for', 'x_' + vertexCount);
row.querySelector('label[for="' + oldYId + '"]').setAttribute('for', 'y_' + vertexCount);
row.querySelector('label[for="x_' + vertexCount + '"]').innerText = 'X' + (vertexCount + 1) + ':';
row.querySelector('label[for="y_' + vertexCount + '"]').innerText = 'Y' + (vertexCount + 1) + ':';
row.querySelector('#' + oldXId).id = 'x_' + vertexCount;
row.querySelector('#' + oldYId).id = 'y_' + vertexCount;
row.querySelector('button').setAttribute('onclick', 'removeVertex(' + vertexCount + ')');
vertexCount++;
}
}
}
function calculatePolygonArea() {
var xCoords = [];
var yCoords = [];
var hasError = false;
var allVertexRows = document.querySelectorAll('.vertex-row');
if (allVertexRows.length < 3) {
document.getElementById('polygonAreaResult').innerHTML = '
';
return;
}
for (var i = 0; i < allVertexRows.length; i++) {
var xInput = document.getElementById('x_' + allVertexRows[i].id.split('_')[1]);
var yInput = document.getElementById('y_' + allVertexRows[i].id.split('_')[1]);
var xVal = parseFloat(xInput.value);
var yVal = parseFloat(yInput.value);
if (isNaN(xVal) || isNaN(yVal)) {
document.getElementById('polygonAreaResult').innerHTML = '
';
hasError = true;
break;
}
xCoords.push(xVal);
yCoords.push(yVal);
}
if (hasError) {
return;
}
var n = xCoords.length;
var sum1 = 0;
var sum2 = 0;
for (var i = 0; i < n; i++) {
sum1 += xCoords[i] * yCoords[(i + 1) % n];
sum2 += yCoords[i] * xCoords[(i + 1) % n];
}
var area = 0.5 * Math.abs(sum1 – sum2);
document.getElementById('polygonAreaResult').innerHTML = 'The area of the polygon is:
Understanding Polygon Area
A polygon is a closed two-dimensional shape made up of straight line segments. The area of a polygon is the amount of space enclosed within its boundaries. Calculating the area can be straightforward for simple shapes like squares or triangles, but it becomes more complex for irregular polygons with many sides.
The Shoelace Formula
This calculator uses the Shoelace Formula, also known as Gauss's Area Formula or the Surveyor's Formula. This method is incredibly versatile as it can calculate the area of any simple polygon (convex or concave) given the Cartesian coordinates (x, y) of its vertices. The vertices must be listed in order, either clockwise or counter-clockwise, around the perimeter of the polygon.
How the Shoelace Formula Works
The formula is based on summing the cross products of consecutive coordinates. If a polygon has 'n' vertices with coordinates (x₁, y₁), (x₂, y₂), …, (xₙ, yₙ), the area (A) is given by:
A = ½ | (x₁y₂ + x₂y₃ + … + xₙy₁) – (y₁x₂ + y₂x₃ + … + yₙx₁) |
In simpler terms, you multiply each x-coordinate by the y-coordinate of the next vertex, sum these products, and then subtract the sum of products of each y-coordinate by the x-coordinate of the next vertex. The absolute value of this difference, divided by two, gives the area.
Example Calculation
Let's calculate the area of a polygon with the following vertices:
- Vertex 1: (1, 1)
- Vertex 2: (3, 4)
- Vertex 3: (6, 2)
- Vertex 4: (4, 0)
Using the Shoelace Formula:
Step 1: Calculate the first sum (xᵢ * yᵢ₊₁):
- (1 * 4) = 4
- (3 * 2) = 6
- (6 * 0) = 0
- (4 * 1) = 4 (Note: The last x-coordinate is multiplied by the first y-coordinate)
Sum 1 = 4 + 6 + 0 + 4 = 14
Step 2: Calculate the second sum (yᵢ * xᵢ₊₁):
- (1 * 3) = 3
- (4 * 6) = 24
- (2 * 4) = 8
- (0 * 1) = 0 (Note: The last y-coordinate is multiplied by the first x-coordinate)
Sum 2 = 3 + 24 + 8 + 0 = 35
Step 3: Apply the formula:
Area = ½ | Sum 1 – Sum 2 |
Area = ½ | 14 – 35 |
Area = ½ | -21 |
Area = ½ * 21
Area = 10.5 square units
This calculator simplifies the process by allowing you to input the coordinates directly and instantly provides the area, making it a valuable tool for geometry, surveying, and various engineering applications.