genuary-2025-day-25-d5cc7dqvf0.js

const { svg, prng, perlin, picker, array, dist, shuffle } = Pxyz
const { circle, line, polyline, group, rect } = Pxyz

// setup
const rand = prng(Atelier.seed())
const noise = perlin(15, rand)

// variables
const { width: W, height: H } = Atelier.resize(105, 148)
const M = 10
const [top, left, width, height] = [M, M, W - M * 2, H - M * 2]
const stroke = 0.25
const maxSize = Math.max(W, H) * 1.4
const totalLines = Math.round(maxSize / (stroke * 2))
const center = { x: W / 2, y: H / 2 }
const rgb = picker('rgb', { hex: true })
const colors = shuffle([
  rgb('#00A4E4'),
  rgb('#FFE600'),
  rgb('#E6007E'),
  rgb('#2F4F4F'),
  rgb('#EEEEE9')
], rand)

// fabricators
const fabLines = () => array(totalLines, (i) => {
  return line(left, top + i * stroke * 2, maxSize, top + i * stroke * 2)
})

const fabLinePoints = (frame) => group(fabLines())
  .center(W / 2, H / 2).rotate(rand(360)).ungroup()
  .reduce((memo, l) => {
    const ps = frame.intersect(l)
    if (ps.length == 2) {
      const last = memo[memo.length - 1]
      const [p1, p2] = ps
      dist(last, p1) < dist(last, p2) ? memo.push(p1, p2) : memo.push(p2, p1)
    }
    return memo
  }, [])

const fabSingleLine = (frame) => polyline(fabLinePoints(frame))
  .subsample(1)
  .displace((p) => {
    const off = -5 + noise(p.x, p.y / 3) * 10
    return {
      x: p.x + off,
      y: p.y + off,
    }
  })

const fabGradLine = (frame) => {
  return fabSingleLine(frame).segments.map((seg) => {
    const pos = noise(seg.p1.x, seg.p1.y / 3) * 1.1
    const color = colors[0].mix(colors[1], pos)
    return seg.stroke(color)
  })
}

// build
const frame = rect(left, top, width, height)
const theLine = fabGradLine(frame)

// organisation
const layer = group(theLine).strokeWidth(stroke)

// draw
svg('#canvas', (doc) => {
  doc.setup(W, H).background(Atelier.colors.stonewhite, W, H)
  doc.linecap('round').linejoin('round').fill(false)
  doc.draw(layer)
})