From 497731f62b299517f3831c13f42836d689d065c7 Mon Sep 17 00:00:00 2001 From: Tangent Wantwight 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 @@ + + + Pixelflood Art + + + + + + 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 });