This is a library for doing constructive solid geometry (CSG) in p5.js. It is powered under the hood by csg.js by Evan Wallace, augmented to accept and return p5.Geometry.
Add the library in a script tag:
<script src="https://cdn.jsdelivr.net/npm/@davepagurek/p5.csg@0.0.3"></script>
Or on OpenProcessing, add the CDN link as a library:
https://cdn.jsdelivr.net/npm/@davepagurek/p5.csg@0.0.3
If you're using p5 without importing it globally, you can manually set up p5.csg:
import P5 from 'p5'
import { setupCSG } from '@davepagurek/p5.csg'
setupCSG(P5)
Live: https://editor.p5js.org/davepagurek/sketches/f5QmdBoVI
Create a new CSG wrapper object with the csg
function. It takes one of the following two inputs:
// Pass in an existing p5.Geometry
csg(geometry: p5.Geometry): CSGWrapper
// Pass in an input to `buildGeometry()`, which we will automatically
// convert into a new p5.Geometry under the hood
csg(buildGeometryCallback: Function): CSGWrapper
Once a CSG wrapper object has been created, you can apply a Boolean operation to create a new CSG object, or call done()
on it to get a p5.Geometry
you can draw:
// Take the boundary of both shapes
myCSG.union(other: CSGInput, options?: BooleanOptions): CSGWrapper
// Take a bite out of the current geometry, in the shape of the other
myCSG.subtract(other: CSGInput, options?: BooleanOptions): CSGWrapper
// Take just the region that overlaps between two shapes
myCSG.intersect(other: CSGInput, options?: BooleanOptions): CSGWrapper
// Flip the inside and outside of the current shape
myCSG.invert(): CSGWrapper
myCSG.done(): p5.Geometry
// Inputs to CSG methods can be either another CSG wrapper object,
// a p5.Geometry, or a `buildGeometry` callback function.
type CSGInput = CSGWrapper | p5.Geometry | Function
// Optionally specify whether or not to include faces from one input
// or another in the end result. By default, both are included, so
// if you subtract one shape from another, you will still get a closed
// shape as a result. If you do not include the other shape's faces,
// the subtraction will leave a hole.
type BooleanOptions = {
includeSelfFaces?: boolean;
includeOtherFaces?: boolean;
}