# Line Segment Intersection Visualizer

An interactive geometric visualization tool that demonstrates rectangle area calculations and their relationship to a line segment.

![Application Screenshot](screenshot.png)

## 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