From ea311a178725de72552f2d9e764decf637e3367e Mon Sep 17 00:00:00 2001 From: Emma Date: Sun, 5 Nov 2023 01:21:01 -0700 Subject: [PATCH] improved init function --- bundle.js | 26 ++++++++++++------------ canvas.ts | 34 +------------------------------- collision/sat.ts | 16 ++++++++------- init.ts | 50 +++++++++++++++++++++++++++++++++++++++++++++++ main.ts | 5 ++++- mod.ts | 4 ++-- postInit.ts | 1 - zoomableCanvas.ts | 6 +++--- 8 files changed, 83 insertions(+), 59 deletions(-) create mode 100644 init.ts delete mode 100644 postInit.ts diff --git a/bundle.js b/bundle.js index ab9d6db..f830bc4 100644 --- a/bundle.js +++ b/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, { diff --git a/canvas.ts b/canvas.ts index d490f26..c2c77f5 100644 --- a/canvas.ts +++ b/canvas.ts @@ -2,39 +2,7 @@ import { Constants } from "./geometry/constants.ts"; import { Vector } from "./geometry/vector.ts"; -import { postInit } from "./postInit.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; +import { DoodlerOptions, postInit } from "./init.ts"; type layer = ( ctx: CanvasRenderingContext2D, diff --git a/collision/sat.ts b/collision/sat.ts index 5c16d9b..df6e6ba 100644 --- a/collision/sat.ts +++ b/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( diff --git a/init.ts b/init.ts new file mode 100644 index 0000000..9d17ca1 --- /dev/null +++ b/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; diff --git a/main.ts b/main.ts index 1a8f41c..f2097ba 100644 --- a/main.ts +++ b/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" }); diff --git a/mod.ts b/mod.ts index dc8291d..51444e0 100644 --- a/mod.ts +++ b/mod.ts @@ -1,5 +1,5 @@ /// -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"; diff --git a/postInit.ts b/postInit.ts deleted file mode 100644 index 21908de..0000000 --- a/postInit.ts +++ /dev/null @@ -1 +0,0 @@ -export type postInit = (ctx: CanvasRenderingContext2D) => void; diff --git a/zoomableCanvas.ts b/zoomableCanvas.ts index b69346e..e109ddf 100644 --- a/zoomableCanvas.ts +++ b/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) => {