Interactive Line Parametrisation

This interactive visualization demonstrates different ways to parametrize lines in 2D space.

Note

Most of the code is product of a conversation with Claude.

Motivation

Instead of defining a line by its two endpoints (x_1, y_1) and `(x_2, y_2), we can describe it using just two parameters:

• A midpoint, which is the point where the line crosses the vertical center line (y-axis). This point is mapped along an extended vertical range, meaning it can be inside or outside the image.
• An angle θ (theta) between -90° and +90°, which determines the line’s slope relative to the horizontal.

This alternative parametrization is particularly useful for machine learning applications, as the normalized parameters provide a consistent input range for neural networks. The visualization allows you to explore how these parameters affect the line's position and orientation in real-time.

Usage

npm install
npm run dev

Static Build

npm run build

Acknowledgments

Special thanks to Claude-React-Jumpstart for providing guidance on setting up a React project with Claude-generated code.