The Shoelace Formula

Give a computer the corners of a polygon, in order, and ask for its area. The obvious plan is to triangulate — split the shape into triangles, find each triangle's area, add them up. It works, but it is fiddly: you need to choose a triangulation, handle concave corners, and keep signs straight.

There is a shortcut. Walk around the vertices $(x_1, y_1), (x_2, y_2), \dots, (x_n, y_n)$ in order, multiply each $x$ by the next $y$, subtract the reverse product, and add it all up. Divide by two and you have the exact area — no triangulation, no case analysis, just arithmetic on the coordinates you already have.

It is called the shoelace formula because the crisscross pattern of multiplications, written out on paper, looks like laces threading through a shoe's eyelets. That visual mnemonic hides a genuinely elegant piece of mathematics: a sum of cross products that also tells you, for free, which way the polygon turns.

Drag any vertex of the polygon below. The area and the arrow showing which way it winds — clockwise or counter-clockwise — update instantly, computed straight from the coordinates with the shoelace formula.

<p class="hint">{{hint_para}}</p>
<svg id="canvas" class="canvas" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg"></svg>
<div class="readout" id="readout">{{drag_hint}}</div>
<div class="btns">
  <button id="reverse" type="button">{{btn_reverse}}</button>
  <button id="shuffle" type="button">{{btn_shuffle}}</button>
  <button id="reset" type="button" class="ghost">{{btn_reset}}</button>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; }
.hint { font-size: .9rem; color: #444; margin: 0 0 .6rem; line-height: 1.45; }
.canvas { width: 100%; max-width: 420px; height: 240px; background: #f4f6f8; border: 1px solid #d7dce1;
          border-radius: 10px; touch-action: none; display: block; }
.poly { fill: rgba(29,53,87,0.18); stroke: #1d3557; stroke-width: 2; }
.poly.cw { fill: rgba(230,57,70,0.18); stroke: #c92f3c; }
.vertex { fill: #1d3557; stroke: #fff; stroke-width: 1.5; cursor: grab; }
.vertex.cw { fill: #c92f3c; }
.vertex:active { cursor: grabbing; }
.arrow { stroke: #1d3557; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
.arrow.cw { stroke: #c92f3c; }
.readout { font: 700 15px ui-monospace, monospace; margin: .55rem 0; min-height: 1.4em; color: #1d3557; }
.readout.cw { color: #c92f3c; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: 600 14px system-ui, sans-serif; padding: .45rem .9rem; border: 1px solid #1d3557;
         background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }

// Code not found

Watch what happens if you drag a vertex across an edge until the outline crosses itself, or if you relabel the vertices in the opposite order: the magnitude of the area barely changes, but the sign flips. That sign is not a bug — it is the formula telling you the polygon's orientation.

The formula for a polygon with vertices $(x_1, y_1), \dots, (x_n, y_n)$, taken in order and wrapping back to the start, is:

$$A = \frac{1}{2}\left|\sum_{i=1}^{n} (x_i y_{i+1} - x_{i+1} y_i)\right|$$

Each term $x_i y_{i+1} - x_{i+1} y_i$ is the 2D cross product of consecutive vertices (treated as vectors from the origin) — it is exactly twice the signed area of the triangle formed by the origin and that edge. Summing every edge's contribution and dividing by two, the parts outside the polygon cancel out and only the polygon's own area survives. That is the whole proof: no calculus, just triangle areas that telescope.

Complexity-wise this is about as cheap as computational geometry gets: one pass over the $n$ vertices, $n$ multiplications and $n$ subtractions, so $O(n)$ time and $O(1)$ extra space. Compare that to triangulating an arbitrary simple polygon, which historically needed more careful $O(n \log n)$ algorithms (or $O(n)$ with the intricate polygon triangulation result) — the shoelace sum gets the area alone without ever building a triangulation.

Drop the absolute value and the sign becomes meaningful: a positive sum means the vertices run counter-clockwise, a negative sum means clockwise. That single bit is exactly the orientation test used all over geometry — deciding whether a turn is a left turn or a right turn, which is also the core primitive behind algorithms like convex hull construction.

A formula that turns raw coordinates into exact area and orientation shows up wherever shapes are represented as vertex lists:

• Geographic Information Systems (GIS): parcel boundaries and country borders are polygons of latitude/longitude points; the shoelace sum (adapted for the sphere) is how their area gets computed.
• CAD and manufacturing: cutting a part from sheet metal or estimating material usage starts from the same signed-area calculation on the part's outline.
• Computer graphics: renderers use the sign of this cross-product sum to decide whether a polygon faces the camera (backface culling) before drawing a single pixel.
• Physics and robotics: computing a rigid body's centroid and moment of inertia from its boundary reuses the same family of edge sums.

Once you have seen the shoelace formula, the same "sum of cross products along the boundary" idea keeps reappearing — it is close cousin to the orientation tests used in convex hull algorithms and to deciding point-in-polygon membership.

The shoelace formula is a small, complete story: take the coordinates you already have, cross-multiply them in a zigzag pattern, and out comes the exact area — with the sign thrown in for free to tell you which way the boundary turns.

It is a good reminder that not every geometric question is hard. Alongside puzzles like P vs NP that may never have an efficient algorithm, here is a problem that has had one, in closed form, since the 19th century — you just have to know where to lace the thread.