Adam Jeniski
0db7cab23b
- Corrected rectangle corner coordinates to accurately show (cx, ay) and (ax, cy) - Removed unused Counter.svelte component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
66 lines
2.1 KiB
Markdown
66 lines
2.1 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 8×8 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
|