improved init function

bundle.js

@@ -684,8 +684,6 @@ 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;
-const map = (value, x1, y1, x2, y2)=>(value - x1) * (y2 - x2) / (y1 - x1) + x2;
 class Doodler {
     ctx;
     _canvas;
@@ -1020,6 +1018,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;
@@ -1270,13 +1270,13 @@ 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();
-};
+}
 class Polygon {
     points;
     center;
@@ -1374,18 +1374,18 @@ class Polygon {
     }
 }
 function satCollisionCircle(p, circle) {
-    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().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);
+        const proj2 = projectCircleOntoAxis(circle, axis);
+        if (!overlap(proj1, proj2)) return false;
+    }
     return true;
 }
 function projectPolygonOntoAxis(p, axis) {
@@ -1593,7 +1593,9 @@ class SplineSegment {
 }
 init({
     fillScreen: true,
-    bg: "#333"
+    bg: "#333",
+    minScale: 1,
+    maxScale: 10
 }, true, (ctx)=>{
     ctx.imageSmoothingEnabled = false;
 });
@@ -1622,9 +1624,9 @@ const spline = new SplineSegment([
 ]);
 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)=>{
-    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, {

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,

collision/sat.ts

@@ -40,13 +40,6 @@ export function satCollisionPolygon(poly: Polygon, poly2: Polygon): boolean {
   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().sub(center).normalize();
@@ -54,6 +47,15 @@ export function satCollisionCircle(p: Polygon, circle: CircleLike): boolean {
   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;
+  }
+
   return true;
 }
 export function satCollisionAABBCircle(

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

@@ -22,6 +22,8 @@ initializeDoodler(
     fillScreen: true,
     // height: 1200,
     bg: "#333",
+    minScale: 1,
+    maxScale: 10,
   },
   true,
   (ctx) => {
@@ -52,12 +54,13 @@ const spline = new SplineSegment([
 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);
-  c.translate(500, 500);
+  // 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" });

mod.ts

@@ -1,5 +1,5 @@
 /// <reference types="./global.d.ts" />
 
-export { init as initializeDoodler } from './canvas.ts';
+export { init as initializeDoodler } from "./init.ts";
 
-export { Vector } from './geometry/vector.ts';
+export { Vector } from "./geometry/vector.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";
 
@@ -30,7 +30,7 @@ export class ZoomableDoodler extends Doodler {
   maxScale = 4;
   minScale = 1;
 
-  constructor(options: DoodlerOptions, postInit?: postInit) {
+  constructor(options: ZoomableDoodlerOptions, postInit?: postInit) {
     super(options, postInit);
 
     this._canvas.addEventListener("wheel", (e) => {