Teachers open the door but You must enter by yourself.

Open Media Lab.
オープンメディアラボ

【事前学習】ベーシックは 1章1-4〜1-7節、5章、エキスパートは1、6、7章を学んできてください。(ベーシックの6-8章は画像処理検定の内容ですので本講義では割愛します。)

ディジタル画像
Digital Image

ベーシックの学習ポイント

色々な処理が混在して見えるが、一つのチャネルやグレースケールに関する内容（ヒストグラム、トーンカーブ、明度、コントラスト、フィルタリング）と、３つのチャネル間に関する処理（混色、色相、彩度）を分けて考えるとよい

加法混色と減法混色

加法混色は光のRGB。光を重ね合わせると各光のRGB値の足し算となるから。光は重ねるほど明るくなる、RGBの各色を混ぜ合わせた基本８色は憶えておく。減法混色は、身近ではプリンタのインク。混ぜ合わせると黒に近づいていく（実際には細かいドットが交互に並んでいるだけだが、ドットが小さいと人間の目には混ざった色に見える）。三色インク（シアン、マゼンタ、イエロー）を混ぜた基本８色は憶えておく。

標本化と量子化の違い

どちらもデジタル化（離散化）だが、標本化はデジカメやスキャナでアナログ画像を一定間隔でスキャンしてピクセルにすること。量子化は、各ピクセルの色の強度（アナログ値）を例えば２５６段階に割り当てること。

濃淡値（明度）とコントラスト

ピクセル値が大きいほど明るい色、小さいほど暗い色（濃淡値）。
コントラストが大きい画像ではピクセル値の差が大きく（白対黒）くっきりした画像となり、ヒストグラムはすそ野の広い山となる。
コントラストが小さい画像ではピクセル値の差が小さく（グレーばっかり）色ボケした画像となり、ヒストグラムは尖った山となる。

ヒストグラムとトーンカーブの違い

ヒストグラムは濃度値に対するピクセル数の分布。トーンカーブは濃度値に対する画像変換の入出力関係を表す。ソラリゼーションは、唯一の特殊効果的な処理なので注意。

周囲のピクセル値を入力とする処理

トーンカーブはソラリゼーションも各ピクセルごとに入出力が決まり、周りのピクセルと関係しない。エンボスは少しずれた位置のピクセル値を使う。フィルタリングでは、入力に周辺（近傍）のピクセル値を使う。

彩度

カラー画像ではRGB間の色の差が大きいと彩度が高い、俗にいうビビッドカラーとなり、RGB差が小さいと彩度が低い（グレー画像に近い）落ち着いた色となる。彩度は、RGB間の差が全くないとグレーで彩度はゼロ

（公式問題集の補足解説）
エキスパート練習問題１第７問 p.26

  1. 最も近い＝nearest eighbor＝近傍（きんぼう）
  2. バイリニアは距離の逆比になる。X1とX2およびX3とX4の補間値は平均なので100および160になる。(100x2+160)÷3。
  3. ニアレストネイバーは最も近傍の画素の値とするだけなので計算が必要ない
  4. 右の壁と木目の床部分が反転しているので一見アの白黒反転の気もするが、犬の鼻や頬の部分が反転していない。イ、ウ、オでは階調の反転は生じないので、残るソラリゼーションとわかる。
  5. A1は一様平滑化をガウス平滑化に近くした平滑化フィルタ、B1は差をとることになるので微分フィルタ（差分フィルタ）。（教科書p.273～278）

エキスパート練習問題２第７問 p.52

  1. 鮮鋭化は画素自身の値とラプラシアンフィルタの差。アは加重平均（平滑化）。イはソーベル（縦微分、横平滑化）。エは横方向２次微分。オは単純平均（平滑化）。
  2. アはぼかし（平滑化）。イはモザイク処理。ウは微分フィルタ。
  3. マスクはフィルタのこと。微分はエッジ検出。細線化は線要素を細くする処理。
  4. 平滑化処理なのはア。
  5. メディアンフィルタはスパイク状ノイズ除去に有利。ガウシアンフィルタは特にエッジ保存に向いてはいない。ラプラシアンフィルタはエッジ検出（ノイズ除去ではない）。

ベーシック練習問題１第２問 p.89

  1. 最頻値は最も頻度（ひんど）が大きいもの。画素値が30のピクセルが7個で最も多い。ちなみに最小値=20、最大値=70
    平均値=
    (20×5+30×7+40×2+50×3+60×5+70×3)/(5+7+2+3+5+3)
    =1050/25=42
  2. 全部で25個あるので、13番目が真ん中。20が5個、30が7個で合計12個。その次が13番目なので値40。
  3. ソラリゼーション(教科書p.141)を白黒反転したもの。ヤシの木（画素値0の黒のところ）が白（画素値255）、太陽（画素値255の白のところ）が黒（画素値0）に変換されることからアまたはウに絞れる。ウは単純な白黒反転なので除外できる。（ベーシックで特殊な処理はこのソラリゼーションだけ）
  4. ヒストグラムの極大点の位置は変わっていないので、単純なポスタリゼーション（ウ）。アは白黒反転なのでヒストグラムは左右反転する。イは単純２値化なので、ヒストグラムは両端（黒または白）に集中する。エは出力値がとびとびにはならない上にヒストグラムの形が大きく変化することが予想される。

ベーシック練習問題１第３問 p.92

  1. α値=不透明度、表色系はRGB表色系以外に、色相、彩度、明度のマンセル表色系もある。補色は色相環 で正反対に位置する色。赤⇔水色、青⇔オレンジ、緑⇔紫など。色の違いが目立つ組み合わせだが、使い方を誤るとケバくなる。
  2. RGB三色の値がすべて大きくなる白に近い部分に着目し、その部分が紫（青＋赤）、黄（赤＋緑）、水色（緑＋青）のどれに近いかで判断する。この問題では表示されていない色を問われているので緑。
  3. 標本化間隔が大＝解像度が低い。濃淡の違いの細かさは量子化の度合いによる。
  4. 量子化レベルが少ないと 色数が減る。画像が明るすぎる（暗すぎる）と白飛び（黒つぶれ）する。

プログラミング演習

p5.js Web Editor で実行してみましょう。

let Input,Output;
const Histogram=Array(256).fill(0);
const Histogram2=Array(256).fill(0);

function preload(){
	Input=loadImage('toyota.jpg');
}
function setup(){
	const canvas=createCanvas(600, 800, WEBGL);
	canvas.parent('canvas');
	frameRate(30);

	Output = createImage(Input.width, Input.height);
	//RGB値をグレースケールレベルに変換
	for(let y=0; y< Input.height; y++){
	for(let x=0; x< Input.width; x++){
		const input=Input.get(x,y);
 		const gray = red(input)*0.3+green(input)*0.59+blue(input)*0.11;
	    Input.set(x,y,color(gray, gray, gray));
	}}
	Input.updatePixels();

 	Output = createImage(Input.width, Input.height);
    for(let y=0; y< Input.height; y++){
	for(let x=0; x< Input.width; x++){
		const input=red(Input.get(x,y));

		//明度を上げる
		const output=input<128 ? input*2 : 255;

 	    Output.set(x,y,color(output, output, output));
      	//ヒストグラムの頻度を加算
		Histogram[input]++;
		Histogram2[output]++;
	}}
	Output.updatePixels();
}

function draw(){
	ortho(-300, 300, -400, 400);
	image(Input,-300,-400, 600,400);
	image(Output,-300,0, 600,400);

  	noFill();
	stroke(255,0,0);
	strokeWeight(2);
	beginShape();
	for(let i=0;i<256;i++) vertex(-256+i*2,-Histogram[i]*0.06);
	//Histogram.forEach((hi,i)=>vertex(-256+i*2,-hi+100*0.06));と略記可
	endShape();
	beginShape();
	for(let i=0;i<256;i++) vertex(-256+i*2,-Histogram2[i]*0.06+400);
	//Histogram2.forEach((hi,i)=>vertex(-256+i*2,-hi*0.06+400));と略記可
	endShape();
}

※ 処理後のヒストグラム（鮮明な赤色）では、山が右に移動していると共に画素値が256の頻度が著しく高くなっている。

元画像

※ 右クリックでダウンロードし、p5.js Web Editor の Sketch Files/Upload file でアップロードする。

Lesson

以下の処理を実現してみましょう。

  1. 2値化（白黒画像）
    output=input>127?255:0;
  2. 明度を下げる
    output=input>127?input*2-256:0;
  3. 4階調にポスタリゼーション
    output=input>191?255: input>127?170: input>63?85:0;
  4. ソラリゼーション（以下の式は3次関数による近似）
    output = 0.75*input*(input-192.0)*(input-192.0)/4096.0+32;

類似問題

濃淡画像

カラー画像


【事後学習】公式問題集のベーシックは各回の第２問、エキスパートは各回の第７、８問が画像処理の問題です。これらの問題を全て解けるようになってください。

This site is powered by
Powered by MathJax