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

ディジタル画像
Digital Image

標本化と量子化の違い

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

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

ピクセル値が大きいほど明るい色、小さいほど暗い色（濃淡値）。
コントラストが大きい画像ではピクセル値の差が大きく（白対黒）くっきりした画像となり、ヒストグラムはすそ野の広い山となる。
コントラストが小さい画像ではピクセル値の差が小さく（グレーばっかり）色ボケした画像となり、ヒストグラムは尖った山となる。
カラー画像ではRGB間の色の差が大きいと彩度が高い、俗にいうビビッドカラーとなり、RGB差が小さいと彩度が低い（グレー画像に近い）落ち着いた色となる。

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

ヒストグラムは濃度値に対するピクセル数の分布。トーンカーブは濃度値に対する画像変換の入出力関係を表す。

プログラミング演習

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

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

function preload(){
	Input=loadImage('//www.om-lab.org/lecture/pro2/toyota.jpg');
}
function setup(){
	const canvas=createCanvas(600, 800, WEBGL);
	
	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

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

2値化（白黒画像）
```
output=input>127?255:0;
```
明度を下げる
```
output=input>127?input*2-256:0;
```

4階調にポスタリゼーション

output=input>191?255: input>127?170: input>63?85:0;

ソラリゼーション（以下の式は3次関数による近似）
```
output = 0.75*input*(input-192.0)*(input-192.0)/4096.0+32;
```

類似問題

濃淡画像

コントラスト変換（H15後期２級８問）
階調変換＆ヒストグラム（H19後期３級23問）
ヒストグラム（H17前期２級35問）
階調数減少（H16前期３級９問）
ヒストグラム（H16前期３級10問）
画像処理（H16前期２級９問）
コントラスト変換（H17前期３級８問）
画像処理（H17前期２級９問）
コントラスト変換（H17前期２級13問）
階調変換（H17前期２級14問）
階調変換（H17後期３級３問）

カラー画像

チャンネル（H19後期３級22問）
階調変換（H17後期２級11問）
濃淡レベル変換（H15後期２級９問）
疑似カラー表示（H15後期２級22問）
解像度減少（H16前期３級15問）
画像処理（H16後期３級10問）
グラデーション（H17前期２級20問）
チャンネル（H17後期３級２問）
量子化（H18前期３級２問）
チャンネル（H20後期３級17問）

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

ディジタル画像Digital Image