js-draw 0.23.1 → 0.24.0

package/src/math/shapes/Rect2.ts

@@ -0,0 +1,344 @@
+import LineSegment2 from './LineSegment2';
+import Mat33 from '../Mat33';
+import { Point2, Vec2 } from '../Vec2';
+import Abstract2DShape from './Abstract2DShape';
+import Vec3 from '../Vec3';
+
+/** An object that can be converted to a Rect2. */
+export interface RectTemplate {
+	x: number;
+	y: number;
+	w?: number;
+	h?: number;
+	width?: number;
+	height?: number;
+}
+
+// invariant: w ≥ 0, h ≥ 0, immutable
+export default class Rect2 extends Abstract2DShape {
+	// Derived state:
+
+	// topLeft assumes up is -y
+	public readonly topLeft: Point2;
+	public readonly size: Vec2;
+	public readonly bottomRight: Point2;
+	public readonly area: number;
+
+	public constructor(
+		public readonly x: number,
+		public readonly y: number,
+		public readonly w: number,
+		public readonly h: number
+	) {
+		super();
+
+		if (w < 0) {
+			this.x += w;
+			this.w = Math.abs(w);
+		}
+
+		if (h < 0) {
+			this.y += h;
+			this.h = Math.abs(h);
+		}
+
+		// Precompute/store vector forms.
+		this.topLeft = Vec2.of(this.x, this.y);
+		this.size = Vec2.of(this.w, this.h);
+		this.bottomRight = this.topLeft.plus(this.size);
+		this.area = this.w * this.h;
+	}
+
+	public translatedBy(vec: Vec2): Rect2 {
+		return new Rect2(vec.x + this.x, vec.y + this.y, this.w, this.h);
+	}
+
+	// Returns a copy of this with the given size (but same top-left).
+	public resizedTo(size: Vec2): Rect2 {
+		return new Rect2(this.x, this.y, size.x, size.y);
+	}
+
+	public override containsPoint(other: Point2): boolean {
+		return this.x <= other.x && this.y <= other.y
+			&& this.x + this.w >= other.x && this.y + this.h >= other.y;
+	}
+
+	public containsRect(other: Rect2): boolean {
+		return this.x <= other.x && this.y <= other.y
+				&& this.bottomRight.x >= other.bottomRight.x
+				&& this.bottomRight.y >= other.bottomRight.y;
+	}
+
+	public intersects(other: Rect2): boolean {
+		// Project along x/y axes.
+		const thisMinX = this.x;
+		const thisMaxX = thisMinX + this.w;
+		const otherMinX = other.x;
+		const otherMaxX = other.x + other.w;
+
+		if (thisMaxX < otherMinX || thisMinX > otherMaxX) {
+			return false;
+		}
+
+
+		const thisMinY = this.y;
+		const thisMaxY = thisMinY + this.h;
+		const otherMinY = other.y;
+		const otherMaxY = other.y + other.h;
+
+		if (thisMaxY < otherMinY || thisMinY > otherMaxY) {
+			return false;
+		}
+
+		return true;
+	}
+
+	// Returns the overlap of this and [other], or null, if no such
+	//          overlap exists
+	public intersection(other: Rect2): Rect2|null {
+		if (!this.intersects(other)) {
+			return null;
+		}
+
+		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
+
+		return Rect2.fromCorners(topLeft, bottomRight);
+	}
+
+	// Returns a new rectangle containing both [this] and [other].
+	public union(other: Rect2): Rect2 {
+		return Rect2.union(this, other);
+	}
+
+	// Returns a the subdivision of this into [columns] columns
+	// and [rows] rows. For example,
+	//	 Rect2.unitSquare.divideIntoGrid(2, 2)
+	//		-> [ Rect2(0, 0, 0.5, 0.5), Rect2(0.5, 0, 0.5, 0.5), Rect2(0, 0.5, 0.5, 0.5), Rect2(0.5, 0.5, 0.5, 0.5) ]
+	// The rectangles are ordered in row-major order.
+	public divideIntoGrid(columns: number, rows: number): Rect2[] {
+		const result: Rect2[] = [];
+		if (columns <= 0 || rows <= 0) {
+			return result;
+		}
+
+		const eachRectWidth = this.w / columns;
+		const eachRectHeight = this.h / rows;
+
+		if (eachRectWidth === 0) {
+			columns = 1;
+		}
+		if (eachRectHeight === 0) {
+			rows = 1;
+		}
+
+		for (let j = 0; j < rows; j++) {
+			for (let i = 0; i < columns; i++) {
+				const x = eachRectWidth * i + this.x;
+				const y = eachRectHeight * j + this.y;
+				result.push(new Rect2(x, y, eachRectWidth, eachRectHeight));
+			}
+		}
+		return result;
+	}
+
+	// Returns a rectangle containing this and [point].
+	// [margin] is the minimum distance between the new point and the edge
+	// of the resultant rectangle.
+	public grownToPoint(point: Point2, margin: number = 0): Rect2 {
+		const otherRect = new Rect2(
+			point.x - margin, point.y - margin,
+			margin * 2, margin * 2
+		);
+		return this.union(otherRect);
+	}
+
+	// Returns this grown by [margin] in both the x and y directions.
+	public grownBy(margin: number): Rect2 {
+		if (margin === 0) {
+			return this;
+		}
+
+		return new Rect2(
+			this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2
+		);
+	}
+
+	public getClosestPointOnBoundaryTo(target: Point2) {
+		const closestEdgePoints = this.getEdges().map(edge => {
+			return edge.closestPointTo(target);
+		});
+
+		let closest: Point2|null = null;
+		let closestDist: number|null = null;
+		for (const point of closestEdgePoints) {
+			const dist = point.minus(target).length();
+			if (closestDist === null || dist < closestDist) {
+				closest = point;
+				closestDist = dist;
+			}
+		}
+		return closest!;
+	}
+
+	public get corners(): Point2[] {
+		return [
+			this.bottomRight,
+			this.topRight,
+			this.topLeft,
+			this.bottomLeft,
+		];
+	}
+
+	public get maxDimension() {
+		return Math.max(this.w, this.h);
+	}
+
+	public get topRight() {
+		return this.bottomRight.plus(Vec2.of(0, -this.h));
+	}
+
+	public get bottomLeft() {
+		return this.topLeft.plus(Vec2.of(0, this.h));
+	}
+
+	public get width() {
+		return this.w;
+	}
+
+	public get height() {
+		return this.h;
+	}
+
+	public get center() {
+		return this.topLeft.plus(this.size.times(0.5));
+	}
+
+	// Returns edges in the order
+	// [ rightEdge, topEdge, leftEdge, bottomEdge ]
+	public getEdges(): LineSegment2[] {
+		const corners = this.corners;
+		return [
+			new LineSegment2(corners[0], corners[1]),
+			new LineSegment2(corners[1], corners[2]),
+			new LineSegment2(corners[2], corners[3]),
+			new LineSegment2(corners[3], corners[0]),
+		];
+	}
+
+	public override intersectsLineSegment(lineSegment: LineSegment2): Point2[] {
+		const result: Point2[] = [];
+
+		for (const edge of this.getEdges()) {
+			const intersection = edge.intersectsLineSegment(lineSegment);
+			intersection.forEach(point => result.push(point));
+		}
+
+		return result;
+	}
+
+	public override signedDistance(point: Vec3): number {
+		const closestBoundaryPoint = this.getClosestPointOnBoundaryTo(point);
+		const dist = point.minus(closestBoundaryPoint).magnitude();
+
+		if (this.containsPoint(point)) {
+			return -dist;
+		}
+		return dist;
+	}
+
+	public override getTightBoundingBox(): Rect2 {
+		return this;
+	}
+
+	// [affineTransform] is a transformation matrix that both scales and **translates**.
+	// the bounding box of this' four corners after transformed by the given affine transformation.
+	public transformedBoundingBox(affineTransform: Mat33): Rect2 {
+		return Rect2.bboxOf(this.corners.map(corner => affineTransform.transformVec2(corner)));
+	}
+
+	/** @return true iff this is equal to [other] ± fuzz */
+	public eq(other: Rect2, fuzz: number = 0): boolean {
+		return this.topLeft.eq(other.topLeft, fuzz) && this.size.eq(other.size, fuzz);
+	}
+
+	public override toString(): string {
+		return `Rect(point(${this.x}, ${this.y}), size(${this.w}, ${this.h}))`;
+	}
+
+
+	public static fromCorners(corner1: Point2, corner2: Point2) {
+		return new Rect2(
+			Math.min(corner1.x, corner2.x),
+			Math.min(corner1.y, corner2.y),
+			Math.abs(corner1.x - corner2.x),
+			Math.abs(corner1.y - corner2.y)
+		);
+	}
+
+	// Returns a box that contains all points in [points] with at least [margin]
+	// between each point and the edge of the box.
+	public static bboxOf(points: Point2[], margin: number = 0) {
+		let minX = 0;
+		let minY = 0;
+		let maxX = 0;
+		let maxY = 0;
+		let isFirst = true;
+
+		for (const point of points) {
+			if (isFirst) {
+				minX = point.x;
+				minY = point.y;
+				maxX = point.x;
+				maxY = point.y;
+
+				isFirst = false;
+			}
+
+			minX = Math.min(minX, point.x);
+			minY = Math.min(minY, point.y);
+			maxX = Math.max(maxX, point.x);
+			maxY = Math.max(maxY, point.y);
+		}
+
+		return Rect2.fromCorners(
+			Vec2.of(minX - margin, minY - margin),
+			Vec2.of(maxX + margin, maxY + margin)
+		);
+	}
+
+	// @returns a rectangle that contains all of the given rectangles, the bounding box
+	//     of the given rectangles.
+	public static union(...rects: Rect2[]): Rect2 {
+		if (rects.length === 0) {
+			return Rect2.empty;
+		}
+
+		const firstRect = rects[0];
+		let minX: number = firstRect.topLeft.x;
+		let minY: number = firstRect.topLeft.y;
+		let maxX: number = firstRect.bottomRight.x;
+		let maxY: number = firstRect.bottomRight.y;
+
+		for (let i = 1; i < rects.length; i++) {
+			const rect = rects[i];
+			minX = Math.min(minX, rect.topLeft.x);
+			minY = Math.min(minY, rect.topLeft.y);
+			maxX = Math.max(maxX, rect.bottomRight.x);
+			maxY = Math.max(maxY, rect.bottomRight.y);
+		}
+
+		return new Rect2(
+			minX, minY, maxX - minX, maxY - minY,
+		);
+	}
+
+	public static of(template: RectTemplate) {
+		const width = template.width ?? template.w ?? 0;
+		const height = template.height ?? template.h ?? 0;
+		return new Rect2(template.x, template.y, width, height);
+	}
+
+	public static empty = new Rect2(0, 0, 0, 0);
+	public static unitSquare = new Rect2(0, 0, 1, 1);
+}

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

@@ -0,0 +1,61 @@
+import { Vec2 } from '../Vec2';
+import Triangle from './Triangle';
+
+describe('Triangle', () => {
+	describe('signed distance function should return correct values', () => {
+		it('signed distance function should be zero along the boundary of a shape', () => {
+			const testTriangle = Triangle.fromVertices(Vec2.of(-1, -1), Vec2.of(0, 1), Vec2.of(1, -1));
+
+			// SDF for each vertex should be zero.
+			for (const vertex of testTriangle.vertices) {
+				expect(testTriangle.signedDistance(vertex)).toBeCloseTo(0);
+			}
+
+			// SDF along each side should be zero
+			for (const side of testTriangle.getEdges()) {
+				for (let t = 0.1; t < 1; t += 0.1) {
+					expect(testTriangle.signedDistance(side.at(t))).toBeCloseTo(0);
+				}
+			}
+		});
+
+		it('signed distance function should be the negative distance to the edge '
+			+ 'of the triangle on the interior of a shape, same as distance outside of shape', () => {
+			const testTriangle = Triangle.fromVertices(Vec2.of(-1, -1), Vec2.of(0, 1), Vec2.of(1, -1));
+
+			// A point vertically above the triangle: Outside, so positive SDF
+			expect(testTriangle.signedDistance(Vec2.of(0, 2))).toBeCloseTo(1);
+
+			// Similarly, a point vertically below the triangle is outside, so should have positive SDF
+			expect(testTriangle.signedDistance(Vec2.of(0, -2))).toBeCloseTo(1);
+
+			// A point just above the left side (and outside the triangle) should also have positive SDF
+			expect(testTriangle.signedDistance(Vec2.of(-0.8, 0.8))).toBeGreaterThan(0);
+
+
+			const firstSide = testTriangle.getEdges()[0];
+			const firstSideMidpoint = firstSide.at(0.5);
+			const firstSideNormal = firstSide.direction.orthog();
+
+			// Move a point towards the first side
+			for (let t = 0.5; t > -0.5; t -= 0.1) {
+				const point = firstSideMidpoint.minus(firstSideNormal.times(t));
+				const distFromSide1 = firstSide.distance(point);
+				const signedDist = testTriangle.signedDistance(point);
+
+				// Inside the shape
+				if (t > 0) {
+					// Inside the shape
+					expect(testTriangle.containsPoint(point)).toBe(true);
+
+					expect(signedDist).toBeCloseTo(-distFromSide1);
+				} else {
+					// Outside the shape
+					expect(testTriangle.containsPoint(point)).toBe(false);
+
+					expect(signedDist).toBeCloseTo(distFromSide1);
+				}
+			}
+		});
+	});
+});

package/src/math/shapes/Triangle.ts

@@ -0,0 +1,139 @@
+import Mat33 from '../Mat33';
+import { Point2 } from '../Vec2';
+import Vec3 from '../Vec3';
+import Abstract2DShape from './Abstract2DShape';
+import LineSegment2 from './LineSegment2';
+import Rect2 from './Rect2';
+
+type TriangleBoundary = [ LineSegment2, LineSegment2, LineSegment2 ];
+
+export default class Triangle extends Abstract2DShape {
+	/**
+	 * @see {@link fromVertices}
+	 */
+	protected constructor(
+		public readonly vertex1: Vec3,
+		public readonly vertex2: Vec3,
+		public readonly vertex3: Vec3,
+	) {
+		super();
+	}
+
+	/**
+	 * Creates a triangle from its three corners. Corners may be stored in a different
+	 * order than given.
+	 */
+	public static fromVertices(vertex1: Vec3, vertex2: Vec3, vertex3: Vec3) {
+		return new Triangle(vertex1, vertex2, vertex3);
+	}
+
+	public get vertices(): [ Point2, Point2, Point2 ] {
+		return [ this.vertex1, this.vertex2, this.vertex3 ];
+	}
+
+	public map(mapping: (vertex: Vec3)=>Vec3): Triangle {
+		return new Triangle(
+			mapping(this.vertex1),
+			mapping(this.vertex2),
+			mapping(this.vertex3),
+		);
+	}
+
+	// Transform, treating this as composed of 2D points.
+	public transformed2DBy(affineTransform: Mat33) {
+		return this.map(affineTransform.transformVec2);
+	}
+
+	// Transforms this by a linear transform --- verticies are treated as
+	// 3D points.
+	public transformedBy(linearTransform: Mat33) {
+		return this.map(linearTransform.transformVec3);
+	}
+
+	#sides: TriangleBoundary|undefined = undefined;
+
+	/**
+	 * Returns the sides of this triangle, as an array of `LineSegment2`s.
+	 *
+	 * The first side is from `vertex1` to `vertex2`, the next from `vertex2` to `vertex3`,
+	 * and the last from `vertex3` to `vertex1`.
+	 */
+	public getEdges(): TriangleBoundary {
+		if (this.#sides) {
+			return this.#sides;
+		}
+
+		const side1 = new LineSegment2(this.vertex1, this.vertex2);
+		const side2 = new LineSegment2(this.vertex2, this.vertex3);
+		const side3 = new LineSegment2(this.vertex3, this.vertex1);
+
+		const sides: TriangleBoundary = [ side1, side2, side3 ];
+		this.#sides = sides;
+		return sides;
+	}
+
+	public override intersectsLineSegment(lineSegment: LineSegment2): Vec3[] {
+		const result: Point2[] = [];
+
+		for (const edge of this.getEdges()) {
+			edge.intersectsLineSegment(lineSegment)
+				.forEach(point => result.push(point));
+		}
+
+		return result;
+	}
+
+	/** @inheritdoc */
+	public override containsPoint(point: Vec3, epsilon: number = Abstract2DShape.smallValue): boolean {
+		// Project `point` onto normals to each of this' sides.
+		// Uses the Separating Axis Theorem (https://en.wikipedia.org/wiki/Hyperplane_separation_theorem#Use_in_collision_detection)
+		const sides = this.getEdges();
+
+		for (const side of sides) {
+			const orthog = side.direction.orthog();
+
+			// Project all three vertices
+			// TODO: Performance can be improved here (two vertices will always have the same projection)
+			const projv1 = orthog.dot(this.vertex1);
+			const projv2 = orthog.dot(this.vertex2);
+			const projv3 = orthog.dot(this.vertex3);
+
+			const minProjVertex = Math.min(projv1, projv2, projv3);
+			const maxProjVertex = Math.max(projv1, projv2, projv3);
+
+			const projPoint = orthog.dot(point);
+
+			const inProjection = projPoint >= minProjVertex - epsilon && projPoint <= maxProjVertex + epsilon;
+			if (!inProjection) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * @returns the signed distance from `point` to the closest edge of this triangle.
+	 *
+	 * If `point` is inside `this`, the result is negative, otherwise, the result is
+	 * positive.
+	 */
+	public override signedDistance(point: Vec3): number {
+		const sides = this.getEdges();
+		const distances = sides.map(side => side.distance(point));
+		const distance = Math.min(...distances);
+
+		// If the point is in this' interior, signedDistance must return a negative
+		// number.
+		if (this.containsPoint(point, 0)) {
+			return -distance;
+		} else {
+			return distance;
+		}
+	}
+
+	/** @inheritdoc */
+	public override getTightBoundingBox(): Rect2 {
+		return Rect2.bboxOf(this.vertices);
+	}
+}