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

Skeleton for pixelflood

Browse source
This commit is contained in:
Tangent Wantwight 2024-02-03 15:36:29 -05:00
parent b04ba4e622
commit 497731f62b
2 changed files with 56 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
pixelflood.html Normal file
View file

@ -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>

45
pixelflood.ts Normal file
View file

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