2D Line Representation Example

Download Typescript (Visual Studio project) source code (55kb)

This page demonstrates a line in 2D with its various different equation representation types. The line can be modified by it end points and the line equation in different forms is shown below.

It is based on my corresponding article 2D line representations.

View
Information Slope-intercept form: -
Point-Slope form: -
Two-point form: -
Standard form: -
General form: -
Parametric form: -
Input
Slope-intercept form: y = * x +
General form: * x + * y + = 0

Usage:

This is a playground to show different representation forms of a line. application demonstrates the described algorithm for line intersection.
The two red points defining the two lines can be freely dragged using the left mouse button to change their positions. The textutal line representations below are updated automatically.
Using the mouse wheel, it is possible to zoom in and zoom out inside the canvas, effectively changing the scale of the coordinate system. Also the scrollbar below can be used to modifiy the zoom level. The two buttons reset the zoom value (and line endpoints) to the two different default states.
The input section provides the possibility specify a line either via the parameters of its slope-intercept form or by its general form. To use this kind of input, deactive the checkbox "Update textboxes activated" and either the numerical value in the corresponding text box, followed by pressing 'Return'.

Have fun.


History

2022/04/14: Initial release.