The SWTriangle class represents a styled triangle with three SWPoint vertices. This demo lets you create interactive triangles by adding points to the canvas and visualize their geometric properties in real time, including area, perimeter, centroid, side lengths, interior angles, and triangle classifications. Once created, you can manipulate the triangle's scale, color, and opacity dynamically.
About This Demo
This interactive demo lets you add three points (A, B, and C) on a coordinate grid to form a triangle. Once created, you can drag the vertices or centroid to reshape the triangle, and the control panel displays real-time geometric properties including area, perimeter, centroid coordinates, side lengths, interior angles, and triangle classification by both sides (scalene, isosceles, equilateral) and angles (acute, right, obtuse, 30-60-90). You can also dynamically scale, recolor, and adjust the opacity of the triangle.
How to Use This App
- Adding Points: Click anywhere on the canvas to place vertices A, B, and C (max 3 points). The triangle can be created once all three vertices are placed.
- Drag Mode: Press D to switch to DRAG mode, then click and drag any vertex or the centroid to reposition the triangle.
- Add Mode: Press A to return to ADD mode (available only when fewer than 3 points exist).
- Triangle Attributes: View real-time updates of the triangle's area, perimeter, centroid coordinates, side lengths, interior angles, and type classification in the control panel.
- Create Triangle Button: After adding all three points, click "Create Triangle" to generate the triangle from the vertices.
- Scale Control: After creating the triangle, use the Scale slider (0.2× to 3.0×) to proportionally expand or contract the triangle while maintaining its shape. Scaling occurs relative to the triangle's centroid.
- Fill Color: Use the color picker to select a new interior color for the triangle. The border color is automatically generated to be 20% darker than the fill color for visual contrast.
- Opacity Control: Adjust the opacity slider (10% to 100%) to control the transparency of the triangle's fill color.
- Snap to Grid: Click the button to snap all vertices to the nearest grid intersection for precise positioning. Scaling is preserved during snapping.
- Save Image: Click the Save Image button to download your geometric construction as a PNG file.
- Clear Points: Remove all points and the triangle to start fresh.
Key Features Demonstrated
- SWTriangle Creation: Automatic triangle generation from three SWPoint vertices
- Built-in Geometric Properties: SWTriangle includes getter methods for
area, perimeter, sideAB, sideBC, sideCA, angleA, angleB, and angleC that calculate values automatically
- Triangle Classification: Automatic identification using getters for both side-based (
isEquilateral, isIsosceles, scalene) and angle-based (isAcuteTriangle, isRightTriangle, isObtuseTriangle, is30_60_90) properties
- Dynamic Scaling: Proportionally scale the triangle from its centroid (0.2× to 3.0×) while preserving all geometric ratios and angles
- Automatic Color Generation: When selecting a fill color, the border color is automatically calculated to be 20% darker for optimal visual contrast
- Opacity Control: Adjust fill transparency independently (10%-100%) while maintaining the border
- Real-time Updates: Control panel displays current geometric properties as you drag vertices, centroid, or adjust scale/color/opacity
- Smart State Management: Scaling is maintained during drag operations and grid snapping, ensuring consistent proportions
- Interactive Vertices: Drag vertices or the centroid to dynamically reshape the triangle
- Grid Integration: Coordinate system for precise mathematical visualization
- Dual Coordinate Systems: Works seamlessly with both screen and grid (Desmos-style) coordinates
Learn More
For complete documentation including all methods, properties, and advanced features of the SWTriangle class (including animation methods like breathe(), rotateAboutCentroid(), and transform()),
see the Full SWTriangle Reference Guide.