From 497731f62b299517f3831c13f42836d689d065c7 Mon Sep 17 00:00:00 2001
From: Tangent Wantwight <tangent128@gmail.com>
Date: Sat, 3 Feb 2024 15:36:29 -0500
Subject: [PATCH] Skeleton for pixelflood
---
pixelflood.html | 11 +++++++++++
pixelflood.ts | 45 +++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 56 insertions(+)
create mode 100644 pixelflood.html
create mode 100644 pixelflood.ts
diff --git a/pixelflood.html b/pixelflood.html
new file mode 100644
index 0000000..a9d9d7f
--- /dev/null
+++ 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>
diff --git a/pixelflood.ts b/pixelflood.ts
new file mode 100644
index 0000000..ba288a7
--- /dev/null
+++ 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 });