swustlqsh / bubblesets-js

A JavaScript implementation of Bubble Sets.

BubbleSets for JavaScript

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

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.