shigureni.dev

ハーフトーン — 明るさを点の大きさに

濃淡を点の大きさで出す。格子のマスごとに、暗いところは大きい円、明るいところは小さい円を打つ。点の間隔は一定で、半径だけが明るさに反応する。

ハーフトーン。連続した濃淡を「インク一色＋紙の白」で再現する印刷技術。各マスに置く点の面積を濃さに比例させると、離れて見たとき面積の平均が灰色の階調になる。点を打つ格子を傾けた角度がスクリーン角で、刷り色ごとに角度をずらす。角の選び方を誤ると格子どうしが干渉してモアレが出る。点の密度で濃淡を出す順序ディザとは、面積でなく個数で割り当てる点が違うだけで目的は同じ。

濃さに使う元の絵は、sin と cos を混ぜた場。source は (gx, gy) を 0〜1 の明るさに写す。マスの中心で一度だけ呼んで、その明るさをセルの色に塗る。y 方向の格子数 ny を x 方向の nx と別に持って、矩形セルで全面を埋める。

波の混ざった濃淡が格子で塗られて流れる。この明るさを点の半径に読み替える。マスごとに source を呼び、明るさを反転した dark = 1 - light を半径に掛ける。暗いマスほど dark が大きく円が太り、明るいマスでは円が縮んで消える。fillRect でなく arc で丸い点を打つ。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const nx = 56
  const ny = 44
  const cellW = w / nx
  const cellH = h / ny
  let t = 0

const source = (gx, gy) => {
    const u = gx / nx - 0.5
    const v = gy / ny - 0.5
    const a = (u + v) * 6
    const r = Math.sqrt(u * u + v * v) * 10
    const s = Math.sin(a + t) + Math.cos(r - t * 1.3) + Math.sin((u - v) * 5 - t * 0.7)
    return (s + 3) / 6
  }

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    t += 0.02

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    c.fillStyle = colors.tint(28)

for (let gy = 0; gy < ny; gy++) {
      const cy = (gy + 0.5) * cellH
      for (let gx = 0; gx < nx; gx++) {
        const cx = (gx + 0.5) * cellW
        const light = source(gx + 0.5, gy + 0.5)
        const dark = 1 - Math.min(1, Math.max(0, light))
        const radius = dark * Math.min(cellW, cellH) * 0.72
        if (radius < 0.25) continue
        c.beginPath()
        c.arc(cx, cy, radius, 0, Math.PI * 2)
        c.fill()
      }
    }
  }
}

塗りの濃淡が、大小の点の格子に変わる。暗い谷では点が膨れて隣と接し、明るい尾根では点が抜けて紙の白が残る。0.72 を上げると点が太って早く繋がり、下げると点が痩せて白が増える。radius < 0.25 の行で、半径がほぼ 0 のマスは円を打たずに飛ばしている。

点を打つ格子は画面と平行でなくてよい。格子の (列, 行) を画面中心まわりに角度ぶん回した位置に点を置くと、網点が斜めに並ぶ。pitch が点の間隔で、回した格子が画面からはみ出すぶんまで col, row を広げて、傾けても全面が点で埋まるようにする。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const pitch = h / 30
  const span = Math.hypot(w, h)
  const cols = Math.ceil(span / pitch) + 2
  const cx = w / 2
  const cy = h / 2
  let t = 0

const source = (x, y) => {
    const u = x / w - 0.5
    const v = y / h - 0.5
    const r = Math.sqrt(u * u + v * v) * 10
    const s = Math.sin((u + v) * 8 + t) + Math.cos(r - t * 1.3) + Math.sin((u - v) * 10)
    return (s + 3) / 6
  }

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    t += 0.02
    const angle = 0.4

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    c.fillStyle = colors.tint(28)

const ca = Math.cos(angle)
    const sa = Math.sin(angle)

for (let row = -cols; row < cols; row++) {
      for (let col = -cols; col < cols; col++) {
        const lx = col * pitch
        const ly = row * pitch
        const px = cx + lx * ca - ly * sa
        const py = cy + lx * sa + ly * ca
        if (px < -pitch || px > w + pitch || py < -pitch || py > h + pitch) continue
        const light = source(px, py)
        const dark = 1 - Math.min(1, Math.max(0, light))
        const radius = dark * pitch * 0.7
        if (radius < 0.25) continue
        c.beginPath()
        c.arc(px, py, radius, 0, Math.PI * 2)
        c.fill()
      }
    }
  }
}

網点の格子が斜めに傾いて、点の列が斜め方向に揃う。angle を 0 にすると格子が画面と平行に戻り、増やすと点の列ごと回る。source の中身を場でなく取り込んだ絵の明るさに差し替えても、点の打ち方はそのまま効く。