begin work on proper framework

fixes deprecation
CARS and also better node editing
2025-02-04 16:46:35 -07:00 · 2025-02-02 23:29:40 -07:00 · 2023-02-13 16:38:58 -07:00 · 2023-02-08 11:53:11 -07:00 · 2023-02-08 01:14:13 -07:00 · 2023-02-07 22:44:24 -07:00
27 changed files with 4062 additions and 1310 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,6 @@
 {
  "deno.enable": true,
  "deno.unstable": true,
-  "deno.config": "./deno.jsonc",
  "workbench.colorCustomizations": {
    "activityBar.activeBackground": "#520088",
    "activityBar.background": "#520088",
@@ -21,5 +20,6 @@
    "titleBar.inactiveBackground": "#33005599",
    "titleBar.inactiveForeground": "#e7e7e799"
  },
-  "peacock.remoteColor": "330055"
+  "peacock.remoteColor": "330055",
+  "liveServer.settings.port": 5501
 }
--- a/bundle.js
+++ b/bundle.js
--- a/deno.json
+++ b/deno.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "deno.ns",
+      "deno.window",
+      "dom",
+      "dom.iterable",
+      "ES2021",
+      "ESNext"
+    ]
+  },
+  "tasks": {
+    "dev": "deno run -RWEN --allow-run --unstable dev.ts dev"
+  },
+  "imports": {
+    "doodler": "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/mod.ts"
+  }
+}
--- a/deno.jsonc
+++ b/deno.jsonc
@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      // "deno.window"
-      "DOM",
-      "ES2021",
-      "ESNext"
-    ]
-  },
-  "tasks": {
-    "dev": "deno bundle --watch main.ts bundle.js"
-  },
-  "imports": {
-    "drawing": "./drawing/index.ts",
-    "doodler": "https://git.cyborggrizzly.com/emma/doodler/raw/branch/main/mod.ts"
-  }
-}
--- a/deno.lock
+++ b/deno.lock
@@ -0,0 +1,197 @@
+{
+  "version": "4",
+  "specifiers": {
+    "jsr:@luca/esbuild-deno-loader@*": "0.11.0",
+    "jsr:@std/bytes@^1.0.2": "1.0.2",
+    "jsr:@std/cli@^1.0.8": "1.0.9",
+    "jsr:@std/encoding@^1.0.5": "1.0.6",
+    "jsr:@std/fmt@^1.0.3": "1.0.3",
+    "jsr:@std/html@^1.0.3": "1.0.3",
+    "jsr:@std/http@*": "1.0.12",
+    "jsr:@std/media-types@^1.1.0": "1.1.0",
+    "jsr:@std/net@^1.0.4": "1.0.4",
+    "jsr:@std/path@^1.0.6": "1.0.8",
+    "jsr:@std/path@^1.0.8": "1.0.8",
+    "jsr:@std/streams@^1.0.8": "1.0.8",
+    "npm:esbuild@*": "0.24.2"
+  },
+  "jsr": {
+    "@luca/esbuild-deno-loader@0.11.0": {
+      "integrity": "c05a989aa7c4ee6992a27be5f15cfc5be12834cab7ff84cabb47313737c51a2c",
+      "dependencies": [
+        "jsr:@std/bytes",
+        "jsr:@std/encoding",
+        "jsr:@std/path@^1.0.6"
+      ]
+    },
+    "@std/bytes@1.0.2": {
+      "integrity": "fbdee322bbd8c599a6af186a1603b3355e59a5fb1baa139f8f4c3c9a1b3e3d57"
+    },
+    "@std/cli@1.0.9": {
+      "integrity": "557e5865af000efbf3f737dcfea5b8ab86453594f4a9cd8d08c9fa83d8e3f3bc"
+    },
+    "@std/encoding@1.0.6": {
+      "integrity": "ca87122c196e8831737d9547acf001766618e78cd8c33920776c7f5885546069"
+    },
+    "@std/fmt@1.0.3": {
+      "integrity": "97765c16aa32245ff4e2204ecf7d8562496a3cb8592340a80e7e554e0bb9149f"
+    },
+    "@std/html@1.0.3": {
+      "integrity": "7a0ac35e050431fb49d44e61c8b8aac1ebd55937e0dc9ec6409aa4bab39a7988"
+    },
+    "@std/http@1.0.12": {
+      "integrity": "85246d8bfe9c8e2538518725b158bdc31f616e0869255f4a8d9e3de919cab2aa",
+      "dependencies": [
+        "jsr:@std/cli",
+        "jsr:@std/encoding",
+        "jsr:@std/fmt",
+        "jsr:@std/html",
+        "jsr:@std/media-types",
+        "jsr:@std/net",
+        "jsr:@std/path@^1.0.8",
+        "jsr:@std/streams"
+      ]
+    },
+    "@std/media-types@1.1.0": {
+      "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
+    },
+    "@std/net@1.0.4": {
+      "integrity": "2f403b455ebbccf83d8a027d29c5a9e3a2452fea39bb2da7f2c04af09c8bc852"
+    },
+    "@std/path@1.0.8": {
+      "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be"
+    },
+    "@std/streams@1.0.8": {
+      "integrity": "b41332d93d2cf6a82fe4ac2153b930adf1a859392931e2a19d9fabfb6f154fb3"
+    }
+  },
+  "npm": {
+    "@esbuild/aix-ppc64@0.24.2": {
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="
+    },
+    "@esbuild/android-arm64@0.24.2": {
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg=="
+    },
+    "@esbuild/android-arm@0.24.2": {
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q=="
+    },
+    "@esbuild/android-x64@0.24.2": {
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw=="
+    },
+    "@esbuild/darwin-arm64@0.24.2": {
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA=="
+    },
+    "@esbuild/darwin-x64@0.24.2": {
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA=="
+    },
+    "@esbuild/freebsd-arm64@0.24.2": {
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg=="
+    },
+    "@esbuild/freebsd-x64@0.24.2": {
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q=="
+    },
+    "@esbuild/linux-arm64@0.24.2": {
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg=="
+    },
+    "@esbuild/linux-arm@0.24.2": {
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA=="
+    },
+    "@esbuild/linux-ia32@0.24.2": {
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw=="
+    },
+    "@esbuild/linux-loong64@0.24.2": {
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ=="
+    },
+    "@esbuild/linux-mips64el@0.24.2": {
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw=="
+    },
+    "@esbuild/linux-ppc64@0.24.2": {
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw=="
+    },
+    "@esbuild/linux-riscv64@0.24.2": {
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q=="
+    },
+    "@esbuild/linux-s390x@0.24.2": {
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw=="
+    },
+    "@esbuild/linux-x64@0.24.2": {
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q=="
+    },
+    "@esbuild/netbsd-arm64@0.24.2": {
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw=="
+    },
+    "@esbuild/netbsd-x64@0.24.2": {
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw=="
+    },
+    "@esbuild/openbsd-arm64@0.24.2": {
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A=="
+    },
+    "@esbuild/openbsd-x64@0.24.2": {
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA=="
+    },
+    "@esbuild/sunos-x64@0.24.2": {
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig=="
+    },
+    "@esbuild/win32-arm64@0.24.2": {
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ=="
+    },
+    "@esbuild/win32-ia32@0.24.2": {
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA=="
+    },
+    "@esbuild/win32-x64@0.24.2": {
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg=="
+    },
+    "esbuild@0.24.2": {
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "dependencies": [
+        "@esbuild/aix-ppc64",
+        "@esbuild/android-arm",
+        "@esbuild/android-arm64",
+        "@esbuild/android-x64",
+        "@esbuild/darwin-arm64",
+        "@esbuild/darwin-x64",
+        "@esbuild/freebsd-arm64",
+        "@esbuild/freebsd-x64",
+        "@esbuild/linux-arm",
+        "@esbuild/linux-arm64",
+        "@esbuild/linux-ia32",
+        "@esbuild/linux-loong64",
+        "@esbuild/linux-mips64el",
+        "@esbuild/linux-ppc64",
+        "@esbuild/linux-riscv64",
+        "@esbuild/linux-s390x",
+        "@esbuild/linux-x64",
+        "@esbuild/netbsd-arm64",
+        "@esbuild/netbsd-x64",
+        "@esbuild/openbsd-arm64",
+        "@esbuild/openbsd-x64",
+        "@esbuild/sunos-x64",
+        "@esbuild/win32-arm64",
+        "@esbuild/win32-ia32",
+        "@esbuild/win32-x64"
+      ]
+    }
+  },
+  "remote": {
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/canvas.ts": "aadfb4b2e9acce34d4a5da3f9027be642c93229bbfc2641cb55301542cbb87bf",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/geometry/constants.ts": "4f4cf7bf49ac871d984e9b43896783b0cc8ab0ea60d0fc4c8c582f7e00c3df5a",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/geometry/vector.ts": "a08ecff64c5436a28c6451a31c68fc912d25f941aabafb79418fa0a1aeffa9d2",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/mod.ts": "766bdedc7e28b89d3cb3e83ee55c612bfaeabe252a14ff47e5e676535e033d88",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/animation/gif.ts": "6f8b77cb55b252bd7c18b04fa7ff4e88b4459cf1158d8daef538b2e471433420",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/animation/sprite.ts": "64adc3843b48a0d74ad96cbf4a4d26426c1e909a03ca935f73d5ec5545080f20",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/canvas.ts": "5af9d684e1144a374f0fbee46c710f9d493d5491e90b17356d910c6ade32bb50",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/collision/aa.ts": "c27a1deee0b2ed02e3a88e4e0b370ca2dfa0f57bf783724fa5c099e9eeabc5c9",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/collision/circular.ts": "962703eacb19cc849f3fb355815edfd71e12d06f8e72f517a7c038ff2d1c1729",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/collision/sat.ts": "f221540a984c908c96b4cc86a8eddacf3d3a5dfa5367ba538c02bcf7f7038247",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/constants.ts": "4f4cf7bf49ac871d984e9b43896783b0cc8ab0ea60d0fc4c8c582f7e00c3df5a",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/polygon.ts": "6c7edf576bebd7f24b1358ecba70d561d5905e0185701e12437ba7ccdacc66a9",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/spline.ts": "3521ea5b57902001fb9a248580bd66f12f563a581eff137f5c67e2edc0305ba0",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/vector.ts": "0143daf300032d6faf5a073fffa5c298fdcd74ba2d6bcd10a2d96ab54e55bc69",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/init.ts": "0e08fdf4c896f88308e6a6a2fb8842fe3a67a3a47a5ad722ecbce37737f8694d",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/mod.ts": "ffcbd74b612db108d50f5e2e1ba7425c7e6fac87f3fe7fb43c10a5283501513e",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/processing/gif.ts": "e97456fd55806086aa90d9bc46193d355c2f6093f376f4141ca959942193e4dc",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/EaseInOut.ts": "9eba3d8f5bf5e03220c93916cff6f0bbc24ecdf7550f21fd99e3aaf310f625b0",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/Map.ts": "3948648f8bdf8f1ecea83120c41211f5543c7933dbe3e49b367285a98ed50a9a",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/zoomableCanvas.ts": "395f80ddaef83e2b37a2884d7fffefae80c2bcecb72269405f53899d5dfc9956"
+  }
+}
--- a/dev.ts
+++ b/dev.ts
@@ -0,0 +1,141 @@
+/// <reference lib="deno.ns" />
+
+import * as esbuild from "npm:esbuild";
+import { denoPlugins } from "jsr:@luca/esbuild-deno-loader";
+import { serveDir } from "jsr:@std/http";
+
+async function dev() {
+  const paths = [];
+  const ignoredFiles = ["bundler", "bundle", "dev"];
+
+  for (const path of Deno.readDirSync("./")) {
+    if (
+      path.name.endsWith(".ts") &&
+      !ignoredFiles.find((file) => path.name.includes(file))
+    ) {
+      paths.push(path.name);
+    }
+  }
+  await build();
+
+  const watcher = Deno.watchFs(paths);
+
+  for await (const event of watcher) {
+    if (event.kind === "modify") {
+      console.log("File modified, bundling...");
+      await build();
+    }
+  }
+}
+async function build() {
+  const cfg = await import("./deno.json", {
+    with: { type: "json" },
+  });
+  const importMap = {
+    imports: cfg.default.imports,
+  };
+  const importMapURL = "data:application/json," + JSON.stringify(importMap);
+  console.log("File modified, bundling...");
+  try {
+    const result = await esbuild.build({
+      entryPoints: ["./main.ts"],
+      bundle: true,
+      outfile: "bundle.js",
+      plugins: [...denoPlugins({
+        importMapURL,
+        lockPath: "./deno.lock",
+      })],
+      loader: {
+        ".ts": "ts",
+        ".js": "js",
+        ".jsx": "jsx",
+        ".tsx": "tsx",
+      },
+    });
+    esbuild.stop();
+    console.log("Bundled successfully!");
+    sendSSE("data: build\n\n");
+  } catch (e) {
+    console.error(e);
+    // Deno.exit(1);
+  }
+}
+
+let sseStreams: ReadableStreamDefaultController[] = [];
+
+function sendSSE(message: string) {
+  sseStreams.filter((stream) => {
+    try {
+      stream.enqueue(new TextEncoder().encode(message));
+      return true;
+    } catch {
+      return false;
+    }
+  });
+}
+
+function sse(r: Request) {
+  let controller: ReadableStreamDefaultController;
+  const body = new ReadableStream({
+    start(controller) {
+      sseStreams.push(controller);
+    },
+    cancel() {
+      sseStreams = sseStreams.filter((stream) => stream !== controller);
+    },
+  });
+
+  return new Response(body, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    },
+  });
+}
+
+if (Deno.args.includes("dev")) {
+  dev();
+  Deno.serve(async (r) => {
+    if (r.url.endsWith("sse")) {
+      return sse(r);
+    }
+
+    const d = await serveDir(r, {
+      fsRoot: ".",
+      showIndex: true,
+    });
+
+    if (d.headers.get("content-type")?.startsWith("text/html")) {
+      const body = await d.text();
+      return new Response(
+        body.replace(
+          "</body>",
+          `<script defer>
+          const source = new EventSource("/sse");
+          source.onmessage = (event) => {
+            if (event.data === "build") {
+              location.reload();
+            }
+          };
+        </script></body>`,
+        ),
+        {
+          status: 200,
+          headers: {
+            "Content-Type": "text/html",
+            "Cache-Control": "no-cache",
+          },
+        },
+      );
+    }
+    if (d.url.endsWith(".js")) {
+      d.headers.set("Cache-Control", "no-cache");
+      d.headers.set("Content-Type", "application/javascript");
+    }
+    return d;
+  });
+} else {
+  await build();
+}
--- a/drawing/circle.ts
+++ b/drawing/circle.ts
@@ -1,5 +1,5 @@
 import { Constants } from "../math/constants.ts";
-import { Vector } from "../math/vector.ts";
+import { Vector } from "doodler";

 const circle = (ctx: CanvasRenderingContext2D, center: Vector, radius: number) => {
  ctx.beginPath();
--- a/index.html
+++ b/index.html
@@ -5,6 +5,16 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TRAINS!</title>
+  <style>
+    html, body {
+      background-color: black;
+      color: white;
+      margin: 0;
+      overflow: hidden;
+      height: 100%;
+      width: 100%;
+    }
+  </style>
 </head>
 <body>
  <script src="bundle.js"></script>
--- a/lib/context.ts
+++ b/lib/context.ts
@@ -0,0 +1,34 @@
+type ContextStore = Record<string, any>;
+
+const contextStack: ContextStore[] = [];
+const defaultContext: ContextStore = {};
+
+export function setDefaultContext(context: ContextStore) {
+  Object.assign(defaultContext, context);
+}
+
+export function withContext<T>(context: ContextStore, fn: () => T): T {
+  contextStack.push(context);
+  try {
+    return fn();
+  } finally {
+    contextStack.pop();
+  }
+}
+
+export const ctx = new Proxy(
+  {},
+  {
+    get(_, prop: string) {
+      for (let i = contextStack.length - 1; i >= 0; i--) {
+        if (prop in contextStack[i]) return contextStack[i][prop];
+      }
+      if (prop in defaultContext) return defaultContext[prop]; // ✅ Fallback to default
+      throw new Error(`Context variable '${prop}' is not defined.`);
+    },
+  },
+) as Record<string, any>;
+
+export function getContext() {
+  return ctx;
+}
--- a/lib/input.ts
+++ b/lib/input.ts
@@ -0,0 +1,41 @@
+export class InputManager {
+  private keyStates: Map<string | number, boolean> = new Map();
+  private mouseStates: Map<string | number, boolean> = new Map();
+  private mouseLocation: { x: number; y: number } = { x: 0, y: 0 };
+  private mouseDelta: { x: number; y: number } = { x: 0, y: 0 };
+  constructor() {
+    document.addEventListener("keydown", (e) => {
+      this.keyStates.set(e.key, true);
+    });
+    document.addEventListener("keyup", (e) => {
+      this.keyStates.set(e.key, false);
+    });
+    document.addEventListener("mousedown", (e) => {
+      this.mouseStates.set(e.button, true);
+    });
+    document.addEventListener("mouseup", (e) => {
+      this.mouseStates.set(e.button, false);
+    });
+
+    self.addEventListener("mousemove", (e) => {
+      this.mouseLocation = { x: e.clientX, y: e.clientY };
+      this.mouseDelta = {
+        x: e.movementX,
+        y: e.movementY,
+      };
+    });
+  }
+
+  getKeyState(key: string | number) {
+    return this.keyStates.get(key);
+  }
+  getMouseState(key: string | number) {
+    return this.mouseStates.get(key);
+  }
+  getMouseLocation() {
+    return this.mouseLocation;
+  }
+  getMouseDelta() {
+    return this.mouseDelta;
+  }
+}
--- a/main.ts
+++ b/main.ts
@@ -1,207 +0,0 @@
-import { lerp } from "./math/lerp.ts";
-import { ComplexPath, PathSegment } from "./math/path.ts";
-import { Vector } from "./math/vector.ts";
-import { Mover } from "./physics/mover.ts";
-import { Train } from "./train.ts";
-import { fillCircle, drawCircle } from 'drawing';
-import { generateSquareTrack } from "./track.ts";
-import { drawLine } from "./drawing/line.ts";
-import { hello } from 'doodler';
-
-hello();
-
-const canvas = document.createElement('canvas');
-canvas.height = 400;
-canvas.width = 400;
-document.body.append(canvas);
-const ctx = canvas.getContext('2d')!;
-
-// for (const mover of trains) {
-//   mover.setContext(ctx);
-//   mover.velocity.add(Vector.random2D())
-// }
-
-const clear = () => {
-  ctx.fillStyle = 'black';
-  ctx.fillRect(0, 0, canvas.width, canvas.height)
-}
-
-const fps = 60;
-
-setInterval(() => {
-  // for (const train of trains) {
-  //   train.move();
-  // }
-  draw();
-}, 1000 / fps);
-
-
-// const path = new PathSegment([new Vector(20, 20), new Vector(200, 100), new Vector(200, 300), new Vector(20, 380)]);
-const path = generateSquareTrack();
-path.setContext(ctx);
-// const train = new Train(path.segments[0], 4);
-// train.setContext(ctx);
-// train.velocity.x = -1;
-// train.velocity.y = 1;
-
-const controls = {
-  ArrowUp: false,
-  ArrowRight: false,
-  ArrowDown: false,
-  ArrowLeft: false,
-}
-
-let t = 0;
-let currentSeg = 0;
-
-const trainCount = 1;
-const trains = Array(trainCount).fill(null).map((_, i) => new Train(path.segments[i % path.segments.length], 5));
-for (const train of trains) {
-  train.setContext(ctx);
-  // train.maxSpeed = Math.random() * 5 + 1
-}
-
-function draw() {
-  clear();
-  path.draw();
-
-  // for (const control in controls) {
-  //   if (controls.hasOwnProperty(control)) {
-  //     const isActive = controls[control as keyof typeof controls];
-  //     if (isActive) {
-  //       const force = getSteeringForce(train, control);
-  //       train.applyForce(force);
-  //     }
-  //   }
-
-  //   if (Object.values(controls).every(c => !c)) {
-  //     train.acceleration.set(0, 0)
-  //   }
-  // }
-
-  // train.follow(path)
-  for (const train of trains) {
-    train.move();
-  }
-  // ctx.strokeStyle = 'orange';
-
-  ctx.strokeStyle = 'red';
-  ctx.lineWidth = 4;
-  const seg = path.segments[currentSeg];
-  const start = seg.getPointAtT(t);
-  const tan = seg.tangent(t).normalize().mult(25);
-  drawLine(ctx, start.x, start.y, start.x + tan.x, start.y + tan.y);
-
-  t += .01;
-  if (t > 1) {
-    t -= 1;
-    currentSeg = (currentSeg + 1) % path.segments.length;
-  }
-}
-
-// let wKeydown =false
-
-// document.addEventListener('keydown', e => {
-//   if (e.key === 'w' && !wKeydown) {
-//     wKeydown = true;
-//     for (const train of trains) {
-//       train.acceleration.add(.1, 0);
-//     }
-//   }
-// });
-// document.addEventListener('keyup', e => {
-//   if (e.key === 'w') {
-//     wKeydown = false;
-//     for (const train of trains) {
-//       train.acceleration.sub(.1, 0);
-//     }
-//   }
-// });
-// let sKeydown = false;
-// document.addEventListener('keydown', e => {
-//   if (e.key === 's' && !sKeydown) {
-//     sKeydown = true;
-//     for (const train of trains) {
-//       train.acceleration.sub(.1, 0);
-//     }
-//   }
-// });
-// document.addEventListener('keyup', e => {
-//   if (e.key === 's') {
-//     sKeydown = false;
-//     for (const train of trains) {
-//       train.acceleration.add(.1, 0);
-//     }
-//   }
-// });
-
-document.addEventListener('keyup', e => {
-  if (e.key === 'd') {
-    console.log(trains)
-  }
-
-  if (e.key === 'ArrowUp') {
-    for (const train of trains) {
-      train.speed += .1;
-    }
-  }
-  if (e.key === 'ArrowDown') {
-    for (const train of trains) {
-      train.speed -= .1;
-    }
-  }
-
-  if (e.key === 'e') {
-    for (const t of path.segments) {
-      t.editable = !t.editable;
-    }
-  }
-})
-
-// document.addEventListener('keydown', e => {
-//   const valid = ["ArrowUp",
-//     "ArrowRight",
-//     "ArrowDown",
-//     "ArrowLeft",]
-//   if (valid.includes(e.key))
-//     controls[e.key as keyof typeof controls] = true;
-// })
-// document.addEventListener('keyup', e => {
-//   const valid = ["ArrowUp",
-//     "ArrowRight",
-//     "ArrowDown",
-//     "ArrowLeft",]
-//   if (valid.includes(e.key))
-//     controls[e.key as keyof typeof controls] = false;
-// })
-
-// function getSteeringForce(mover: Mover, dir: string) {
-//   const dirs = {
-//     ArrowUp: 0,
-//     ArrowRight: .1 * Math.PI,
-//     ArrowDown: Math.PI,
-//     ArrowLeft: -.1 * Math.PI,
-//   }
-
-//   const target = mover.velocity.copy();
-//   target.normalize();
-//   target.mult(10);
-//   target.rotate(dirs[dir as keyof typeof dirs]);
-//   const force = Vector.sub(target, mover.velocity);
-//   force.limit(.1)
-//   return force;
-// }
-
-document.addEventListener('keydown', e => {
-  if (e.ctrlKey && e.key === 's') {
-    e.preventDefault();
-    path.segments.forEach((s: any) => {
-      s.next = s.next.id
-      s.prev = s.prev.id
-      delete s.ctx
-    })
-    delete path.ctx;
-    const json = JSON.stringify(path);
-    localStorage.setItem('railPath', json);
-  }
-})
--- a/math/lerp.ts
+++ b/math/lerp.ts
@@ -1,4 +1,4 @@
-import { Vector } from "./vector.ts";
+import { Vector } from "doodler";

 export const lerp = (a: number, b: number, t: number) => {
  return (a*t) + (b*(1-t));
--- a/math/path.ts
+++ b/math/path.ts
@@ -1,4 +1,4 @@
-import { Vector } from "./vector.ts";
+import { Vector } from "doodler";

 export class ComplexPath {

@@ -42,8 +42,11 @@ export class PathSegment {
  points: [Vector, Vector, Vector, Vector]
  ctx?: CanvasRenderingContext2D;

+  length: number;
+
  constructor(points: [Vector, Vector, Vector, Vector]) {
    this.points = points;
+    this.length = this.calculateApproxLength(100);
  }

  setContext(ctx: CanvasRenderingContext2D) {
@@ -51,26 +54,30 @@ export class PathSegment {
  }

  draw() {
-    if (!this.ctx) return;
-    const ctx = this.ctx;
+    const [a, b, c, d] = this.points;
+    doodler.drawBezier(a, b, c, d, {
+      strokeColor: '#ffffff50'
+    })
+    // if (!this.ctx) return;
+    // const ctx = this.ctx;

-    ctx.save();
-    ctx.beginPath();
-    ctx.moveTo(this.points[0].x, this.points[0].y);
+    // ctx.save();
+    // ctx.beginPath();
+    // ctx.moveTo(this.points[0].x, this.points[0].y);

-    ctx.bezierCurveTo(
-      this.points[1].x,
-      this.points[1].y,
-      this.points[2].x,
-      this.points[2].y,
-      this.points[3].x,
-      this.points[3].y,
-    );
+    // ctx.bezierCurveTo(
+    //   this.points[1].x,
+    //   this.points[1].y,
+    //   this.points[2].x,
+    //   this.points[2].y,
+    //   this.points[3].x,
+    //   this.points[3].y,
+    // );

-    ctx.strokeStyle = '#ffffff50';
-    ctx.lineWidth = 2;
-    ctx.stroke();
-    ctx.restore();
+    // ctx.strokeStyle = '#ffffff50';
+    // ctx.lineWidth = 2;
+    // ctx.stroke();
+    // ctx.restore();
  }

  getPointAtT(t: number) {
@@ -113,7 +120,7 @@ export class PathSegment {
      const point = this.getPointAtT(i * resolution);
      const distance = v.dist(point);
      if (distance < r) {
-        points.push([i * resolution,this]);
+        points.push([i * resolution, this]);
      }
    }
    return points
@@ -169,4 +176,51 @@ export class PathSegment {

    return false;
  }
+
+  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;
+  }
 }
--- a/math/vector.ts
+++ b/math/vector.ts
@@ -1,273 +0,0 @@
-import { Constants } from "./constants.ts";
-
-export class Vector {
-  x: number;
-  y: number;
-  z: number;
-
-  constructor(x = 0, y = 0, z = 0) {
-    this.x = x;
-    this.y = y;
-    this.z = z;
-  }
-
-  set(x: number, y: number, z?: number): void;
-  set(v: Vector): void;
-  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,
-        (v as Vector).y || (v as Array<number>)[1] || 0,
-        (v as Vector).z || (v as Array<number>)[2] || 0);
-    } else {
-      this.x = v as number;
-      this.y = y || 0;
-      this.z = z || 0;
-    }
-  }
-  get() {
-    return new Vector(this.x, this.y, this.z);
-  }
-  mag() {
-    const x = this.x,
-      y = this.y,
-      z = this.z;
-    return Math.sqrt(x * x + y * y + z * z);
-  }
-  magSq() {
-    const x = this.x,
-      y = this.y,
-      z = this.z;
-    return (x * x + y * y + z * z);
-  }
-  setMag(len: number): void;
-  setMag(v: Vector, len: number): Vector
-  setMag(v_or_len: Vector | number, len?: number) {
-    if (len === undefined) {
-      len = v_or_len as number;
-      this.normalize();
-      this.mult(len);
-    } else {
-      const v = v_or_len as Vector;
-      v.normalize();
-      v.mult(len);
-      return v;
-    }
-  }
-  add(x: number, y: number, z: number): void;
-  add(x: number, y: number): void;
-  add(v: Vector): void;
-  add(v: Vector | number, y?: number, z?: number) {
-    if (arguments.length === 1 && typeof v !== 'number') {
-      this.x += v.x;
-      this.y += v.y;
-      this.z += v.z;
-    } else if (arguments.length === 2) {
-      // 2D Vector
-      this.x += v as number;
-      this.y += y ?? 0;
-    } else {
-      this.x += v as number;
-      this.y += y ?? 0;
-      this.z += z ?? 0;
-    }
-  }
-  sub(x: number, y: number, z: number): void;
-  sub(x: number, y: number): void;
-  sub(v: Vector): void;
-  sub(v: Vector | number, y?: number, z?: number) {
-    if (arguments.length === 1 && typeof v !== 'number') {
-      this.x -= v.x;
-      this.y -= v.y;
-      this.z -= v.z;
-    } else if (arguments.length === 2) {
-      // 2D Vector
-      this.x -= v as number;
-      this.y -= y ?? 0;
-    } else {
-      this.x -= v as number;
-      this.y -= y ?? 0;
-      this.z -= z ?? 0;
-    }
-  }
-  mult(v: number | Vector) {
-    if (typeof v === 'number') {
-      this.x *= v;
-      this.y *= v;
-      this.z *= v;
-    } else {
-      this.x *= v.x;
-      this.y *= v.y;
-      this.z *= v.z;
-    }
-    return this;
-  }
-  div(v: number | Vector) {
-    if (typeof v === 'number') {
-      this.x /= v;
-      this.y /= v;
-      this.z /= v;
-    } else {
-      this.x /= v.x;
-      this.y /= v.y;
-      this.z /= v.z;
-    }
-  }
-  rotate(angle: number) {
-    const prev_x = this.x;
-    const c = Math.cos(angle);
-    const s = Math.sin(angle);
-    this.x = c * this.x - s * this.y;
-    this.y = s * prev_x + c * this.y;
-  }
-  dist(v: Vector) {
-    const dx = this.x - v.x,
-      dy = this.y - v.y,
-      dz = this.z - v.z;
-    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') {
-      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!);
-  }
-  cross(v: Vector) {
-    const x = this.x,
-      y = this.y,
-      z = this.z;
-    return new Vector(y * v.z - v.y * z,
-      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;
-  lerp(v_or_x: Vector | number, amt_or_y: number, z?: number, amt?: number) {
-    const lerp_val = (start: number, stop: number, amt: number) => {
-      return start + (stop - start) * amt;
-    };
-    let x, y: number;
-    if (arguments.length === 2 && typeof v_or_x !== 'number') {
-      // given vector and amt
-      amt = amt_or_y;
-      x = v_or_x.x;
-      y = v_or_x.y;
-      z = v_or_x.z;
-    } else {
-      // given x, y, z and amt
-      x = v_or_x as number;
-      y = amt_or_y;
-    }
-    this.x = lerp_val(this.x, x, amt!);
-    this.y = lerp_val(this.y, y, amt!);
-    this.z = lerp_val(this.z, z!, amt!);
-  }
-  normalize() {
-    const m = this.mag();
-    if (m > 0) {
-      this.div(m);
-    }
-    return this;
-  }
-  limit(high: number) {
-    if (this.mag() > high) {
-      this.normalize();
-      this.mult(high);
-    }
-  }
-  heading() {
-    return (-Math.atan2(-this.y, this.x));
-  }
-  heading2D() {
-    return this.heading();
-  }
-  toString() {
-    return "[" + this.x + ", " + this.y + ", " + this.z + "]";
-  }
-  array() {
-    return [this.x, this.y, this.z];
-  }
-
-  copy() {
-    return new Vector(this.x, this.y, this.z);
-  }
-
-  drawDot(ctx: CanvasRenderingContext2D) {
-    // ctx.fillStyle = 'red'
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, 2, 0, Constants.TWO_PI);
-    ctx.fill();
-  }
-
-  static fromAngle(angle: number, v?: Vector) {
-    if (v === undefined || v === null) {
-      v = new Vector();
-    }
-    v.x = Math.cos(angle);
-    v.y = Math.sin(angle);
-    return v;
-  }
-
-  static random2D(v?: Vector) {
-    return Vector.fromAngle(Math.random() * (Math.PI * 2), v);
-  }
-
-  static random3D(v: Vector) {
-    const angle = Math.random() * Constants.TWO_PI;
-    const vz = Math.random() * 2 - 1;
-    const mult = Math.sqrt(1 - vz * vz);
-    const vx = mult * Math.cos(angle);
-    const vy = mult * Math.sin(angle);
-    if (v === undefined || v === null) {
-      v = new Vector(vx, vy, vz);
-    } else {
-      v.set(vx, vy, vz);
-    }
-    return v;
-  }
-
-  static dist(v1: Vector, v2: Vector) {
-    return v1.dist(v2);
-  }
-
-  static dot(v1: Vector, v2: Vector) {
-    return v1.dot(v2);
-  }
-
-  static cross(v1: Vector, v2: Vector) {
-    return v1.cross(v2);
-  }
-
-  static add(v1: Vector, v2: Vector) {
-    return new Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z);
-  }
-
-  static sub(v1: Vector, v2: Vector) {
-    return new Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
-  }
-
-  static angleBetween(v1: Vector, v2: Vector) {
-    return Math.acos(v1.dot(v2) / Math.sqrt(v1.magSq() * v2.magSq()));
-  }
-
-  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);
-    retval.lerp(v2, amt);
-    return retval;
-  }
-
-  static vectorProjection(v1: Vector, v2: Vector) {
-    v2 = v2.copy();
-    v2.normalize();
-    const sp = v1.dot(v2);
-    v2.mult(sp);
-    return v2;
-  }
-
-  static hypot2(a: Vector, b: Vector) {
-    return Vector.dot(Vector.sub(a,b), Vector.sub(a,b))
-  }
-}
--- a/physics/follower.ts
+++ b/physics/follower.ts
@@ -1,7 +1,7 @@
 import { Constants } from "../math/constants.ts";
 import { map } from "../math/lerp.ts";
 import { ComplexPath, PathSegment } from "../math/path.ts";
-import { Vector } from "../math/vector.ts";
+import { Vector } from "doodler";
 import { Mover } from "./mover.ts";

 export class
--- a/physics/mover.ts
+++ b/physics/mover.ts
@@ -1,4 +1,4 @@
-import { Vector } from "../math/vector.ts";
+import { Vector } from "doodler";

 export class Mover {
  position: Vector;
@@ -81,6 +81,9 @@ export class Mover {
  }

  draw() {
+    doodler.drawRotated(this.position, this.velocity.heading() || 0, () => {
+      doodler.fillCenteredRect(this.position, this.boundingBox.size.x, this.boundingBox.size.y, {fillColor: 'white'})
+    });
    if (!this.ctx) return;

    this.ctx.fillStyle = 'white'
--- a/prototype.ts
+++ b/prototype.ts
@@ -0,0 +1,282 @@
+import { lerp } from "./math/lerp.ts";
+import { ComplexPath, PathSegment } from "./math/path.ts";
+import { Mover } from "./physics/mover.ts";
+import { Train, TrainCar } from "./train/train.ts";
+import { generateSquareTrack, IControlNode, loadFromJson } from "./track.ts";
+import { drawLine } from "./drawing/line.ts";
+import { initializeDoodler, Vector } from "doodler";
+
+const engineSprites = document.createElement("img");
+engineSprites.src = "./sprites/EngineSprites.png";
+engineSprites.style.display = "none";
+engineSprites.id = "engine-sprites";
+document.body.append(engineSprites);
+
+initializeDoodler({
+  fillScreen: true,
+  bg: "#333",
+}, true);
+
+let path;
+
+try {
+  path = loadFromJson();
+} catch {
+  path = generateSquareTrack();
+}
+
+const controls = {
+  ArrowUp: false,
+  ArrowRight: false,
+  ArrowDown: false,
+  ArrowLeft: false,
+};
+
+let t = 0;
+let currentSeg = 0;
+let speed = 1;
+
+// const trainCount = 1;
+// const trains = Array(trainCount).fill(null).map((_, i) => new Train(path.segments[i % path.segments.length], 5));
+// const car = new TrainCar(55, engineSprites, 80, 20, {
+//   at: new Vector(0, 80),
+//   height: 20,
+//   width: 80,
+// });
+const length = Math.floor(Math.random() * 7);
+const cars = Array.from(
+  { length },
+  () =>
+    new TrainCar(40, engineSprites, 61, 20, {
+      at: new Vector(80, 20 * Math.ceil(Math.random() * 3)),
+      width: 61,
+      height: 20,
+    }),
+);
+const train = new Train(path, cars);
+
+let dragEndCounter = 0;
+let selectedNode: IControlNode | undefined;
+
+doodler.createLayer((_1, _2, _3) => {
+  // console.log(_1, _2, _3);
+  _1.imageSmoothingEnabled = false;
+  const dTime = (_3 < 0 ? 1 : _3) / 1000;
+  // console.log(dTime);
+  for (let i = 0; i < path.evenPoints.length; i += 10) {
+    const p = path.evenPoints[i];
+    const next = path.evenPoints[(i + 1) % path.evenPoints.length];
+    const last = path.evenPoints.at(i - 1);
+    if (!last) break;
+    const tan = Vector.sub(last, next);
+
+    doodler.drawRotated(p, tan.heading(), () => {
+      doodler.line(p, p.copy().add(0, 10), { color: "#291b17", weight: 4 });
+      doodler.line(p, p.copy().add(0, -10), { color: "#291b17", weight: 4 });
+      doodler.line(p.copy().add(-6, 5), p.copy().add(6, 5), {
+        color: "grey",
+        weight: 2,
+      });
+      doodler.line(p.copy().add(-6, -5), p.copy().add(6, -5), {
+        color: "grey",
+        weight: 2,
+      });
+    });
+  }
+  path.draw();
+  train.move(dTime);
+
+  selectedNode?.anchor.drawDot();
+  selectedNode?.controls.forEach((e) => e.drawDot());
+});
+
+let editable = false;
+
+const clickables = new Map();
+
+let selectedPoint: Vector;
+
+document.addEventListener("keyup", (e) => {
+  if (e.key === "d") {
+    // console.log(trains)
+    // console.log(path.segments.reduce((a,b) => a + b.calculateApproxLength(1000), 0))
+    // console.log(path.evenPoints);
+  }
+
+  if (e.key === "ArrowUp") {
+    // for (const train of trains) {
+    //   train.speed += .1;
+    // }
+    speed += .1;
+    train.speed += 1;
+  }
+  if (e.key === "ArrowDown") {
+    // for (const train of trains) {
+    //   train.speed -= .1;
+    // }
+    speed -= .1;
+    train.speed -= 1;
+  }
+
+  if (e.key === "m" && selectedPoint) {
+    const points = path.points;
+    const index = points.findIndex((p) => p === selectedPoint);
+    if (index > -1) {
+      const prev = points.at(index - 1)!;
+      const next = points[(index + 1) % points.length];
+
+      const toPrev = Vector.sub(prev, selectedPoint);
+      toPrev.setMag(next.dist(selectedPoint));
+      toPrev.rotate(Math.PI);
+      const toNext = Vector.add(toPrev, selectedPoint);
+      next.set(toNext);
+
+      path.calculateApproxLength();
+      path.calculateEvenlySpacedPoints(1);
+    }
+  }
+  let translate: boolean = false;
+
+  if (e.key === "e" && !translate) {
+    editable = !editable;
+    for (const t of path.segments) {
+      t.editable = !t.editable;
+      for (const p of t.points) {
+        if (t.editable) {
+          doodler.registerDraggable(p, 10);
+          doodler.addDragEvents({
+            point: p,
+            onDragEnd: () => {
+              dragEndCounter++;
+              t.length = t.calculateApproxLength(100);
+              path.evenPoints = path.calculateEvenlySpacedPoints(1);
+            },
+            onDrag: (movement) => {
+              // todo - remove ! after updating doodler
+              path.handleNodeEdit(p, movement!);
+            },
+          });
+        } else {
+          doodler.unregisterDraggable(p);
+        }
+      }
+    }
+    for (const p of path.points) {
+      if (editable) {
+        const onClick = () => {
+          selectedPoint = p;
+          selectedNode = path.nodes.find((e) =>
+            e.anchor === p || e.controls.includes(p)
+          );
+        };
+
+        clickables.set(p, onClick);
+        doodler.registerClickable(
+          p.copy().sub(10, 10),
+          p.copy().add(10, 10),
+          onClick,
+        );
+      } else {
+        const the = clickables.get(p);
+        doodler.unregisterClickable(the);
+      }
+    }
+  }
+
+  let x = 0;
+  let y = 0;
+  const onDrag = (e: MouseEvent) => {
+    x += e.movementX;
+    y += e.movementY;
+    console.log("draggin");
+  };
+  const dragEnd = () => {
+    x = 0;
+    y = 0;
+    for (const t of path.points) {
+      t.add(x, y);
+    }
+  };
+  if (e.key === "t" && editable) {
+    // translate = !translate;
+
+    // console.log(translate);
+
+    for (const t of path.points) {
+      t.add(100, 100);
+    }
+    path.calculateEvenlySpacedPoints(1);
+
+    // switch (translate) {
+    //   case true:
+    //     console.log("adding");
+    //     ((doodler as any)._canvas as HTMLCanvasElement).addEventListener(
+    //       "drag",
+    //       onDrag,
+    //     );
+    //     ((doodler as any)._canvas as HTMLCanvasElement).addEventListener(
+    //       "dragend",
+    //       dragEnd,
+    //     );
+    //     break;
+    //   case false:
+    //     ((doodler as any)._canvas as HTMLCanvasElement).removeEventListener(
+    //       "drag",
+    //       onDrag,
+    //     );
+    //     ((doodler as any)._canvas as HTMLCanvasElement).removeEventListener(
+    //       "dragend",
+    //       dragEnd,
+    //     );
+    //     break;
+    // }
+  }
+});
+
+// document.addEventListener('keydown', e => {
+//   const valid = ["ArrowUp",
+//     "ArrowRight",
+//     "ArrowDown",
+//     "ArrowLeft",]
+//   if (valid.includes(e.key))
+//     controls[e.key as keyof typeof controls] = true;
+// })
+// document.addEventListener('keyup', e => {
+//   const valid = ["ArrowUp",
+//     "ArrowRight",
+//     "ArrowDown",
+//     "ArrowLeft",]
+//   if (valid.includes(e.key))
+//     controls[e.key as keyof typeof controls] = false;
+// })
+
+// function getSteeringForce(mover: Mover, dir: string) {
+//   const dirs = {
+//     ArrowUp: 0,
+//     ArrowRight: .1 * Math.PI,
+//     ArrowDown: Math.PI,
+//     ArrowLeft: -.1 * Math.PI,
+//   }
+
+//   const target = mover.velocity.copy();
+//   target.normalize();
+//   target.mult(10);
+//   target.rotate(dirs[dir as keyof typeof dirs]);
+//   const force = Vector.sub(target, mover.velocity);
+//   force.limit(.1)
+//   return force;
+// }
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "s") {
+    e.preventDefault();
+    path.segments.forEach((s: any) => {
+      s.next = s.next.id;
+      s.prev = s.prev.id;
+      delete s.ctx;
+    });
+    delete path.ctx;
+    const json = JSON.stringify(path);
+    localStorage.setItem("railPath", json);
+  }
+});
--- a/sprites/BlueEngine.png
+++ b/sprites/BlueEngine.png
--- a/sprites/Engine.png
+++ b/sprites/Engine.png
--- a/sprites/EngineSprites.png
+++ b/sprites/EngineSprites.png
--- a/sprites/GreenEngine.png
+++ b/sprites/GreenEngine.png
--- a/sprites/PurpleEngine.png
+++ b/sprites/PurpleEngine.png
--- a/sprites/RedEngine.png
+++ b/sprites/RedEngine.png
--- a/test/bundle.js
+++ b/test/bundle.js
--- a/track.ts
+++ b/track.ts
@@ -1,9 +1,8 @@
 import { PathSegment } from "./math/path.ts";
-import { Vector } from "./math/vector.ts";
-import { Train } from "./train.ts";
+import { Vector } from "doodler";
+import { Train } from "./train/train.ts";

 export class Track extends PathSegment {
-
  editable = false;

  next: Track;
@@ -11,63 +10,63 @@ export class Track extends PathSegment {

  id: string;

-  constructor(points: [Vector, Vector, Vector, Vector], next?: Track, prev?: Track) {
+  constructor(
+    points: [Vector, Vector, Vector, Vector],
+    next?: Track,
+    prev?: Track,
+  ) {
    super(points);
    this.id = crypto.randomUUID();
    this.next = next || this;
    this.prev = prev || this;
  }

-  followTrack(train: Train): [Vector, number] {
-    const predict = train.velocity.copy();
-    predict.normalize();
-    predict.mult(1);
-    const predictpos = Vector.add(train.position, predict)
+  // followTrack(train: Train): [Vector, number] {
+  //   const predict = train.velocity.copy();
+  //   predict.normalize();
+  //   predict.mult(1);
+  //   const predictpos = Vector.add(train.position, predict)

-    // const leading = train.leadingPoint;
-    // let closest = this.points[0];
-    // let closestDistance = this.getClosestPoint(leading);
-    let [closest, closestDistance, closestT] = this.getClosestPoint(predictpos);
-    // deno-lint-ignore no-this-alias
-    let mostValid: Track = this;
+  //   // const leading = train.leadingPoint;
+  //   // let closest = this.points[0];
+  //   // let closestDistance = this.getClosestPoint(leading);
+  //   let [closest, closestDistance, closestT] = this.getClosestPoint(predictpos);
+  //   // deno-lint-ignore no-this-alias
+  //   let mostValid: Track = this;

-    if (this.next !== this) {
-      const [point, distance, t] = this.next.getClosestPoint(predictpos);
-      if (distance < closestDistance) {
-        closest = point;
-        closestDistance = distance;
-        mostValid = this.next;
-        closestT = t;
-      }
-    }
-    if (this.prev !== this) {
-      const [point, distance, t] = this.next.getClosestPoint(predictpos);
-      if (distance < closestDistance) {
-        closest = point;
-        closestDistance = distance;
-        mostValid = this.next;
-        closestT = t;
-      }
-    }
+  //   if (this.next !== this) {
+  //     const [point, distance, t] = this.next.getClosestPoint(predictpos);
+  //     if (distance < closestDistance) {
+  //       closest = point;
+  //       closestDistance = distance;
+  //       mostValid = this.next;
+  //       closestT = t;
+  //     }
+  //   }
+  //   if (this.prev !== this) {
+  //     const [point, distance, t] = this.next.getClosestPoint(predictpos);
+  //     if (distance < closestDistance) {
+  //       closest = point;
+  //       closestDistance = distance;
+  //       mostValid = this.next;
+  //       closestT = t;
+  //     }
+  //   }

-    train.currentTrack = mostValid;
-    train.arrive(closest);
-    // if (predictpos.dist(closest) > 2) train.arrive(closest);
-    return [closest, closestT];
-  }
+  //   train.currentTrack = mostValid;
+  //   train.arrive(closest);
+  //   // if (predictpos.dist(closest) > 2) train.arrive(closest);
+  //   return [closest, closestT];
+  // }

  getNearestPoint(p: Vector) {
-    let [closest, closestDistance, closestT] = this.getClosestPoint(p);
-    // deno-lint-ignore no-this-alias
-    let mostValid: Track = this;
+    let [closest, closestDistance] = this.getClosestPoint(p);

    if (this.next !== this) {
      const [point, distance, t] = this.next.getClosestPoint(p);
      if (distance < closestDistance) {
        closest = point;
        closestDistance = distance;
-        mostValid = this.next;
-        closestT = t;
      }
    }
    if (this.prev !== this) {
@@ -75,8 +74,6 @@ export class Track extends PathSegment {
      if (distance < closestDistance) {
        closest = point;
        closestDistance = distance;
-        mostValid = this.next;
-        closestT = t;
      }
    }

@@ -84,26 +81,65 @@ export class Track extends PathSegment {
  }

  getAllPointsInRange(v: Vector, r: number) {
-    const points: [number, PathSegment][] = this.getPointsWithinRadius(v, r).concat(this.next.getPointsWithinRadius(v, r), this.prev.getPointsWithinRadius(v, r))
+    const points: [number, PathSegment][] = this.getPointsWithinRadius(v, r)
+      .concat(
+        this.next.getPointsWithinRadius(v, r),
+        this.prev.getPointsWithinRadius(v, r),
+      );

    return points;
  }

  draw(): void {
    super.draw();
-    if (this.ctx && this.editable)
-      for (const e of this.points) {
-        this.ctx.fillStyle = 'blue';
-        e.drawDot(this.ctx);
+    if (this.editable) {
+      const [a, b, c, d] = this.points;
+      doodler.line(a, b);
+      doodler.line(c, d);
    }
  }
+
+  setNext(t: Track) {
+    this.next = t;
+    this.next.points[0] = this.points[3];
+  }
+
+  setPrev(t: Track) {
+    this.prev = t;
+    this.prev.points[3] = this.points[0];
+  }
 }

 export class Spline<T extends PathSegment = PathSegment> {
  segments: T[] = [];
  ctx?: CanvasRenderingContext2D;
+
+  evenPoints: Vector[];
+  pointSpacing: number;
+
+  get points() {
+    return Array.from(new Set(this.segments.flatMap((s) => s.points)));
+  }
+
+  nodes: IControlNode[];
+
  constructor(segs: T[]) {
    this.segments = segs;
+    this.pointSpacing = 1;
+    this.evenPoints = this.calculateEvenlySpacedPoints(1);
+    this.nodes = [];
+    for (let i = 0; i < this.points.length; i += 3) {
+      const node: IControlNode = {
+        anchor: this.points[i],
+        controls: [
+          this.points.at(i - 1)!,
+          this.points[(i + 1) % this.points.length],
+        ],
+        mirrored: false,
+        tangent: true,
+      };
+      this.nodes.push(node);
+    }
  }

  setContext(ctx: CanvasRenderingContext2D) {
@@ -118,24 +154,146 @@ export class Spline<T extends PathSegment = PathSegment> {
      segment.draw();
    }
  }
+
+  calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
+    this.pointSpacing = 1;
+    // return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
+    const points: Vector[] = [];
+
+    points.push(this.segments[0].points[0]);
+    let prev = points[0];
+    let distSinceLastEvenPoint = 0;
+    for (const seg of this.segments) {
+      let t = 0;
+
+      const div = Math.ceil(seg.length * resolution * 10);
+      while (t < 1) {
+        t += 1 / div;
+        const point = seg.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;
+      }
+    }
+
+    this.evenPoints = points;
+
+    return points;
+  }
+
+  followEvenPoints(t: number) {
+    if (t < 0) t += this.evenPoints.length;
+    const i = Math.floor(t);
+    const a = this.evenPoints[i];
+    const b = this.evenPoints[(i + 1) % this.evenPoints.length];
+
+    return Vector.lerp(a, b, t % 1);
+  }
+
+  calculateApproxLength() {
+    for (const s of this.segments) {
+      s.calculateApproxLength();
+    }
+  }
+
+  toggleNodeTangent(p: Vector) {
+    const node = this.nodes.find((n) => n.anchor === p);
+
+    node && (node.tangent = !node.tangent);
+  }
+  toggleNodeMirrored(p: Vector) {
+    const node = this.nodes.find((n) => n.anchor === p);
+
+    node && (node.mirrored = !node.mirrored);
+  }
+  handleNodeEdit(p: Vector, movement: { x: number; y: number }) {
+    const node = this.nodes.find((n) =>
+      n.anchor === p || n.controls.includes(p)
+    );
+    if (!node || !(node.mirrored || node.tangent)) return;
+
+    if (node.anchor !== p) {
+      if (node.mirrored || node.tangent) {
+        const mover = node.controls.find((e) => e !== p)!;
+        const v = Vector.sub(node.anchor, p);
+        if (!node.mirrored) v.setMag(Vector.sub(node.anchor, mover).mag());
+        mover.set(Vector.add(v, node.anchor));
+      }
+    } else {
+      for (const control of node.controls) {
+        control.add(movement.x, movement.y);
+      }
+    }
+  }
 }

 export const generateSquareTrack = () => {
-  const first = new Track([new Vector(20, 40), new Vector(20, 100), new Vector(20, 300), new Vector(20, 360)]);
+  const first = new Track([
+    new Vector(20, 40),
+    new Vector(20, 100),
+    new Vector(20, 300),
+    new Vector(20, 360),
+  ]);

-  const second = new Track([first.points[3], new Vector(20, 370), new Vector(30, 380), new Vector(40, 380)]);
+  const second = new Track([
+    first.points[3],
+    new Vector(20, 370),
+    new Vector(30, 380),
+    new Vector(40, 380),
+  ]);

-  const third = new Track([second.points[3], new Vector(100, 380), new Vector(300, 380), new Vector(360, 380)]);
+  const third = new Track([
+    second.points[3],
+    new Vector(100, 380),
+    new Vector(300, 380),
+    new Vector(360, 380),
+  ]);

-  const fourth = new Track([third.points[3], new Vector(370, 380), new Vector(380, 370), new Vector(380, 360)]);
+  const fourth = new Track([
+    third.points[3],
+    new Vector(370, 380),
+    new Vector(380, 370),
+    new Vector(380, 360),
+  ]);

-  const fifth = new Track([fourth.points[3], new Vector(380, 300), new Vector(380, 100), new Vector(380, 40)]);
+  const fifth = new Track([
+    fourth.points[3],
+    new Vector(380, 300),
+    new Vector(380, 100),
+    new Vector(380, 40),
+  ]);

-  const sixth = new Track([fifth.points[3], new Vector(380, 30), new Vector(370, 20), new Vector(360, 20)]);
+  const sixth = new Track([
+    fifth.points[3],
+    new Vector(380, 30),
+    new Vector(370, 20),
+    new Vector(360, 20),
+  ]);

-  const seventh = new Track([sixth.points[3], new Vector(300, 20), new Vector(100, 20), new Vector(40, 20)]);
+  const seventh = new Track([
+    sixth.points[3],
+    new Vector(300, 20),
+    new Vector(100, 20),
+    new Vector(40, 20),
+  ]);

-  const eighth = new Track([seventh.points[3], new Vector(30, 20), new Vector(20, 30), first.points[0]]);
+  const eighth = new Track([
+    seventh.points[3],
+    new Vector(30, 20),
+    new Vector(20, 30),
+    first.points[0],
+  ]);

  const tracks = [first, second, third, fourth, fifth, sixth, seventh, eighth];
  for (const [i, track] of tracks.entries()) {
@@ -148,5 +306,42 @@ export const generateSquareTrack = () => {
  // second.prev = first;
  // third.

-  return new Spline<Track>([first, second, third, fourth, fifth, sixth, seventh, eighth]);
+  return new Spline<Track>([
+    first,
+    second,
+    third,
+    fourth,
+    fifth,
+    sixth,
+    seventh,
+    eighth,
+  ]);
+};
+
+export const loadFromJson = () => {
+  const json = JSON.parse(localStorage.getItem("railPath") || "");
+  if (!json) return generateSquareTrack();
+  const segments: Track[] = [];
+
+  for (const { points } of json.segments) {
+    segments.push(
+      new Track(
+        points.map((p: { x: number; y: number }) => new Vector(p.x, p.y)),
+      ),
+    );
+  }
+
+  for (const [i, s] of segments.entries()) {
+    s.setNext(segments[(i + 1) % segments.length]);
+    s.setPrev(segments.at(i - 1)!);
+  }
+
+  return new Spline<Track>(segments);
+};
+
+export interface IControlNode {
+  anchor: Vector;
+  controls: [Vector, Vector];
+  tangent: boolean;
+  mirrored: boolean;
 }
--- a/train.old.ts
+++ b/train.old.ts
@@ -1,6 +1,6 @@
 import { drawLine } from "./drawing/line.ts";
 import { ComplexPath, PathSegment } from "./math/path.ts";
-import { Vector } from "./math/vector.ts";
+import { Vector } from "doodler";
 import { Follower } from "./physics/follower.ts";
 import { Mover } from "./physics/mover.ts";
 import { Track } from "./track.ts";
@@ -42,10 +42,10 @@ export class Train extends Follower {
  }

  follow(): void {
-    const [_, t] = this.currentTrack.followTrack(this);
+    // const [_, t] = this.currentTrack.followTrack(this);

    // this.position = this.currentTrack.getPointAtT(t);
-    this.velocity = this.currentTrack.tangent(t);
+    // this.velocity = this.currentTrack.tangent(t);
    this.velocity.normalize().mult(this.speed || this.maxSpeed);
    // if (nearest.dist(this.position) > 10)
    // this.seek(nearest);
@@ -178,6 +178,7 @@ class TrainCar extends Train {
        super.move();
      } else {
        this.draw()
+        this.follower?.draw();
      }
    }
    // this.draw()
--- a/train/train.ts
+++ b/train/train.ts
@@ -0,0 +1,145 @@
+import { drawLine } from "../drawing/line.ts";
+import { ComplexPath, PathSegment } from "../math/path.ts";
+import { Vector } from "doodler";
+import { Follower } from "../physics/follower.ts";
+import { Mover } from "../physics/mover.ts";
+import { Spline, Track } from "../track.ts";
+
+export class Train {
+  nodes: Vector[] = [];
+
+  cars: TrainCar[] = [];
+
+  path: Spline<Track>;
+  t: number;
+
+  engineLength = 40;
+  spacing = 30;
+
+  speed = 0;
+
+  constructor(track: Spline<Track>, cars: TrainCar[] = []) {
+    this.path = track;
+    this.t = 0;
+    this.nodes.push(this.path.followEvenPoints(this.t));
+    this.nodes.push(this.path.followEvenPoints(this.t - this.real2Track(40)));
+    const engineSprites = document.getElementById(
+      "engine-sprites",
+    )! as HTMLImageElement;
+    this.cars.push(
+      new TrainCar(
+        55,
+        engineSprites,
+        80,
+        20,
+        { at: new Vector(0, 60), width: 80, height: 20 },
+      ),
+      new TrainCar(
+        25,
+        engineSprites,
+        40,
+        20,
+        { at: new Vector(80, 0), width: 40, height: 20 },
+      ),
+    );
+    this.cars[0].points = this.nodes.map((n) => n) as [Vector, Vector];
+    this.cars[1].points = this.nodes.map((n) => n) as [Vector, Vector];
+    let currentOffset = 40;
+    for (const car of cars) {
+      currentOffset += this.spacing;
+      const a = this.path.followEvenPoints(this.t - currentOffset);
+      currentOffset += car.length;
+      const b = this.path.followEvenPoints(this.t - currentOffset);
+      car.points = [a, b];
+      this.cars.push(car);
+    }
+  }
+
+  move(dTime: number) {
+    this.t = (this.t + this.speed * dTime * 10) % this.path.evenPoints.length;
+    // console.log(this.t);
+    let currentOffset = 0;
+    for (const car of this.cars) {
+      if (!car.points) return;
+      const [a, b] = car.points;
+      a.set(this.path.followEvenPoints(this.t - currentOffset));
+      currentOffset += car.length;
+      b.set(this.path.followEvenPoints(this.t - currentOffset));
+      currentOffset += this.spacing;
+      car.draw();
+    }
+    // this.draw();
+  }
+
+  // draw() {
+  //   for (const [i, node] of this.nodes.entries()) {
+  //     doodler.drawCircle(node.point, 10, { color: 'purple', weight: 3 })
+  //     // const next = this.nodes[i + 1];
+  //     // if (next) {
+  //     //   const to = Vector.sub(node.point, next.point);
+  //     //   to.setMag(40);
+  //     //   doodler.line(next.point, Vector.add(to, next.point))
+  //     // }
+  //   }
+  // }
+
+  real2Track(length: number) {
+    return length / this.path.pointSpacing;
+  }
+}
+
+export class TrainCar {
+  img: HTMLImageElement;
+  imgWidth: number;
+  imgHeight: number;
+  sprite?: ISprite;
+
+  points?: [Vector, Vector];
+  length: number;
+
+  constructor(
+    length: number,
+    img: HTMLImageElement,
+    w: number,
+    h: number,
+    sprite?: ISprite,
+  ) {
+    this.img = img;
+    this.sprite = sprite;
+    this.imgWidth = w;
+    this.imgHeight = h;
+    this.length = length;
+  }
+
+  draw() {
+    if (!this.points) return;
+    const [a, b] = this.points;
+    const origin = Vector.add(Vector.sub(a, b).div(2), b);
+    const angle = Vector.sub(b, a).heading();
+
+    doodler.drawCircle(origin, 4, { color: "blue" });
+
+    doodler.drawRotated(origin, angle, () => {
+      this.sprite
+        ? doodler.drawSprite(
+          this.img,
+          this.sprite.at,
+          this.sprite.width,
+          this.sprite.height,
+          origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
+          this.imgWidth,
+          this.imgHeight,
+        )
+        : doodler.drawImage(
+          this.img,
+          origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
+        );
+    });
+  }
+}
+
+interface ISprite {
+  at: Vector;
+  width: number;
+  height: number;
+}
Author	SHA1	Message	Date
Emma	b3772052f5	begin work on proper framework	2025-02-04 16:46:35 -07:00
Emma	ed0daeef2b	fixes deprecation	2025-02-02 23:29:40 -07:00
Emma	08d63395e3	CARS and also better node editing	2023-02-13 16:38:58 -07:00
Emma	657f228d47	loading saved track layouts	2023-02-08 11:53:11 -07:00
Emma	9b03e6c2cb	Added evenly spaced points to paths	2023-02-08 01:14:13 -07:00
Emma	ae0575875f	Implements doodler 0.0.3a	2023-02-07 22:44:24 -07:00