tangent128/2024.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Orbit Demo: draw bodies

Browse source
This commit is contained in:
Tangent Wantwight 2024-01-23 23:42:05 -05:00
parent 3dbca6edb6
commit f680d8082a
3 changed files with 51 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
debug.html
View file

@ -5,7 +5,7 @@
<body> <body>
<script src="js/debug.js"></script> <script src="js/debug.js"></script>
<script> <script>
document.body.append(...TickDebug()); document.body.append(...OrbitDemo(), ...TickDebug());
</script> </script>
</body> </body>
</html> </html>

4
debug.ts
View file

@ -1,3 +1,3 @@
import { TickDebug } from "./debug/tick"; import { TickDebug, OrbitDemo } from "./debug/tick";
Object.assign(globalThis, { TickDebug }); Object.assign(globalThis, { TickDebug, OrbitDemo });

49
debug/tick.ts
View file

@ -1,4 +1,4 @@
import { h } from "../lib/html"; import { canvas2d, h } from "../lib/html";
import { Cancel } from "../lib/source"; import { Cancel } from "../lib/source";
import { tick } from "../lib/tick"; import { tick } from "../lib/tick";
@ -34,3 +34,50 @@ export function TickDebug() {
return [h("h1", {}, "Tick Event Demo"), start, stop, output, h("hr")]; 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")];
}