68 lines
2.2 KiB
Markdown
68 lines
2.2 KiB
Markdown
# Line Segment Intersection Visualizer
|
|
|
|
An interactive geometric visualization tool that demonstrates rectangle area calculations and their relationship to a line segment.
|
|
|
|
|
|
|
|
## Use Case
|
|
|
|
This tool provides a visual and interactive way to understand how moving a point affects the areas of rectangles formed with fixed anchor points. It's useful for:
|
|
|
|
- **Educational purposes**: Teaching geometric concepts like area calculation and coordinate systems
|
|
- **Visual exploration**: Understanding the relationship between point positions and resulting rectangle areas
|
|
- **Interactive geometry**: Exploring how rectangular areas change as a shared vertex moves along different paths
|
|
|
|
## How It Works
|
|
|
|
The visualization displays:
|
|
- **Point A** at (1, 1) - bottom-left anchor point
|
|
- **Point C** at (6, 7) - top-right anchor point
|
|
- **Point B** - movable point that follows your mouse cursor
|
|
- **Line segment AC** - connecting the two fixed points
|
|
- **Blue rectangle** - formed by point B and (cx, ay) = (6, 1)
|
|
- **Red rectangle** - formed by point B and (ax, cy) = (1, 7)
|
|
|
|
As you move your mouse over the canvas, point B follows the cursor, and the application:
|
|
1. Calculates the width and height of both rectangles in real-time
|
|
2. Computes and displays their areas with the calculation breakdown
|
|
3. Highlights the larger rectangle with a glowing effect
|
|
|
|
## Getting Started
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Running the Application
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Open your browser to the URL shown in the terminal (typically `http://localhost:5173`).
|
|
|
|
### Building for Production
|
|
|
|
```bash
|
|
npm run build
|
|
npm run preview
|
|
```
|
|
|
|
## Technical Stack
|
|
|
|
- **Svelte 5** - Reactive UI framework
|
|
- **Vite** - Fast build tool and dev server
|
|
- **HTML5 Canvas** - 2D graphics rendering
|
|
|
|
## Interface
|
|
|
|
The canvas displays an 8x8 grid where each cell is 40 pixels. Move your mouse over the grid to control point B and watch the rectangle areas update in real-time below the visualization.
|
|
|
|
The calculation cards show:
|
|
- Current position of point B
|
|
- Dimensions (width and height) of each rectangle
|
|
- Step-by-step area calculations
|
|
- The larger rectangle is highlighted with a glowing border
|