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 });