83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { canvas2d, h } from "../lib/html";
|
|
import { Cancel } from "../lib/source";
|
|
import { tick } from "../lib/tick";
|
|
|
|
export function TickDebug() {
|
|
const output = h("pre", {});
|
|
|
|
const tickSource = tick(30);
|
|
let cancel: Cancel;
|
|
|
|
const begin = () => {
|
|
// reset / init
|
|
cancel?.();
|
|
output.innerHTML = "";
|
|
// subscribe to source, stash cancellation func
|
|
cancel = tickSource((tick) => {
|
|
switch (tick[0]) {
|
|
case "physics":
|
|
output.append(`${new Date().toISOString()}: Physics\n`);
|
|
break;
|
|
case "render":
|
|
output.append(
|
|
`${new Date().toISOString()}: Render (dt=${tick[1]})\n`
|
|
);
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
|
|
const end = () => cancel?.();
|
|
|
|
const start = h("button", { onclick: begin }, "Begin");
|
|
const stop = h("button", { onclick: end }, "Cease");
|
|
|
|
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")];
|
|
}
|