• Stars
    star
    253
  • Rank 155,173 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Segments intersection detection library

isect - intersection detection library build status

This library allows you to find all intersections in a given set of segments.

demo

Try the demo online

Algorithms

The library implements three algorithms

Bentley-Ottmann sweep line algorithm

This algorithm has O(n*log(n) + k*log(n)) performance, where n is number of segments, and k is number of intersections.

This method is preferred when you have large number of lines, and not too many intersections (k = o(n^2/log(n)), to be more specific).

The algorithm follows "Computation Geometry, Algorithms and Applications" book by Mark de Berg, Otfried Cheong, Marc van Kreveld, and Mark Overmars. It does support degenerate cases, though read limitations to learn more.

demo

Brute force algorithm

This is "naive" implementation where each segment is compared with all other segments, and thus has O(n*n) performance.

Despite its naiveté, it works much faster than Bentley-Ottmann algorithm for the cases when there are a few thousand lines and millions of intersections. This scenario is common in force-based graph drawing, where "hairball" is formed by a few thousand lines.

demo

"Bush" algorithm

This algorithm was suggested by @mourner and @dy. It uses mourner/flatbush as a spatial index of segments, and then iterates over every segment, checking overlapping bounding boxes.

Intuitively, worst case performance of this algorithm is comparable with brute force. When every segment overlaps with every other segment we should expect O(n^2) operations. In practice, however, this algorithm beats both Bentley-Ottman and Brute force approaches.

Its beauty is in its simplicity. It adapts very well to both sparse and dense segments distribution.

You can also find performance test suite below, so you can decide for yourself. I would absolutely go with this algorithm as my default choice.

Performance

The benchmark code is available here. Higher ops per second is better!

K12 graph

K12 graph

  • Sweep: Circular lines 12x40 x 1,069 ops/sec ±1.98% (91 runs sampled)
  • Brute: Circular lines 12x40 x 7,463 ops/sec ±3.01% (76 runs sampled)
  • Bush: Circular lines 12x40 x 5,678 ops/sec ±2.20% (80 runs sampled)

The graph has only 66 unique segments, and 313 unique intersections. Brute force algorithm is 7x faster than Sweep Line, closely followed by

100 random lines

100 random lines

In this demo 100 lines are randomly sampled inside a box with a side of 42px.

  • Sweep: 100 Random lines lines in 42px box x 277 ops/sec ±1.20% (87 runs sampled)
  • Brute: 100 Random lines lines in 42px box x 3,606 ops/sec ±3.61% (74 runs sampled)
  • Bush: 100 Random lines in 42px box x 3,314 ops/sec ±2.66% (83 runs sampled)

Again, the brute force algorithm wins. The distance between brute force and Bush shortens. Sweep line comes last.

Sparse intersections

sparse

  • Sweep: 2,500 sparse lines x 156 ops/sec ±0.97% (80 runs sampled)
  • Brute: 2,500 sparse lines x 13.62 ops/sec ±0.91% (38 runs sampled)
  • Bush: 2,500 sparse lines x 592 ops/sec ±1.05% (93 runs sampled)

Now Bush algorithm wins by huge margin. Bentley-Ottman comes second, and brute force comes the last.

Parallel Slanted lines

slanted

  • Sweep: 1000 slanted, not intersect x 622 ops/sec ±1.23% (91 runs sampled)
  • Brute: 1000 slanted, not intersect x 230 ops/sec ±2.37% (87 runs sampled)
  • Bush: 1000 slanted, not intersect x 243 ops/sec ±1.07% (87 runs sampled)

In this example there too many lines, and none of them intersect. Furthermore, most of the rectangular bounding boxes do intersect, which gives more work for the bush algorithm

usage

Install the module from npm:

npm i isect

Or download from CDN:

<script src='https://cdn.rawgit.com/anvaka/isect/v2.0.0/build/isect.min.js'></script>

If you download from CDN the library will be available under isect global name.

Basic usage

The code below detects all intersections between segments in the array:

var isect = require('isect');

// Prepare the library to detect all intersection
var detectIntersections = isect.bush([{
  from: {x:  0, y:  0},
  to:   {x: 10, y: 10}
}, {
  from: {x:  0, y: 10},
  to:   {x: 10, y:  0}
}]);

// Detect them all, operation is synchronous. 
var intersections = detectIntersections.run();
console.log(intersections);
// Prints:
// 
//    [ { point: { x: 5, y: 5 }, segments: [ [Object], [Object] ] } ]
// 
// array of segments contain both segments.

Brute force and Sweep Line

You can also run the above example with a different algorithm. Simply change .bush() to .sweep() (to run Bentley-Ottman) or to .brute() (to try brute force):

var isect = require('isect');

// Prepare the library to detect all intersection
var bruteForce = isect.brute([{
  from: {x:  0, y:  0},
  to:   {x: 10, y: 10}
}, {
  from: {x:  0, y: 10},
  to:   {x: 10, y:  0}
}]);

var intersections = bruteForce.run();
console.log(intersections);

// do the same with sweep line:
var sweepLine = isect.sweep([{
  from: {x:  0, y:  0},
  to:   {x: 10, y: 10}
}, {
  from: {x:  0, y: 10},
  to:   {x: 10, y:  0}
}]);

var intersections = sweepLine.run();
console.log(intersections);

All algorithms have identical API. In every example below you can replace .bush() with .sweeep() or .brute() - just pay attention to notes that calls out a discrepancies in the API.

Early stopping

If you don't care about all intersections, but want to know if there is at least one intersection, you can pass a onFound() callback and request the library to stop as soon as it finds an intersection:

var intersections = isect.bush([/* array of segments */], {
  onFound(point, segments) {
    // `point` is {x, y} of the intersection,
    // `segments` are intersecting segments.

    // If you return true from this method, no further processing will be done:

    return true; // yes, stop right now!
  }
});

Asynchronous workflow

If you want to give browser time to catch up with user input, it may be desirable to break the algorithm into chunks (so that UI thread is not swamped). You can do this by calling .step() method of the algorithm's instance:

var detector = isect.bush([/* array of segments */]);
// instead of detector.run(), we do:
var isDone = detector.step()
// isDone will be set to true, once the algorithm is completed.

This is precisely how I do step-by-step animation of the algorithm:

demo

Click here to see it in action.

Limitations

The sweep line algorithm is susceptible to floating point rounding errors. It is possible to construct an example, with nearly horizontal lines, that would cause it to fail.

While sweep line implementation detects point-segment overlap, I didn't implement point-point overlap. I.e. identical points in the input array that do not overlap any segment are not reported.

Miscellaneous

  • The source code for the demo is available here.
  • The sweep line algorithm requires a binary search tree. I'm using w8r/splay-tree for this purpose. Love the library a lot! I have also tried AVL tree, but found their performance worse than splay tree.
  • If you need a sweep line with higher precision, consider porting this library to use decimal.js.
  • I would absolutely love to have faster intersection algorithms implemented in JavaScript. If you know any - please share. In particular this paper An optimal algorithm for finding segments intersections looks very promising! Their runtime is O(n * log(n) + k) which should be faster than Bentley-Ottmann.

License

MIT

Thanks!

I hope you enjoy the library. Feel free to ping me ([email protected] or https://twitter.com/anvaka) if you have any feedback.

More Repositories

1

city-roads

Visualization of all roads within any city
JavaScript
5,402
star
2

VivaGraphJS

Graph drawing library for JavaScript
JavaScript
3,646
star
3

ngraph.path

Path finding in a graph
JavaScript
2,801
star
4

atree

Just a simple Christmas tree, based on reddit story
JavaScript
2,424
star
5

panzoom

Universal pan and zoom library (DOM, SVG, Custom)
JavaScript
1,570
star
6

pm

package managers visualization
JavaScript
1,408
star
7

ngraph

Beautiful Graphs
1,360
star
8

npmgraph.an

2d visualization of npm
JavaScript
1,160
star
9

fieldplay

A vector field explorer
JavaScript
1,108
star
10

sayit

Visualization of related subreddits
JavaScript
937
star
11

vs

Visualization of Google's autocomplete
JavaScript
919
star
12

word2vec-graph

Exploring word2vec embeddings as a graph of nearest neighbors
Python
691
star
13

time

Simple Google Sheets interface to track time
JavaScript
623
star
14

peak-map

Make a ridge line chart from any region on Earth
JavaScript
583
star
15

graph-drawing-libraries

Trying to compare known graph drawing libraries
JavaScript
571
star
16

map-of-reddit

Interactive map of reddit
JavaScript
540
star
17

common-words

visualization of common words in different programming languages
JavaScript
495
star
18

ngraph.graph

Graph data structure in JavaScript
JavaScript
463
star
19

ngraph.pixel

Fast graph renderer based on low level ShaderMaterial from three.js
JavaScript
295
star
20

npmrank

npm dependencies graph metrics
JavaScript
280
star
21

streamlines

Streamlines calculator
JavaScript
275
star
22

gauss-distribution

A fun little project to show distribution of pixels in Gauss's portrait
HTML
249
star
23

oflow

Optical flow detection in JavaScript
JavaScript
200
star
24

ghindex

Creates github index for similar repositories discovery
JavaScript
189
star
25

gazer

GitHub analysis and discovery
JavaScript
186
star
26

git-also

For a `file` in your git repository, prints other files that are most often committed together
JavaScript
185
star
27

allnpmviz3d

3d visualization of npm
JavaScript
179
star
28

ngraph.path.demo

This is a demo project for ngraph.path
JavaScript
165
star
29

map-of-github

Inspirational Mapping
Vue
157
star
30

ngraph.forcelayout

Force directed graph layout
JavaScript
146
star
31

pixchart

Turn any image into delightful splash of colors and order
JavaScript
112
star
32

city-script

Collection of scripts that can be loaded into city-roads
JavaScript
112
star
33

yasiv-youtube

Graph of related videos from YouTube
JavaScript
100
star
34

winvelviz

Wind visualization over time
JavaScript
100
star
35

query-state

Application state in query string
JavaScript
97
star
36

e-sum

Visualization of exponential sums
JavaScript
97
star
37

ngraph.forcelayout3d

Force directed graph layout in 3d
JavaScript
95
star
38

index-large-cities

A simple indexer of road networks from OSM. Data for @anvaka/city-roads
JavaScript
92
star
39

graph-start

a simple graph shell to explore ideas
JavaScript
88
star
40

greview

Books that I read and their neighborhoods
86
star
41

lsystem

A simple L-Systems explorer powered by WebGL
JavaScript
86
star
42

jsruntime

Chrome Extension to explore javascript runtime.
JavaScript
85
star
43

map-of-reddit-data

Contains scripts and data to render map of reddit
JavaScript
82
star
44

redsim

reddit discovery
JavaScript
82
star
45

w-gl

A simple WebGL renderer
TypeScript
80
star
46

pplay

Create, play and share pixels. Online WebGL shader editor.
GLSL
76
star
47

ngraph.hde

High dimensional embedding of a graph and its layout
JavaScript
76
star
48

dotparser

Parser of GraphViz dot file format
PEG.js
72
star
49

wind-lines

Streamline animation of wind data
JavaScript
63
star
50

set-vs-object

What is faster Set or Object?
JavaScript
62
star
51

three.map.control

A three.js camera that mimics 2d maps navigation with pan and zoom
JavaScript
53
star
52

ngraph.native

C++ implementation of force-based layout from ngraph
C++
49
star
53

circles

A simple spirograph toy
JavaScript
49
star
54

yaot

Yet another octree
JavaScript
48
star
55

ngraph.three

3D graph renderer powered by three.js
JavaScript
44
star
56

ngraph.generators

Graph generators
JavaScript
42
star
57

citations

Most cited papers by keyword
C++
42
star
58

rafor

requestAnimationFrame friendly async for iterator
JavaScript
41
star
59

ngraph.fabric

Fabric.js graph renderer
JavaScript
38
star
60

playground

Just a set of experiments that I want to play with, but they are too small to be in their own repository
JavaScript
35
star
61

ngraph.centrality

Module to calculate graph centrality metrics
JavaScript
33
star
62

streak

Streak tracking with Google Sheets
JavaScript
33
star
63

sayit-data

data with similar subreddits graph
JavaScript
32
star
64

ngraph.offline.layout

Performs offline layout of large graphs and saves results to the disk
JavaScript
32
star
65

cord-19

exploring research papers about coronaviruses
JavaScript
31
star
66

how-to-debug-node-js-addons

How to debug node.js addons in xcode
30
star
67

wheel

Mouse wheel event unified for all browsers
JavaScript
30
star
68

npmgraphbuilder

Builds graph of npm dependencies from npm registry
JavaScript
29
star
69

generator-n

minimalistic node package yeoman generator
JavaScript
28
star
70

tiny.xml

Tiny (1.6KB) in-browser xml parser
JavaScript
27
star
71

allgithub

Crawling github data
JavaScript
27
star
72

mars

Map of Mars
JavaScript
26
star
73

ngraph.pixi

PIXI.js graph renderer
JavaScript
26
star
74

ngraph.pagerank

PageRank calculation for ngraph.graph
JavaScript
25
star
75

noisylines

Tracking noise with streamlines
JavaScript
23
star
76

ngraph.physics.simulator

Physics library for ngraph
JavaScript
23
star
77

nb

Neighborhood beautification: Graph layout through message passing
JavaScript
23
star
78

strangeb

The strangest thing happens when you rotate Bezier control points
JavaScript
22
star
79

graph-to-vector-field

Converts a graph into vector field texture
JavaScript
20
star
80

amator

Tiny animation library
JavaScript
20
star
81

ngraph.louvain

Given a graph instance detects communities using the Louvain Method
JavaScript
20
star
82

npmgraph

Visualization of NPM dependencies
JavaScript
19
star
83

similar-cities

Visualization of cities with similar road networks
JavaScript
19
star
84

allnpm

Graph generator for entire npm registry
JavaScript
18
star
85

twitter-recommended-graph

Building a proposal for Twitter to show a map of recommended people
JavaScript
18
star
86

streaming-svg-parser

Streaming SVG/XML parser with zero dependencies
JavaScript
18
star
87

extract-osm-roads

A simple utility to fetch a city graph from OSM
JavaScript
18
star
88

rules-of-ml

A simple visualization of Martin Zinkevich article
JavaScript
17
star
89

quadtree.cc

A C++ implementation of quadtree
C++
17
star
90

ngraph.events

Events support in ngraph.*
JavaScript
17
star
91

simplegrad

Simple reverse mode automatic differentiation of scalar values in javascript
JavaScript
16
star
92

portrait

Portrait of quotes
JavaScript
16
star
93

sunburst

For a given tree builds an SVG based SunBurst diagram
JavaScript
15
star
94

local-chat

Local instance of ChatGPT for my kiddo
HTML
15
star
95

what-people-google

Visualization of what people google
JavaScript
15
star
96

vuereddit

A simple reddit client written as a vue component.
Vue
14
star
97

ngraph.fromjson

Library to load graph from simple json format
JavaScript
12
star
98

color-high

A demo of ngraph.forcelayout in 6D space
JavaScript
12
star
99

color-force-vis

Visualizing forces acting on nodes during force layout
JavaScript
11
star
100

allnpmviz.an

Visualization of entire npm
JavaScript
11
star