js-draw 0.23.1 → 0.24.0

package/src/math/shapes/PointShape2D.ts

@@ -0,0 +1,33 @@
+import { Point2 } from '../Vec2';
+import Vec3 from '../Vec3';
+import Abstract2DShape from './Abstract2DShape';
+import LineSegment2 from './LineSegment2';
+import Rect2 from './Rect2';
+
+/**
+ * Like a {@link Point2}, but with additional functionality (e.g. SDF).
+ *
+ * Access the internal `Point2` using the `p` property.
+ */
+class PointShape2D extends Abstract2DShape {
+	public constructor(public readonly p: Point2) {
+		super();
+	}
+
+	public override signedDistance(point: Vec3): number {
+		return this.p.minus(point).magnitude();
+	}
+
+	public override intersectsLineSegment(lineSegment: LineSegment2, epsilon?: number): Vec3[] {
+		if (lineSegment.containsPoint(this.p, epsilon)) {
+			return [ this.p ];
+		}
+		return [ ];
+	}
+
+	public override getTightBoundingBox(): Rect2 {
+		return new Rect2(this.p.x, this.p.y, 0, 0);
+	}
+}
+
+export default PointShape2D;

package/src/math/shapes/QuadraticBezier.test.ts

@@ -0,0 +1,31 @@
+import { Vec2 } from '../Vec2';
+import QuadraticBezier from './QuadraticBezier';
+
+describe('QuadraticBezier', () => {
+	it('approxmiateDistance should approximately return the distance to the curve', () => {
+		const curves = [
+			new QuadraticBezier(Vec2.zero, Vec2.of(10, 0), Vec2.of(20, 0)),
+			new QuadraticBezier(Vec2.of(-10, 0), Vec2.of(2, 10), Vec2.of(20, 0)),
+			new QuadraticBezier(Vec2.of(0, 0), Vec2.of(4, -10), Vec2.of(20, 60)),
+			new QuadraticBezier(Vec2.of(0, 0), Vec2.of(4, -10), Vec2.of(-20, 60)),
+		];
+		const testPoints = [
+			Vec2.of(1, 1),
+			Vec2.of(-1, 1),
+			Vec2.of(100, 0),
+			Vec2.of(20, 3),
+			Vec2.of(4, -30),
+			Vec2.of(5, 0),
+		];
+
+		for (const curve of curves) {
+			for (const point of testPoints) {
+				const actualDist = curve.distance(point);
+				const approxDist = curve.approximateDistance(point);
+
+				expect(approxDist).toBeGreaterThan(actualDist * 0.6 - 0.25);
+				expect(approxDist).toBeLessThan(actualDist * 1.5 + 2.6);
+			}
+		}
+	});
+});

package/src/math/shapes/QuadraticBezier.ts

@@ -0,0 +1,141 @@
+import { Point2, Vec2 } from '../Vec2';
+import solveQuadratic from '../polynomial/solveQuadratic';
+import BezierJSWrapper from './BezierJSWrapper';
+import Rect2 from './Rect2';
+
+/**
+ * A wrapper around `bezier-js`'s quadratic Bézier.
+ *
+ * This wrappper lazy-loads `bezier-js`'s Bézier and can perform some operations
+ * without loading it at all (e.g. `normal`, `at`, and `approximateDistance`).
+ */
+export default class QuadraticBezier extends BezierJSWrapper {
+	public constructor(
+		public readonly p0: Point2,
+		public readonly p1: Point2,
+		public readonly p2: Point2
+	) {
+		super();
+	}
+
+	/**
+	 * Returns a component of a quadratic Bézier curve at t, where p0,p1,p2 are either all x or
+	 * all y components of the target curve.
+	 */
+	private static componentAt(t: number, p0: number, p1: number, p2: number) {
+		return p0 + t * (-2 * p0 + 2 * p1) + t * t * (p0 - 2 * p1 + p2);
+	}
+
+	private static derivativeComponentAt(t: number, p0: number, p1: number, p2: number) {
+		return -2 * p0 + 2 * p1 + 2 * t * (p0 - 2 * p1 + p2);
+	}
+
+	/**
+	 * @returns the curve evaluated at `t`.
+	 */
+	public override at(t: number): Point2 {
+		const p0 = this.p0;
+		const p1 = this.p1;
+		const p2 = this.p2;
+		return Vec2.of(
+			QuadraticBezier.componentAt(t, p0.x, p1.x, p2.x),
+			QuadraticBezier.componentAt(t, p0.y, p1.y, p2.y),
+		);
+	}
+
+	public override derivativeAt(t: number): Point2 {
+		const p0 = this.p0;
+		const p1 = this.p1;
+		const p2 = this.p2;
+		return Vec2.of(
+			QuadraticBezier.derivativeComponentAt(t, p0.x, p1.x, p2.x),
+			QuadraticBezier.derivativeComponentAt(t, p0.y, p1.y, p2.y),
+		);
+	}
+
+	public override normal(t: number): Vec2 {
+		const tangent = this.derivativeAt(t);
+		return tangent.orthog().normalized();
+	}
+
+	/** @returns an overestimate of this shape's bounding box. */
+	public override getLooseBoundingBox(): Rect2 {
+		return Rect2.bboxOf([ this.p0, this.p1, this.p2 ]);
+	}
+
+	/**
+	 * @returns the *approximate* distance from `point` to this curve.
+	 */
+	public approximateDistance(point: Point2): number {
+		// We want to minimize f(t) = |B(t) - p|².
+		// Expanding,
+		//   f(t)  = (Bₓ(t) - pₓ)² + (Bᵧ(t) - pᵧ)²
+		// ⇒ f'(t) = Dₜ(Bₓ(t) - pₓ)² + Dₜ(Bᵧ(t) - pᵧ)²
+		//
+		// Considering just one component,
+		//  Dₜ(Bₓ(t) - pₓ)² = 2(Bₓ(t) - pₓ)(DₜBₓ(t))
+		//                  = 2(Bₓ(t)DₜBₓ(t) - pₓBₓ(t))
+		//   = 2(p0ₓ + (t)(-2p0ₓ + 2p1ₓ) + (t²)(p0ₓ - 2p1ₓ + p2ₓ) - pₓ)((-2p0ₓ + 2p1ₓ) + 2(t)(p0ₓ - 2p1ₓ + p2ₓ))
+		//     - (pₓ)((-2p0ₓ + 2p1ₓ) + (t)(p0ₓ - 2p1ₓ + p2ₓ))
+		const A = this.p0.x - point.x;
+		const B = -2 * this.p0.x + 2 * this.p1.x;
+		const C = this.p0.x - 2 * this.p1.x + this.p2.x;
+		// Let A = p0ₓ - pₓ, B = -2p0ₓ + 2p1ₓ, C = p0ₓ - 2p1ₓ + p2ₓ. We then have,
+		//  Dₜ(Bₓ(t) - pₓ)²
+		//    = 2(A + tB + t²C)(B + 2tC) - (pₓ)(B + 2tC)
+		//    = 2(AB + tB² + t²BC + 2tCA + 2tCtB + 2tCt²C) - pₓB - pₓ2tC
+		//    = 2(AB + tB² + 2tCA + t²BC + 2t²CB + 2C²t³) - pₓB - pₓ2tC
+		//    = 2AB + 2t(B² + 2CA) + 2t²(BC + 2CB) + 4C²t³ - pₓB - pₓ2tC
+		//    = 2AB + 2t(B² + 2CA - pₓC) + 2t²(BC + 2CB) + 4C²t³ - pₓB
+		//
+
+		const D = this.p0.y - point.y;
+		const E = -2 * this.p0.y + 2 * this.p1.y;
+		const F = this.p0.y - 2 * this.p1.y + this.p2.y;
+		// Using D = p0ᵧ - pᵧ, E = -2p0ᵧ + 2p1ᵧ, F = p0ᵧ - 2p1ᵧ + p2ᵧ, we thus have,
+		//  f'(t) = 2AB + 2t(B² + 2CA - pₓC) + 2t²(BC + 2CB) + 4C²t³ - pₓB
+		//        + 2DE + 2t(E² + 2FD - pᵧF) + 2t²(EF + 2FE) + 4F²t³ - pᵧE
+		const a = 2 * A * B + 2 * D * E - point.x * B - point.y * E;
+		const b = 2 * B * B + 2 * E * E + 2 * C * A + 2 * F * D - point.x * C - point.y * F;
+		const c = 2 * E * F + 2 * B * C + 2 * C * B + 2 * F * E;
+		//const d = 4 * C * C + 4 * F * F;
+
+		// Thus,
+		// f'(t) = a + bt + ct² + dt³
+		const fDerivAtZero = a;
+		const f2ndDerivAtZero = b;
+		const f3rdDerivAtZero = 2 * c;
+
+
+		// Using the first few terms of a Maclaurin series to approximate f'(t),
+		// f'(t) ≈ f'(0) + t f''(0) + t² f'''(0) / 2
+		let [ min1, min2 ] = solveQuadratic(
+			f3rdDerivAtZero / 2,
+			f2ndDerivAtZero,
+			fDerivAtZero,
+		);
+
+		// If the quadratic has no solutions, approximate.
+		if (isNaN(min1)) {
+			min1 = 0.25;
+		}
+
+		if (isNaN(min2)) {
+			min2 = 0.75;
+		}
+
+		const at1 = this.at(min1);
+		const at2 = this.at(min2);
+		const sqrDist1 = at1.minus(point).magnitudeSquared();
+		const sqrDist2 = at2.minus(point).magnitudeSquared();
+		const sqrDist3 = this.at(0).minus(point).magnitudeSquared();
+		const sqrDist4 = this.at(1).minus(point).magnitudeSquared();
+
+
+		return Math.sqrt(Math.min(sqrDist1, sqrDist2, sqrDist3, sqrDist4));
+	}
+
+	public override getPoints() {
+		return [ this.p0, this.p1, this.p2 ];
+	}
+}

package/src/math/shapes/Rect2.test.ts

@@ -0,0 +1,209 @@
+
+import Rect2 from './Rect2';
+import { Vec2 } from '../Vec2';
+import Mat33 from '../Mat33';
+
+describe('Rect2', () => {
+	it('width, height should always be positive', () => {
+		expect(new Rect2(-1, -2, -3, 4)).objEq(new Rect2(-4, -2, 3, 4));
+		expect(new Rect2(0, 0, 0, 0).size).objEq(Vec2.zero);
+		expect(Rect2.fromCorners(
+			Vec2.of(-3, -3),
+			Vec2.of(-1, -1)
+		)).objEq(new Rect2(
+			-3, -3,
+			2, 2
+		));
+	});
+
+	it('bounding boxes should be correctly computed', () => {
+		expect(Rect2.bboxOf([
+			Vec2.zero,
+		])).objEq(Rect2.empty);
+
+		expect(Rect2.bboxOf([
+			Vec2.of(-1, -1),
+			Vec2.of(1, 2),
+			Vec2.of(3, 4),
+			Vec2.of(1, -4),
+		])).objEq(new Rect2(
+			-1, -4,
+			4, 8
+		));
+
+		expect(Rect2.bboxOf([
+			Vec2.zero,
+		], 10)).objEq(new Rect2(
+			-10, -10,
+			20, 20
+		));
+	});
+
+	it('"union"s should contain both composite rectangles.', () => {
+		expect(new Rect2(0, 0, 1, 1).union(new Rect2(1, 1, 2, 2))).objEq(
+			new Rect2(0, 0, 3, 3)
+		);
+		expect(Rect2.empty.union(Rect2.empty)).objEq(Rect2.empty);
+	});
+
+	it('should handle empty unions', () => {
+		expect(Rect2.union()).toStrictEqual(Rect2.empty);
+	});
+
+	it('should correctly union multiple rectangles', () => {
+		expect(Rect2.union(new Rect2(0, 0, 1, 1), new Rect2(1, 1, 2, 2))).objEq(
+			new Rect2(0, 0, 3, 3)
+		);
+
+		expect(
+			Rect2.union(new Rect2(-1, 0, 1, 1), new Rect2(1, 1, 2, 2), new Rect2(1, 10, 1, 0.1))
+		).objEq(
+			new Rect2(-1, 0, 4, 10.1)
+		);
+
+		expect(
+			Rect2.union(new Rect2(-1, 0, 1, 1), new Rect2(1, -11.1, 2, 2), new Rect2(1, 10, 1, 0.1))
+		).objEq(
+			new Rect2(-1, -11.1, 4, 21.2)
+		);
+	});
+
+	it('should contain points that are within a rectangle', () => {
+		expect(new Rect2(-1, -1, 2, 2).containsPoint(Vec2.zero)).toBe(true);
+		expect(new Rect2(-1, -1, 0, 0).containsPoint(Vec2.zero)).toBe(false);
+		expect(new Rect2(1, 2, 3, 4).containsRect(Rect2.empty)).toBe(false);
+		expect(new Rect2(1, 2, 3, 4).containsRect(new Rect2(1, 2, 1, 2))).toBe(true);
+		expect(new Rect2(-2, -2, 4, 4).containsRect(new Rect2(-1, 0, 1, 1))).toBe(true);
+		expect(new Rect2(-2, -2, 4, 4).containsRect(new Rect2(-1, 0, 10, 1))).toBe(false);
+	});
+
+	it('.center should be the center of a rectangle', () => {
+		expect(new Rect2(-1, -1, 2, 3).center).objEq(Vec2.of(0, 0.5));
+		expect(new Rect2(-1, -1, 2, 2).center).objEq(Vec2.zero);
+	});
+
+	describe('containsRect', () => {
+		it('a rectangle should contain itself', () => {
+			const rect = new Rect2(1 / 3, 1 / 4, 1 / 5, 1 / 6);
+			expect(rect.containsRect(rect)).toBe(true);
+		});
+
+		it('empty rect should not contain a larger rect', () => {
+			expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
+		});
+
+		it('should correctly contain rectangles', () => {
+			const testRect = new Rect2(4, -10, 50, 100);
+			expect(testRect.containsRect(new Rect2(4.1, 0, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, 0, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, -9, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, -9, 1, 91))).toBe(true);
+		});
+	});
+
+	it('intersecting rectangles should be identified as intersecting', () => {
+		expect(new Rect2(-1, -1, 2, 2).intersects(Rect2.empty)).toBe(true);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 1, 1))).toBe(true);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 10, 10))).toBe(true);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(3, 3, 10, 10))).toBe(false);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0.2, 0.1, 0, 0))).toBe(true);
+		expect(new Rect2(-100, -1, 200, 2).intersects(new Rect2(-5, -5, 10, 30))).toBe(true);
+		expect(new Rect2(-100, -1, 200, 2).intersects(new Rect2(-5, 50, 10, 30))).toBe(false);
+	});
+
+	it('intersecting rectangles should have their intersections correctly computed', () => {
+		expect(new Rect2(-1, -1, 2, 2).intersection(Rect2.empty)).objEq(Rect2.empty);
+		expect(new Rect2(-1, -1, 2, 2).intersection(new Rect2(0, 0, 3, 3))).objEq(
+			new Rect2(0, 0, 1, 1)
+		);
+		expect(new Rect2(-2, 0, 1, 2).intersection(new Rect2(-3, 0, 2, 2))).objEq(
+			new Rect2(-2, 0, 1, 2)
+		);
+		expect(new Rect2(-1, -1, 2, 2).intersection(new Rect2(3, 3, 10, 10))).toBe(null);
+	});
+
+	it('A transformed bounding box', () => {
+		const rotationMat = Mat33.zRotation(Math.PI / 4);
+		const rect = Rect2.unitSquare.translatedBy(Vec2.of(-0.5, -0.5));
+		const transformedBBox = rect.transformedBoundingBox(rotationMat);
+		expect(transformedBBox.containsPoint(Vec2.of(0.5, 0.5)));
+		expect(transformedBBox.containsRect(rect)).toBe(true);
+	});
+
+	describe('should correctly expand to include a given point', () => {
+		it('Growing an empty rectange to include (1, 0)', () => {
+			const originalRect = Rect2.empty;
+			const grownRect = originalRect.grownToPoint(Vec2.unitX);
+			expect(grownRect).objEq(new Rect2(0, 0, 1, 0));
+		});
+
+		it('Growing the unit rectangle to include (-5, 1), with a margin', () => {
+			const originalRect = Rect2.unitSquare;
+			const grownRect = originalRect.grownToPoint(Vec2.of(-5, 1), 4);
+			expect(grownRect).objEq(new Rect2(-9, -3, 10, 8));
+		});
+
+		it('Growing to include a point just above', () => {
+			const original = Rect2.unitSquare;
+			const grown = original.grownToPoint(Vec2.of(-1, -1));
+			expect(grown).objEq(new Rect2(-1, -1, 2, 2));
+		});
+
+		it('Growing to include a point just below', () => {
+			const original = Rect2.unitSquare;
+			const grown = original.grownToPoint(Vec2.of(2, 2));
+			expect(grown).objEq(new Rect2(0, 0, 2, 2));
+		});
+	});
+
+	describe('divideIntoGrid', () => {
+		it('division of unit square', () => {
+			expect(Rect2.unitSquare.divideIntoGrid(2, 2)).toMatchObject(
+				[
+					new Rect2(0, 0, 0.5, 0.5), new Rect2(0.5, 0, 0.5, 0.5),
+					new Rect2(0, 0.5, 0.5, 0.5), new Rect2(0.5, 0.5, 0.5, 0.5),
+				]
+			);
+			expect(Rect2.unitSquare.divideIntoGrid(0, 0).length).toBe(0);
+			expect(Rect2.unitSquare.divideIntoGrid(100, 0).length).toBe(0);
+			expect(Rect2.unitSquare.divideIntoGrid(4, 1)).toMatchObject(
+				[
+					new Rect2(0, 0, 0.25, 1), new Rect2(0.25, 0, 0.25, 1),
+					new Rect2(0.5, 0, 0.25, 1), new Rect2(0.75, 0, 0.25, 1),
+				]
+			);
+		});
+		it('division of translated square', () => {
+			expect(new Rect2(3, -3, 4, 4).divideIntoGrid(2, 1)).toMatchObject(
+				[
+					new Rect2(3, -3, 2, 4), new Rect2(5, -3, 2, 4),
+				]
+			);
+		});
+		it('division of empty square', () => {
+			expect(Rect2.empty.divideIntoGrid(1000, 10000).length).toBe(1);
+		});
+
+		it('division of rectangle', () => {
+			expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
+				[
+					new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
+					new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
+				]
+			);
+		});
+	});
+
+	describe('should correctly return the closest point on the edge of a rectangle', () => {
+		it('with the unit square', () => {
+			const rect = Rect2.unitSquare;
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.zero)).objEq(Vec2.zero);
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(-1, -1))).objEq(Vec2.zero);
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(-1, 0.5))).objEq(Vec2.of(0, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(1, 0.5))).objEq(Vec2.of(1, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(0.6, 0.6))).objEq(Vec2.of(1, 0.6));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(2, 0.5))).objEq(Vec2.of(1, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(0.6, 0.6))).objEq(Vec2.of(1, 0.6));
+		});
+	});
+});