PixLab.
写真を「数の格子」として見て、いじる
← tnks1407

デジタル画像は、結局 数字の格子(行列)。写真をドット絵に分解して、その行列に画像処理を一歩ずつかけて見るための場所だよ。

学びの道:① 1次元の微分(隣との差・まずここから)② 標本化→畳み込み(いまここ) → ③ 統計(大津)・色(減色/WB) → 📖 詳しく(Gradus)  🧭 順番に読む

「演算」でカーネル(ぼかし・エッジ等)を選ぶと、3×3 の窓が格子の上を1マスずつ動いて計算していく。「見る面」で R・G・B・明るさ のどれを覗くか選べて、その面の計算を 3×3の画素値とカーネル重みを場所ごとに掛け合わせる表(⊙) でも 式(和) でも見られる。エッジ系は「右と左の差=明るさの傾き=微分に近い量」が色で追える。R・G・B それぞれに同じ計算をするので、結果もカラー画像になる。「二値化(大津)」を選ぶと、明るさのヒストグラムを見ながら暗い組と明るい組が最も分かれやすくなるしきい値を自動で探して白黒に分ける様子も追えるよ。計算の細かいルール(境界・丸め・式)は、ページ下の 「PixLab の計算ルール」 にまとめてある。

▷ グレースケール版(畳み込みを一歩ずつ /conv) 📖 各処理の理屈・数式をもっと詳しく → Gradus

画像
※ 画像はこの端末の中だけで処理。送らないよ。
ドット数
見る面
演算
見せ方
元の色
結果の色
※ 左右それぞれ R/G/B を選べる(複数可)
表示
※ エッジ・ラプラシアン系は「グレー(輝度)」だと境界の線がくっきり見える
※ 入力・結果のマスをクリックすると、その1マスの計算を表示
📐 PixLab の計算ルール(境界・丸め・式) ▸ 開く

このラボが実際にやっている計算を、コードどおりにまとめたもの(推測ではなく実装ベース)。

  • 画像は R・G・B の数(0〜255)の格子として扱う。
  • 明るさ LL = round(0.299·R + 0.587·G + 0.114·B)(Rec.601 の輝度。単純平均ではなく、緑を重く見る人の目に近い重み)。色の違いを見るなら R・G・B、輪郭や二値化を見るなら明るさ L が分かりやすい。
  • カーネル処理は、中心マスの周囲 3×3 に重み(カーネル)を当てて「重み×値」を9個たす。
  • 厳密には、カーネルを反転して当てるのが「畳み込み」、反転せずそのまま当てるのが「相関」。このラボの実装は相関(反転なし)で、画面の式表示と同じ向き。ぼかしのような左右対称カーネルではどちらも同じ結果だけど、Sobel のような非対称カーネルでは反転すると符号が変わる。教育用に、まとめて「畳み込み」と呼んでいる。
  • 画像の端・角では 3×3 の窓が画像の外にはみ出す。このラボは、はみ出したマスをいちばん近い端の画素で埋める(端の値を複製)。そのため角や端では、外側がコピーされたぶん中央とは少し違う計算になる(一様な画像なら端でも 0 のまま)。
  • 小数は 四捨五入(round) で整数化する。
  • 最後に 0 未満は 0、255 超えは 255 に丸める(クランプ)。
  • エッジ系(Sobel・Prewitt・ラプラシアン)の負の値は絶対値にして表示(+も−も明るく光る)。エンボスだけは +128 して灰色を基準に凹凸を出す。ぼかし系は ÷(重みの合計)
  • 二値化は しきい値 k より明るい画素を白、k 以下を黒
  • 大津法は、明るさのヒストグラムを2グループに分け、クラス間分散 σ²B = w₀·w₁·(μ₀−μ₁)² が最大になる k を選ぶ(同点のときは低い方の k)。

※ 選んだ画像はこの端末の中だけで処理し、外へは送らない。ページ表示のための静的ファイル(Web フォントなど)だけは読み込む。