Shape Builder

Clickable Reference Guide

Primitives

b.Point({ x: 10, y: 20 })
b.Triangle({ side: 50 })
b.Circle({ radius: 40, center: [0, 0] })
b.Rectangle({ width: 40, height: 20, center: [0, 0] })
b.Polygon({ points: [[0,0], [50,10], [20,40]] })
b.Line({ start: [0, 0], end: [100, 100], thickness: 2, cap: 'round' })
Can also be defined by {center, angle, length}. cap can be 'round', 'square', or 'butt'.
b.Bezier({ points: [[0,0], [50,50], [100,0]] })

Transformations

.translate({ dx: 10, dy: -5 })
.rotate({ angle: 45, center: [0, 0] })
center is optional, defaults to the bounds center.
.scale({ factor: 1.5, center: [0, 0] })
center is optional, defaults to the bounds center.
.stretch({ width: 100, height: 50, preserveWidth: false, preserveHeight: false })
.moveUntil({ direction: [1, 0], step: 1, condition: (shape) => shape.bounds.left > 50 })
Moves shape in direction by step until condition function returns true.
.slideDirection({ vector: [1, 0], stopAt: otherShape })
Continuously slides shape in the given vector direction until it intersects with stopAt shape.
.mirror({ axis: 'vertical', about: 'center' })
axis can be 'vertical' or 'horizontal'. about can be 'center' or a Point.

Boolean Operations

.union({ shapes: [otherShape] }) or b.union({ shapes: [s1, s2] })
.subtract({ shapes: [otherShape] }) or b.subtract({ shapes: [s1, s2] })
.intersect({ shapes: [otherShape] }) or b.intersect({ shapes: [s1, s2] })
.xor({ shapes: [otherShape] }) or b.xor({ shapes: [s1, s2] })
b.align({ shapes: [s1, s2], axis: 'horizontal', distribution: 'space-between', width: 100 })
axis: 'horizontal'|'vertical'. distribution: 'space-between'|'space-around'.

Path Operations

.offset({ amount: 5, join: 'round' })
join can be 'miter', 'round', or 'bevel' (Note: currently a simple scale implementation).
.roundCorners({ radius: 5 })
.getPointOnPath({ from: 'A', to: 'B', percent: 0.5 })
Gets a point along the perimeter relative to existing named points.
.sliceByPoints({ p1: [0,0], p2: [100,0] }) → Slicer
.sliceByLine({ lineShape: otherLine }) → Slicer
.snapPoints({ map: [{from: 'top', to: [100, 10]}] })
Moves/rotates the shape to map its points onto target points exactly.
.distributePoints({ count: 5, paddingMode: 'space-evenly' })
Returns n equitable points along the path. paddingMode: 'space-evenly' or 'space-between'.
.split({ angle: 45, center: [0,0], gap: 10 })
Slices the shape into pieces with a straight gap through it.
.strokeToPath({ width: 5, cap: 'round' })
Converts a stroked line into a filled path shape. cap: 'round' or 'butt'.
.radialRepeat({ count: 4, center: [0,0] })
Copies and rotates the shape into a circular pattern.
.smooth({ tension: 0.5 })
Smooths the sharp corners of a path. tension: 0 to 1.

Slicer Output

Used after slicing to discard one half.

Output & Data

.toSVG({ fill: '#6750a4', stroke: '#000', strokeWidth: 2 })
Exports the shape as an SVG path string element.
.bounds
Returns object: {top, bottom, left, right, center, width, height}.
.points
Dictionary of named PointWrapper objects attached to the shape outline.

Point Methods

pt.movePerpendicular({ amount: 10, direction: 'inward', path: shape, offset: 0 })
Used on Point on a path to move it inward or outward by normal vectors.
Point.interpolate({ pt1: [0,0], pt2: [10,10], percent: 0.5 })
Returns point part-way between pt1 and pt2.

Color Utilities

color_invert('#6750a4')
Returns inverted hex color using Oklab space.
color_rotate('#6750a4', 0.5)
Rotates color hue 0.0 to 1.0 returning hex color.