A JavaScript implementation of Bubble Sets.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
bench.html
bubblesets.js
cliques.html
index.html
readme.md
teaser.png

readme.md

BubbleSets for JavaScript

A JavaScript implementation of Christopher Collins' bubble sets without the use of external libraries. A Java implementation can be found here.

Bubble Sets in action!

Usage:

<script src="bubblesets.js" charset="utf-8"></script>

and

var pad = 5;
var bubbles = new BubbleSet();
// bubbles can be reused for subsequent runs or different sets of rectangles
var list = bubbles.createOutline(
  BubbleSet.addPadding(rectangles, pad),
  BubbleSet.addPadding(otherRectangles, pad),
  null /* lines */
);
// rectangles needs to be a list of objects of the form { x: 0, y: 0, width: 0, height: 0 }
// lines needs to be a list of objects of the form { x1: 0, x2: 0, y1: 0, y2: 0 }
// lines can be null to infer lines between rectangles automatically
var outline = new PointPath(list).transform([
  new ShapeSimplifier(0.0),
  new BSplineShapeGenerator(),
  new ShapeSimplifier(0.0),
]);
// outline is a path that can be used for the attribute d of a SVG path element

See also the demo (add rectangles by clicking with the left or right mouse button), a more advanced example, and the benchmark.

This implementation is based on the Java code originally written by Christopher Collins. If you're missing a feature from the Java version or find a bug please open an issue. Pull requests are also welcome.