shigureni.dev

点の密度で濃淡を作る

単色しか使えないとき、灰色の中間調はどう出すか。白と黒の点を詰める密度で、目に「灰色」と錯覚させる。点を近く詰めれば黒く、まばらにすれば白く見える。

ディザ。白黒の点を細かく敷き、黒の割合で見かけの灰色を作る。網膜の解像度より細かい点は一つずつ分解されず、面積あたりの黒さが平均されて中間調に見える。新聞・FAX・モノクロ表示など、二値しか出せない媒体で連続調を再現するのに使われてきた。

いちばん素朴なのは、位置ごとに違うしきい値を持たせるやり方。小さな行列（Bayer 行列）を盤面にタイル状に敷き、各マスでその値より明るければ白・暗ければ黒。隣り合うマスのしきい値をわざとバラけさせてあるので、帯が散って網点になる。

下は、左から右へ暗くなるグラデーションを、4×4 の Bayer 行列で2値化したもの。連続のグラデが、点の粗密に化ける。

明るい左側はほとんど打たれず、暗い右側はびっしり。中間は規則的にまだらになる。しきい値を全マス同じ（一定値）にすると、ある明るさで一気に全部黒に切り替わって帯ができる。バラけたしきい値が、その崖をならしている。

しきい値を固定する代わりに、はみ出した誤差を隣のマスへ配って回すやり方もある。Floyd–Steinberg。下は、左から右へ暗くなる明るさを縦に少し波打たせて、各マスを白か黒に丸めるたび、丸めで切り捨てた誤差を右と下の3マスへ配ったもの。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cell = 4
  const cols = Math.ceil(w / cell)
  const rows = Math.ceil(h / cell)
  const buf = new Float32Array(cols * rows)
  let t = 0

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

return () => {
    t += 0.02

// 左→右で暗くなる明るさを、縦にゆっくり波打たせて毎フレーム作り直す
    for (let gy = 0; gy < rows; gy++) {
      for (let gx = 0; gx < cols; gx++) {
        const wave = Math.sin(gy * 0.08 + t) * 0.12
        buf[gy * cols + gx] = 1 - gx / cols + wave
      }
    }

// 各マスを白か黒に丸め、丸めで出た誤差を右と下の3マスへ配る
    for (let gy = 0; gy < rows; gy++) {
      for (let gx = 0; gx < cols; gx++) {
        const i = gy * cols + gx
        const old = buf[i]
        const next = old < 0.5 ? 0 : 1
        const err = old - next
        buf[i] = next
        if (gx + 1 < cols) buf[i + 1] += (err * 7) / 16
        if (gy + 1 < rows) {
          const j = i + cols
          if (gx > 0) buf[j - 1] += (err * 3) / 16
          buf[j] += (err * 5) / 16
          if (gx + 1 < cols) buf[j + 1] += (err * 1) / 16
        }
      }
    }

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    c.fillStyle = colors.tint(28)
    for (let gy = 0; gy < rows; gy++) {
      for (let gx = 0; gx < cols; gx++) {
        if (buf[gy * cols + gx] < 0.5) c.fillRect(gx * cell, gy * cell, cell, cell)
      }
    }
  }
}

Bayer の規則的な網点と違って、点の散り方が不規則になる。同じ明るさの帯でも、誤差が左から運ばれてくるぶん、隣のマスの判定が前のマスに引きずられる。

Floyd–Steinberg は誤差拡散ディザ。あるマスを白か黒に丸めると、本来の明るさとの差（誤差）が出る。その誤差を右に 7/16、左下に 3/16、下に 5/16、右下に 1/16 の重みで未処理のマスへ配る。配られた誤差は次のマスの明るさに足し込まれ、丸めの向きを変える。局所では二値でも、面で見れば誤差が打ち消し合って平均の明るさが保たれる。1976 年に Robert Floyd と Louis Steinberg が発表した。

濃さを密度でなく点の大きさで作る手がハーフトーン。暗い所ほど大きな丸を打つ。下は、中央から広がる同心円の明るさを格子で測って、暗いマスほど大きな丸を置いたもの。

明るい所では丸が痩せて消え、暗い所では丸が太ってマスを埋める。格子の間隔は一定のまま、丸の面積だけで濃淡が出る。

ハーフトーンは新聞や雑誌の写真印刷で使われてきた網点法。一定間隔の格子に、各点の明るさに応じた大きさの円（網点）を置く。点の間隔（線数）は固定で、点の面積だけで階調を表す。インクは1色でも、面積あたりのインク量が連続調に見える。1 / 線数 がどれだけ細かい階調まで刻めるかを決める。