3. デジタル画像
（コンピューターサイエンス）
1
金子邦彦
今回の内容
•デジタル画像は格子状の画素から構成される
•濃淡画像は輝度のみ，カラー画像はRGB3成分または輝
度・色成分で表現される． •
•畳み込み（フィルタ処理）は周囲画素にカーネルの重みを
掛けて和をとる操作で，ぼかし・エッジ検出・シャープ化
を実現
•空間周波数は明暗変化の細かさを表し，スペクトルの中心
が低周波、周辺が高周波に対応。高周波除去でぼかし，低
周波除去で輪郭抽出が可能
•演習はWebブラウザを使用。画像制作とコンピュータの関
係、畳み込みと空間周波数の原理を確認．
2
3-1 デジタル画像
3
デジタル画像の構造：画像と画素
4
それぞれの格子が画素
画像
•画像は格子状に並んだ画素（画像を構成する最小
の要素）から構成される．
•画像を拡大すると，個々の画素が確認できる．
画像の種類
5
カラー画像 濃淡画像
輝度（明るさの度合い）
と色の情報を持つ画像
輝度のみの情報を
持つ画像
濃淡画像でのコード化
6
画素
幅: 8
高さ: 8 輝度が４段階
0123
•画像の輝度情報を数値でコード化する．
（例）黒＝0，暗い灰色＝1，明るい灰色＝2，白＝3 のよう
にコード化
•画像のサイズは幅と高さ（画素数）で表される．
幅8，高さ8の画像で，輝度が4段階（0，1，2，3）の場合
カラー画像の成分
カラー画像の成分の表し方は2種類ある．
•R（赤）成分，G（緑）成分，B（青）成分で考える場合
各成分は，画素ごとに1つの数値を持つ．すべて合わせて，
画素ごとに3つの数値となる．
•輝度成分，色成分で考える場合
輝度成分は明るさの情報，色成分は色の情報を表す．
7
R（赤）成分 G（緑）成分 B（青）成分
輝度成分 色成分
3-2 画像処理入門
8
画像処理
画像処理は、コンピュータで画像を加工・分析する
技術
（例）
畳み込み（フィルタ処理） 空間周波数
9
低周波 高周波
ノイズ除去 エッジ抽出
畳み込み（フィルタ処理）
•ある画素の値を，その周囲の画素の値を使って計算
することで，画像全体に効果を与える．
•周囲の画素をどのような重みで使うかを決めた小さ
な表（フィルタ，カーネルと呼ばれる）を用いる．
10
4×0 + 1×-1 + 2×0 +
2×-1 + 3×5 + 0×-1 +
4×0 + 1×-1 + 3×0
結果 11
11
畳み込み（フィルタ処理）の種類と効果
畳み込みの考え方は，画像処理だけでなく，AI（畳
み込みニューラルネットワーク：CNN）にも応用さ
れており，画像認識の基盤技術となっている．
11
ぼかし：周囲の画素
の平均をとることで，
画像を滑らかにする
エッジ検出：明るさ
が急に変わる部分
（輪郭線など）を見
つけ出す
シャープ化：輪郭を
強調して，画像を
くっきりさせる
空間周波数
•画像の中には，明暗の変化が細かい部分と緩やかな部分が
ある．
•空間周波数は、明暗の変化の細かさに対応
12
空間周波数
画像を空間周波数の観点で分析することで，画像のぼかしや
圧縮（人の目に見えにくい周波数成分の削減）が可能になる．
13
画像のぼかし
（高い周波数の除去）
3-3 画像制作とコンピュータ
14
17
Fluid Paint の操作
筆の設定は左側のメニューで行う．書き直すときは「Clear」
をクリックする．．
19
Silk の操作
開始方法：Silkのページを開いたら，「Draw Something」
をクリックして開始する．
色の選択：左上のメニューで，色を選ぶことができる．
21
WebGL Fluid Simulation の操作
WebGL Fluid Simulationのページを開いたら，マウス操作で描
く．
【手順】
•顔画像とその画素値（0～255）が表示されている
•ドロップダウンメニューでフィルタを選ぶ．
ぼかし（blur），鮮鋭化（sharpen），エッジ検出
（outline，sobel）など．
•フィルタを切り替えて出力画像の変化を確認する．
•出力画像の任意の画素にマウスを合わせる．その画素値が，
入力画像の3×3近傍の画素値による畳み込み（フィルタ処
理）で算出される過程が表示される．．
【学びの内容】
•画像は画素値を並べた2次元配列．
•畳み込みは、画像上の各位置で近傍の画素値とフィルタの
値の要素ごとの積の和を計算する操作
23
【手順】
•入力，畳み込みのフィルタ（3×3），出力を確認．
•「Play」をクリック．フィルタが入力行列上を1マスずつ
スライドする過程を確認．
•出力行列の画素にマウスを合わせると，対応する入力の
3×3領域とフィルタの要素ごとの積の和が表示される．
•出力値の正は赤，負は青で色分けされる．フィルタが大き
な出力を生む位置と入力中のパターンとの対応を確認する．
【学びの内容】
•出力値が正に大きい位置は，入力のパターンとフィルタの
パターンが一致する位置に対応する．
•これは AI の畳み込みニューラルネットワーク（CNN）が
画像から特徴を抽出する原理
25
【手順】
•原画像，マスク適用後の逆フーリエ変換結果，編集可能な
マスク付きスペクトル，スペクトルが並んで表示される．
•右下で「白い四角」を選ぶ。これは全通過．Result のとこ
ろに、現画像が表示されるようになる
•スペクトルの周辺部（高周波成分）を左ドラッグで削る．
出力画像が平滑化され，輪郭や細部が失われることを確認
する．
•スペクトルの中心部（低周波成分）を左ドラッグで削る．
画像の大局的な明暗が失われ，輪郭成分が残ることを確認
する．
【学びの内容】
•スペクトル上では，中心が低周波成分，周辺が高周波成分
27
