line-intersection

line-intersection

This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding line segment intersections. Users can drag line endpoints to reposition them, click to add new segments, and right-click to remove them. The algorithm sweeps a horizontal line from top to bottom, maintaining the order of segment x-positions at the current y (shown in the right panel). Instead of checking all O(n²) segment pairs, only adjacent segments are tested for intersections as they start, end, or cross, yielding O(n log n + I log n) time for I intersections. The SVG rendering highlights intersection points as they are discovered, providing an intuitive view of the sweep-line process.

line-intersection

This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding line segment intersections. Users can drag endpoints to move lines, click to add new segments, and right-click to remove them. The algorithm sweeps a line from top to bottom, maintaining the order of segment x-positions at the current y (shown in the right panel), checking only adjacent pairs as the ordering changes. This reduces the complexity from O(n²) to O(n log n + I log n) for a set of lines with I intersections. The SVG rendering shows the segments and highlights intersections dynamically as they are discovered.

line-intersection

This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding all intersections in a set of line segments. Users can drag endpoints to reposition lines, click to add new segments, and right-click to remove them. Rather than checking every pair of segments (O(n²) comparisons), the algorithm sweeps a horizontal line from top to bottom, maintaining the left-to-right order of segment intersections with the sweep line in a balanced tree shown on the right. As segments start, end, or cross, only newly adjacent pairs are tested for intersections, reducing the complexity to O(n log n + I log n) for I total intersections. The visualization uses SVG rendering and is implemented with D3.

line-intersection

This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding line segment intersections. Users can drag endpoints to move lines, click to add new line segments, and right-click to remove them. The algorithm efficiently computes intersections using a sweep line rather than checking all pairs, achieving O(n log n + I log n) complexity. The right panel displays the current x-ordering of lines as the sweep progresses. Built with SVG and D3, the visualization updates in real time as users manipulate the line segments.

line-intersection

The visualization demonstrates the Bentley–Ottmann algorithm for finding all intersections among a set of line segments. Users can drag endpoints to move lines, click to add new segments, and right-click to remove them. Rather than checking every pair of segments (O(n²)), the algorithm sweeps a horizontal line from top to bottom, maintaining the order of line x-positions at the current y in the right-hand panel. Intersections are detected only between adjacent lines in this ordering, reducing the complexity to O(n log n + I log n) for I intersections. The left panel shows the line segments with their intersection points marked, while the right panel displays the sweep line's current ordering. Rendered as SVG using D3.

97% match

n-line intersection

This example visualizes the Bentley-Ottmann algorithm for finding intersections among multiple line segments, using an animated sweep line to show when segment adjacency changes. The left panel displays the segment ordering as a sequence of dots, with black lines connecting newly adjacent pairs that are checked for potential crossings. The right panel renders the segments themselves, highlighting intersection points in red. The code uses D3.js with custom helper libraries (d3-jetpack, d3-starterkit, geometry) for SVG rendering, along with Lodash for utility functions. The animation progressively updates the sweep line position, demonstrating how the algorithm maintains order and only tests nearby segments.

11wheel

88% match

line-intersection

This example demonstrates an interactive line-intersection visualization, where users can add points by clicking on a canvas and drag them to see the resulting line segments and their intersections update in real time. The visualization highlights the geometric intersection points between line segments connecting all pairs of points, with a vertical divider separating the interactive area from a static queue preview. The rendering uses SVG with points, lines, and pair paths, and includes a side panel that shows a scaled representation of the point coordinates. The underlying code provides utility functions for point, distance, angle, and intersection calculations, and uses a sorted array with a custom bisector to manage points.

11wheel

81% match

line-intersection

Interactive line intersection visualization built with D3.js and SVG. Users click to add draggable points, which automatically connect to form line segments. The visualization computes and highlights all intersection points between line segments, with different colors indicating whether intersections are genuine crossings or overlaps at endpoints. Points can be dragged to dynamically update the intersections in real time, providing an intuitive way to explore geometric relationships between lines.