near/computersandblues.hitomezashi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Now with interactive settings!

Browse source
This commit is contained in:
arne 2024-07-18 22:25:38 +02:00
commit 8a3ed2e733
2 changed files with 81 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -5,7 +5,19 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thi.ng rdom</title>
<style>html, body { padding: 0; margin: 0; min-height: 100vh; }</style>
<style>
html, body { padding: 0; margin: 0; min-height: 100vh; }
body {
background: #eee;
color: #222;
font-family: sans-serif;
padding: 40px;
}
canvas {
border: 1px solid #99b;
}
</style>
</head>
<body>
<div id="app"></div>

69
src/main.ts
View file

@ -1,12 +1,18 @@
import { line, group, translate, asSvg, svgDoc } from "@thi.ng/geom";
import { $canvas } from "@thi.ng/rdom-canvas";
import { reactive } from "@thi.ng/rstream";
import { cycle, takeWhile, comp, mapIndexed, transduce, push, map } from "@thi.ng/transducers"
import { reactive, sync, } from "@thi.ng/rstream";
import { $compile, $input } from '@thi.ng/rdom'
import { cycle, takeWhile, comp, mapIndexed, transduce, push } from "@thi.ng/transducers"
const xs = cycle([0,1,0,1,0,1])
const ys = cycle([1,0,1,1,0,1])
const xPattern = "101110100101100"
const yPattern = "101001111001110000101"
const cellSize = 25
const parsePattern = (pattern: string) => pattern.split('').map(x => Number.parseInt(x, 10))
const xs = reactive(xPattern).map((pattern) => parsePattern(pattern))
const ys = reactive(yPattern).map((pattern) => parsePattern(pattern))
const cellSize = 12
// available size for a2: 420 * 594
const width = 420
@ -33,13 +39,18 @@ const startPoints = (pattern: Iterable<number>, maxCoord: number) =>
takeWhile(([coord, _]) => coord <= maxCoord),
),
push(),
pattern
cycle(pattern)
)
const xStarts = startPoints(xs, width - 2 * xPadding)
const yStarts = startPoints(ys, height - 2 * yPadding)
const scene = sync({
src: { xs, ys, }
}).map(({ xs, ys }) => {
console.log({ xs, ys })
const yLines = xStarts.flatMap(
const xStarts = startPoints(xs, width - 2 * xPadding)
const yStarts = startPoints(ys, height - 2 * yPadding)
const yLines = xStarts.flatMap(
([xCoord, val]: [number, number]) =>
Array
.from({ length: yCells })
@ -47,11 +58,9 @@ const yLines = xStarts.flatMap(
? line([xCoord, cell * cellSize], [xCoord, (cell + 1) * cellSize])
: null)
.filter(v => v != null)
)
)
console.log({ xStarts, yStarts })
const xLines = yStarts.flatMap(
const xLines = yStarts.flatMap(
([yCoord, val]: [number, number]) =>
Array
.from({ length: xCells })
@ -59,18 +68,38 @@ const xLines = yStarts.flatMap(
? line([cell * cellSize, yCoord], [(cell + 1) * cellSize, yCoord])
: null)
.filter(v => v != null)
)
)
const scene = reactive(
translate(
return translate(
group(
{__background: '#eee', stroke: '#222' },
{ __background: '#eee', stroke: '#222' },
[...yLines, ...xLines]
),
[xPadding, yPadding]
)
)
})
$canvas(scene, size).mount(document.body)
$compile(
["main",
{},
["h1", {}, "Hitomezashi Patterns"],
$canvas(scene, size),
["h2", {}, "Settings"],
["div", {}, ["label", {}, "X Pattern: ",
["input", {
type: "text",
value: xPattern,
oninput: $input(ys)
}]]],
["div", {}, ["label", {}, "Y Pattern: ",
["input", {
type: "text",
value: yPattern,
oninput: $input(ys)
}]]],
["h2", {}, "SVG Export"],
["div", {}, ["textarea", {}, asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene.deref()))]],
]
).mount(document.body)
// console.log(asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene.deref())))
// console.log()