Skeleton for pixelflood

2024-02-03 15:36:29 -05:00 · 2024-02-03 15:36:29 -05:00 · 497731f62b
commit 497731f62b
parent b04ba4e622
2 changed files with 56 additions and 0 deletions
--- a/pixelflood.html
+++ b/pixelflood.html
@ -0,0 +1,11 @@
+<html>
+  <head>
+    <title>Pixelflood Art</title>
+  </head>
+  <body>
+    <script src="js/pixelflood.js"></script>
+    <script>
+      document.body.append(...PixelfloodApplet());
+    </script>
+  </body>
+</html>
--- a/pixelflood.ts
+++ b/pixelflood.ts
@ -0,0 +1,45 @@
+// TODO choose generator
+// TODO get/put image data in render/tick loop
+// TODO rediscover RGB/HSV pixelflood techniques
+
+import { canvas2d, h } from "./lib/html";
+
+interface Controls {
+  seed: HTMLInputElement;
+}
+
+function PixelfloodApplet() {
+  const [canvas, cx] = canvas2d({});
+  const [controls, controlUi] = ControlUi();
+
+  return [canvas, ...controlUi];
+}
+
+function numInput(init: number) {
+  return h("input", { type: "number", valueAsNumber: init });
+}
+
+function ControlUi(): [Controls, HTMLElement[]] {
+  let seed, width, height;
+
+  const html = [
+    h("h2", {}, "Controls"),
+    h(
+      "div",
+      {},
+      h(
+        "label",
+        {},
+        "Width: ",
+        (width = numInput(128)),
+        "Height: ",
+        (height = numInput(128))
+      )
+    ),
+    h("div", {}, h("label", {}, "Random Seed: ", (seed = numInput(128)))),
+  ];
+
+  return [{ seed }, html];
+}
+
+Object.assign(globalThis, { PixelfloodApplet });