画像にエフェクトをかけて遊ぼう — (2)いろいろなエフェクト

いろいろなエフェクト

前回は画像を白黒化するフィルターを使って読み込んだ画像を白黒化した。TeshFxには白黒化するフィルター以外にもいくつかのエフェクトがかけられるフィルターがあるので今回はそれらを紹介しよう。基本は前回と同じである。
今回紹介するエフェクトは以下のとおり。

エッジ検出
色反転
ぼかし
レインボー色変換

一つずつ解説する。

前提

下記の環境がすでに揃っていることが前提なので、もしまだのものがあればリンクをたどって準備していただきたい。

Processingがインストールされていること
–>まだの場合：Processingのインストール（Windows編、Mac編、Linux編）
バージョンの0.0.4以降のTeshFxがインストールされていること
→まだの場合：TeshFxのインストール

エッジ検出

与えられた画像の「縁」を検出してそれを描く。写真が線画のようになる。
コードは下記のとおり。これを”Filter002”として保存する。

PImage image; // 変数 imageを宣言

import teshfx.filter.*; // TeshFxFilterを使うことを宣言

// TeshFxEdgeFilterを生成し、それを変数"edgeFilter"に代入
TeshFxFilter edgeFilter = new TeshFxEdgeFilter();

void setup() {
  size(480, 640); // ウィンドウサイズを480x640に指定
  //ネットからURLで指定した画像をダウンロードして”image”という変数に代入する
  image = loadImage("https://coding4.art/wp-content/uploads/2022/11/teshnakamura.jpg"); 
  
// imageの画像にフィルターをかけそれを再度imageに代入する
  image = edgeFilter.filter(image);
}

void draw() {
  image(image, 0, 0); // “image”を表示する
}

void dispose() {
  save("teshedged.png"); 
}

前回のFilter001との違いは6行目でフィルターの種類をTeshFxEdgeFilterに変えているところと、22行目で保存するファイル名を変えているだけだ。このように、フィルターを変えるだけでエフェクトを簡単に切り替えることができる。

実際に実行してみると、元の画像を線画にしたようなイケメンが表示される。

色反転

元の画像を反対色に変換させるエフェクト。写真のネガと同じだ。
コードは下記のとおり。これを”Filter003”として保存する。

PImage image; // 変数 imageを宣言

import teshfx.filter.*; // TeshFxFilterを使うことを宣言

// TeshFxInvertFilterを生成し、それを変数"invertFilter"に代入
TeshFxFilter invertFilter = new TeshFxInvertFilter();

void setup() {
  size(480, 640); // ウィンドウサイズを480x640に指定
  //ネットからURLで指定した画像をダウンロードして”image”という変数に代入する
  image = loadImage("https://coding4.art/wp-content/uploads/2022/11/teshnakamura.jpg"); 
  
  // imageの画像にフィルターをかけそれを再度imageに代入する
  image = invertFilter.filter(image);
}

void draw() {
  image(image, 0, 0); // “image”を表示する
}

void dispose() {
  save("teshinverted.png"); 
}

このコードもエッジ検出と同じく、Filter001の6行目でフィルターの種類をTeshFxInvertFilterに変えているところと、22行目で保存するファイル名を変えているだけだ。

実際に実行してみると、元の画像のネガのような画像が表示される。

ぼかし

元の画像をぼかすエフェクト。
コードは下記のとおり。これを”Filter004”として保存する。

PImage image; // 変数 imageを宣言

import teshfx.filter.*; // TeshFxFilterを使うことを宣言

// TeshFxBlurFilterを生成し、それを変数"blurFilter"に代入
TeshFxFilter blurFilter = new TeshFxBlurFilter();

void setup() {
  size(480, 640); // ウィンドウサイズを480x640に指定
  //ネットからURLで指定した画像をダウンロードして”image”という変数に代入する
  image = loadImage("https://coding4.art/wp-content/uploads/2022/11/teshnakamura.jpg"); 
  
  // imageの画像にフィルターをかけそれを再度imageに代入する
  image = blurFilter.filter(image);
}

void draw() {
  image(image, 0, 0); // “image”を表示する
}

void dispose() {
  save("teshblurred.png"); 
}

このコードについても、Filter001の6行目でフィルターの種類をTeshFxBlurFilterに変えているところと、22行目で保存するファイル名を変えているだけだ。

実際に実行してみると、元の画像がぼけたような画像が表示される。

パラメータを設定する

「エッジ検出」、「色反転」はそれぞれの決められた処理をおこなっただけだが、「ぼかし」については、その「ぼかし具合」が変えられる。それを変えるためにパラメータを設定する。

TeshFxBlurFilterの場合はぼかし具合を”radius”というパラメータで指定する。先程はradius値を指定しなかったが、指定しない場合はデフォルト値として10に設定される。この値が大きいほどよりぼやける。0の場合は元の画像のままだ。

さて、そのぼかし度合いを決めるradius値を設定する関数は”radius(radius値)”。
フィルターを生成する際に”.”（ピリオッド）をつけて、”radius”という関数を呼んで設定している。TeshFxのフィルターにパラメータを設定した場合は、最後に必ず”init”をいう関数を呼ぶこと。
なのでコードは下記のようになる。

PImage image; // 変数 imageを宣言

import teshfx.filter.*; // TeshFxFilterを使うことを宣言

// TeshFxBlurFilterを生成し、それを変数"blurFilter"に代入
TeshFxFilter blurFilter = new TeshFxBlurFilter()
                                .radius(100)    // radius値を100に設定
                                .init();	// パラメータを設定した際の最後の処理

void setup() {
  size(480, 640); // ウィンドウサイズを480x640に指定
  //ネットからURLで指定した画像をダウンロードして”image”という変数に代入する
  image = loadImage("https://coding4.art/wp-content/uploads/2022/11/teshnakamura.jpg"); 
  
  // imageの画像にフィルターをかけそれを再度imageに代入する
  image = blurFilter.filter(image);
}

void draw() {
  image(image, 0, 0); // “image”を表示する
}

void dispose() {
  save("teshblurred.png"); 
}

コードを読みやすくするためフィルターの宣言を３行にわたっておこなっている。こういう書き方もアリなので覚えておくように。
とにかくこのコードは7行目でradius値を100に設定して、8行目でお約束のinitを呼んでいる。

radius値は大きくなるほど処理に時間がかかるので、これを100にすると少々時間がかかったあと、下記のように先程よりもさらにぼけた画像が表示される。

以上がパラメータの設定をする場合のフィルターの書き方だ。
これも今後の基本になるので是非やり方を覚えていただきたい。

レインボー色変換

最後に「色変換」のエフェクトについて。ここで紹介するTeshFxRainbowColorFilterは元の画像の色を別の色に変換するフィルターだ。

PImage image; // 変数 imageを宣言

import teshfx.filter.*; // TeshFxFilterを使うことを宣言

// TeshFxRainbowColorFilterを生成し、それを変数"rainbowColorFilter"に代入
TeshFxFilter rainbowColorFilter = new TeshFxRainbowColorFilter();

void setup() {
  size(480, 640); // ウィンドウサイズを480x640に指定
  //ネットからURLで指定した画像をダウンロードして”image”という変数に代入する
  image = loadImage("https://coding4.art/wp-content/uploads/2022/11/teshnakamura.jpg"); 
  
  // imageの画像にフィルターをかけそれを再度imageに代入する
  image = rainbowColorFilter.filter(image);
}

void draw() {
  image(image, 0, 0); // “image”を表示する
}

void dispose() {
  save("teshrainbowColorred.png"); 
}

このコードを実行すると元の画像の色が変換される。

このコードは乱数を使って変換ルールを決めている。乱数とはサイコロを振ったように毎回違う値が得られる関数で、ゲームなどではよく使う。乱数が呼ばれる度に違う値が得られるということはこのコードは実行する度に違う色に変換されるということだ。実際に何度か実行して試していただきたい。

ここで”seed”というパラメータを設定すると、同じ色変換ルールを実行する。例えば下記のように設定すると毎回同じ色に変換される。

例えば下記のようにseedとして2022を設定する。このとき、seedの値には最後にl”エル”をつけること。

PImage image; // 変数 imageを宣言

import teshfx.filter.*; // TeshFxFilterを使うことを宣言

// TeshFxRainbowColorFilterを生成し、それを変数"rainbowColorFilter"に代入
TeshFxFilter rainbowColorFilter = new TeshFxRainbowColorFilter()
                                .seed(2022l)    // seed値を2022に設定（最後に"l(小文字のエル)"をつけること）
                                .init();	// パラメータを設定した際の最後の処理

void setup() {
  size(480, 640); // ウィンドウサイズを480x640に指定
  //ネットからURLで指定した画像をダウンロードして”image”という変数に代入する
  image = loadImage("https://coding4.art/wp-content/uploads/2022/11/teshnakamura.jpg"); 
  
  // imageの画像にフィルターをかけそれを再度imageに代入する
  image = rainbowColorFilter.filter(image);
}

void draw() {
  image(image, 0, 0); // “image”を表示する
}

void dispose() {
  save("teshrainbowColorred.png"); 
}

このコードは何度実行しても毎回同じ色変換をする。

また、最初のseedを設定しない場合に変換されたときのseedを知ると、それを再現できるようになる。そのために”params”という関数を呼ぶ。するとスケッチ窓の下部（この部分を”コンソール”という）にシードの値が表示される。

PImage image; // 変数 imageを宣言

import teshfx.filter.*; // TeshFxFilterを使うことを宣言

// TeshFxRainbowColorFilterを生成し、それを変数"rainbowColorFilter"に代入
TeshFxFilter rainbowColorFilter = new TeshFxRainbowColorFilter();
 
void setup() {
  rainbowColorFilter.params(); // パラメータを表示する
  size(480, 640); // ウィンドウサイズを480x640に指定
  //ネットからURLで指定した画像をダウンロードして”image”という変数に代入する
  image = loadImage("https://coding4.art/wp-content/uploads/2022/11/teshnakamura.jpg"); 
  
  // imageの画像にフィルターをかけそれを再度imageに代入する
  image = rainbowColorFilter.filter(image);
}

void draw() {
  image(image, 0, 0); // “image”を表示する
}

void dispose() {
  save("teshrainbowColorred.png"); 
}

6行目ではseed値を設定せずにTeshFxRainbowColorFilterを生成し、9行目でseed値を表示する。

コンソールに表示された値をseedとして設定すると、偶然得られた色変換ルールを再現することができる。