I started building a roof area calculator thinking it would be a weekend thing. You take the length, you take the width, you multiply, you show a number. Roofs are rectangles. How hard can it be.
It is not a rectangle. That was the whole project, really — slowly understanding all the ways "length times width" is wrong, and that the wrongness compounds the moment someone tries to actually buy materials with your number.
The roof you measure isn't the roof you walk on
Here's the thing that took me embarrassingly long to internalize. The footprint of a house — the shadow it casts at noon — is flat. But the roof is tilted. The shingles cover the slanted surface, not the shadow. So the area you care about is always bigger than the footprint, and how much bigger depends entirely on the slope.
Roofers express slope as "rise over run" — a 6:12 roof goes up 6 inches for every 12 inches it goes sideways. To get from footprint to actual surface area you multiply by what's called the pitch factor, which is just the hypotenuse of that little triangle divided by the run:
// rise per 12" of run -> area multiplier
const pitchFactor = Math.sqrt(144 + pitchX * pitchX) / 12;
For a 6:12 roof that's sqrt(144 + 36) / 12 ≈ 1.118. So a house with a 1,500 sq ft footprint actually has about 1,677 sq ft of roof. That's 177 square feet you'd have just... not ordered. Almost two full squares of shingles (a "square" is 100 sq ft — roofing has its own units for everything). On a steeper 12:12 roof the factor is 1.414 and you'd be short by 40%.
The naive calculator doesn't return a slightly-off answer. It returns an answer that gets someone to the supply yard one delivery short, on a Saturday, with the old roof already torn off and rain in the forecast. The error has a cost and the cost lands on a specific bad afternoon.
So the geometry is the easy part once you see it. I put all the conversions in one place so a pitch could never mean two different things in two different spots:
export function calculatePitch(riseInches: number, runInches: number) {
const slope = riseInches / runInches;
const angleDeg = Math.atan(slope) * (180 / Math.PI);
const pitchPer12 = slope * 12;
const rafterPer12 = Math.sqrt(144 + pitchPer12 * pitchPer12);
return {
angleDegrees: angleDeg, // 6:12 -> 26.57°
pitchFactor: rafterPer12 / 12, // 6:12 -> 1.118
// ...
};
}
I figured that was the project. It was not the project.
Area is necessary and completely insufficient
The moment I had a correct area number, I tried to answer the question people actually have, which is "okay, what do I buy." And area gets you exactly one line of the shopping list: the field shingles.
Everything else on a roof is sold by the edge, not the surface. Walk a roof in your head:
- Drip edge runs along the eaves and rakes — the bottom and the slanted sides.
- Starter strip runs along those same perimeters.
- Ridge cap runs along the ridges and hips — the top lines and the diagonal corners.
- Ice & water shield runs in a band along the eaves and up the valleys.
None of those scale with area. A long skinny ranch house and a compact two-story can have identical square footage and wildly different amounts of edge. So a "roofing calculator" that only knows area literally cannot tell you how many boxes of drip edge to buy. It's not that it's imprecise. It's missing the input.
Which means to do the real job, you can't ask for area at all. You have to ask for the shape and derive both the area and every edge length from it. So the calculator that started as one multiplication became a little parametric model of a roof:
export function calculateRoofShape(
shape: "gable" | "hip" | "shed",
length: number,
width: number,
pitchX: number
) {
const pf = Math.sqrt(144 + pitchX * pitchX) / 12;
const roofArea = length * width * pf;
if (shape === "gable") {
return {
roofArea,
edges: {
eaves: 2 * length,
rakes: 2 * width * pf, // rakes follow the slope, so they get the factor too
ridges: length,
hips: 0,
valleys: 0,
},
};
}
// hip and shed each have their own edge geometry...
}
The detail I love in that snippet, and the one I got wrong the first time: the rakes get the pitch factor and the eaves don't. The eave runs horizontally along the bottom — it's a true plan-view length. The rake climbs the slope from eave to ridge, so its real length is the plan length stretched by the same pf. Two edges of the same triangle, one scaled and one not. Get that backwards and your drip-edge count is fine but your starter-strip count drifts, and nobody notices until they're 8 feet short on the last run.
Once the shape gives you every edge, the bill of materials falls out of dividing lengths by coverage rates:
const capBundles = Math.ceil((ridges + hips) / 25); // ~25 lf per bundle
const starterBundles = Math.ceil((eaves + rakes) / 100); // ~100 lf per bundle
const dripEdgePieces = Math.ceil((eaves + rakes) / 10); // 10 ft pieces
Math.ceil everywhere, because you can't buy 0.3 of a bundle, and rounding down is the same Saturday problem in a smaller font.
The boring decision that mattered most
There's a calculator page, and there are written guides with worked examples ("a 1,500 sq ft 6:12 roof needs..."), and there are little reference tables. Early on, the worked examples were prose. I'd typed the numbers by hand. And of course one of them disagreed with what the calculator produced for the same inputs, because I'd updated a coverage assumption in the code and not in the paragraph I'd written three weeks earlier.
That's the failure mode that actually erodes trust in a tool like this. Not being wrong — being inconsistently wrong, where the calculator says one thing and the explanation under it says another, and now the reader has no idea which to believe. For a tool whose entire pitch is "trust this number," two numbers is worse than a wrong one.
So the rule became: there is exactly one file that knows how to do roofing math, and every surface — the calculator, the worked examples, the reference tables — imports from it. If a constant changes, it changes in one place and everything downstream moves together. The published assumptions (bundle coverage, waste factor, nails per square) live next to the functions that use them, so the "how we calculate this" page can't drift from the calculation either. It's not clever. It's just refusing to keep the same fact in two places.
The takeaway, if there is one
The lesson I keep relearning on these little domain tools: the naive model isn't a simpler version of the real thing, it's a different thing that happens to return a number in the same units. "Length times width" and "the actual surface area of a tilted plane with this much edge perimeter" aren't 80% the same answer. They diverge exactly where it costs the user money.
The interesting work was never the trigonometry. It was noticing that the question "how big is my roof" is secretly the question "what do I buy," and that the second one needs you to model the shape, not just scale a rectangle.
I put the whole thing online as a set of free calculators — pitch, area, the full material takeoff — at roofing-calculator.io if you want to poke at it, and there's a methodology page that lays out every assumption so you can argue with the numbers. If you've built tools in a domain where the obvious formula turns out to be quietly lying, I'd genuinely like to hear what tipped you off.
