The SWLine class represents a styled line segment between two SWPoint endpoints. This demo lets you create interactive lines by adding points to the canvas and visualize their geometric properties in real time, including length, slope, and midpoint.
About This Demo
This interactive demo lets you add two points (A and B) on a coordinate grid to form a line segment. Once created, you can drag the endpoints or midpoint to reshape the line, and the control panel displays real-time geometric properties including length, slope, and midpoint coordinates.
How to Use This App
- Adding Points: Click anywhere on the canvas to place points A and B (max 2 points). The line is created automatically once both endpoints are placed.
- Drag Mode: Press D to switch to DRAG mode, then click and drag any endpoint or the midpoint to reposition the line.
- Add Mode: Press A to return to ADD mode (available only when fewer than 2 points exist).
- Line Attributes: View real-time updates of the line's length, slope (or vertical/horizontal status), midpoint coordinates, and thickness in the control panel.
- Create Line Button: After adding both points, click "Create Line" to generate the line segment between them.
- Snap to Grid: Click the button to snap both endpoints to the nearest grid intersection for precise positioning.
- Save Image: Click the Save Image button to download your geometric construction as a PNG file.
- Clear Points: Remove all points and the line to start fresh.
Key Features Demonstrated
- SWLine Creation: Automatic line generation from two SWPoint endpoints
- Geometric Properties: Real-time calculation and display of length, slope, and midpoint
- Interactive Endpoints: Drag endpoints or the midpoint to dynamically reshape the line
- 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 SWLine class (including animation methods like breathe(), rotateAboutMidPoint(), and transform()),
see the Full SWLine Reference Guide.