Triangle Area - Interactive Visual Proof of formula

🔢 Rectangle Area

█ base = ?
█ height = ?
█ Area formula
█ Substitute values
█ Area = ?

Area Visualization

🔢 Triangle Area

▲ base = ?
▲ height = ?
▲ Area formula
▲ Substitute values
▲ Area = ?

Area Visualisation

%

Background

Area of a Triangle: A Visual Proof

This interactive demonstration allows you to explore the relationship between the area of a rectangle and the area of a triangle in a hands-on way. The demo visually illustrates that a triangle has exactly half the area of a rectangle that shares the same base and height. 📐

  • Rectangle Area: Area = base × height
  • Triangle Area: Area = ½ × base × height

Grab and drag the three markers to change the shape dimensions.

How to Use

Rectangle Tab ▭

This tab focuses on the basics of calculating a rectangle’s area.

  • Reveal Buttons: Click the series of reveal buttons (▭ base, ▭ height, ▭ formula, and ▭ area) to walk through the calculation one step at a time.
  • Toggle Grid: The Grid button overlays a grid of unit squares on the rectangle, helping you visualize and count the area.
  • Show Count: Once the grid is active, use the Show Count button to number the squares sequentially, making it easy to verify the final area.

Triangle Tab △

This tab demonstrates the visual proof that a triangle’s area is half that of the corresponding rectangle.

  • Reveal Buttons: Similar to the rectangle tab, you can step through the calculation using the reveal buttons for the △ base, △ height, △ formula, and △ area.
  • Animation Slider: The Animation slider is the key feature here. Move it to watch the two halves of the triangle rotate 180° to the other half of the rectangle, providing a powerful visual proof of the area formula.

Global Controls

These controls are always visible and affect the entire canvas.

  • Rulers: Toggle the Base Ruler and Height Ruler to measure the dimensions of the shapes on screen.
  • Randomize: Click the Randomize button to generate a new problem with different dimensions.
  • Snap To: The Snap To dropdown changes how precisely you can drag the vertices, allowing you to snap to full, half, or quarter units.

Settings Tab ⚙️

Customize the look of the canvas to your liking.

  • Paper Style: Use the Paper Style dropdown to change the background from plain to grid lines or dots.
  • Paper Color: Pick a new Paper Color for the background.
  • Line/Dot Color: Change the color of the background pattern with the Line/Dot Color picker.

Related Activities

Area of a Triangle is closely related to 3 other demonstrations that all use the area of a rectangle as a comparison:

  • Area of a Rectangle
  • Area of a trapezium
  • Area of a parallelogram
Drag the vertices to change the shape. Use the controls to reveal the area calculation steps.
Click and drag the vertex to change the shape
base
height