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

Add setting for cellsize

Browse source
This commit is contained in:
arne 2024-07-20 19:27:51 +02:00
commit f42bf4723a
1 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/main.ts
View file

@ -11,6 +11,7 @@ import { cycle, comp, range, iterator, map, mapcat, reverse, zip } from "@thi.ng
const width_ = 420
const height_ = 594
const cellSize_ = 12
const padding_ = 5 // * cellSize
const xSeeds_ = "101110100101100"
const ySeeds_ = "101001111001110000101"
@ -21,6 +22,9 @@ const unit_ = 'mm'
const width = reactive(width_)
const height = reactive(height_)
const unit = reactive(unit_)
const cellSize = reactive(cellSize_).map(num => Number.isNaN(num) || num < 5 ? 5 : num) // restrict cells to be at least 5 $unit
const padding = reactive(padding_)
const size = sync({ src: { width, height } }).map(({ width, height }) => [width, height])
const toNumber = (v: any) => typeof v === 'number' ? v : Number.parseInt(v, 10)
@ -28,7 +32,6 @@ const parsePattern = (pattern: string) => pattern.split('').map(toNumber)
const xSeeds = reactive(xSeeds_).map((pattern) => parsePattern(pattern))
const ySeeds = reactive(ySeeds_).map((pattern) => parsePattern(pattern))
const cellSize = reactive(cellSize_).map(num => Number.isNaN(num) || num < 5 ? 5 : num) // restrict cells to be at least 5 $unit
// const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color')
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
@ -80,23 +83,24 @@ const scene = sync({
src: {
size,
cellSize,
padding,
xSeeds,
ySeeds,
}
}).map(({
size,
cellSize,
padding,
xSeeds,
ySeeds,
}) => {
const [width, height] = size
const minPadding = cellSize
// calculate available drawing area
const xCells = Math.floor((width - 2 * minPadding) / cellSize)
const xCells = Math.floor((width - 2 * padding * cellSize) / cellSize)
const xPadding = (width - (xCells * cellSize)) / 2
const yCells = Math.floor((height - 2 * minPadding) / cellSize)
const yCells = Math.floor((height - 2 * padding * cellSize) / cellSize)
const yPadding = (height - (yCells * cellSize)) / 2
const xLines = [...map(l => scale(l, cellSize), generateLines(yCells, xCells, cycle(ySeeds), xLineGen))]
@ -143,6 +147,12 @@ $compile(
value: cellSize.deref()!,
oninput: $inputNum(cellSize),
}),
input("Padding", {
type: "number",
min: "1",
value: padding.deref()!,
oninput: $inputNum(padding),
}),
input("X Pattern: ", {
type: "text",
value: xSeeds_,