shigureni.dev

Sobel — 輪郭だけ抜く

畳み込みの重みを差分にすると、平らな所は消え、変化の急な所だけが残る。エッジ検出。値が揃った面では出力が 0 に近く、隣との差が大きい境目で値が立つ。

Sobel。横方向の傾き Gx と縦方向の傾き Gy を別々のカーネルで測り、その大きさ √(Gx² + Gy²) を輪郭の強さにする微分フィルタ。Gx のカーネルは左右で符号が逆の [-1 0 +1; -2 0 +2; -1 0 +1] で、横に並ぶ三つの差分を縦に [1 2 1] で重みづけして足す。この [1 2 1] が差分と直交する向きの軽い平滑化になり、単純な差分よりノイズに強い。Irwin Sobel と Gary Feldman が 1968 年に提案したもの。

輪郭を抜くには元の絵がいる。sin と中心からの距離の波を混ぜた場を Float32Array に書き込む。波が緩く変化するので、明暗の傾きが場所ごとに違う。

明るさが波打って、中心から同心円の縞も広がる。この濃淡の傾きを測る。横方向だけなら、各セルの左右の値の差を取る。Gx は右隣三つを足して左隣三つを引いた値で、中央列を 2 倍に重みづけしてある。差の絶対値を明るさに写すと、左右に明暗が切り替わる縦の境目だけが暗く立つ。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const n = 96
  const cellW = w / n
  const cellH = h / n
  const buffer = new Float32Array(n * n)
  let t = 0

const sample = (x, y) =>
    0.5 +
    0.25 * Math.sin(x * 0.18 + t) +
    0.15 * Math.cos(y * 0.16 - t * 1.3) +
    0.12 * Math.sin(Math.hypot(x - n / 2, y - n / 2) * 0.22 - t)

const at = (x, y) => {
    const cx = x < 0 ? 0 : x >= n ? n - 1 : x
    const cy = y < 0 ? 0 : y >= n ? n - 1 : y
    return buffer[cy * n + cx]
  }

return () => {
    t += 0.03

for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        buffer[y * n + x] = sample(x, y)
      }
    }

for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        const gx =
          at(x + 1, y - 1) +
          2 * at(x + 1, y) +
          at(x + 1, y + 1) -
          at(x - 1, y - 1) -
          2 * at(x - 1, y) -
          at(x - 1, y + 1)
        const v = Math.min(1, Math.abs(gx) / 1.4)
        c.fillStyle = colors.tint(238 - v * 230)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

縦に走る境目が暗い線で浮き、横の縞には反応しない。Gx は左右の差だから、横方向に明るさが変わる所だけを拾う。at は配列を読む関数で、x が -1 や n を指すと端の値に丸めて縁でも 3×3 が揃うようにしている。

Gy は同じ重みを 90 度回して上下の差を測る。横の縞はこちらが拾う。両方を組み合わせると向きを問わず境目が出る。各セルで Gx と Gy を測り、√(Gx² + Gy²) をその点の傾きの大きさにする。傾きを不透明度に写し、平らな所は continue で飛ばして、急な所だけ濃く塗る。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const n = 96
  const cellW = w / n
  const cellH = h / n
  const buffer = new Float32Array(n * n)
  let t = 0

const sample = (x, y) =>
    0.5 +
    0.25 * Math.sin(x * 0.18 + t) +
    0.15 * Math.cos(y * 0.16 - t * 1.3) +
    0.12 * Math.sin(Math.hypot(x - n / 2, y - n / 2) * 0.22 - t)

const at = (x, y) => {
    const cx = x < 0 ? 0 : x >= n ? n - 1 : x
    const cy = y < 0 ? 0 : y >= n ? n - 1 : y
    return buffer[cy * n + cx]
  }

return () => {
    t += 0.03

for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        buffer[y * n + x] = sample(x, y)
      }
    }

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

for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        const tl = at(x - 1, y - 1)
        const tm = at(x, y - 1)
        const tr = at(x + 1, y - 1)
        const ml = at(x - 1, y)
        const mr = at(x + 1, y)
        const bl = at(x - 1, y + 1)
        const bm = at(x, y + 1)
        const br = at(x + 1, y + 1)
        const gx = tr + 2 * mr + br - tl - 2 * ml - bl
        const gy = bl + 2 * bm + br - tl - 2 * tm - tr
        const mag = Math.sqrt(gx * gx + gy * gy)
        const a = mag > 1.4 ? 1 : mag / 1.4
        if (a < 0.06) continue
        c.fillStyle = colors.tintAlpha(8, a)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

面が消えて、明暗の境目だけが線になって残る。同心円の波の尾根と谷のあいだに輪が浮き、波が動くと輪も場の上を滑る。Gx だけのときは縦の境目しか出なかったが、Gy を足して大きさを取ると向きによらず境目が出る。mag > 1.4 の閾値を下げると弱い傾きまで線になって全体がざわつき、上げると一番急な縁だけが残る。

塗りでなく境界を抜く処理で、等値線と目的は近い。等値線が「ちょうど iso の点を繋ぐ」のに対し、Sobel は「変化が急な点を光らせる」。同じ場から、片や値の等しい所を線にし、片や値の変わり目を線にする。