module exports

bundle.js

@@ -684,8 +684,184 @@ class OriginVector extends Vector {
         return new OriginVector(origin, v);
     }
 }
-const easeInOut = (x)=>x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+class SplineSegment {
-const map = (value, x1, y1, x2, y2)=>(value - x1) * (y2 - x2) / (y1 - x1) + x2;
+    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
+        };
+    }
+}
 class Doodler {
     ctx;
     _canvas;
@@ -707,7 +883,7 @@ class Doodler {
             document.body.append(canvas);
         }
         this.bg = bg || "white";
-        this.framerate = framerate || 60;
+        this.framerate = framerate;
         canvas.width = fillScreen ? document.body.clientWidth : width;
         canvas.height = fillScreen ? document.body.clientHeight : height;
         if (fillScreen) {
@@ -735,10 +911,17 @@ class Doodler {
     lastFrameAt = 0;
     startDrawLoop() {
         this.lastFrameAt = Date.now();
-        this.timer = setInterval(()=>this.draw(), 1000 / this.framerate);
+        if (this.framerate) {
+            this.timer = setInterval(()=>this.draw(Date.now()), 1000 / this.framerate);
+        } else {
+            const cb = (t)=>{
+                this.draw(t);
+                requestAnimationFrame(cb);
+            };
+            requestAnimationFrame(cb);
+        }
     }
-    draw() {
+    draw(time) {
-        const time = Date.now();
         const frameTime = time - this.lastFrameAt;
         this.ctx.clearRect(0, 0, this.width, this.height);
         this.ctx.fillStyle = this.bg;
@@ -1013,6 +1196,8 @@ class Doodler {
         this.uiElements.delete(id);
     }
 }
+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 ZoomableDoodler extends Doodler {
     scale = 1;
     dragging = false;
@@ -1033,6 +1218,7 @@ class ZoomableDoodler extends Doodler {
         y: 0
     };
     maxScale = 4;
+    minScale = 1;
     constructor(options, postInit){
         super(options, postInit);
         this._canvas.addEventListener("wheel", (e)=>{
@@ -1180,7 +1366,7 @@ class ZoomableDoodler extends Doodler {
         }, scaleBy);
     }
     scaleAt(p, scaleBy) {
-        this.scale = Math.min(Math.max(this.scale * scaleBy, 1), this.maxScale);
+        this.scale = Math.min(Math.max(this.scale * scaleBy, this.minScale), this.maxScale);
         this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
         this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
         this.constrainOrigin();
@@ -1205,12 +1391,12 @@ class ZoomableDoodler extends Doodler {
         this.origin.x = Math.min(Math.max(this.origin.x, -this._canvas.width * this.scale + this._canvas.width), 0);
         this.origin.y = Math.min(Math.max(this.origin.y, -this._canvas.height * this.scale + this._canvas.height), 0);
     }
-    draw() {
+    draw(time) {
         this.ctx.setTransform(this.scale, 0, 0, this.scale, this.origin.x, this.origin.y);
         this.animateZoom();
         this.ctx.fillStyle = this.bg;
         this.ctx.fillRect(0, 0, this.width / this.scale, this.height / this.scale);
-        super.draw();
+        super.draw(time);
     }
     getTouchOffset(p) {
         const { x, y } = this._canvas.getBoundingClientRect();
@@ -1262,60 +1448,12 @@ class ZoomableDoodler extends Doodler {
         events.push(cb);
     }
 }
-const init = (opt, zoomable, postInit)=>{
+function init(opt, zoomable, postInit) {
     if (window.doodler) {
         throw "Doodler has already been initialized in this window";
     }
     window.doodler = zoomable ? new ZoomableDoodler(opt, postInit) : new Doodler(opt, postInit);
     window.doodler.init();
-};
-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;
 }
 class Polygon {
     points;
@@ -1332,6 +1470,10 @@ class Polygon {
                 color
             });
         }
+        doodler.dot(this.center, {
+            weight: 4,
+            color: "yellow"
+        });
     }
     calcCenter() {
         if (!this.points.length) return new Vector();
@@ -1342,7 +1484,12 @@ class Polygon {
         center.div(this.points.length);
         return center;
     }
-    get circularHitbox() {
+    _circularBoundingBox;
+    get circularBoundingBox() {
+        this._circularBoundingBox = this.calculateCircularBoundingBox();
+        return this._circularBoundingBox;
+    }
+    calculateCircularBoundingBox() {
         let greatestDistance = 0;
         for (const p of this.points){
             greatestDistance = Math.max(p.copy().add(this.center).dist(this.center), greatestDistance);
@@ -1354,9 +1501,7 @@ class Polygon {
     }
     _aabb;
     get AABB() {
-        if (!this._aabb) {
+        this._aabb = this.recalculateAABB();
-            this._aabb = this.recalculateAABB();
-        }
         return this._aabb;
     }
     recalculateAABB() {
@@ -1371,8 +1516,8 @@ class Polygon {
             biggestY = Math.max(temp.y, biggestY);
         }
         return {
-            x: smallestX,
+            x: smallestX + this.center.x,
-            y: smallestY,
+            y: smallestY + this.center.y,
             w: biggestX - smallestX,
             h: biggestY - smallestY
         };
@@ -1391,6 +1536,9 @@ class Polygon {
             poly.points.push(pt);
         }
         poly.center = poly.calcCenter();
+        for (const p of poly.points){
+            p.sub(poly.center);
+        }
         return poly;
     }
     getEdges() {
@@ -1407,197 +1555,62 @@ class Polygon {
         for (const point of this.points){
             if (p.dist(point) < p.dist(nearest)) nearest = point;
         }
-        return nearest;
+        return nearest.copy().add(this.center);
     }
 }
-class SplineSegment {
+function satCollisionCircle(p, circle) {
-    points;
+    const center = new Vector(circle.center);
-    length;
+    const nearest = p.getNearestPoint(center);
-    constructor(points){
+    const axis = nearest.copy().sub(center).normalize();
-        this.points = points;
+    const proj1 = projectPolygonOntoAxis(p, axis);
-        this.length = this.calculateApproxLength(100);
+    const proj2 = projectCircleOntoAxis(circle, axis);
+    if (!overlap(proj1, proj2)) return false;
+    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;
     }
-    draw(color) {
+    return true;
-        const [a, b, c, d] = this.points;
+}
-        doodler.drawBezier(a, b, c, d, {
+function projectPolygonOntoAxis(p, axis) {
-            strokeColor: color || "#ffffff50"
+    let min = Infinity;
-        });
+    let max = -Infinity;
-    }
+    for (const point of p.points){
-    getPointAtT(t) {
+        const dotProduct = point.copy().add(p.center).dot(axis);
-        const [a, b, c, d] = this.points;
+        min = Math.min(min, dotProduct);
-        const res = a.copy();
+        max = Math.max(max, dotProduct);
-        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
-        };
     }
+    return {
+        min,
+        max
+    };
+}
+function projectCircleOntoAxis(c, axis) {
+    const dot = new Vector(c.center).dot(axis);
+    const min = dot - c.radius;
+    const max = dot + c.radius;
+    return {
+        min,
+        max
+    };
+}
+function overlap(proj1, proj2) {
+    return proj1.min <= proj2.max && proj1.max >= proj2.min;
 }
 init({
     fillScreen: true,
-    bg: "#333"
+    bg: "#333",
+    minScale: 1,
+    maxScale: 10
 }, true, (ctx)=>{
     ctx.imageSmoothingEnabled = false;
 });
+doodler.minScale = .1;
 const img = new Image();
 img.src = "./pixel fire.gif";
-const p = new Vector();
+const p = new Vector(500, 500);
-const gif = new GIFAnimation("./fire-joypixels.gif", p, .5);
+new GIFAnimation("./fire-joypixels.gif", p, .5);
 const spline = new SplineSegment([
     new Vector({
         x: -25,
@@ -1616,10 +1629,11 @@ const spline = new SplineSegment([
         y: 25
     }).mult(10).add(p)
 ]);
+const poly = Polygon.createPolygon(4);
 const poly2 = Polygon.createPolygon(4);
+poly.center = p.copy().add(400, 400);
 poly2.center = p.copy().add(100, 100);
 doodler.createLayer((c, i, t)=>{
-    gif.draw(t);
     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, {
@@ -1627,19 +1641,22 @@ doodler.createLayer((c, i, t)=>{
             });
         }
     }
-    poly2.circularHitbox;
+    const intersects = satCollisionCircle(poly, poly2.circularBoundingBox);
-    const intersects = satCollisionSpline(poly2, spline);
     const color = intersects ? "red" : "aqua";
     spline.draw(color);
+    poly.draw(color);
     poly2.draw(color);
     const [gamepad] = navigator.getGamepads();
     if (gamepad) {
-        gamepad.axes[0];
+        const leftX = gamepad.axes[0];
-        gamepad.axes[1];
+        const leftY = gamepad.axes[1];
         const rightX = gamepad.axes[2];
         const rightY = gamepad.axes[3];
-        let mMulti = 10;
+        let lMulti = 10;
-        const mod = new Vector(Math.min(Math.max(rightX - 0.05, 0), rightX + 0.05), Math.min(Math.max(rightY - 0.05, 0), rightY + 0.05));
+        const lMod = new Vector(Math.min(Math.max(leftX - 0.05, 0), leftX + 0.05), Math.min(Math.max(leftY - 0.05, 0), leftY + 0.05));
-        poly2.center.add(mod.mult(mMulti));
+        poly.center.add(lMod.mult(lMulti));
+        let rMulti = 10;
+        const rMod = new Vector(Math.min(Math.max(rightX - 0.05, 0), rightX + 0.05), Math.min(Math.max(rightY - 0.05, 0), rightY + 0.05));
+        poly2.center.add(rMod.mult(rMulti));
     }
 });

canvas.ts

@@ -2,39 +2,7 @@
 
 import { Constants } from "./geometry/constants.ts";
 import { Vector } from "./geometry/vector.ts";
-import { postInit } from "./postInit.ts";
+import { DoodlerOptions, postInit } from "./init.ts";
-import { ZoomableDoodler } from "./zoomableCanvas.ts";
-
-export const init = (
-  opt: DoodlerOptions,
-  zoomable: boolean,
-  postInit?: postInit,
-) => {
-  if (window.doodler) {
-    throw "Doodler has already been initialized in this window";
-  }
-  window.doodler = zoomable
-    ? new ZoomableDoodler(opt, postInit)
-    : new Doodler(opt, postInit);
-  window.doodler.init();
-};
-
-type DoodlerOptionalOptions = {
-  canvas?: HTMLCanvasElement;
-  bg?: string;
-  framerate?: number;
-};
-
-type DoodlerRequiredOptions = {
-  width: number;
-  height: number;
-  fillScreen?: false;
-} | {
-  width?: 0;
-  height?: 0;
-  fillScreen: true;
-};
-export type DoodlerOptions = DoodlerOptionalOptions & DoodlerRequiredOptions;
 
 type layer = (
   ctx: CanvasRenderingContext2D,
@@ -49,7 +17,7 @@ export class Doodler {
   private layers: layer[] = [];
 
   protected bg: string;
-  private framerate: number;
+  private framerate?: number;
 
   get width() {
     return this.ctx.canvas.width;
@@ -77,7 +45,7 @@ export class Doodler {
     }
 
     this.bg = bg || "white";
-    this.framerate = framerate || 60;
+    this.framerate = framerate;
 
     canvas.width = fillScreen ? document.body.clientWidth : width;
     canvas.height = fillScreen ? document.body.clientHeight : height;
@@ -113,11 +81,21 @@ export class Doodler {
   private lastFrameAt = 0;
   private startDrawLoop() {
     this.lastFrameAt = Date.now();
-    this.timer = setInterval(() => this.draw(), 1000 / this.framerate);
+    if (this.framerate) {
+      this.timer = setInterval(
+        () => this.draw(Date.now()),
+        1000 / this.framerate,
+      );
+    } else {
+      const cb = (t: number) => {
+        this.draw(t);
+        requestAnimationFrame(cb);
+      };
+      requestAnimationFrame(cb);
+    }
   }
 
-  protected draw() {
+  protected draw(time: number) {
-    const time = Date.now();
     const frameTime = time - this.lastFrameAt;
     this.ctx.clearRect(0, 0, this.width, this.height);
     this.ctx.fillStyle = this.bg;
@@ -254,6 +232,13 @@ export class Doodler {
       : this.ctx.drawImage(img, at.x, at.y);
   }
 
+  /**
+   * @description This method is VERY expensive and should be used sparingly - O(n^2) where n is weight. Beyond that, it doesn't work with transparency correctly since the image is overlaid multiple times in drawing and the resulting transparency is dependent on the weight provided
+   *
+   * @param img
+   * @param at
+   * @param style
+   */
   drawImageWithOutline(img: HTMLImageElement, at: Vector, style?: IStyle): void;
   drawImageWithOutline(
     img: HTMLImageElement,

collision/sat.ts

@@ -1,6 +1,7 @@
 import { Polygon } from "../geometry/polygon.ts";
 import { SplineSegment } from "../geometry/spline.ts";
 import { Vector } from "../geometry/vector.ts";
+import { axisAlignedBoundingBox } from "./aa.ts";
 import { CircleLike } from "./circular.ts";
 
 export function satCollisionSpline(p: Polygon, spline: SplineSegment): boolean {
@@ -39,6 +40,14 @@ export function satCollisionPolygon(poly: Polygon, poly2: Polygon): boolean {
   return true;
 }
 export function satCollisionCircle(p: Polygon, circle: CircleLike): boolean {
+  const center = new Vector(circle.center);
+  const nearest = p.getNearestPoint(center);
+  const axis = nearest.copy().sub(center).normalize();
+  const proj1 = projectPolygonOntoAxis(p, axis);
+  const proj2 = projectCircleOntoAxis(circle, axis);
+
+  if (!overlap(proj1, proj2)) return false;
+
   for (const edge of p.getEdges()) {
     const axis = edge.copy().normal().normalize();
     const proj1 = projectPolygonOntoAxis(p, axis);
@@ -46,15 +55,21 @@ export function satCollisionCircle(p: Polygon, circle: CircleLike): boolean {
 
     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;
 }
+export function satCollisionAABBCircle(
+  aabb: axisAlignedBoundingBox,
+  circle: CircleLike,
+): boolean {
+  const p = new Polygon([
+    { x: aabb.x, y: aabb.y },
+    { x: aabb.x + aabb.w, y: aabb.y },
+    { x: aabb.x + aabb.w, y: aabb.y + aabb.h },
+    { x: aabb.x, y: aabb.y + aabb.h },
+  ]);
+  return satCollisionCircle(p, circle);
+}
 
 function segmentIntersectsPolygon(
   p: Polygon,

geometry/polygon.ts

@@ -20,6 +20,8 @@ export class Polygon {
         color,
       });
     }
+
+    doodler.dot(this.center, { weight: 4, color: "yellow" });
   }
 
   calcCenter() {
@@ -33,7 +35,14 @@ export class Polygon {
     return center;
   }
 
-  get circularHitbox(): CircleLike {
+  _circularBoundingBox?: CircleLike;
+
+  get circularBoundingBox(): CircleLike {
+    this._circularBoundingBox = this.calculateCircularBoundingBox();
+    return this._circularBoundingBox;
+  }
+
+  private calculateCircularBoundingBox() {
     let greatestDistance = 0;
     for (const p of this.points) {
       greatestDistance = Math.max(
@@ -50,13 +59,11 @@ export class Polygon {
 
   _aabb?: axisAlignedBoundingBox;
   get AABB(): axisAlignedBoundingBox {
-    if (!this._aabb) {
+    this._aabb = this.recalculateAABB();
-      this._aabb = this.recalculateAABB();
-    }
     return this._aabb;
   }
 
-  recalculateAABB(): axisAlignedBoundingBox {
+  private recalculateAABB(): axisAlignedBoundingBox {
     let smallestX, biggestX, smallestY, biggestY;
     smallestX =
       smallestY =
@@ -74,8 +81,8 @@ export class Polygon {
     }
 
     return {
-      x: smallestX,
+      x: smallestX + this.center.x,
-      y: smallestY,
+      y: smallestY + this.center.y,
       w: biggestX - smallestX,
       h: biggestY - smallestY,
     };
@@ -98,6 +105,9 @@ export class Polygon {
       poly.points.push(pt);
     }
     poly.center = poly.calcCenter();
+    for (const p of poly.points) {
+      p.sub(poly.center);
+    }
     return poly;
   }
 
@@ -118,6 +128,6 @@ export class Polygon {
     for (const point of this.points) {
       if (p.dist(point) < p.dist(nearest)) nearest = point;
     }
-    return nearest;
+    return nearest.copy().add(this.center);
   }
 }

index.html

@@ -8,7 +8,7 @@
   <title>Doodler</title>
   <style>
     * {
-      image-rendering: pixelated;
+      /* image-rendering: pixelated; */
       margin: 0;
     }
 

init.ts

@@ -0,0 +1,50 @@
+import { Doodler } from "./canvas.ts";
+import { ZoomableDoodler } from "./zoomableCanvas.ts";
+
+export type postInit = (ctx: CanvasRenderingContext2D) => void;
+
+export function init(
+  opt: ZoomableDoodlerOptions,
+  zoomable: true,
+  postInit?: postInit,
+): void;
+export function init(
+  opt: DoodlerOptions,
+  zoomable: false,
+  postInit?: postInit,
+): void;
+export function init(
+  opt: DoodlerOptions | ZoomableDoodlerOptions,
+  zoomable: boolean,
+  postInit?: postInit,
+) {
+  if (window.doodler) {
+    throw "Doodler has already been initialized in this window";
+  }
+  window.doodler = zoomable
+    ? new ZoomableDoodler(opt, postInit)
+    : new Doodler(opt, postInit);
+  window.doodler.init();
+}
+
+type DoodlerOptionalOptions = {
+  canvas?: HTMLCanvasElement;
+  bg?: string;
+  framerate?: number;
+};
+
+type DoodlerRequiredOptions = {
+  width: number;
+  height: number;
+  fillScreen?: false;
+} | {
+  width?: 0;
+  height?: 0;
+  fillScreen: true;
+};
+
+export type ZoomableDoodlerOptions = {
+  minScale?: number;
+  maxScale?: number;
+} & DoodlerOptions;
+export type DoodlerOptions = DoodlerOptionalOptions & DoodlerRequiredOptions;

main.ts

@@ -7,7 +7,11 @@ 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 {
+  satCollisionAABBCircle,
+  satCollisionCircle,
+  satCollisionSpline,
+} from "./collision/sat.ts";
 import { Polygon } from "./geometry/polygon.ts";
 import { SplineSegment } from "./geometry/spline.ts";
 // import { ZoomableDoodler } from "./zoomableCanvas.ts";
@@ -18,14 +22,17 @@ initializeDoodler(
     fillScreen: true,
     // height: 1200,
     bg: "#333",
+    minScale: 1,
+    maxScale: 10,
   },
   true,
   (ctx) => {
     ctx.imageSmoothingEnabled = false;
-    // ctx.translate(1200, 600);
   },
 );
 
+(doodler as ZoomableDoodler).minScale = .1;
+
 // const movingVector = new Vector(100, 300);
 // let angleMultiplier = 0;
 // const v = new Vector(30, 30);
@@ -33,7 +40,7 @@ initializeDoodler(
 const img = new Image();
 img.src = "./pixel fire.gif";
 
-const p = new Vector();
+const p = new Vector(500, 500);
 const gif = new GIFAnimation("./fire-joypixels.gif", p, .5);
 
 const spline = new SplineSegment([
@@ -44,25 +51,27 @@ const spline = new SplineSegment([
 ]);
 // poly.center = p.copy();
 
+const poly = Polygon.createPolygon(4);
 const poly2 = Polygon.createPolygon(4);
 
+poly.center = p.copy().add(400, 400);
 poly2.center = p.copy().add(100, 100);
 // poly.center.add(p);
 
 doodler.createLayer((c, i, t) => {
-  gif.draw(t);
+  // gif.draw(t);
-  // c.translate(1200, 600);
+  // c.translate(500, 500);
   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 cir = poly2.circularHitbox;
   // const t = spline.getPointsWithinRadius(
   //   new Vector(cir.center),
   //   cir.radius,
   // ).map((t) => t[0]);
-  const intersects = satCollisionSpline(poly2, spline);
+  const intersects = satCollisionCircle(poly, poly2.circularBoundingBox);
   const color = intersects ? "red" : "aqua";
 
   // const point = spline.getPointAtT(t || 0);
@@ -80,6 +89,7 @@ doodler.createLayer((c, i, t) => {
 
   spline.draw(color);
 
+  poly.draw(color);
   poly2.draw(color);
 
   // poly2.center.add(Vector.random2D());
@@ -112,21 +122,37 @@ doodler.createLayer((c, i, t) => {
     //     Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
     //   ).mult(10),
     // );
-    let mMulti = 10;
+    let lMulti = 10;
-    const mod = new Vector(
+    const lMod = new Vector(
+      Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
+      Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
+    );
+    // let future = new Vector(cir.center).add(mod.copy().mult(lMulti--));
+    // while (spline.intersectsCircle(future, cir.radius)) {
+    //   // if (lMulti === 0) {
+    //   //   lMulti = 1;
+    //   //   break;
+    //   // }
+    //   future = new Vector(cir.center).add(mod.copy().mult(lMulti--));
+    // }
+    poly.center.add(
+      lMod.mult(lMulti),
+    );
+    let rMulti = 10;
+    const rMod = 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--));
+    // let future = new Vector(cir.center).add(mod.copy().mult(rMulti--));
     // while (spline.intersectsCircle(future, cir.radius)) {
-    //   // if (mMulti === 0) {
+    //   // if (rMulti === 0) {
-    //   //   mMulti = 1;
+    //   //   rMulti = 1;
     //   //   break;
     //   // }
-    //   future = new Vector(cir.center).add(mod.copy().mult(mMulti--));
+    //   future = new Vector(cir.center).add(mod.copy().mult(rMulti--));
     // }
     poly2.center.add(
-      mod.mult(mMulti),
+      rMod.mult(rMulti),
     );
 
     // (doodler as ZoomableDoodler).moveOrigin({ x: -rigthX * 5, y: -rigthY * 5 });

mod.ts

@@ -1,5 +1,17 @@
 /// <reference types="./global.d.ts" />
 
-export { init as initializeDoodler } from './canvas.ts';
+export { GIFAnimation } from "./animation/gif.ts";
+export { SpriteAnimation } from "./animation/sprite.ts";
+export { axisAlignedCollision, axisAlignedContains } from "./collision/aa.ts";
+export { circularCollision } from "./collision/circular.ts";
+export {
+  satCollisionAABBCircle,
+  satCollisionCircle,
+  satCollisionPolygon,
+  satCollisionSpline,
+} from "./collision/sat.ts";
+export { Vector } from "./geometry/vector.ts";
+export { Polygon } from "./geometry/polygon.ts";
+export { SplineSegment } from "./geometry/spline.ts";
 
-export { Vector } from './geometry/vector.ts';
+export { init as initializeDoodler } from "./init.ts";

postInit.ts

@@ -1 +0,0 @@
-export type postInit = (ctx: CanvasRenderingContext2D) => void;

zoomableCanvas.ts

@@ -1,6 +1,6 @@
-import { Doodler, DoodlerOptions } from "./canvas.ts";
+import { Doodler } from "./canvas.ts";
 import { OriginVector, Point } from "./geometry/vector.ts";
-import { postInit } from "./postInit.ts";
+import { DoodlerOptions, postInit, ZoomableDoodlerOptions } from "./init.ts";
 import { easeInOut } from "./timing/EaseInOut.ts";
 import { map } from "./timing/Map.ts";
 
@@ -28,8 +28,9 @@ export class ZoomableDoodler extends Doodler {
   scaleAround: Point = { x: 0, y: 0 };
 
   maxScale = 4;
+  minScale = 1;
 
-  constructor(options: DoodlerOptions, postInit?: postInit) {
+  constructor(options: ZoomableDoodlerOptions, postInit?: postInit) {
     super(options, postInit);
 
     this._canvas.addEventListener("wheel", (e) => {
@@ -190,7 +191,10 @@ export class ZoomableDoodler extends Doodler {
     }, scaleBy);
   }
   scaleAt(p: Point, scaleBy: number) {
-    this.scale = Math.min(Math.max(this.scale * scaleBy, 1), this.maxScale);
+    this.scale = Math.min(
+      Math.max(this.scale * scaleBy, this.minScale),
+      this.maxScale,
+    );
     this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
     this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
     this.constrainOrigin();
@@ -228,7 +232,7 @@ export class ZoomableDoodler extends Doodler {
     );
   }
 
-  draw() {
+  draw(time: number) {
     this.ctx.setTransform(
       this.scale,
       0,
@@ -240,7 +244,7 @@ export class ZoomableDoodler extends Doodler {
     this.animateZoom();
     this.ctx.fillStyle = this.bg;
     this.ctx.fillRect(0, 0, this.width / this.scale, this.height / this.scale);
-    super.draw();
+    super.draw(time);
   }
 
   getTouchOffset(p: Point) {