Merge branch 'collision'

.vscode/settings.json

@@ -1,24 +1,24 @@
 {
   "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#d816d8",
+    "activityBar.activeBackground": "#2f7c47",
-    "activityBar.background": "#d816d8",
+    "activityBar.background": "#2f7c47",
     "activityBar.foreground": "#e7e7e7",
     "activityBar.inactiveForeground": "#e7e7e799",
-    "activityBarBadge.background": "#caca15",
+    "activityBarBadge.background": "#422c74",
-    "activityBarBadge.foreground": "#15202b",
+    "activityBarBadge.foreground": "#e7e7e7",
     "commandCenter.border": "#e7e7e799",
-    "sash.hoverBorder": "#d816d8",
+    "sash.hoverBorder": "#2f7c47",
-    "statusBar.background": "#aa11aa",
+    "statusBar.background": "#215732",
     "statusBar.foreground": "#e7e7e7",
-    "statusBarItem.hoverBackground": "#d816d8",
+    "statusBarItem.hoverBackground": "#2f7c47",
-    "statusBarItem.remoteBackground": "#aa11aa",
+    "statusBarItem.remoteBackground": "#215732",
     "statusBarItem.remoteForeground": "#e7e7e7",
-    "titleBar.activeBackground": "#aa11aa",
+    "titleBar.activeBackground": "#215732",
     "titleBar.activeForeground": "#e7e7e7",
-    "titleBar.inactiveBackground": "#aa11aa99",
+    "titleBar.inactiveBackground": "#21573299",
     "titleBar.inactiveForeground": "#e7e7e799"
   },
-  "peacock.remoteColor": "aa11aa",
+  "peacock.remoteColor": "#215732",
   "deno.enable": true,
   "deno.unstable": true,
   "liveServer.settings.port": 5501,
@@ -34,6 +34,8 @@
     "NMAX",
     "omggif's",
     "plte",
-    "trns"
+    "trns",
+    "aabb",
+    "deadzone"
   ]
 }

bundle.js

@@ -408,9 +408,15 @@ class Vector {
     y;
     z;
     constructor(x = 0, y = 0, z = 0){
+        if (typeof x === "number") {
             this.x = x;
             this.y = y;
             this.z = z;
+        } else {
+            this.x = x.x;
+            this.y = x.y || y;
+            this.z = x.z || z;
+        }
     }
     set(v, y, z) {
         if (arguments.length === 1 && typeof v !== "number") {
@@ -445,7 +451,7 @@ class Vector {
         }
     }
     add(v, y, z) {
-        if (arguments.length === 1 && typeof v !== 'number') {
+        if (arguments.length === 1 && typeof v !== "number") {
             this.x += v.x;
             this.y += v.y;
             this.z += v.z;
@@ -460,10 +466,10 @@ class Vector {
         return this;
     }
     sub(v, y, z) {
-        if (arguments.length === 1 && typeof v !== 'number') {
+        if (arguments.length === 1 && typeof v !== "number") {
             this.x -= v.x;
             this.y -= v.y;
-            this.z -= v.z;
+            this.z -= v.z || 0;
         } else if (arguments.length === 2) {
             this.x -= v;
             this.y -= y ?? 0;
@@ -475,7 +481,7 @@ class Vector {
         return this;
     }
     mult(v) {
-        if (typeof v === 'number') {
+        if (typeof v === "number") {
             this.x *= v;
             this.y *= v;
             this.z *= v;
@@ -487,7 +493,7 @@ class Vector {
         return this;
     }
     div(v) {
-        if (typeof v === 'number') {
+        if (typeof v === "number") {
             this.x /= v;
             this.y /= v;
             this.z /= v;
@@ -507,11 +513,11 @@ class Vector {
         return this;
     }
     dist(v) {
-        const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
+        const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - (v.z || 0);
         return Math.sqrt(dx * dx + dy * dy + dz * dz);
     }
     dot(v, y, z) {
-        if (arguments.length === 1 && typeof v !== 'number') {
+        if (arguments.length === 1 && typeof v !== "number") {
             return this.x * v.x + this.y * v.y + this.z * v.z;
         }
         return this.x * v + this.y * y + this.z * z;
@@ -525,7 +531,7 @@ class Vector {
             return start + (stop - start) * amt;
         };
         let x, y;
-        if (arguments.length === 2 && typeof v_or_x !== 'number') {
+        if (arguments.length === 2 && typeof v_or_x !== "number") {
             amt = amt_or_y;
             x = v_or_x.x;
             y = v_or_x.y;
@@ -572,13 +578,24 @@ class Vector {
     copy() {
         return new Vector(this.x, this.y, this.z);
     }
-    drawDot() {
+    drawDot(color) {
         if (!doodler) return;
         doodler.dot(this, {
             weight: 2,
-            color: 'red'
+            color: color || "red"
         });
     }
+    draw(origin) {
+        if (!doodler) return;
+        const startPoint = origin ? new Vector(origin) : new Vector();
+        doodler.line(startPoint, startPoint.copy().add(this.copy().normalize().mult(100)));
+    }
+    normal(v) {
+        if (!v) return new Vector(-this.y, this.x);
+        const dx = v.x - this.x;
+        const dy = v.y - this.y;
+        return new Vector(-dy, dx);
+    }
     static fromAngle(angle, v) {
         if (v === undefined || v === null) {
             v = new Vector();
@@ -622,9 +639,9 @@ class Vector {
         return Math.acos(v1.dot(v2) / Math.sqrt(v1.magSq() * v2.magSq()));
     }
     static lerp(v1, v2, amt) {
-        const retval = new Vector(v1.x, v1.y, v1.z);
+        const val = new Vector(v1.x, v1.y, v1.z);
-        retval.lerp(v2, amt);
+        val.lerp(v2, amt);
-        return retval;
+        return val;
     }
     static vectorProjection(v1, v2) {
         v2 = v2.copy();
@@ -633,6 +650,16 @@ class Vector {
         v2.mult(sp);
         return v2;
     }
+    static vectorProjectionAndDot(v1, v2) {
+        v2 = v2.copy();
+        v2.normalize();
+        const sp = v1.dot(v2);
+        v2.mult(sp);
+        return [
+            v2,
+            sp
+        ];
+    }
     static hypot2(a, b) {
         return Vector.dot(Vector.sub(a, b), Vector.sub(a, b));
     }
@@ -657,6 +684,54 @@ class OriginVector extends Vector {
         return new OriginVector(origin, v);
     }
 }
+function satCollisionSpline(p, spline) {
+    for(let i = 0; i < 100; i++){
+        const t1 = i / 100;
+        const t2 = (i + 1) / 100;
+        const segmentStart = spline.getPointAtT(t1);
+        const segmentEnd = spline.getPointAtT(t2);
+        if (segmentIntersectsPolygon(p, segmentStart, segmentEnd)) {
+            return true;
+        }
+    }
+    return false;
+}
+function segmentIntersectsPolygon(p, start, end) {
+    const edges = p.getEdges();
+    for (const edge of edges){
+        const axis = edge.copy().normal().normalize();
+        const proj1 = projectPolygonOntoAxis(p, axis);
+        const proj2 = projectSegmentOntoAxis(start, end, axis);
+        if (!overlap(proj1, proj2)) {
+            return false;
+        }
+    }
+    return true;
+}
+function projectPolygonOntoAxis(p, axis) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const point of p.points){
+        const dotProduct = point.copy().add(p.center).dot(axis);
+        min = Math.min(min, dotProduct);
+        max = Math.max(max, dotProduct);
+    }
+    return {
+        min,
+        max
+    };
+}
+function projectSegmentOntoAxis(start, end, axis) {
+    const dotProductStart = start.dot(axis);
+    const dotProductEnd = end.dot(axis);
+    return {
+        min: Math.min(dotProductStart, dotProductEnd),
+        max: Math.max(dotProductStart, dotProductEnd)
+    };
+}
+function overlap(proj1, proj2) {
+    return proj1.min <= proj2.max && proj1.max >= proj2.min;
+}
 const easeInOut = (x)=>x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
 const map = (value, x1, y1, x2, y2)=>(value - x1) * (y2 - x2) / (y1 - x1) + x2;
 class Doodler {
@@ -1021,7 +1096,7 @@ class ZoomableDoodler extends Doodler {
             e.preventDefault();
             this.dragging = false;
         });
-        this._canvas.addEventListener("mouseleave", (e)=>{
+        this._canvas.addEventListener("mouseleave", (_e)=>{
             this.dragging = false;
         });
         this._canvas.addEventListener("mousemove", (e)=>{
@@ -1233,6 +1308,277 @@ const init = (opt, zoomable, postInit)=>{
     window.doodler = zoomable ? new ZoomableDoodler(opt, postInit) : new Doodler(opt, postInit);
     window.doodler.init();
 };
+class Polygon {
+    points;
+    center;
+    constructor(points){
+        this.points = points.map((p)=>new Vector(p));
+        this.center = this.calcCenter();
+    }
+    draw(color) {
+        for(let i = 0; i < this.points.length; i++){
+            const p1 = this.points[i];
+            const p2 = this.points.at(i - this.points.length + 1);
+            doodler.line(p1.copy().add(this.center), p2.copy().add(this.center), {
+                color
+            });
+        }
+    }
+    calcCenter() {
+        if (!this.points.length) return new Vector();
+        const center = new Vector();
+        for (const point of this.points){
+            center.add(point);
+        }
+        center.div(this.points.length);
+        return center;
+    }
+    get circularHitbox() {
+        let greatestDistance = 0;
+        for (const p of this.points){
+            greatestDistance = Math.max(p.copy().add(this.center).dist(this.center), greatestDistance);
+        }
+        return {
+            center: this.center.copy(),
+            radius: greatestDistance
+        };
+    }
+    _aabb;
+    get AABB() {
+        if (!this._aabb) {
+            this._aabb = this.recalculateAABB();
+        }
+        return this._aabb;
+    }
+    recalculateAABB() {
+        let smallestX, biggestX, smallestY, biggestY;
+        smallestX = smallestY = Infinity;
+        biggestX = biggestY = -Infinity;
+        for (const p of this.points){
+            const temp = p.copy().add(this.center);
+            smallestX = Math.min(temp.x, smallestX);
+            biggestX = Math.max(temp.x, biggestX);
+            smallestY = Math.min(temp.y, smallestY);
+            biggestY = Math.max(temp.y, biggestY);
+        }
+        return {
+            x: smallestX,
+            y: smallestY,
+            w: biggestX - smallestX,
+            h: biggestY - smallestY
+        };
+    }
+    static createPolygon(sides = 3, radius = 100) {
+        sides = Math.round(sides);
+        if (sides < 3) {
+            throw "You need at least 3 sides for a polygon";
+        }
+        const poly = new Polygon([]);
+        const rotangle = Math.PI * 2 / sides;
+        let angle = 0;
+        for(let i = 0; i < sides; i++){
+            angle = i * rotangle + (Math.PI - rotangle) * 0.5;
+            const pt = new Vector(Math.cos(angle) * radius, Math.sin(angle) * radius);
+            poly.points.push(pt);
+        }
+        poly.center = poly.calcCenter();
+        return poly;
+    }
+    getEdges() {
+        const edges = [];
+        for(let i = 0; i < this.points.length; i++){
+            const nextIndex = (i + 1) % this.points.length;
+            const edge = this.points[nextIndex].copy().add(this.center).sub(this.points[i].copy().add(this.center));
+            edges.push(edge);
+        }
+        return edges;
+    }
+    getNearestPoint(p) {
+        let nearest = this.points[0];
+        for (const point of this.points){
+            if (p.dist(point) < p.dist(nearest)) nearest = point;
+        }
+        return nearest;
+    }
+}
+class SplineSegment {
+    points;
+    length;
+    constructor(points){
+        this.points = points;
+        this.length = this.calculateApproxLength(100);
+    }
+    draw(color) {
+        const [a, b, c, d] = this.points;
+        doodler.drawBezier(a, b, c, d, {
+            strokeColor: color || "#ffffff50"
+        });
+    }
+    getPointAtT(t) {
+        const [a, b, c, d] = this.points;
+        const res = a.copy();
+        res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t));
+        res.add(Vector.add(Vector.add(a.copy().mult(3), b.copy().mult(-6)), c.copy().mult(3)).mult(Math.pow(t, 2)));
+        res.add(Vector.add(Vector.add(a.copy().mult(-1), b.copy().mult(3)), Vector.add(c.copy().mult(-3), d.copy())).mult(Math.pow(t, 3)));
+        return res;
+    }
+    getClosestPoint(v) {
+        const resolution = 1 / 25;
+        let closest = this.points[0];
+        let closestDistance = this.points[0].dist(v);
+        let closestT = 0;
+        for(let i = 0; i < 25; i++){
+            const point = this.getPointAtT(i * resolution);
+            const distance = v.dist(point);
+            if (distance < closestDistance) {
+                closest = point;
+                closestDistance = distance;
+                closestT = i * resolution;
+            }
+        }
+        return [
+            closest,
+            closestDistance,
+            closestT
+        ];
+    }
+    getPointsWithinRadius(v, r) {
+        const points = [];
+        const resolution = 1 / 25;
+        for(let i = 0; i < 25 + 1; i++){
+            const point = this.getPointAtT(i * resolution);
+            const distance = v.dist(point);
+            if (distance < r) {
+                points.push([
+                    i * resolution,
+                    this
+                ]);
+            }
+        }
+        return points;
+    }
+    tangent(t) {
+        const [a, b, c, d] = this.points;
+        const res = Vector.sub(b, a).mult(3 * Math.pow(1 - t, 2));
+        res.add(Vector.add(Vector.sub(c, b).mult(6 * (1 - t) * t), Vector.sub(d, c).mult(3 * Math.pow(t, 2))));
+        return res;
+    }
+    doesIntersectCircle(x, y, r) {
+        const v = new Vector(x, y);
+        const resolution = 1 / 25;
+        let distance = Infinity;
+        let t;
+        for(let i = 0; i < 25 - 1; i++){
+            const a = this.getPointAtT(i * resolution);
+            const b = this.getPointAtT((i + 1) * resolution);
+            const ac = Vector.sub(v, a);
+            const ab = Vector.sub(b, a);
+            const d = Vector.add(Vector.vectorProjection(ac, ab), a);
+            const ad = Vector.sub(d, a);
+            const k = Math.abs(ab.x) > Math.abs(ab.y) ? ad.x / ab.x : ad.y / ab.y;
+            let dist;
+            if (k <= 0.0) {
+                dist = Vector.hypot2(v, a);
+            } else if (k >= 1.0) {
+                dist = Vector.hypot2(v, b);
+            }
+            dist = Vector.hypot2(v, d);
+            if (dist < distance) {
+                distance = dist;
+                t = i * resolution;
+            }
+        }
+        if (distance < r) return t;
+        return false;
+    }
+    intersectsCircle(circleCenter, radius) {
+        for(let i = 0; i < 100; i++){
+            const t1 = i / 100;
+            const t2 = (i + 1) / 100;
+            const segmentStart = this.getPointAtT(t1);
+            const segmentEnd = this.getPointAtT(t2);
+            const segmentLength = Math.sqrt((segmentEnd.x - segmentStart.x) ** 2 + (segmentEnd.y - segmentStart.y) ** 2);
+            const resolution = Math.max(10, Math.ceil(100 * (segmentLength / radius)));
+            for(let j = 0; j <= resolution; j++){
+                const t = j / resolution;
+                const point = this.getPointAtT(t);
+                const distance = Math.sqrt((point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2);
+                if (distance <= radius) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    calculateApproxLength(resolution = 25) {
+        const stepSize = 1 / resolution;
+        const points = [];
+        for(let i = 0; i <= resolution; i++){
+            const current = stepSize * i;
+            points.push(this.getPointAtT(current));
+        }
+        this.length = points.reduce((acc, cur)=>{
+            const prev = acc.prev;
+            acc.prev = cur;
+            if (!prev) return acc;
+            acc.length += cur.dist(prev);
+            return acc;
+        }, {
+            prev: undefined,
+            length: 0
+        }).length;
+        return this.length;
+    }
+    calculateEvenlySpacedPoints(spacing, resolution = 1) {
+        const points = [];
+        points.push(this.points[0]);
+        let prev = points[0];
+        let distSinceLastEvenPoint = 0;
+        let t = 0;
+        const div = Math.ceil(this.length * resolution * 10);
+        while(t < 1){
+            t += 1 / div;
+            const point = this.getPointAtT(t);
+            distSinceLastEvenPoint += prev.dist(point);
+            if (distSinceLastEvenPoint >= spacing) {
+                const overshoot = distSinceLastEvenPoint - spacing;
+                const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot));
+                distSinceLastEvenPoint = overshoot;
+                points.push(evenPoint);
+                prev = evenPoint;
+            }
+            prev = point;
+        }
+        return points;
+    }
+    _aabb;
+    get AABB() {
+        if (!this._aabb) {
+            this._aabb = this.recalculateAABB();
+        }
+        return this._aabb;
+    }
+    recalculateAABB() {
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for(let i = 0; i < 100; i++){
+            const t = i / 100;
+            const point = this.getPointAtT(t);
+            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 {
+            x: minX,
+            y: minY,
+            w: maxX - minX,
+            h: maxY - minY
+        };
+    }
+}
 init({
     width: 400,
     height: 400,

collision/aa.ts

@@ -0,0 +1,26 @@
+import { Point } from "../geometry/vector.ts";
+
+export type axisAlignedBoundingBox = {
+  w: number;
+  h: number;
+} & Point;
+
+export const axisAlignedCollision = (
+  aa1: axisAlignedBoundingBox,
+  aa2: axisAlignedBoundingBox,
+) => {
+  return aa1.x < aa2.x + aa2.w &&
+    aa1.x + aa1.w > aa2.x &&
+    aa1.y < aa2.y + aa2.h &&
+    aa1.y + aa1.h > aa2.y;
+};
+
+export const axisAlignedContains = (
+  aa1: axisAlignedBoundingBox,
+  aa2: axisAlignedBoundingBox,
+) => {
+  return aa1.x < aa2.x &&
+    aa1.y < aa2.y &&
+    aa1.x + aa1.w > aa2.x + aa2.w &&
+    aa1.y + aa1.h > aa2.y + aa2.h;
+};

collision/circular.ts

@@ -0,0 +1,15 @@
+import { Point } from "../geometry/vector.ts";
+import { Vector } from "../mod.ts";
+
+export type CircleLike = {
+  center: Point;
+  radius: number;
+};
+
+export const circularCollision = (c1: CircleLike, c2: CircleLike) => {
+  const center1 = new Vector(c1.center);
+  const center2 = new Vector(c2.center);
+  const maxDist = c1.radius + c2.radius;
+
+  return Vector.dist(center1, center2) < maxDist;
+};

collision/sat.ts

@@ -0,0 +1,125 @@
+import { Polygon } from "../geometry/polygon.ts";
+import { SplineSegment } from "../geometry/spline.ts";
+import { Vector } from "../geometry/vector.ts";
+import { CircleLike } from "./circular.ts";
+
+export function satCollisionSpline(p: Polygon, spline: SplineSegment): boolean {
+  const numSegments = 100; // You can adjust the number of segments based on your needs
+
+  for (let i = 0; i < numSegments; i++) {
+    const t1 = i / numSegments;
+    const t2 = (i + 1) / numSegments;
+
+    const segmentStart = spline.getPointAtT(t1);
+    const segmentEnd = spline.getPointAtT(t2);
+
+    if (segmentIntersectsPolygon(p, segmentStart, segmentEnd)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function satCollisionPolygon(poly: Polygon, poly2: Polygon): boolean {
+  for (const edge of poly.getEdges()) {
+    const axis = edge.copy().normal().normalize();
+    const proj1 = projectPolygonOntoAxis(poly, axis);
+    const proj2 = projectPolygonOntoAxis(poly2, axis);
+
+    if (!overlap(proj1, proj2)) return false;
+  }
+  for (const edge of poly2.getEdges()) {
+    const axis = edge.copy().normal().normalize();
+    const proj1 = projectPolygonOntoAxis(poly, axis);
+    const proj2 = projectPolygonOntoAxis(poly2, axis);
+
+    if (!overlap(proj1, proj2)) return false;
+  }
+  return true;
+}
+export function satCollisionCircle(p: Polygon, circle: CircleLike): boolean {
+  for (const edge of p.getEdges()) {
+    const axis = edge.copy().normal().normalize();
+    const proj1 = projectPolygonOntoAxis(p, axis);
+    const proj2 = projectCircleOntoAxis(circle, axis);
+
+    if (!overlap(proj1, proj2)) return false;
+  }
+  const center = new Vector(circle.center);
+  const nearest = p.getNearestPoint(center);
+  const axis = nearest.copy().normal(center).normalize();
+  const proj1 = projectPolygonOntoAxis(p, axis);
+  const proj2 = projectCircleOntoAxis(circle, axis);
+
+  if (!overlap(proj1, proj2)) return false;
+  return true;
+}
+
+function segmentIntersectsPolygon(
+  p: Polygon,
+  start: Vector,
+  end: Vector,
+): boolean {
+  const edges = p.getEdges();
+
+  for (const edge of edges) {
+    // const axis = new Vector(-edge.y, edge.x).normalize();
+    const axis = edge.copy().normal().normalize();
+
+    const proj1 = projectPolygonOntoAxis(p, axis);
+    const proj2 = projectSegmentOntoAxis(start, end, axis);
+
+    if (!overlap(proj1, proj2)) {
+      return false; // No overlap, no intersection
+    }
+  }
+
+  return true; // Overlapping on all axes, intersection detected
+}
+
+function projectPolygonOntoAxis(
+  p: Polygon,
+  axis: Vector,
+): { min: number; max: number } {
+  let min = Infinity;
+  let max = -Infinity;
+
+  for (const point of p.points) {
+    const dotProduct = point.copy().add(p.center).dot(axis);
+    min = Math.min(min, dotProduct);
+    max = Math.max(max, dotProduct);
+  }
+
+  return { min, max };
+}
+
+function projectSegmentOntoAxis(
+  start: Vector,
+  end: Vector,
+  axis: Vector,
+): { min: number; max: number } {
+  const dotProductStart = start.dot(axis);
+  const dotProductEnd = end.dot(axis);
+  return {
+    min: Math.min(dotProductStart, dotProductEnd),
+    max: Math.max(dotProductStart, dotProductEnd),
+  };
+}
+
+function projectCircleOntoAxis(
+  c: CircleLike,
+  axis: Vector,
+): { min: number; max: number } {
+  const dot = new Vector(c.center).dot(axis);
+  const min = dot - c.radius;
+  const max = dot + c.radius;
+  return { min, max };
+}
+
+function overlap(
+  proj1: { min: number; max: number },
+  proj2: { min: number; max: number },
+): boolean {
+  return proj1.min <= proj2.max && proj1.max >= proj2.min;
+}

deno.jsonc

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "lib": [
       "DOM",
-      "es2015"
+      "es2023"
     ],
     "types": [
       "./global.d.ts"

geometry/polygon.ts

@@ -0,0 +1,123 @@
+import { axisAlignedBoundingBox } from "../collision/aa.ts";
+import { CircleLike } from "../collision/circular.ts";
+import { Vector } from "../mod.ts";
+import { Point } from "./vector.ts";
+
+export class Polygon {
+  points: Vector[];
+  center: Vector;
+
+  constructor(points: Point[]) {
+    this.points = points.map((p) => new Vector(p));
+    this.center = this.calcCenter();
+  }
+
+  draw(color?: string) {
+    for (let i = 0; i < this.points.length; i++) {
+      const p1 = this.points[i];
+      const p2 = this.points.at(i - this.points.length + 1)!;
+      doodler.line(p1.copy().add(this.center), p2.copy().add(this.center), {
+        color,
+      });
+    }
+  }
+
+  calcCenter() {
+    if (!this.points.length) return new Vector();
+    const center = new Vector();
+
+    for (const point of this.points) {
+      center.add(point);
+    }
+    center.div(this.points.length);
+    return center;
+  }
+
+  get circularHitbox(): CircleLike {
+    let greatestDistance = 0;
+    for (const p of this.points) {
+      greatestDistance = Math.max(
+        p.copy().add(this.center).dist(this.center),
+        greatestDistance,
+      );
+    }
+
+    return {
+      center: this.center.copy(),
+      radius: greatestDistance,
+    };
+  }
+
+  _aabb?: axisAlignedBoundingBox;
+  get AABB(): axisAlignedBoundingBox {
+    if (!this._aabb) {
+      this._aabb = this.recalculateAABB();
+    }
+    return this._aabb;
+  }
+
+  recalculateAABB(): axisAlignedBoundingBox {
+    let smallestX, biggestX, smallestY, biggestY;
+    smallestX =
+      smallestY =
+        Infinity;
+    biggestX =
+      biggestY =
+        -Infinity;
+
+    for (const p of this.points) {
+      const temp = p.copy().add(this.center);
+      smallestX = Math.min(temp.x, smallestX);
+      biggestX = Math.max(temp.x, biggestX);
+      smallestY = Math.min(temp.y, smallestY);
+      biggestY = Math.max(temp.y, biggestY);
+    }
+
+    return {
+      x: smallestX,
+      y: smallestY,
+      w: biggestX - smallestX,
+      h: biggestY - smallestY,
+    };
+  }
+
+  static createPolygon(sides = 3, radius = 100) {
+    sides = Math.round(sides);
+    if (sides < 3) {
+      throw "You need at least 3 sides for a polygon";
+    }
+
+    const poly = new Polygon([]);
+    // figure out the angles required
+    const rotangle = (Math.PI * 2) / sides;
+    let angle = 0;
+    // loop through and generate each point
+    for (let i = 0; i < sides; i++) {
+      angle = (i * rotangle) + ((Math.PI - rotangle) * 0.5);
+      const pt = new Vector(Math.cos(angle) * radius, Math.sin(angle) * radius);
+      poly.points.push(pt);
+    }
+    poly.center = poly.calcCenter();
+    return poly;
+  }
+
+  getEdges(): Vector[] {
+    const edges: Vector[] = [];
+    for (let i = 0; i < this.points.length; i++) {
+      const nextIndex = (i + 1) % this.points.length;
+      const edge = this.points[nextIndex].copy().add(this.center).sub(
+        this.points[i].copy().add(this.center),
+      );
+      edges.push(edge);
+    }
+    return edges;
+  }
+
+  getNearestPoint(p: Vector) {
+    let nearest = this.points[0];
+    for (const point of this.points) {
+      if (p.dist(point) < p.dist(nearest)) nearest = point;
+    }
+    return nearest;
+  }
+}

geometry/spline.ts

@@ -0,0 +1,246 @@
+import { axisAlignedBoundingBox } from "../collision/aa.ts";
+import { Point, Vector } from "./vector.ts";
+
+export class SplineSegment {
+  points: [Vector, Vector, Vector, Vector];
+
+  length: number;
+
+  constructor(points: [Vector, Vector, Vector, Vector]) {
+    this.points = points;
+    this.length = this.calculateApproxLength(100);
+  }
+
+  draw(color?: string) {
+    const [a, b, c, d] = this.points;
+    doodler.drawBezier(a, b, c, d, {
+      strokeColor: color || "#ffffff50",
+    });
+  }
+
+  getPointAtT(t: number) {
+    const [a, b, c, d] = this.points;
+    const res = a.copy();
+
+    res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t));
+    res.add(
+      Vector.add(
+        Vector.add(a.copy().mult(3), b.copy().mult(-6)),
+        c.copy().mult(3),
+      ).mult(Math.pow(t, 2)),
+    );
+    res.add(
+      Vector.add(
+        Vector.add(a.copy().mult(-1), b.copy().mult(3)),
+        Vector.add(c.copy().mult(-3), d.copy()),
+      ).mult(Math.pow(t, 3)),
+    );
+
+    return res;
+  }
+
+  getClosestPoint(v: Vector): [Vector, number, number] {
+    const samples = 25;
+    const resolution = 1 / samples;
+    let closest = this.points[0];
+    let closestDistance = this.points[0].dist(v);
+    let closestT = 0;
+
+    for (let i = 0; i < samples; i++) {
+      const point = this.getPointAtT(i * resolution);
+      const distance = v.dist(point);
+      if (distance < closestDistance) {
+        closest = point;
+        closestDistance = distance;
+        closestT = i * resolution;
+      }
+    }
+
+    return [closest, closestDistance, closestT];
+  }
+
+  getPointsWithinRadius(v: Vector, r: number) {
+    const points: [number, SplineSegment][] = [];
+    const samples = 25;
+    const resolution = 1 / samples;
+
+    for (let i = 0; i < samples + 1; i++) {
+      const point = this.getPointAtT(i * resolution);
+      const distance = v.dist(point);
+      if (distance < r) {
+        points.push([i * resolution, this]);
+      }
+    }
+    return points;
+  }
+
+  tangent(t: number) {
+    // dP(t) / dt =  -3(1-t)^2 * P0 + 3(1-t)^2 * P1 - 6t(1-t) * P1 - 3t^2 * P2 + 6t(1-t) * P2 + 3t^2 * P3
+    const [a, b, c, d] = this.points;
+
+    const res = Vector.sub(b, a).mult(3 * Math.pow(1 - t, 2));
+    res.add(
+      Vector.add(
+        Vector.sub(c, b).mult(6 * (1 - t) * t),
+        Vector.sub(d, c).mult(3 * Math.pow(t, 2)),
+      ),
+    );
+
+    return res;
+  }
+
+  doesIntersectCircle(x: number, y: number, r: number) {
+    const v = new Vector(x, y);
+    const samples = 25;
+    const resolution = 1 / samples;
+
+    let distance = Infinity;
+    let t;
+
+    for (let i = 0; i < samples - 1; i++) {
+      const a = this.getPointAtT(i * resolution);
+      const b = this.getPointAtT((i + 1) * resolution);
+      const ac = Vector.sub(v, a);
+      const ab = Vector.sub(b, a);
+
+      const d = Vector.add(Vector.vectorProjection(ac, ab), a);
+      const ad = Vector.sub(d, a);
+
+      const k = Math.abs(ab.x) > Math.abs(ab.y) ? ad.x / ab.x : ad.y / ab.y;
+
+      let dist;
+      if (k <= 0.0) {
+        dist = Vector.hypot2(v, a);
+      } else if (k >= 1.0) {
+        dist = Vector.hypot2(v, b);
+      }
+
+      dist = Vector.hypot2(v, d);
+
+      if (dist < distance) {
+        distance = dist;
+        t = i * resolution;
+      }
+    }
+
+    if (distance < r) return t;
+
+    return false;
+  }
+
+  intersectsCircle(circleCenter: Point, radius: number): boolean {
+    const numSegments = 100; // Initial number of segments
+    const minResolution = 10; // Minimum resolution to ensure accuracy
+
+    for (let i = 0; i < numSegments; i++) {
+      const t1 = i / numSegments;
+      const t2 = (i + 1) / numSegments;
+
+      const segmentStart = this.getPointAtT(t1);
+      const segmentEnd = this.getPointAtT(t2);
+
+      const segmentLength = Math.sqrt(
+        (segmentEnd.x - segmentStart.x) ** 2 +
+          (segmentEnd.y - segmentStart.y) ** 2,
+      );
+
+      // Dynamically adjust resolution based on segment length
+      const resolution = Math.max(
+        minResolution,
+        Math.ceil(numSegments * (segmentLength / radius)),
+      );
+
+      for (let j = 0; j <= resolution; j++) {
+        const t = j / resolution;
+        const point = this.getPointAtT(t);
+        const distance = Math.sqrt(
+          (point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2,
+        );
+
+        if (distance <= radius) {
+          return true; // Intersection detected
+        }
+      }
+    }
+
+    return false; // No intersection found
+  }
+
+  calculateApproxLength(resolution = 25) {
+    const stepSize = 1 / resolution;
+    const points: Vector[] = [];
+    for (let i = 0; i <= resolution; i++) {
+      const current = stepSize * i;
+      points.push(this.getPointAtT(current));
+    }
+    this.length =
+      points.reduce((acc: { prev?: Vector; length: number }, cur) => {
+        const prev = acc.prev;
+        acc.prev = cur;
+        if (!prev) return acc;
+        acc.length += cur.dist(prev);
+        return acc;
+      }, { prev: undefined, length: 0 }).length;
+    return this.length;
+  }
+
+  calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
+    const points: Vector[] = [];
+
+    points.push(this.points[0]);
+    let prev = points[0];
+    let distSinceLastEvenPoint = 0;
+
+    let t = 0;
+
+    const div = Math.ceil(this.length * resolution * 10);
+    while (t < 1) {
+      t += 1 / div;
+      const point = this.getPointAtT(t);
+      distSinceLastEvenPoint += prev.dist(point);
+
+      if (distSinceLastEvenPoint >= spacing) {
+        const overshoot = distSinceLastEvenPoint - spacing;
+        const evenPoint = Vector.add(
+          point,
+          Vector.sub(point, prev).normalize().mult(overshoot),
+        );
+        distSinceLastEvenPoint = overshoot;
+        points.push(evenPoint);
+        prev = evenPoint;
+      }
+
+      prev = point;
+    }
+
+    return points;
+  }
+
+  private _aabb?: axisAlignedBoundingBox;
+  get AABB() {
+    if (!this._aabb) {
+      this._aabb = this.recalculateAABB();
+    }
+    return this._aabb;
+  }
+  recalculateAABB(): axisAlignedBoundingBox {
+    const numPoints = 100; // You can adjust the number of points based on your needs
+
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    for (let i = 0; i < numPoints; i++) {
+      const t = i / numPoints;
+      const point = this.getPointAtT(t);
+
+      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 { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+  }
+}

geometry/vector.ts

@@ -7,10 +7,19 @@ export class Vector implements Point {
   y: number;
   z: number;
 
-  constructor(x = 0, y = 0, z = 0) {
+  constructor();
+  constructor(p: Point);
+  constructor(x: number, y: number, z?: number);
+  constructor(x: number | Point = 0, y = 0, z = 0) {
+    if (typeof x === "number") {
       this.x = x;
       this.y = y;
       this.z = z;
+    } else {
+      this.x = x.x;
+      this.y = x.y || y;
+      this.z = x.z || z;
+    }
   }
 
   set(x: number, y: number, z?: number): void;
@@ -18,9 +27,11 @@ export class Vector implements Point {
   set(v: [number, number, number]): void;
   set(v: Vector | [number, number, number] | number, y?: number, z?: number) {
     if (arguments.length === 1 && typeof v !== "number") {
-      this.set((v as Vector).x || (v as Array<number>)[0] || 0,
+      this.set(
+        (v as Vector).x || (v as Array<number>)[0] || 0,
         (v as Vector).y || (v as Array<number>)[1] || 0,
-        (v as Vector).z || (v as Array<number>)[2] || 0);
+        (v as Vector).z || (v as Array<number>)[2] || 0,
+      );
     } else {
       this.x = v as number;
       this.y = y || 0;
@@ -43,7 +54,7 @@ export class Vector implements Point {
     return (x * x + y * y + z * z);
   }
   setMag(len: number): void;
-  setMag(v: Vector, len: number): Vector
+  setMag(v: Vector, len: number): Vector;
   setMag(v_or_len: Vector | number, len?: number) {
     if (len === undefined) {
       len = v_or_len as number;
@@ -60,7 +71,7 @@ export class Vector implements Point {
   add(x: number, y: number): Vector;
   add(v: Vector): Vector;
   add(v: Vector | number, y?: number, z?: number) {
-    if (arguments.length === 1 && typeof v !== 'number') {
+    if (arguments.length === 1 && typeof v !== "number") {
       this.x += v.x;
       this.y += v.y;
       this.z += v.z;
@@ -78,11 +89,12 @@ export class Vector implements Point {
   sub(x: number, y: number, z: number): Vector;
   sub(x: number, y: number): Vector;
   sub(v: Vector): Vector;
-  sub(v: Vector | number, y?: number, z?: number) {
+  sub(v: Point): Vector;
-    if (arguments.length === 1 && typeof v !== 'number') {
+  sub(v: Vector | Point | number, y?: number, z?: number) {
+    if (arguments.length === 1 && typeof v !== "number") {
       this.x -= v.x;
       this.y -= v.y;
-      this.z -= v.z;
+      this.z -= v.z || 0;
     } else if (arguments.length === 2) {
       // 2D Vector
       this.x -= v as number;
@@ -95,7 +107,7 @@ export class Vector implements Point {
     return this;
   }
   mult(v: number | Vector) {
-    if (typeof v === 'number') {
+    if (typeof v === "number") {
       this.x *= v;
       this.y *= v;
       this.z *= v;
@@ -107,7 +119,7 @@ export class Vector implements Point {
     return this;
   }
   div(v: number | Vector) {
-    if (typeof v === 'number') {
+    if (typeof v === "number") {
       this.x /= v;
       this.y /= v;
       this.z /= v;
@@ -126,27 +138,25 @@ export class Vector implements Point {
     this.y = s * prev_x + c * this.y;
     return this;
   }
-  dist(v: Vector) {
+  dist(v: Vector | Point) {
     const dx = this.x - v.x,
       dy = this.y - v.y,
-      dz = this.z - v.z;
+      dz = this.z - (v.z || 0);
     return Math.sqrt(dx * dx + dy * dy + dz * dz);
   }
   dot(x: number, y: number, z: number): number;
   dot(v: Vector): number;
   dot(v: Vector | number, y?: number, z?: number) {
-    if (arguments.length === 1 && typeof v !== 'number') {
+    if (arguments.length === 1 && typeof v !== "number") {
-      return (this.x * v.x + this.y * v.y + this.z * v.z);
+      return (this.x * v.x) + (this.y * v.y) + (this.z * v.z);
     }
-    return (this.x * (v as number) + this.y * y! + this.z * z!);
+    return (this.x * (v as number)) + (this.y * y!) + (this.z * z!);
   }
   cross(v: Vector) {
     const x = this.x,
       y = this.y,
       z = this.z;
-    return new Vector(y * v.z - v.y * z,
+    return new Vector(y * v.z - v.y * z, z * v.x - v.z * x, x * v.y - v.x * y);
-      z * v.x - v.z * x,
-      x * v.y - v.x * y);
   }
   lerp(x: number, y: number, z: number): void;
   lerp(v: Vector, amt: number): void;
@@ -155,7 +165,7 @@ export class Vector implements Point {
       return start + (stop - start) * amt;
     };
     let x, y: number;
-    if (arguments.length === 2 && typeof v_or_x !== 'number') {
+    if (arguments.length === 2 && typeof v_or_x !== "number") {
       // given vector and amt
       amt = amt_or_y;
       x = v_or_x.x;
@@ -202,10 +212,30 @@ export class Vector implements Point {
     return new Vector(this.x, this.y, this.z);
   }
 
-  drawDot() {
+  drawDot(color?: string) {
     if (!doodler) return;
 
-    doodler.dot(this, {weight: 2, color: 'red'});
+    doodler.dot(this, { weight: 2, color: color || "red" });
+  }
+
+  draw(origin?: Point) {
+    if (!doodler) return;
+
+    const startPoint = origin ? new Vector(origin) : new Vector();
+    doodler.line(
+      startPoint,
+      startPoint.copy().add(this.copy().normalize().mult(100)),
+    );
+  }
+
+  normal(): Vector;
+  normal(v: Vector): Vector;
+  normal(v?: Vector) {
+    if (!v) return new Vector(-this.y, this.x);
+    const dx = v.x - this.x;
+    const dy = v.y - this.y;
+
+    return new Vector(-dy, dx);
   }
 
   static fromAngle(angle: number, v?: Vector) {
@@ -261,9 +291,9 @@ export class Vector implements Point {
 
   static lerp(v1: Vector, v2: Vector, amt: number) {
     // non-static lerp mutates object, but this version returns a new vector
-    const retval = new Vector(v1.x, v1.y, v1.z);
+    const val = new Vector(v1.x, v1.y, v1.z);
-    retval.lerp(v2, amt);
+    val.lerp(v2, amt);
-    return retval;
+    return val;
   }
 
   static vectorProjection(v1: Vector, v2: Vector) {
@@ -273,9 +303,16 @@ export class Vector implements Point {
     v2.mult(sp);
     return v2;
   }
+  static vectorProjectionAndDot(v1: Vector, v2: Vector): [Vector, number] {
+    v2 = v2.copy();
+    v2.normalize();
+    const sp = v1.dot(v2);
+    v2.mult(sp);
+    return [v2, sp];
+  }
 
   static hypot2(a: Vector, b: Vector) {
-    return Vector.dot(Vector.sub(a, b), Vector.sub(a, b))
+    return Vector.dot(Vector.sub(a, b), Vector.sub(a, b));
   }
 }
 
@@ -284,9 +321,9 @@ export class OriginVector extends Vector {
 
   get halfwayPoint() {
     return {
-      x: (this.mag()/2 * Math.sin(this.heading())) + this.origin.x,
+      x: (this.mag() / 2 * Math.sin(this.heading())) + this.origin.x,
-      y: (this.mag()/2 * Math.cos(this.heading())) + this.origin.y
+      y: (this.mag() / 2 * Math.cos(this.heading())) + this.origin.y,
-    }
+    };
   }
 
   constructor(origin: Point, p: Point) {

main.ts

@@ -5,19 +5,30 @@ import { SpriteAnimation } from "./animation/sprite.ts";
 import { initializeDoodler, Vector } from "./mod.ts";
 import { handleGIF } from "./processing/gif.ts";
 import { ZoomableDoodler } from "./zoomableCanvas.ts";
+import { axisAlignedCollision, axisAlignedContains } from "./collision/aa.ts";
+import { circularCollision } from "./collision/circular.ts";
+import { satCollisionSpline } from "./collision/sat.ts";
+import { Polygon } from "./geometry/polygon.ts";
+import { SplineSegment } from "./geometry/spline.ts";
+// import { ZoomableDoodler } from "./zoomableCanvas.ts";
 
 initializeDoodler(
   {
-    width: 400,
+    width: 2400,
-    height: 400,
+    height: 1200,
-    framerate: 90,
+    bg: "#333",
   },
   true,
   (ctx) => {
     ctx.imageSmoothingEnabled = false;
+    // ctx.translate(1200, 600);
   },
 );
 
+// const movingVector = new Vector(100, 300);
+// let angleMultiplier = 0;
+// const v = new Vector(30, 30);
+// doodler.registerDraggable(v, 20);
 const img = new Image();
 img.src = "./pixel fire.gif";
 
@@ -29,4 +40,151 @@ doodler.createLayer((c, i, t) => {
   // c.drawImage(img, 0, 0);
 });
 
-requestAnimationFrame;
+const spline = new SplineSegment([
+  new Vector({ x: -25, y: -25 }).mult(10).add(p),
+  new Vector({ x: 25, y: -25 }).mult(10).add(p),
+  new Vector({ x: -25, y: -25 }).mult(10).add(p),
+  new Vector({ x: -25, y: 25 }).mult(10).add(p),
+]);
+// poly.center = p.copy();
+
+const poly2 = Polygon.createPolygon(4);
+
+poly2.center = p.copy().add(100, 100);
+// poly.center.add(p);
+
+doodler.createLayer((c) => {
+  // c.translate(1200, 600);
+  for (let i = 0; i < c.canvas.width; i += 50) {
+    for (let j = 0; j < c.canvas.height; j += 50) {
+      doodler.drawSquare(new Vector(i, j), 50, { color: "#00000010" });
+    }
+  }
+  const cir = poly2.circularHitbox;
+  // const t = spline.getPointsWithinRadius(
+  //   new Vector(cir.center),
+  //   cir.radius,
+  // ).map((t) => t[0]);
+  const intersects = satCollisionSpline(poly2, spline);
+  const color = intersects ? "red" : "aqua";
+
+  // const point = spline.getPointAtT(t || 0);
+  // point.drawDot("pink");
+
+  // console.log(satCollision(
+  // ));
+
+  // for (let i = 0; i < 10; i++) {
+  // for (const i of t) {
+  //   // const tan = spline.tangent(i / 10);
+  //   const point = spline.getPointAtT(i);
+  //   point.drawDot();
+  // }
+
+  spline.draw(color);
+
+  poly2.draw(color);
+
+  // poly2.center.add(Vector.random2D());
+  const [gamepad] = navigator.getGamepads();
+  const deadzone = 0.05;
+  if (gamepad) {
+    const leftX = gamepad.axes[0];
+    const leftY = gamepad.axes[1];
+    const rightX = gamepad.axes[2];
+    const rightY = gamepad.axes[3];
+
+    // if (axisAlignedContains(poly2.aaHitbox, poly.aaHitbox)) {
+    //   poly.center.add(
+    //     new Vector(
+    //       Math.min(Math.max(rightX - deadzone, 0), rightX + deadzone),
+    //       Math.min(Math.max(rightY - deadzone, 0), rightY + deadzone),
+    //     ).mult(10),
+    //   );
+    //   poly2.center.add(
+    //     new Vector(
+    //       Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
+    //       Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
+    //     ).mult(10),
+    //   );
+    // }
+
+    // poly.center.add(
+    //   new Vector(
+    //     Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
+    //     Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
+    //   ).mult(10),
+    // );
+    let mMulti = 10;
+    const mod = new Vector(
+      Math.min(Math.max(rightX - deadzone, 0), rightX + deadzone),
+      Math.min(Math.max(rightY - deadzone, 0), rightY + deadzone),
+    );
+    // let future = new Vector(cir.center).add(mod.copy().mult(mMulti--));
+    // while (spline.intersectsCircle(future, cir.radius)) {
+    //   // if (mMulti === 0) {
+    //   //   mMulti = 1;
+    //   //   break;
+    //   // }
+    //   future = new Vector(cir.center).add(mod.copy().mult(mMulti--));
+    // }
+    poly2.center.add(
+      mod.mult(mMulti),
+    );
+
+    // (doodler as ZoomableDoodler).moveOrigin({ x: -rigthX * 5, y: -rigthY * 5 });
+
+    // if (gamepad.buttons[7].value) {
+    //   (doodler as ZoomableDoodler).scaleAt(
+    //     { x: 200, y: 200 },
+    //     1 + (gamepad.buttons[7].value / 5),
+    //   );
+    // }
+    // if (gamepad.buttons[6].value) {
+    //   (doodler as ZoomableDoodler).scaleAt(
+    //     { x: 200, y: 200 },
+    //     1 - (gamepad.buttons[6].value / 5),
+    //   );
+    // }
+  }
+  // doodler.drawImageWithOutline(img, p);
+  // doodler.line(new Vector(100, 100), new Vector(200, 200))
+  // doodler.dot(new Vector(300, 300))
+  // doodler.fillCircle(movingVector, 6, { color: 'red' });
+  // doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
+  // doodler.fillRect(new Vector(200, 250), 30, 10)
+
+  // doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
+  // doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
+
+  // let rotatedOrigin = new Vector(200, 200)
+  // doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
+  //   doodler.drawCenteredSquare(rotatedOrigin, 30)
+  //   doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
+  // })
+
+  // movingVector.set((movingVector.x + 1) % 400, movingVector.y);
+  // angleMultiplier += .001;
+
+  // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
+
+  // doodler.drawScaled(1.5, () => {
+  //   doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
+  //     color: "grey",
+  //     weight: 2,
+  //   });
+  //   doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
+  //     color: "grey",
+  //     weight: 2,
+  //   });
+  //   doodler.line(p, p.copy().add(0, 12), { color: "brown", weight: 4 });
+  //   doodler.line(p, p.copy().add(0, -12), { color: "brown", weight: 4 });
+  // });
+});
+
+// document.addEventListener("keyup", (e) => {
+//   e.preventDefault();
+//   if (e.key === " ") {
+//     doodler.unregisterDraggable(v);
+//   }
+// });

zoomableCanvas.ts

@@ -54,7 +54,7 @@ export class ZoomableDoodler extends Doodler {
       e.preventDefault();
       this.dragging = false;
     });
-    this._canvas.addEventListener("mouseleave", (e) => {
+    this._canvas.addEventListener("mouseleave", (_e) => {
       this.dragging = false;
     });
     this._canvas.addEventListener("mousemove", (e) => {