const ns = 'http://www.w3.org/2000/svg'

const getCenterPosition = (x0, y0, a) => {
  return [
    x0 + (a * Math.random()),
    y0 + (a * Math.random())
  ]
}

const dotRadius = 1 // ドットの半径
const svgSize = 500 // パターンキャンバスの一辺長
// 区画の一辺の長さを受け取る
const drawDots = a => {
  const svgRoot = document.querySelector('svg.container')
  svgRoot.innerHTML = ''
  const width = svgRoot.clientWidth
  const num = Math.ceil(width / a)
  
  // デバッグ用の方眼
  // for (let r = 0; r < num; r++) {
  //   const x = r * a
  //   for (let c = 0; c < num; c++) {
  //     const y = c * a
  //     const rect = document.createElementNS(ns, 'rect')
  //     rect.setAttribute('width', a)
  //     rect.setAttribute('height', a)
  //     rect.setAttribute('x', r * a)
  //     rect.setAttribute('y', c * a)
  //     rect.setAttribute('fill', 'transparent')
  //     rect.setAttribute('stroke', '#ccc')
  //     rect.setAttribute('stroke-width', 1)
  //     svgRoot.appendChild(rect)
  //   }
  // }
  
  // 方眼内のランダムな位置に中心を持つドット
  for (let r = 0; r < num; r++) {
    const x = r * a
    for (let c = 0; c < num; c++) {
      const y = c * a
      const [cx, cy] = getCenterPosition(x, y, a)
      const circle = document.createElementNS(ns, 'circle')
      circle.setAttribute('fill', '#000')
      circle.setAttribute('r', dotRadius)
      circle.setAttribute('cx', cx)
      circle.setAttribute('cy', cy)
      svgRoot.appendChild(circle)
    }
  }
}

// PNG画像化する
const generatePngImage = () => {
  const svgRoot = document.querySelector('svg.container')
  const img = document.querySelector('img.tone')
  const svgStr = btoa(unescape(encodeURIComponent(
    new XMLSerializer().serializeToString(svgRoot))))

  console.log("new XMLSerializer().serializeToString(svgRoot):")
  console.log(new XMLSerializer().serializeToString(svgRoot))
  console.log("svgStr:")
  console.log(svgStr)
  
  const srcUrl = `data:image/svg+xml;charset=utf-8;base64,${svgStr}`
  const scale = 1 /// (dotRadius * 2)
  const image = new Image()
  image.onload = function () {
    const canvas = document.createElement('canvas')
    // DPRを考慮した一辺長
    const size = svgSize //* window.devicePixelRatio * scale
    canvas.width = size
    canvas.height = size
    const ctx = canvas.getContext('2d')
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, size, size)
    ctx.drawImage(image, 0, 0, svgSize, svgSize, 0, 0, size, size)
    img.src = canvas.toDataURL('image/png')
  }
  image.src = srcUrl
}

const main = a => {
  drawDots(a)
  generatePngImage()
}

window.addEventListener('load', () => { 
  const range = document.querySelector('input.value-a')
  range.addEventListener('change', e => {
    const value = +e.target.value
    document.querySelector('span.value-a').innerText = value
    main(value)
  }, false)
  
  main(8)
}, false)