Roof design is inherently geometric, yet it is often taught using dry lists of numbers. Carpenters, architects, and hobbyists all benefit from seeing the triangle formed by run, rise, and rafter. The responsive canvas above turns your measurements into a living sketch. As you type new values, the triangle stretches or compresses and the caption reports the updated dimensions. This immediate feedback clarifies relationships that can be difficult to infer from formulas alone. The angle at the ridge becomes visible, and you can literally see how a longer run produces a shallower slope while a greater rise steepens the roof.
Because the canvas redraws on window resize, the diagram remains sharp whether you are on a phone atop a roof or presenting to a client on a conference room projector. The caption describes the essential geometry so screen‑reader users or anyone consulting a text‑only copy still receives the full story. The visual component therefore enhances comprehension without sacrificing accessibility.
The roof of a simple gable structure forms a right triangle. Denote the horizontal run by , the vertical rise by , and the rafter length by . The Pythagorean theorem gives
The pitch ratio expresses steepness as rise over run. For building codes in imperial units this is often converted to a per‑twelve value: . The slope angle comes from trigonometry:
These formulas feed the calculator’s logic. When you submit the form, the script computes the pitch, angle, rafter length, and slope percentage. The canvas uses the same numbers to scale the triangle so that algebra and geometry remain synchronized.
Consider a workshop with a 3 m half‑span (run) and a 1.5 m rise. Enter these values and press Compute. The result box displays a pitch of 6:12, an angle of about 26.6°, and a rafter length of 3.35 m. On the canvas the base extends three units while the vertical leg climbs one and a half units, forming a proportional triangle. The caption reiterates the measurements so you can confirm the sketch matches your intent. Experiment by doubling the rise to 3 m; the triangle becomes equilateral, the pitch jumps to 12:12, and the angle reads 45°. The immediate visual response illustrates how dramatic a change in slope alters the roof silhouette.
Suppose you are limited to 3.6 m lumber. By adjusting the run and rise until the canvas caption reports a rafter length below that threshold, you can design within material constraints. If the desired pitch requires a longer rafter than available, seeing the triangle exceed the limit encourages reconsideration of the design before cutting any wood.
The table presents sample configurations you can test. Each row lists run, rise, pitch, angle, and rafter length. Enter the numbers to watch the canvas morph between gentle and steep profiles.
Run (m) | Rise (m) | Pitch (rise:12) | Angle (°) | Rafter (m) |
---|---|---|---|---|
2 | 0.5 | 3:12 | 14.0 | 2.06 |
3 | 1.5 | 6:12 | 26.6 | 3.35 |
4 | 3 | 9:12 | 36.9 | 5.00 |
These scenarios span shallow, moderate, and steep roofs. Observing the triangle after entering each row helps internalize how pitch, angle, and rafter length intertwine.
The canvas anchors the run along the bottom edge. A blue horizontal line represents the run, a green vertical line denotes the rise, and a black diagonal shows the rafter. A small square at the junction marks the right angle. Labels appear near each side for clarity. Distances are scaled so the triangle fills most of the canvas regardless of absolute dimensions. The caption summarizes the run, rise, angle, and rafter length, giving text equivalents of the visual cues.
Because the drawing updates with every keystroke, you can use it as a design sandbox. If the triangle appears too flat, increase the rise; if it seems too steep, adjust the run. Resizing the browser triggers a redraw, ensuring the proportions remain accurate on any screen. The diagram thus becomes a reliable companion whether you are sketching a shed on a smartphone or checking calculations on a tablet at the job site.
The calculator models an idealized right triangle and does not account for ridge board thickness, birdsmouth cuts, or overhangs. In practice, carpenters subtract half the ridge thickness from the run and adjust the rafter length to accommodate seats at the wall plate. Snow loads, wind forces, and material defects also influence final dimensions. Nevertheless, the visual triangle provides a solid starting point. By understanding the geometric core, you can layer on these practical details with confidence.
Real roofs often include hips, valleys, or dormers that complicate the geometry. While this calculator focuses on a single slope, the same trigonometric principles extend to those features. For instance, hip rafters involve projecting the run diagonally across a square plan, producing a longer hypotenuse. Designers who grasp the basic triangle can extrapolate to such complexities.
Combining straightforward formulas with an interactive canvas turns roof design into an exploratory process. Enter different runs and rises to see how the structure evolves, compare scenarios in the table, and watch the caption keep pace with your ideas. The visualization demystifies the relationship between pitch, angle, and rafter length, empowering you to design roofs that are both functional and aesthetically pleasing.
Extend your planning by estimating loads with the Roof Snow Load Calculator, budgeting materials using the Roofing Shingle Calculator, or exploring insulation impacts through the Roof Insulation Payback Calculator. Together these tools map the structural, material, and efficiency dimensions of a roofing project.