Make cell size configurable

src/main.ts

@@ -2,37 +2,31 @@ import { line, group, translate, asSvg, svgDoc } from "@thi.ng/geom";
 import { $canvas } from "@thi.ng/rdom-canvas";
 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"
+import { cycle, takeWhile, comp, mapIndexed, transduce, push, trace } from "@thi.ng/transducers"
 
-const xPattern = "101110100101100"
-const yPattern = "101001111001110000101"
+const cellSize_ = "12"
+const xs_ = "101110100101100"
+const ys_ = "101001111001110000101"
 
 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
+const xs = reactive(xs_).map((pattern) => parsePattern(pattern))
+const ys = reactive(ys_).map((pattern) => parsePattern(pattern))
+const cellSize = reactive(cellSize_).map(num => Number.parseInt(num, 10))
 
 // available size for a2: 420 * 594
 const width = 420
 const height = 594
 
-const minPadding = cellSize
-
 // calculate available drawing area
 
-const xCells = Math.floor((width - 2 * minPadding) / cellSize)
-const xPadding = (width - (xCells * cellSize)) / 2
 
-const yCells = Math.floor((height - 2 * minPadding) / cellSize)
-const yPadding = (height - (yCells * cellSize)) / 2
 
 const size = [width, height]
 
 // build a list of start positions
 
-const startPoints = (pattern: Iterable<number>, maxCoord: number) =>
+const startPoints = (pattern: Iterable<number>, cellSize: number, maxCoord: number) =>
   transduce(
     comp(
       mapIndexed((cell, val) => [cell * cellSize, val] as const),
@@ -43,12 +37,20 @@ const startPoints = (pattern: Iterable<number>, maxCoord: number) =>
   )
 
 const scene = sync({
-  src: { xs, ys, }
-}).map(({ xs, ys }) => {
-  console.log({ xs, ys })
+  src: { cellSize, xs, ys, }
+}).map(({ cellSize, xs, ys }) => {
+  console.log({ cellSize, xs, ys })
 
-  const xStarts = startPoints(xs, width - 2 * xPadding)
-  const yStarts = startPoints(ys, height - 2 * yPadding)
+  const minPadding = cellSize
+
+  const xCells = Math.floor((width - 2 * minPadding) / cellSize)
+  const xPadding = (width - (xCells * cellSize)) / 2
+
+  const yCells = Math.floor((height - 2 * minPadding) / cellSize)
+  const yPadding = (height - (yCells * cellSize)) / 2
+
+  const xStarts = startPoints(xs, cellSize, width - 2 * xPadding)
+  const yStarts = startPoints(ys, cellSize, height - 2 * yPadding)
 
   const yLines = xStarts.flatMap(
     ([xCoord, val]: [number, number]) =>
@@ -79,27 +81,31 @@ const scene = sync({
   )
 })
 
+scene.map(scene => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))).subscribe(trace("svg"))
+
 $compile(
   ["main",
    {},
    ["h1", {}, "Hitomezashi Patterns"],
    $canvas(scene, size),
    ["h2", {}, "Settings"],
+   ["div", {}, ["label", {}, "Grid size: ",
+                ["input", {
+                  type: "text",
+                  value: cellSize_,
+                  oninput: $input(cellSize)
+                }]]],
    ["div", {}, ["label", {}, "X Pattern: ",
                 ["input", {
                   type: "text",
-                  value: xPattern,
+                  value: xs_,
                   oninput: $input(ys)
                 }]]],
    ["div", {}, ["label", {}, "Y Pattern: ",
                 ["input", {
                   type: "text",
-                  value: yPattern,
+                  value: ys_,
                   oninput: $input(ys)
                 }]]],
-   ["h2", {}, "SVG Export"],
-   ["div", {}, ["textarea", {}, asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene.deref()))]],
   ]
 ).mount(document.body)
-
-// console.log()