【Processing】簡単なプログラムで画像処理をしてみよう！

画像処理をするプログラムを自作してみたいと思っていたのですが、Processingを使うと簡単に実現できるようです。この記事では、Processingの画像処理の機能について、簡単に紹介します！

Processingで画像を表示してみる

まずはProcessingで画像を読み込んで、表示するところから始めます。今回は次の画像を使うことにします。

ProcessingではPImageクラスを使って、画像の処理を行います。次に示すコードでは、PImageクラスを使って、画像のリサイズと表示を行います。

setup関数では画像ファイルの読み込みとリサイズ、ウィンドウサイズの設定をしています。4行目のloadImage()の引数には読み込む画像ファイルを指定しています。5行目のresizeメソッドで画像をリサイズします。引数でリサイズ後の画像の幅と高さを指定します。引数にゼロを指定すると、アスペクト比を維持するようにサイズが決まります。上の画像のサイズが728 × 485なので、リサイズ後は400 x 266となります。7行目のsetSizeメソッドではウィンドウサイズの変更を行なっています。img.widthとimg.heightで画像の幅と高さを取得できますので、ここでは画像のサイズに合わせてウィンドウサイズを変更するという意味になります。

draw関数では画像の表示を行なっています。image関数の引数では表示する画像と位置（x座標とy座標）を指定します。

keyPressed関数では「s」キーを押した時の処理を設定しています。imgディレクト内に「image_re.jpg」という画像ファイルを保存した後、スケッチを終了するようにしています。

実際にこのプログラムを実行すると、実行結果に示すような画像が得られます。画像のサイズを確認すると、意図した通りにリサイズされていることが分かります。

コード

PImage img;

void setup() {
  img = loadImage("img/image.jpg");
  img.resize(400,0);

  surface.setSize(img.width,img.height);
}

void draw() {
  image(img, 0, 0);
}

void keyPressed() {
  if (key =='s') {
    save("img/image_re.jpg");
    exit();
  }
}

PImage img;

void setup() {

img = loadImage("img/image.jpg");

img.resize(400,0);

surface.setSize(img.width,img.height);

}

void draw() {

image(img, 0, 0);

}

void keyPressed() {

if (key =='s') {

save("img/image_re.jpg");

exit();

}

実行結果

フィルタメソッドを使ってみる

PImageクラスにはフィルタメソッドが用意されていて、画像にフィルタをかけることができます。定義されているモードについて、次のページに説明があります。

Processing reference
https://processing.org/reference/PImage_filter_.html

この記事ではいくつかを試してみた結果を紹介します。

THRESHOLD

このモードでは、引数で指定した閾値によって、画像を白黒にします。次にフィルタ処理を追加したコードを示します。11行目にフィルタメソッドの呼び出しを追記しました。このプログラムを実行すると、実行結果に示すような画像が得られます。閾値を0.5、0.6、0.7、0.8、0.9と変化させた場合の画像を載せました。閾値をかえると、画像が変化していく様子が分かります。

コード

PImage img;

void setup() {
  img = loadImage("img/image.jpg");
  img.resize(400, 0);

  surface.setSize(img.width, img.height);
}

void draw() {
  img.filter(THRESHOLD, 0.5);
  image(img, 0, 0);
}

void keyPressed() {
  if (key == 's') {
    save("img/image_re.jpg");
    exit();
  }
}

PImage img;

void setup() {

img = loadImage("img/image.jpg");

img.resize(400, 0);

surface.setSize(img.width, img.height);

}

void draw() {

img.filter(THRESHOLD, 0.5);

image(img, 0, 0);

}

void keyPressed() {

if (key == 's') {

save("img/image_re.jpg");

exit();

}

実行結果

GRAY

このモードでは、画像をグレースケールに変換します。次にコードと実行結果を示します。コードの11行目がグレースケールに変換する処理になります。実行結果から、グレースケールに変換できていることが分かります。

コード

PImage img;

void setup() {
  img = loadImage("img/image.jpg");
  img.resize(400, 0);

  surface.setSize(img.width, img.height);
}

void draw() {
  img.filter(GRAY);
  image(img, 0, 0);
}

void keyPressed() {
  if (key == 's') {
    save("img/image_re.jpg");
    exit();
  }
}

PImage img;

void setup() {

img = loadImage("img/image.jpg");

img.resize(400, 0);

surface.setSize(img.width, img.height);

}

void draw() {

img.filter(GRAY);

image(img, 0, 0);

}

void keyPressed() {

if (key == 's') {

save("img/image_re.jpg");

exit();

}

実行結果

POSTERIZE

このモードでは、画像にポスタリゼーションという処理を施すことができます。ポスタリゼーションとは、画像の階調をを下げる画像処理です。引数で階調数（色の数）を制限することができます。次にコードと実行結果を示します。実行結果に、階調数を2、3、4、5、6と変化させた場合の画像を載せました。階調数が増えていくと、元の画像に近づいていく様子がわかると思います。階調数を6とした時点で、元の画像とほぼ同じ画像になっていますので、これ以上階調数を増やしてもあまり変化はしないです。

コード

PImage img;

void setup() {
  img = loadImage("img/image.jpg");
  img.resize(400, 0);

  surface.setSize(img.width, img.height);
}

void draw() {
  img.filter(POSTERIZE, 2);
  image(img, 0, 0);
}

void keyPressed() {
  if (key == 's') {
    save("img/image_re.jpg");
    exit();
  }
}

PImage img;

void setup() {

img = loadImage("img/image.jpg");

img.resize(400, 0);

surface.setSize(img.width, img.height);

}

void draw() {

img.filter(POSTERIZE, 2);

image(img, 0, 0);

}

void keyPressed() {

if (key == 's') {

save("img/image_re.jpg");

exit();

}

実行結果

ここまでは、フィルタメソッドで標準で用意されている機能ですが、これだけでも色々と楽しめそうですね。

画像処理をもっと楽しもう

ProcessingのloadPixels関数を使うと、画像の全ピクセルの情報を取得することができます。各ピクセルに対して処理を行うようにすれば、もっと色々な画像処理ができそうですね。少し考えてみましょう。

画像のリサイズと表示について

この記事の最初で、画像のリサイズと表示をするコードを示しました。ここでは、loadPixels関数を使って全ピクセルの情報を配列に入れて、ピクセルごとの色を順番に取得しながら点描するようにコードを書き換えます。こうすることで、各ピクセルに対して異なる処理を実行した後に、画像を表示することが可能になるからです。コードと実行結果は次のようになります。

4行目と5行目で、カラーモードと背景色を指定しています。12行目のnoStroke()で図形の輪郭線を描かないようにしています。17行目のloadPixels()で全ピクセルの情報をimg.pixelsという配列に入れています。18〜24行目では、ピクセルごとの色相・彩度・明度をそれぞれ取得し、加工せずにそのまま点描しています。

実行結果に示すように、最初のプログラムの実行結果と同じ画像を得ることができます。これは意図した通りの結果ですね。

コード

PImage img;

void setup() {
  colorMode(HSB, 360, 100, 100, 100);
  background(0.0, 0.0, 100.0, 100.0);

  img = loadImage("img/image.jpg");
  img.resize(400, 0);

  surface.setSize(img.width, img.height);

  noStroke();
  noLoop();
}

void draw() {
  img.loadPixels();
  for (int i = 0; i < img.width; i++) {
    for (int j = 0; j < height; j++) {
      color col = img.pixels[j*img.width + i];
      fill(hue(col), saturation(col), brightness(col), 100.0);
      rect(i, j , 1.0, 1.0);
    }
  }
}

void keyPressed() {
  if (key == 's') {
    save("img/image_re.jpg");
    exit();
  }
}

PImage img;

void setup() {

colorMode(HSB, 360, 100, 100, 100);

background(0.0, 0.0, 100.0, 100.0);

img = loadImage("img/image.jpg");

img.resize(400, 0);

surface.setSize(img.width, img.height);

noStroke();

noLoop();

}

void draw() {

img.loadPixels();

for (int i = 0; i < img.width; i++) {

for (int j = 0; j < height; j++) {

color col = img.pixels[j*img.width + i];

fill(hue(col), saturation(col), brightness(col), 100.0);

rect(i, j , 1.0, 1.0);

}

void keyPressed() {

if (key == 's') {

save("img/image_re.jpg");

exit();

}

実行結果

画像に変化をつけてみる

グレースケール

先程はフィルタメソッドを使って画像をグレースケールに変換しました。新しく作成したコードでも、fill()の引数を書き換えるだけで、同様のことができます。コードの21行目を次のようにして、彩度をゼロにしてみてください。実行すると実行結果の画像が得られます。画像をグレースケールに変換できています。

fill(hue(col), 0.0, brightness(col), 100.0);

実行結果

色相を変える

各ピクセルの色相を変える処理を入れてみます。コードの21行目を次のように書き換えます。この例では各ピクセルの色相の値に20を足しています。足した結果が360を超えないように、剰余を計算をしています。色相の値を変化させてコードを実行すると、実行結果のような画像が得られます。色相を変えるだけもで、画像の雰囲気が変わりますね。

fill((hue(col)+20.0) % 360.0, saturation(col), brightness(col), 100.0);

実行結果