diff --git a/index.html b/index.html
index 96f0051..c6fdf07 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,19 @@
Thi.ng rdom
-
+
diff --git a/src/main.ts b/src/main.ts
index a0efd3b..bdd0cae 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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,44 +39,67 @@ const startPoints = (pattern: Iterable, 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(
- ([xCoord, val]: [number, number]) =>
- Array
- .from({ length: yCells })
- .map((_, cell) => (cell + val) % 2 === 0 // start at the beginning or skip it
- ? line([xCoord, cell * cellSize], [xCoord, (cell + 1) * cellSize])
- : null)
- .filter(v => v != null)
-)
+ const xStarts = startPoints(xs, width - 2 * xPadding)
+ const yStarts = startPoints(ys, height - 2 * yPadding)
-console.log({ xStarts, yStarts })
+ const yLines = xStarts.flatMap(
+ ([xCoord, val]: [number, number]) =>
+ Array
+ .from({ length: yCells })
+ .map((_, cell) => (cell + val) % 2 === 0 // start at the beginning or skip it
+ ? line([xCoord, cell * cellSize], [xCoord, (cell + 1) * cellSize])
+ : null)
+ .filter(v => v != null)
+ )
-const xLines = yStarts.flatMap(
- ([yCoord, val]: [number, number]) =>
- Array
- .from({ length: xCells })
- .map((_, cell) => (cell + val) % 2 === 0 // start at the beginning or skip it
- ? line([cell * cellSize, yCoord], [(cell + 1) * cellSize, yCoord])
- : null)
- .filter(v => v != null)
-)
+ const xLines = yStarts.flatMap(
+ ([yCoord, val]: [number, number]) =>
+ Array
+ .from({ length: xCells })
+ .map((_, cell) => (cell + val) % 2 === 0 // start at the beginning or skip it
+ ? 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()