画像処理

https://gyazo.com/dbed671c7cda602db7d92745ac04b7c8

スケッチの作成

Processingを起動して、新規にスケッチを保存しましょう。 メニューから[ファイル]-[名前を付けて保存]をクリックして、「スケッチフォルダを名前を付けて保存」を開きます。 ファイル名に「Project7」を入力し、[保存]をクリックしましょう。 保存先に「Project7」という名前のフォルダが作成されていることを確認してください。

https://gyazo.com/59c3141b523273199a9ebf444cb64948

画像の準備

ProcessingはJPG形式PNG形式などの画像ファイルを取り込んで表示することができます。 下記の三種類の画像(hana.jpgnight.jpgumi.jpg)の内から一つを選び、画像をダウンロードしてください(画像提供:フリー写真素材 Futta.NET)。 いずれの画像もサイズは640×480ピクセルです。 また、ダウンロードした画像は「スケッチフォルダ(Project7)」の中に配置しましょう。 これ以降、本資料ではhana.jpgを例に取り説明していきます。

hana.jpg

night.jpg

umi.jpg

画像の表示

画像ファイルを読み込むには、PImageという型(本当はクラス)で変数を宣言し、 loadIMage()関数を利用して、変数に画像データを代入します。

PImage img;
img = loadImage(ファイル名);

また、ウィンドウに画像を表示するにはimage()関数を用います。 image()関数の引数には、PImage型の変数に加え、表示する位置**(x,y)**を指定します。 初期設定では、画像の表示位置は、画像の左上隅の座標が基準となることに注意してください。

image(img, x, y);

下記を参考にコードを入力したら、Runボタンをクリックしてくだい。 ウィンドウに指定した画像が表示されることを確認してください(ウィンドウのサイズは画像サイズと同じ640×480ピクセルとします)。

https://gyazo.com/78edb226ca7a39702f94c7e0630ba462

画像をクリッピング(画像の一部を切り取ること)するには、copy()関数を利用します。 例えば、画像の左上の1/4の領域を切り取り、幅・高さを2倍にするには下記のように記述します。 (0,0)は元画像の左上隅の座標、(320,240)は切り取る領域の幅と高さを意味しており、これらの値で指定された領域が切り取られます。 また、2度目の(0,0)は切り取った画像を表示する位置、(640, 480)は切り取った画像の幅と高さ(この場合は拡大)を意味しています。

https://gyazo.com/64a1a41190becbc91e2ea9591d695cf0

copy(img, 0, 0, 320, 240, 0, 0, 640, 480);

下記を参考にコードを入力したら、Runボタンをクリックしてくだい。 ウィンドウに切り取られた画像が拡大して表示されることを確認してください。

https://gyazo.com/1cd3a099184e9bb5e12d73a754269220

クリッピング機能を利用して虫眼鏡を実現してみましょう。 マウスをドラッグすると、マウス位置にある画像部分だけがズームして表示されます。 mouseDragged()関数では、image()関数で画像を表示した後に、 copy()関数を利用して100×100ピクセルの領域を切り取り、 200×200ピクセル(2倍)に拡大して表示しています。 また、mouseReleased()関数では、image()関数を実行し、元の画像を表示しています。 下記を参考にコードを入力したら、Runボタンをクリックしてくだい。 ドラッグすると画像が拡大して表示されることを確認してください。

https://gyazo.com/cc2c12703271eceaa0b5e7392cb0cfb8

配列と画像の色情報

loadPixels()関数を実行することで、 画像データを構成する各ピクセルの色情報を取得することができます。 取得された色情報はpixels[]という名前の配列に記録されます。 配列は1つの名前で複数のデータを記録することが可能な特殊な変数と言えます。 例えば、pixels[0]pixels[1]のように、配列名の後ろに[要素番号]を指定することで、 記録されている値を参照したり、新しい値を代入することができます(要素番号は0から始まることに注意してください)。 ここでは、640×480ピクセルの画像を対象としているため、要素番号は0~307199(=640×480-1)となります。 また、配列の長さは配列名.lengthで参照することができます。 下記を参考にコードを入力したら、Runボタンをクリックしてくだい。 配列の長さである307200がコンソールに表示されることを確認してください。

各ピクセルの色成分は、red()関数、green()関数、blue()関数で取り出すことができます。 取り出した各色の成分は0から255の範囲の値となりますが、float型を用いることに注意してください。

float r = red(img.pixels[要素番号]);
float g = green(img.pixels[要素番号]);
float b = blue(img.pixels[要素番号]);

ここでは、赤色(R)の成分を残し、緑色(G)と青色(B)の成分は0にします。 **pixels[]**に色情報を代入するときはcolor()関数を用います。 color()関数は引数として、赤色成分、緑色成分、青色成分を指定します。 **pixels[]**に代入した色情報を反映させるには、 updatePixels()関数を実行する必要があることに注意してください。

img.pixels[要素番号] = color(赤色成分, 緑色成分, 青色成分);

下記を参考にコードを入力したら、Runボタンをクリックしてくだい。 赤色成分のみの画像が表示されることを確認してください。

https://gyazo.com/18a3230f7dc9b4362434b4f210baaee0

課題

画像をモノクロに変換してください。 モノクロ成分Yは$$Y = 0.299 \times R + 0.587 \times G + 0.114 \times B$$で求めることができます。 求めたモノクロ成分Yを下記のようにして**pixels[]**に代入します。

img.pixels[要素番号] = color(モノクロ成分);

課題が完成したら、作成したスケッチをZIPアーカイブ形式で保存します。 ZIPアーカイブを作成するには、メニューから[ツール]-[スケッチをアーカイブ]をクリックして、「スケッチを名前を付けてアーカイブする」を開きます。 保存するファイル名を確認した上で、[保存]をクリックします。 保存先に「Project7-日付a.zip」というファイルが作成されていることを確認してください。

https://gyazo.com/dda936096b74fc32a6f9afdb08139a3d

参考書籍