Polygons, Area, and Perimeter

Why This Matters

A polygon is any closed shape made of straight line segments: triangles, rectangles, pentagons, hexagons, and beyond. Polygons are the workhorse of computational geometry. Every 2D shape on a screen, every floor plan in architecture, and every country boundary on a map is represented as a polygon.

Computing area tells you how much space a polygon encloses, and computing perimeter tells you how far you would walk around its edge. These are not just textbook exercises. Game engines compute polygon areas to determine hit zones. Geographic information systems compute land areas from polygon boundaries. Architects compute floor areas from room outlines.

The shoelace formula is a beautiful algorithm that computes the area of any polygon from its vertex coordinates -- no matter how many sides it has. It works by summing cross products of consecutive vertex pairs, and it runs in O(n) time. Learning it here gives you a powerful tool for coordinate geometry and computational applications.

Define Terms

Visual Model

Code Example

// Polygon perimeter from vertices
function perimeter(vertices) {
  let total = 0;
  const n = vertices.length;
  for (let i = 0; i < n; i++) {
    const [x1, y1] = vertices[i];
    const [x2, y2] = vertices[(i + 1) % n];
    total += Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
  }
  return total;
}

// Shoelace formula for polygon area
function shoelaceArea(vertices) {
  let sum = 0;
  const n = vertices.length;
  for (let i = 0; i < n; i++) {
    const [x1, y1] = vertices[i];
    const [x2, y2] = vertices[(i + 1) % n];
    sum += x1 * y2 - x2 * y1;
  }
  return Math.abs(sum) / 2;
}

// Rectangle: (0,0), (4,0), (4,3), (0,3)
const rect = [[0,0], [4,0], [4,3], [0,3]];
console.log("Rectangle perimeter:", perimeter(rect));  // 14
console.log("Rectangle area:", shoelaceArea(rect));    // 12

// Triangle: (0,0), (6,0), (3,4)
const tri = [[0,0], [6,0], [3,4]];
console.log("Triangle perimeter:", perimeter(tri).toFixed(2)); // 16.00
console.log("Triangle area:", shoelaceArea(tri));       // 12

// Irregular pentagon
const pent = [[1,0], [4,0], [5,3], [2.5,5], [0,3]];
console.log("Pentagon area:", shoelaceArea(pent));      // 16.5

Interactive Experiment

Try these exercises:

• Compute the area of a square with vertices (0,0), (5,0), (5,5), (0,5) using the shoelace formula. Does it match 5 times 5 = 25?
• Try reversing the vertex order (clockwise instead of counterclockwise). Does the shoelace formula still give the correct area?
• Create an L-shaped polygon (concave). Does the shoelace formula still work correctly?
• Compute the perimeter and area of a regular hexagon with vertices at distance 1 from the origin. Compare the area to 6 equilateral triangles.
• What happens if you apply the shoelace formula to a self-intersecting polygon (like a figure-8)?

Quick Quiz

Coding Challenge

Real-World Usage

Polygon area and perimeter computations are used extensively:

• Geographic information systems (GIS): Computing land areas, country sizes, and parcel boundaries from polygon coordinates uses the shoelace formula.
• Computer graphics: 2D collision detection checks whether a point is inside a polygon. Polygon clipping determines what part of a shape is visible on screen.
• Architecture and construction: Floor plans are polygons. Architects compute floor area to estimate materials, costs, and compliance with building codes.
• Game development: Terrain meshes, hit boxes, and navigation meshes are all built from polygons. Area calculations determine spawn zones and resource placement.
• Computational geometry algorithms: Convex hull, polygon triangulation, and boolean operations on shapes all build on polygon fundamentals.

Connections