diff --git a/debug.html b/debug.html index c79ae55..742e856 100644 --- a/debug.html +++ b/debug.html @@ -5,7 +5,7 @@ diff --git a/debug.ts b/debug.ts index 19908a0..63f325e 100644 --- a/debug.ts +++ b/debug.ts @@ -1,3 +1,3 @@ -import { TickDebug } from "./debug/tick"; +import { TickDebug, OrbitDemo } from "./debug/tick"; -Object.assign(globalThis, { TickDebug }); +Object.assign(globalThis, { TickDebug, OrbitDemo }); diff --git a/debug/tick.ts b/debug/tick.ts index 320d249..6179731 100644 --- a/debug/tick.ts +++ b/debug/tick.ts @@ -1,4 +1,4 @@ -import { h } from "../lib/html"; +import { canvas2d, h } from "../lib/html"; import { Cancel } from "../lib/source"; import { tick } from "../lib/tick"; @@ -34,3 +34,50 @@ export function TickDebug() { return [h("h1", {}, "Tick Event Demo"), start, stop, output, h("hr")]; } + +export function OrbitDemo() { + const [canvas, cx] = canvas2d({ + width: 512, + height: 512, + }); + cx.scale(1 / 2, 1 / 2); + cx.translate(512, 512); + + const masses: { x: number; y: number; r: number; m: number; c: string }[] = [ + { x: 0, y: 0, r: 10, m: 10000, c: "yellow" }, + { x: -200, y: 200, r: 4, m: 4, c: "red" }, + { x: -450, y: 0, r: 5, m: 5, c: "blue" }, + ]; + + const tickSource = tick(16); + let cancel: Cancel; + + const begin = () => { + // reset / init + cancel?.(); + // subscribe to source, stash cancellation func + cancel = tickSource((tick) => { + switch (tick[0]) { + case "physics": + break; + case "render": + cx.fillStyle = "black"; + cx.fillRect(-512, -512, 1024, 1024); + masses.forEach(({ x, y, r, c }) => { + cx.fillStyle = c; + cx.beginPath(); + cx.arc(x, y, r, 0, Math.PI * 2); + cx.fill(); + }); + break; + } + }); + }; + + const end = () => cancel?.(); + + const start = h("button", { onclick: begin }, "Begin"); + const stop = h("button", { onclick: end }, "Cease"); + + return [h("h1", {}, "Orbit Demo"), h("p", {}, start, stop), canvas, h("hr")]; +}