Processing 画像処理演習

講義科目「画像工学」では画像処理の演習課題として、プログラミング言語 Processing を用いてプログラムの作成を行います。ここでは、参考となる基礎的な画像処理プログラムを記載します。

このプログラムについて

Processing version 3.3 で動作確認している。画像ファイルは自分で用意せよ。
プログラムの解説は講義の配付テキストを参照せよ。

変数宣言，型変換，文字出力

void setup() {
  int   a;           // 整数型変数aを宣言する
  float x;           // 実数型変数xを宣言する
  a = 12;            // aに12を代入する
  x = 3.0 / 2;       // xに3.0/2の計算結果1.5を代入する
  println("Hello");  // 文字列「Hello」を表示する
  println(a);        // aの値を表示する
  println(a, x);     // aとxの値を並べて表示する
  // a = x;          // 整数型変数には実数を代入できない【エラーになる】
  a = int(x);        // 実数をint()で整数に変えれば整数型変数に代入できる
  println("a=", a, ", x=", x);  // 文字列と変数を並べて表示する
}

void setup() {

int a; // 整数型変数aを宣言する

float x; // 実数型変数xを宣言する

a = 12; // aに12を代入する

x = 3.0 / 2; // xに3.0/2の計算結果1.5を代入する

println("Hello"); // 文字列「Hello」を表示する

println(a); // aの値を表示する

println(a, x); // aとxの値を並べて表示する

// a = x; // 整数型変数には実数を代入できない【エラーになる】

a = int(x); // 実数をint()で整数に変えれば整数型変数に代入できる

println("a=", a, ", x=", x); // 文字列と変数を並べて表示する

}

解説

整数型変数の宣言には int、実数型変数の宣言には float を使う。整数を実数型（float型）変数に代入することはできるが、実数を整数型（int型）変数に代入することはできない（この点がC言語などと異なるので注意せよ）。ただし、小数点以下を切り捨てて整数値に変換する int( ) 関数を用いれば整数型変数に代入できる（10行目）。
コンソールへの文字出力には println( ) 関数を用いる。出力したい数値、変数、文字列を「,」で区切って並べる（C言語のように書式を記述する必要はない）。文字列を出力する場合は文字列全体を「”」で括る。

def setup():
  a = 12          # aに12を代入する。変数aは整数型になる
  x = 3.0 / 2     # xに3.0/2の計算結果1.5を代入する。変数xは実数型になる
  print("Hello")  # 文字列「Hello」を表示する
  print(a)        # aの値を表示する
  print(a, x)     # aとxの値を並べて表示する。タプルで表示される
  a = x           # 変数aに実数を代入する。変数aは実数型に変わる
  print a         # ()無しでも可。Python2の仕様
  print "a="+str(a)+", x="+str(x)  # 数値を文字列に変換し、連結して表示する

def setup():

a = 12 # aに12を代入する。変数aは整数型になる

x = 3.0 / 2 # xに3.0/2の計算結果1.5を代入する。変数xは実数型になる

print("Hello") # 文字列「Hello」を表示する

print(a) # aの値を表示する

print(a, x) # aとxの値を並べて表示する。タプルで表示される

a = x # 変数aに実数を代入する。変数aは実数型に変わる

print a # ()無しでも可。Python2の仕様

print "a="+str(a)+", x="+str(x) # 数値を文字列に変換し、連結して表示する

画像ファイルの読み込みと表示

PImage f;                              // 画像オブジェクトfを宣言する

void setup() {
  f = loadImage("image.jpg");          // 画像fへファイルimage.jpgのデータを読み込む
  surface.setSize(f.width, f.height);  // 実行画面を画像fと同じサイズに設定する 
}

void draw() {
  image(f, 0, 0);                      // 実行画面に画像fを貼る
}

PImage f; // 画像オブジェクトfを宣言する

void setup() {

f = loadImage("image.jpg"); // 画像fへファイルimage.jpgのデータを読み込む

surface.setSize(f.width, f.height); // 実行画面を画像fと同じサイズに設定する

}

void draw() {

image(f, 0, 0); // 実行画面に画像fを貼る

}

解説

画像オブジェクトの宣言には PImage クラスを使う。このプログラムでは、画像オブジェクト名を f としている。
画像ファイルの読み込みは loadImage( ) 関数を使う。画像ファイルは、ソースコードが保存されているフォルダの中の data フォルダの中に格納しておかなければならない。Processing のメニューの「スケッチ → ファイルを追加…」で data フォルダの作成とファイルのコピーが行えるので利用するとよい。
画像のサイズは、PImage のメンバ変数 width で横幅、height で縦幅が得られる。実行画面のサイズは surface.setSize( ) 関数で設定する。このプログラムでは、実行画面のサイズを読み込んだ画像のサイズと同じにしている。実行画面に画像を貼りつけるには image( ) 関数を使う。

def setup():
  global f                                # 変数fをグローバル宣言
  f = loadImage("image.jpg")              # 画像fへファイルimage.jpgのデータを読み込む
  this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する 

def draw():
  global f                                # 変数fをグローバル宣言
  image(f, 0, 0)                          # 実行画面に画像fを貼る

def setup():

global f # 変数fをグローバル宣言

f = loadImage("image.jpg") # 画像fへファイルimage.jpgのデータを読み込む

this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する

def draw():

global f # 変数fをグローバル宣言

image(f, 0, 0) # 実行画面に画像fを貼る

画像の濃淡変換

PImage f;                             // 画像オブジェクトfを宣言する

void setup() {
  int   x, y;                         // 整数型変数x,yを宣言する
  float R, G, B;                      // 実数型変数R,G,Bを宣言する
  color c;                            // カラー型変数cを宣言する

  f = loadImage("image.jpg");         // 画像fへファイルimage.jpgのデータを読み込む
  surface.setSize(f.width, f.height); // 実行画面を画像fと同じサイズに設定する 

  for(y = 0; y < f.height; y++){      // yを0から画像縦幅-1まで1ずつ増やす
    for(x = 0; x < f.width; x++){     // xを0から画像横幅-1まで1ずつ増やす
      c = f.get(x, y);                // 座標(x,y)の色の値（カラー型）をcに代入する
      
      R = red(c);                     // cから赤の画素値を取り出してRに代入する
      G = green(c);                   // cから緑の画素値を取り出してGに代入する
      B = blue(c);                    // cから青の画素値を取り出してBに代入する
      
      R += 100;                       // Rに100を加算する
      G += 100;                       // Gに100を加算する
      B += 100;                       // Bに100を加算する
      
      c = color(R, G, B);             // R,G,Bからカラー値を作って、cに代入する
      f.set(x, y, c);                 // 画像fの座標(x,y)の画素の色をcに設定する
    }
  }
  f.save("image2.jpg");               // 画像fをファイルimage2.jpgに保存する
}

PImage f; // 画像オブジェクトfを宣言する

void setup() {

int x, y; // 整数型変数x,yを宣言する

float R, G, B; // 実数型変数R,G,Bを宣言する

color c; // カラー型変数cを宣言する

f = loadImage("image.jpg"); // 画像fへファイルimage.jpgのデータを読み込む

surface.setSize(f.width, f.height); // 実行画面を画像fと同じサイズに設定する

for(y = 0; y < f.height; y++){ // yを0から画像縦幅-1まで1ずつ増やす

for(x = 0; x < f.width; x++){ // xを0から画像横幅-1まで1ずつ増やす

c = f.get(x, y); // 座標(x,y)の色の値（カラー型）をcに代入する

R = red(c); // cから赤の画素値を取り出してRに代入する

G = green(c); // cから緑の画素値を取り出してGに代入する

B = blue(c); // cから青の画素値を取り出してBに代入する

R += 100; // Rに100を加算する

G += 100; // Gに100を加算する

B += 100; // Bに100を加算する

c = color(R, G, B); // R,G,Bからカラー値を作って、cに代入する

f.set(x, y, c); // 画像fの座標(x,y)の画素の色をcに設定する

}

f.save("image2.jpg"); // 画像fをファイルimage2.jpgに保存する

}

解説

このプログラムは、読み込んだカラー画像の全画素の画素値に 100 を加算して、画像を明るくする変換を行う。
1画素ずつ順に全画素を走査するために for 文で2重ループを構成している。画素の座標は (x, y) となる。
座標 (x, y) の画素値（color型）を得るには、PImage のメンバ関数 get( ) を用いる。color型で表されている画素値から3原色（赤、緑、青）の各成分の輝度を得るには red( )、green( )、blue( ) の各関数を使う。輝度は 0～255 の範囲の実数で表される。
3原色の輝度を color型の画素値に変換するには color( ) 関数を使う。もし、輝度に 0～255の範囲外の値を指定した場合は、上限値 255 もしくは下限値 0 に自動的に変換される。
座標 (x, y) に画素値（color型）を設定するには PImage のメンバ関数 set( ) を使う。
画像をファイルに保存するには PImage のメンバ関数 save( ) を用いる。

def setup():
  global f                      # 変数fをグローバル宣言
  f = loadImage("image.jpg")    # 画像fへファイルimage.jpgのデータを読み込む
  this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する
    
  for y in range(0, f.height):  # yを0から画像縦幅-1まで1ずつ増やす
    for x in range(0, f.width): # xを0から画像横幅-1まで1ずつ増やす
      c = f.get(x,y)            # 座標(x,y)の色の値（カラー型）をcに代入する

      R = red(c)                # cから赤の画素値を取り出してRに代入する
      G = green(c)              # cから緑の画素値を取り出してGに代入する
      B = blue(c)               # cから青の画素値を取り出してBに代入する      

      R += 100                  # Rに100を加算する
      G += 100                  # Gに100を加算する
      B += 100                  # Bに100を加算する      

      c = color(R, G, B)        # R,G,Bからカラー値を作って、cに代入する
      f.set(x, y, c)            # 画像fの座標(x,y)の画素の色をcに設定する

  f.save("image2.jpg")          # 画像fをファイルimage2.jpgに保存する

def draw():
  global f                      # 変数fをグローバル宣言
  image(f, 0, 0)                # 実行画面に画像fを貼る

def setup():

global f # 変数fをグローバル宣言

f = loadImage("image.jpg") # 画像fへファイルimage.jpgのデータを読み込む

this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する

for y in range(0, f.height): # yを0から画像縦幅-1まで1ずつ増やす

for x in range(0, f.width): # xを0から画像横幅-1まで1ずつ増やす

c = f.get(x,y) # 座標(x,y)の色の値（カラー型）をcに代入する

R = red(c) # cから赤の画素値を取り出してRに代入する

G = green(c) # cから緑の画素値を取り出してGに代入する

B = blue(c) # cから青の画素値を取り出してBに代入する

R += 100 # Rに100を加算する

G += 100 # Gに100を加算する

B += 100 # Bに100を加算する

c = color(R, G, B) # R,G,Bからカラー値を作って、cに代入する

f.set(x, y, c) # 画像fの座標(x,y)の画素の色をcに設定する

f.save("image2.jpg") # 画像fをファイルimage2.jpgに保存する

def draw():

global f # 変数fをグローバル宣言

image(f, 0, 0) # 実行画面に画像fを貼る

カラー画像をグレイスケール画像に変換する

PImage f;                             // 画像オブジェクトfを宣言する

void setup() {
  int   x, y;                         // 整数型変数x,yを宣言する
  float R, G, B, V;                   // 実数型変数R,G,B,Vを宣言する
  color c;                            // カラー型変数cを宣言する

  f = loadImage("image.jpg");         // 画像fへファイルimage.jpgのデータを読み込む
  surface.setSize(f.width, f.height); // 実行画面を画像fと同じサイズに設定する 

  for (y = 0; y < f.height; y++) {    // yを0から画像縦幅-1まで1ずつ増やす
    for (x = 0; x < f.width; x++) {   // xを0から画像横幅-1まで1ずつ増やす
      c = f.get(x, y);                // 座標(x,y)の色の値（カラー型）をcに代入する
      
      R = red(c);                     // cから赤の画素値を取り出してRに代入する
      G = green(c);                   // cから緑の画素値を取り出してGに代入する
      B = blue(c);                    // cから青の画素値を取り出してBに代入する
      
      V = .299*R + .587*G + .114*B;   // R,G,Bから明度を計算してVに代入する

      c = color(V);                   // Vからカラー値を作ってcに代入する。赤、緑、青の画素値がすべてVになる
      f.set(x, y, c);                 // 画像fの座標(x,y)の画素の色をcに設定する
    }
  }
  f.save("image2.jpg");               // 画像fをファイルimage2.jpgに保存する
}

void draw() {
  image(f, 0, 0);                     // 実行画面に画像fを貼る
}

PImage f; // 画像オブジェクトfを宣言する

void setup() {

int x, y; // 整数型変数x,yを宣言する

float R, G, B, V; // 実数型変数R,G,B,Vを宣言する

color c; // カラー型変数cを宣言する

f = loadImage("image.jpg"); // 画像fへファイルimage.jpgのデータを読み込む

surface.setSize(f.width, f.height); // 実行画面を画像fと同じサイズに設定する

for (y = 0; y < f.height; y++) { // yを0から画像縦幅-1まで1ずつ増やす

for (x = 0; x < f.width; x++) { // xを0から画像横幅-1まで1ずつ増やす

c = f.get(x, y); // 座標(x,y)の色の値（カラー型）をcに代入する

R = red(c); // cから赤の画素値を取り出してRに代入する

G = green(c); // cから緑の画素値を取り出してGに代入する

B = blue(c); // cから青の画素値を取り出してBに代入する

V = .299*R + .587*G + .114*B; // R,G,Bから明度を計算してVに代入する

c = color(V); // Vからカラー値を作ってcに代入する。赤、緑、青の画素値がすべてVになる

f.set(x, y, c); // 画像fの座標(x,y)の画素の色をcに設定する

}

f.save("image2.jpg"); // 画像fをファイルimage2.jpgに保存する

}

void draw() {

image(f, 0, 0); // 実行画面に画像fを貼る

}

def setup():
  global f
  f = loadImage("image.jpg")              # 画像fへファイルimage.jpgのデータを読み込む
  this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する
    
  for y in range(0, f.height):  # yを0から画像縦幅-1まで1ずつ増やす
    for x in range(0, f.width): # xを0から画像横幅-1まで1ずつ増やす
      c = f.get(x,y)            # 座標(x,y)の色の値（カラー型）をcに代入する
      
      R = red(c)                # cから赤の画素値を取り出してRに代入する
      G = green(c)              # cから緑の画素値を取り出してGに代入する
      B = blue(c)               # cから青の画素値を取り出してBに代入する
      
      V = .299*R + .587*G + .114*B # R,G,Bから明度を計算してVに代入する

      c = color(V)              # Vからカラー値を作ってcに代入する。赤、緑、青の画素値がすべてVになる
      f.set(x, y, c)            # 画像fの座標(x,y)の画素の色をcに設定する

  f.save("image2.jpg")          # 画像fをファイルimage2.jpgに保存する

def draw():
  global f
  image(f, 0, 0)                # 実行画面に画像fを貼る

def setup():

global f

f = loadImage("image.jpg") # 画像fへファイルimage.jpgのデータを読み込む

this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する

for y in range(0, f.height): # yを0から画像縦幅-1まで1ずつ増やす

for x in range(0, f.width): # xを0から画像横幅-1まで1ずつ増やす

c = f.get(x,y) # 座標(x,y)の色の値（カラー型）をcに代入する

R = red(c) # cから赤の画素値を取り出してRに代入する

G = green(c) # cから緑の画素値を取り出してGに代入する

B = blue(c) # cから青の画素値を取り出してBに代入する

V = .299*R + .587*G + .114*B # R,G,Bから明度を計算してVに代入する

c = color(V) # Vからカラー値を作ってcに代入する。赤、緑、青の画素値がすべてVになる

f.set(x, y, c) # 画像fの座標(x,y)の画素の色をcに設定する

f.save("image2.jpg") # 画像fをファイルimage2.jpgに保存する

def draw():

global f

image(f, 0, 0) # 実行画面に画像fを貼る

カラー画像をセピア調画像に変換する

PImage f;                             // 画像オブジェクトfを宣言する

void setup() {
  int   x, y;                         // 整数型変数x,yを宣言する
  float R, G, B;                      // 実数型変数R,G,Bを宣言する
  float newR, newG, newB;             // 実数型変数newR,newG,newBを宣言する
  color c;                            // カラー型変数cを宣言する

  f = loadImage("image.jpg");         // 画像fへファイルimage.jpgのデータを読み込む
  surface.setSize(f.width, f.height); // 実行画面を画像fと同じサイズに設定する 

  for(y = 0; y < f.height; y++) {     // yを0から画像縦幅-1まで1ずつ増やす
    for(x = 0; x < f.width; x++) {    // xを0から画像横幅-1まで1ずつ増やす
      c = f.get(x, y);                // 座標(x,y)の色の値（カラー型）をcに代入する
      
      R = red(c);                     // cから赤の画素値を取り出してRに代入する
      G = green(c);                   // cから緑の画素値を取り出してGに代入する
      B = blue(c);                    // cから青の画素値を取り出してBに代入する
      
      newR = .393*R + .769*G + .189*B;// セピア調の赤の画素値を計算してnewRに代入する
      newG = .349*R + .686*G + .168*B;// セピア調の緑の画素値を計算してnewGに代入する
      newB = .272*R + .534*G + .131*B;// セピア調の青の画素値を計算してnewBに代入する
 
      c = color(newR, newG, newB);    // newR,newG,newBからカラー値を作ってcに代入する
      f.set(x, y, c);                 // 画像fの座標(x,y)の画素の色をcに設定する
    }
  }
  f.save("image2.jpg");               // 画像fをファイルimage2.jpgに保存する
}

void draw() {
  image(f, 0, 0);                     // 実行画面に画像fを貼る
}

PImage f; // 画像オブジェクトfを宣言する

void setup() {

int x, y; // 整数型変数x,yを宣言する

float R, G, B; // 実数型変数R,G,Bを宣言する

float newR, newG, newB; // 実数型変数newR,newG,newBを宣言する

color c; // カラー型変数cを宣言する

f = loadImage("image.jpg"); // 画像fへファイルimage.jpgのデータを読み込む

surface.setSize(f.width, f.height); // 実行画面を画像fと同じサイズに設定する

for(y = 0; y < f.height; y++) { // yを0から画像縦幅-1まで1ずつ増やす

for(x = 0; x < f.width; x++) { // xを0から画像横幅-1まで1ずつ増やす

c = f.get(x, y); // 座標(x,y)の色の値（カラー型）をcに代入する

R = red(c); // cから赤の画素値を取り出してRに代入する

G = green(c); // cから緑の画素値を取り出してGに代入する

B = blue(c); // cから青の画素値を取り出してBに代入する

newR = .393*R + .769*G + .189*B;// セピア調の赤の画素値を計算してnewRに代入する

newG = .349*R + .686*G + .168*B;// セピア調の緑の画素値を計算してnewGに代入する

newB = .272*R + .534*G + .131*B;// セピア調の青の画素値を計算してnewBに代入する

c = color(newR, newG, newB); // newR,newG,newBからカラー値を作ってcに代入する

f.set(x, y, c); // 画像fの座標(x,y)の画素の色をcに設定する

}

f.save("image2.jpg"); // 画像fをファイルimage2.jpgに保存する

}

void draw() {

image(f, 0, 0); // 実行画面に画像fを貼る

}

def setup():
  global f
  f = loadImage("image.jpg")              # 画像fへファイルimage.jpgのデータを読み込む
  this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する
    
  for y in range(0, f.height):  # yを0から画像縦幅-1まで1ずつ増やす
    for x in range(0, f.width): # xを0から画像横幅-1まで1ずつ増やす
      c = f.get(x,y)            # 座標(x,y)の色の値（カラー型）をcに代入する
      
      R = red(c)                # cから赤の画素値を取り出してRに代入する
      G = green(c)              # cから緑の画素値を取り出してGに代入する
      B = blue(c)               # cから青の画素値を取り出してBに代入する
      
      newR = .393*R + .769*G + .189*B; # セピア調の赤の画素値を計算してnewRに代入する
      newG = .349*R + .686*G + .168*B; # セピア調の緑の画素値を計算してnewGに代入する
      newB = .272*R + .534*G + .131*B; # セピア調の青の画素値を計算してnewBに代入する

      c = color(newR, newG, newB); # newR,newG,newBからカラー値を作ってcに代入する
      f.set(x, y, c)               # 画像fの座標(x,y)の画素の色をcに設定する

  f.save("image2.jpg")             # 画像fをファイルimage2.jpgに保存する

def draw():
  global f
  image(f, 0, 0)                   # 実行画面に画像fを貼る

def setup():

global f

f = loadImage("image.jpg") # 画像fへファイルimage.jpgのデータを読み込む

this.surface.setSize(f.width, f.height) # 実行画面を画像fと同じサイズに設定する

for y in range(0, f.height): # yを0から画像縦幅-1まで1ずつ増やす

for x in range(0, f.width): # xを0から画像横幅-1まで1ずつ増やす

c = f.get(x,y) # 座標(x,y)の色の値（カラー型）をcに代入する

R = red(c) # cから赤の画素値を取り出してRに代入する

G = green(c) # cから緑の画素値を取り出してGに代入する

B = blue(c) # cから青の画素値を取り出してBに代入する

newR = .393*R + .769*G + .189*B; # セピア調の赤の画素値を計算してnewRに代入する

newG = .349*R + .686*G + .168*B; # セピア調の緑の画素値を計算してnewGに代入する

newB = .272*R + .534*G + .131*B; # セピア調の青の画素値を計算してnewBに代入する

c = color(newR, newG, newB); # newR,newG,newBからカラー値を作ってcに代入する

f.set(x, y, c) # 画像fの座標(x,y)の画素の色をcに設定する

f.save("image2.jpg") # 画像fをファイルimage2.jpgに保存する

def draw():

global f

image(f, 0, 0) # 実行画面に画像fを貼る

平均値フィルタ

PImage f, g;

void settings()
{
  f = loadImage("cat.jpg");
  g = createImage(f.width, f.height, RGB);
  f.filter(GRAY);
  size(f.width*2, f.height);
}

void setup()
{
  int   x, y;
  float a;
  
  for(y = 1; y < f.height-1; y++){
    for(x = 1; x < f.width-1; x++){
      a =   red(f.get(x-1,y-1)) + red(f.get(x,y-1)) + red(f.get(x+1,y-1))
          + red(f.get(x-1,y  )) + red(f.get(x,y  )) + red(f.get(x+1,y  ))
          + red(f.get(x-1,y+1)) + red(f.get(x,y+1)) + red(f.get(x+1,y+1));
      a = a / 9;
      g.set(x, y, color(a));
    }
  }
  image(f, 0, 0);
  image(g, f.width, 0);
}

PImage f, g;

void settings()

{

f = loadImage("cat.jpg");

g = createImage(f.width, f.height, RGB);

f.filter(GRAY);

size(f.width*2, f.height);

}

void setup()

{

int x, y;

float a;

for(y = 1; y < f.height-1; y++){

for(x = 1; x < f.width-1; x++){

a = red(f.get(x-1,y-1)) + red(f.get(x,y-1)) + red(f.get(x+1,y-1))

+ red(f.get(x-1,y )) + red(f.get(x,y )) + red(f.get(x+1,y ))

+ red(f.get(x-1,y+1)) + red(f.get(x,y+1)) + red(f.get(x+1,y+1));

a = a / 9;

g.set(x, y, color(a));

}

image(f, 0, 0);

image(g, f.width, 0);

}

解説

このプログラムは、読み込んだ画像をグレイスケール画像に変換してから平均値フィルタを用いて画像の平滑化を行う。原画像をオブジェクト f、変換後画像をオブジェクト g としている。また、この二つの画像を横に並べて表示するために、実行画面の横幅のサイズを原画像の横幅の2倍に設定している。
無地の画像を作るには createImage( ) 関数を使う。引数に画像の横幅、縦幅を指定する。
画像をグレイスケール画像に変換するには、PImage のメンバ関数 filter( ) に引数 GRAY を指定して実行する。グレイスケール画像では、3原色（赤、緑、青）の各輝度は同じ値になっている。そこでこのプログラムでは、グレイスケール画像の画素値の計算には、画素値（color型）から赤の輝度のみを取り出して計算に使用している。
グレイスケール画像の画素値（color型）を設定するときは、color( ) 関数の引数に輝度を一つだけ指定すれば良い（22行目）。

1次微分フィルタ

PImage f, g1, g2, g3;

void settings() 
{
  f = loadImage("cat.jpg");
  f.filter(GRAY);
  g1 = createImage(f.width, f.height, RGB);
  g2 = createImage(f.width, f.height, RGB);
  g3 = createImage(f.width, f.height, RGB);
  size(f.width*2, f.height*2);  
}

void setup() 
{
  int   x, y;
  float dx, dy, norm;
  
  for(y = 1; y < f.height-1; y++){
    for(x = 1; x < f.width-1; x++){
      dx = red(f.get(x+1,y  )) - red(f.get(x,y));
      dy = red(f.get(x  ,y+1)) - red(f.get(x,y));
      norm = sqrt(dx*dx + dy*dy);
      dx = abs(dx);
      dy = abs(dy);
      g1.set(x, y, color(dx));
      g2.set(x, y, color(dy));
      g3.set(x, y, color(norm));
    }
  }
  image(f, 0, 0);
  image(g1, f.width, 0);
  image(g2, 0, f.height);
  image(g3, f.width, f.height);
}

PImage f, g1, g2, g3;

void settings()

{

f = loadImage("cat.jpg");

f.filter(GRAY);

g1 = createImage(f.width, f.height, RGB);

g2 = createImage(f.width, f.height, RGB);

g3 = createImage(f.width, f.height, RGB);

size(f.width*2, f.height*2);

}

void setup()

{

int x, y;

float dx, dy, norm;

for(y = 1; y < f.height-1; y++){

for(x = 1; x < f.width-1; x++){

dx = red(f.get(x+1,y )) - red(f.get(x,y));

dy = red(f.get(x ,y+1)) - red(f.get(x,y));

norm = sqrt(dx*dx + dy*dy);

dx = abs(dx);

dy = abs(dy);

g1.set(x, y, color(dx));

g2.set(x, y, color(dy));

g3.set(x, y, color(norm));

}

image(f, 0, 0);

image(g1, f.width, 0);

image(g2, 0, f.height);

image(g3, f.width, f.height);

}

解説

このプログラムは、読み込んだ画像をグレイスケール画像に変換してから1次微分フィルタを用いて画像の輪郭抽出を行う。原画像をオブジェクト f、変換後画像をオブジェクト g1、g2、g3 としている。画像 g1 は横方向の微分画像、画像 g2 は縦方向の微分画像、画像 g3 は横方向と縦方向を合わせた結果（エッジ強度）の画像である。
横方向の微分の値、縦方向の微分の値を求め、それぞれ、dx、dy に代入する。エッジ強度は (dx, dy) のノルムを計算して求める。平方根の計算には sqrt( ) 関数を用いる。微分の値を画素値にして画像化するとき、abs( ) 関数で絶対値に変換している。
実行結果を見ると、横方向の微分では、カップの模様の縦線などが抽出されているとことがわかる。また、縦方向の微分では、カップの縁の横線などが抽出されていることがわかる。

左上：原画像，右上：横方向の1次微分画像，左下：縦方向の1次微分画像，右下：エッジ強度画像

2次微分フィルタ（ラプラシアンフィルタ）

PImage f, g;

void settings() 
{
  f = loadImage("cat.jpg");
  f.filter(GRAY);
  g = createImage(f.width, f.height, RGB);
  size(f.width*2, f.height);
}

void setup() 
{
  int   x, y;
  float a;

  for(y = 1; y < f.height-1; y++){
    for(x = 1; x < f.width-1; x++){
      a =                     +   red(f.get(x,y-1))
          + red(f.get(x-1,y)) - 4*red(f.get(x,y  )) + red(f.get(x+1,y))
                              +   red(f.get(x,y+1));
      a = abs(a);
      g.set(x, y, color(a));
    }
  }
  image(f, 0, 0);
  image(g, f.width, 0);
}

PImage f, g;

void settings()

{

f = loadImage("cat.jpg");

f.filter(GRAY);

g = createImage(f.width, f.height, RGB);

size(f.width*2, f.height);

}

void setup()

{

int x, y;

float a;

for(y = 1; y < f.height-1; y++){

for(x = 1; x < f.width-1; x++){

a = + red(f.get(x,y-1))

+ red(f.get(x-1,y)) - 4*red(f.get(x,y )) + red(f.get(x+1,y))

+ red(f.get(x,y+1));

a = abs(a);

g.set(x, y, color(a));

}

image(f, 0, 0);

image(g, f.width, 0);

}

解説

このプログラムは、読み込んだ画像をグレイスケール画像に変換してからラプラシアンフィルタを用いて画像の輪郭抽出を行う。
微分の値を画素値にして画像化するとき、abs( ) 関数で絶対値に変換している。

画像の平行移動

PImage f, g;  

void settings()
{
  f = loadImage("cat.jpg");  
  f.filter(GRAY);  
  g = createImage(f.width, f.height, RGB);
  size(f.width*2, f.height);  
}

void setup()
{
  int   X, Y;  
  int   x, y;  
  float a;  

  for(y = 0; y < g.height; y++){  
    for(x = 0; x < g.width; x++){
      X = x - 80;  
      Y = y - 30;  
      a = red(f.get(X, Y));  
      g.set(x, y, color(a));
    }
  }
  image(f, 0, 0);  
  image(g, f.width, 0);  
}

PImage f, g;

void settings()

{

f = loadImage("cat.jpg");

f.filter(GRAY);

g = createImage(f.width, f.height, RGB);

size(f.width*2, f.height);

}

void setup()

{

int X, Y;

int x, y;

float a;

for(y = 0; y < g.height; y++){

for(x = 0; x < g.width; x++){

X = x - 80;

Y = y - 30;

a = red(f.get(X, Y));

g.set(x, y, color(a));

}

image(f, 0, 0);

image(g, f.width, 0);

}

解説

このプログラムは、読み込んだ画像をグレイスケール画像に変換してから、x 軸方向に 80 画素、y 軸方向に 30 画素の平行移動を行う。
(x, y) は変換後の画像 g における座標であり、(X, Y) は変換前の画像 f における座標である。画像の幾何学変換では、まず、逆変換式を用いて変換後画像 g の座標 (x, y) から変換前画像 f の座標 (X, Y) を求め、次に、変換前画像 f の座標 (X, Y) の画素値を取り出して変換後画像 g の座標 (x, y) に設定する。
get( ) 関数の引数に画像の外側の座標を与えた場合は画素値 0（黒）が返される。Processing 以外のプログラミング言語では画像の外側の座標の画素値にアクセスしようとするとメモリアクセス違反のエラーが起こることがあるので注意が必要である。

画像の拡大縮小（最近傍内挿）

PImage f, g;  

void settings() 
{
  f = loadImage("cat.jpg");  
  f.filter(GRAY);  
  g = createImage(f.width, f.height, RGB);
  size(f.width*2, f.height);  
}

void setup() {
  int   X, Y;  
  int   x, y;  
  float a, Xf, Yf;  

  for(y = 0; y < g.height; y++){  
    for(x = 0; x < g.width; x++){
      Xf = x / 1.5;  
      Yf = y / 0.8;  
      X  = int(Xf + 0.5);  
      Y  = int(Yf + 0.5);  
      a = red(f.get(X, Y));
      g.set(x, y, color(a));
    }
  }    
  image(f, 0, 0);  
  image(g, f.width, 0);  
}

PImage f, g;

void settings()

{

f = loadImage("cat.jpg");

f.filter(GRAY);

g = createImage(f.width, f.height, RGB);

size(f.width*2, f.height);

}

void setup() {

int X, Y;

int x, y;

float a, Xf, Yf;

for(y = 0; y < g.height; y++){

for(x = 0; x < g.width; x++){

Xf = x / 1.5;

Yf = y / 0.8;

X = int(Xf + 0.5);

Y = int(Yf + 0.5);

a = red(f.get(X, Y));

g.set(x, y, color(a));

}

image(f, 0, 0);

image(g, f.width, 0);

}

解説

このプログラムは、読み込んだ画像をグレイスケール画像に変換してから、原点を中心にして x 軸方向に 1.5 倍、y 軸方向に 0.8 倍の拡大縮小を行う。画素値の内挿計算には最近隣内挿法を用いる。(x, y) は変換後の座標であり、(Xf, Yf) は逆変換によって求められる変換前の実数座標である。
最近隣内挿法では変換前座標 (Xf, Yf) の小数点以下を四捨五入して整数座標に変換する。四捨五入の計算は、値に 0.5 を加算してから int( ) 関数で小数点以下切り捨てを行うことで実現できる。
実行結果を見ると、最近隣内挿法ではジャギーが目立つことがわかる。特に猫のひげの部分に注目すると、縮小によって線が途切れ途切れになってしまっていることがわかる。

画像の拡大縮小（バイリニア補間）

PImage f, g;   

void settings() 
{
  f = loadImage("cat.jpg");
  f.filter(GRAY);   
  g = createImage(f.width, f.height, RGB);
  size(f.width*2, f.height);   
}

void setup() 
{
  int   X, Y;  
  int   x, y;  
  float a, Xf, Yf, s, t;  

  for(y = 0; y < g.height; y++){
    for(x = 0; x < g.width; x++){
      Xf = x / 1.5;  
      Yf = y / 0.8;   
      X  = int(Xf);  
      Y  = int(Yf);  
      s  = Xf - X;  
      t  = Yf - Y;  
      a =   (1-s)*(1-t) * red(f.get(X  , Y  ))
          +    s *(1-t) * red(f.get(X+1, Y  ))
          + (1-s)*   t  * red(f.get(X  , Y+1))
          +    s *   t  * red(f.get(X+1, Y+1));
      g.set(x, y, color(a));   
    }
  }    
  image(f, 0, 0);
  image(g, f.width, 0);
}

PImage f, g;

void settings()

{

f = loadImage("cat.jpg");

f.filter(GRAY);

g = createImage(f.width, f.height, RGB);

size(f.width*2, f.height);

}

void setup()

{

int X, Y;

int x, y;

float a, Xf, Yf, s, t;

for(y = 0; y < g.height; y++){

for(x = 0; x < g.width; x++){

Xf = x / 1.5;

Yf = y / 0.8;

X = int(Xf);

Y = int(Yf);

s = Xf - X;

t = Yf - Y;

a = (1-s)*(1-t) * red(f.get(X , Y ))

+ s *(1-t) * red(f.get(X+1, Y ))

+ (1-s)* t * red(f.get(X , Y+1))

+ s * t * red(f.get(X+1, Y+1));

g.set(x, y, color(a));

}

image(f, 0, 0);

image(g, f.width, 0);

}

解説

このプログラムは、読み込んだ画像をグレイスケール画像に変換してから、原点を中心にして x 軸方向に 1.5 倍、y 軸方向に 0.8 倍の拡大縮小を行う。画素値の内挿計算にはバイリニア補間を用いる。
バイリニア補間では、実数座標 (Xf, Yf) の小数部を取り出してこれを内分比として使用する。s を Xf の小数部、t を Yf の小数部として、実数値から小数点以下切り捨てをした値を引くことで求める。
実行結果を見ると、最近隣内挿法より滑らかな画像が得られている。猫のひげの部分に注目すると、最近隣内挿法では線が途切れ途切れになっていたが、バイリニア補間では線が切れずに補間できていることがわかる。

画像の回転

PImage f, g;   

void settings() 
{
  f = loadImage("cat.jpg");  
  f.filter(GRAY);   
  g = createImage(f.width, f.height, RGB);  
  size(f.width*2, f.height);   
}

void setup() 
{
  int   X, Y;  
  int   x, y;  
  float a, Xf, Yf, s, t;  
  float rad;
  
  rad = radians(20);   
  for(y = 0; y < g.height; y++){  
    for(x = 0; x < g.width; x++){  
      Xf =  x*cos(rad) + y*sin(rad);  
      Yf = -x*sin(rad) + y*cos(rad);   
      X  = int(Xf);  
      Y  = int(Yf);  
      s  = Xf - X;  
      t  = Yf - Y;  
      a =   (1-s)*(1-t) * red(f.get(X  , Y  ))
          +    s *(1-t) * red(f.get(X+1, Y  ))
          + (1-s)*   t  * red(f.get(X  , Y+1))
          +    s *   t  * red(f.get(X+1, Y+1));
      g.set(x, y, color(a));   
    }
  }    
  image(f, 0, 0);  
  image(g, f.width, 0);  
}

PImage f, g;

void settings()

{

f = loadImage("cat.jpg");

f.filter(GRAY);

g = createImage(f.width, f.height, RGB);

size(f.width*2, f.height);

}

void setup()

{

int X, Y;

int x, y;

float a, Xf, Yf, s, t;

float rad;

rad = radians(20);

for(y = 0; y < g.height; y++){

for(x = 0; x < g.width; x++){

Xf = x*cos(rad) + y*sin(rad);

Yf = -x*sin(rad) + y*cos(rad);

X = int(Xf);

Y = int(Yf);

s = Xf - X;

t = Yf - Y;

a = (1-s)*(1-t) * red(f.get(X , Y ))

+ s *(1-t) * red(f.get(X+1, Y ))

+ (1-s)* t * red(f.get(X , Y+1))

+ s * t * red(f.get(X+1, Y+1));

g.set(x, y, color(a));

}

image(f, 0, 0);

image(g, f.width, 0);

}

2値図形の面積

PImage f;   

void settings() 
{
  f = loadImage("cat.jpg");
  f.filter(GRAY);   
  size(f.width, f.height);  
}

void setup() 
{
  int  x, y;  
  int  S = 0;  

  f.filter(THRESHOLD, 0.2); 

  for(y = 0; y < f.height; y++){
    for(x = 0; x < f.width; x++){
      if( red(f.get(x, y)) == 255 ){
        S++;  
      }
    }
  }
  println("Image Area  =", f.width*f.height);
  println("Object Area =", S);  
  image(f, 0, 0);  
}

PImage f;

void settings()

{

f = loadImage("cat.jpg");

f.filter(GRAY);

size(f.width, f.height);

}

void setup()

{

int x, y;

int S = 0;

f.filter(THRESHOLD, 0.2);

for(y = 0; y < f.height; y++){

for(x = 0; x < f.width; x++){

if( red(f.get(x, y)) == 255 ){

S++;

}

println("Image Area =", f.width*f.height);

println("Object Area =", S);

image(f, 0, 0);

}

相違度SSD（差分2乗和）の計算

PImage f, t;   

void settings() 
{
  f = loadImage("cat.jpg");  
  t = loadImage("cat_lossy.jpg");  
  f.filter(GRAY);
  t.filter(GRAY);
  size(f.width*2, f.height);   
}

void setup() 
{
  int   x, y;  
  float a, ssd = 0;  
  
  for(y = 0; y < f.height; y++){  
    for(x = 0; x < f.width; x++){  
      a = red(f.get(x, y)) - red(t.get(x, y));
      ssd += a*a;   
    }
  }    
  println("SSD =", ssd);  
  image(f, 0, 0);  
  image(t, f.width, 0);  
}

PImage f, t;

void settings()

{

f = loadImage("cat.jpg");

t = loadImage("cat_lossy.jpg");

f.filter(GRAY);

t.filter(GRAY);

size(f.width*2, f.height);

}

void setup()

{

int x, y;

float a, ssd = 0;

for(y = 0; y < f.height; y++){

for(x = 0; x < f.width; x++){

a = red(f.get(x, y)) - red(t.get(x, y));

ssd += a*a;

}

println("SSD =", ssd);

image(f, 0, 0);

image(t, f.width, 0);

}

SSDによるテンプレートマッチング

PImage f, t;   

void settings() 
{
  f = loadImage("cat.jpg");
  t = loadImage("cat_template.jpg");
  f.filter(GRAY);
  t.filter(GRAY);
  size(f.width+t.width, f.height); 
}

void setup() 
{
  int   x, y, X, Y;  
  int   mx=0, my=0;  
  float a, ssd, ssdmin = 3e+38;
  
  for(Y = 0; Y < f.height - t.height; Y++){
    for(X = 0; X < f.width - t.width; X++){
      ssd = 0;  
      for(y = 0; y < t.height; y++){
        for(x = 0; x < t.width; x++){
          a = red(f.get(x+X, y+Y)) - red(t.get(x, y));
          ssd += a*a;    
        }    
      }
      if(ssd < ssdmin){
        mx = X; my = Y; 
        ssdmin = ssd;
      }
    }
  }
  image(f, 0, 0);
  image(t, f.width, 0);
  stroke(255, 0, 0);
  noFill();
  rect(mx, my, t.width, t.height);
}

PImage f, t;

void settings()

{

f = loadImage("cat.jpg");

t = loadImage("cat_template.jpg");

f.filter(GRAY);

t.filter(GRAY);

size(f.width+t.width, f.height);

}

void setup()

{

int x, y, X, Y;

int mx=0, my=0;

float a, ssd, ssdmin = 3e+38;

for(Y = 0; Y < f.height - t.height; Y++){

for(X = 0; X < f.width - t.width; X++){

ssd = 0;

for(y = 0; y < t.height; y++){

for(x = 0; x < t.width; x++){

a = red(f.get(x+X, y+Y)) - red(t.get(x, y));

ssd += a*a;

}

if(ssd < ssdmin){

mx = X; my = Y;

ssdmin = ssd;

}

image(f, 0, 0);

image(t, f.width, 0);

stroke(255, 0, 0);

noFill();

rect(mx, my, t.width, t.height);

}

左：探索対象画像，左：テンプレート画像，赤枠：テンプレートマッチングによって検出された位置

3DCGにおけるシェーディング

void settings()
{
  size(400, 400, P3D);  
}

void setup() 
{
  background(0);   
  noStroke();  
  translate(200, 200, 0);  

  ambientLight(120, 120, 120);  
  lightSpecular(255, 255, 255);  
  directionalLight(255, 255, 255, -1, 1, -1);
  specular(250, 250, 250);  
  shininess(10.0);  
  
  fill(0, 180, 0);  
  sphere(120);  
}

void settings()

{

size(400, 400, P3D);

}

void setup()

{

background(0);

noStroke();

translate(200, 200, 0);

ambientLight(120, 120, 120);

lightSpecular(255, 255, 255);

directionalLight(255, 255, 255, -1, 1, -1);

specular(250, 250, 250);

shininess(10.0);

fill(0, 180, 0);

sphere(120);

}

3DCGにおけるテクスチャマッピング

float rx = -0.5;
float ry = 0.5;
float rz = 0.0;
PImage tex1, tex2, tex3;

void setup()
{
  size(400, 400, P3D); 
  noStroke();
  tex1 = loadImage("texture1.jpg");
  tex2 = loadImage("texture2.jpg");
  tex3 = loadImage("texture3.jpg");
  textureMode(NORMAL);
}

void draw()
{
  background(255);
  translate(200, 200, 0);
  rotateX(rx);
  rotateY(ry);
  rotateZ(rz);
  scale(100);

  beginShape(QUADS);
    texture(tex3);
    vertex(-1,-1, 1, 0, 0); 
    vertex(-1, 1, 1, 0, 1); 
    vertex( 1, 1, 1, 1, 1); 
    vertex( 1,-1, 1, 1, 0);
  endShape();
  
  beginShape(QUADS);  
    texture(tex3);
    vertex(-1,-1,-1, 0, 0); 
    vertex(-1, 1,-1, 0, 1); 
    vertex( 1, 1,-1, 1, 1); 
    vertex( 1,-1,-1, 1, 0);
  endShape();
  
  beginShape(QUADS);  
    texture(tex1);
    vertex(-1,-1, 1, 0, 1); 
    vertex( 1,-1, 1, 1, 1); 
    vertex( 1,-1,-1, 1, 0); 
    vertex(-1,-1,-1, 0, 0);
  endShape();
  
  beginShape(QUADS);
    texture(tex1);
    vertex(-1, 1, 1, 0, 0); 
    vertex( 1, 1, 1, 1, 0); 
    vertex( 1, 1,-1, 1, 1); 
    vertex(-1, 1,-1, 0, 1);
  endShape();
  
  beginShape(QUADS); 
    texture(tex2);
    vertex(-1,-1, 1, 0, 0); 
    vertex(-1, 1, 1, 0, 1);
    vertex(-1, 1,-1, 1, 1); 
    vertex(-1,-1,-1, 1, 0);
  endShape();
 
  beginShape(QUADS); 
    texture(tex2);
    vertex(1,-1, 1, 0, 0);
    vertex(1, 1, 1, 0, 1);
    vertex(1, 1,-1, 1, 1);
    vertex(1,-1,-1, 1, 0);
  endShape();    
}

void keyPressed()
{
  if (key == 'a')           { ry = ry - 0.04; }
  else if (key == 'd')      { ry = ry + 0.04; }
  else if (key == 'w')      { rx = rx + 0.04; }
  else if (key == 's')      { rx = rx - 0.04; }
  else if (keyCode == LEFT) { rz = rz - 0.04; }
  else if (keyCode == RIGHT){ rz = rz + 0.04; }
}

float rx = -0.5;

float ry = 0.5;

float rz = 0.0;

PImage tex1, tex2, tex3;

void setup()

{

size(400, 400, P3D);

noStroke();

tex1 = loadImage("texture1.jpg");

tex2 = loadImage("texture2.jpg");

tex3 = loadImage("texture3.jpg");

textureMode(NORMAL);

}

void draw()

{

background(255);

translate(200, 200, 0);

rotateX(rx);

rotateY(ry);

rotateZ(rz);

scale(100);

beginShape(QUADS);

texture(tex3);

vertex(-1,-1, 1, 0, 0);

vertex(-1, 1, 1, 0, 1);

vertex( 1, 1, 1, 1, 1);

vertex( 1,-1, 1, 1, 0);

endShape();

beginShape(QUADS);

texture(tex3);

vertex(-1,-1,-1, 0, 0);

vertex(-1, 1,-1, 0, 1);

vertex( 1, 1,-1, 1, 1);

vertex( 1,-1,-1, 1, 0);

endShape();

beginShape(QUADS);

texture(tex1);

vertex(-1,-1, 1, 0, 1);

vertex( 1,-1, 1, 1, 1);

vertex( 1,-1,-1, 1, 0);

vertex(-1,-1,-1, 0, 0);

endShape();

beginShape(QUADS);

texture(tex1);

vertex(-1, 1, 1, 0, 0);

vertex( 1, 1, 1, 1, 0);

vertex( 1, 1,-1, 1, 1);

vertex(-1, 1,-1, 0, 1);

endShape();

beginShape(QUADS);

texture(tex2);

vertex(-1,-1, 1, 0, 0);

vertex(-1, 1, 1, 0, 1);

vertex(-1, 1,-1, 1, 1);

vertex(-1,-1,-1, 1, 0);

endShape();

beginShape(QUADS);

texture(tex2);

vertex(1,-1, 1, 0, 0);

vertex(1, 1, 1, 0, 1);

vertex(1, 1,-1, 1, 1);

vertex(1,-1,-1, 1, 0);

endShape();

}

void keyPressed()

{

if (key == 'a') { ry = ry - 0.04; }

else if (key == 'd') { ry = ry + 0.04; }

else if (key == 'w') { rx = rx + 0.04; }

else if (key == 's') { rx = rx - 0.04; }

else if (keyCode == LEFT) { rz = rz - 0.04; }

else if (keyCode == RIGHT){ rz = rz + 0.04; }

}