画像にエフェクトをかけて遊ぼう — (1)白黒化

白黒化

TeshFxはいくつかの「フィルター」を提供している。ここでのフィルターとは、画像に対して何らかのエフェクトをかけるもので、そのフィルターによって元の画像をさまざまに変化させることができる。今回はカラーの画像を白黒にするフィルター”TeshFxMonoColorFilter”について説明する。TeshFxのフィルターの使い方は統一されているのでこのTeshFxMonoColorFilterでフィルターの使い方を学習していただきたい。

前提

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

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

コーディング

下記のコードはDisplayTesh01のコードに手を加えたものだ。タイピングの練習を兼ねて一から打ってもいいし、面倒くさい人はDisplayTesh01をコピーして、追記してもよい。これを”Filter001″という名前で保存する。

PImage image; // 変数 imageを宣言

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

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

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

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

void dispose() {
  save("teshmono.png"); // 画像を保存する
}

このコードを実行すると白黒に変換されたイケメンが表示される。

解説

DisplayTesh01から加わったところについて解説する。

３行目

この行はTeshFxのフィルターを使うことを宣言している。これはおまじないのようなもので、今後もTeshFxのフィルターを使う場合はこれを書いておく必要がある。

６行目

TeshFxMonoColorFilterを生成し、それをmonoColorFilterという変数に代入している。

１４行目

Applies the filter on the image, which was loaded at line 11.By typing “.” (period) in monoColorFilter followed by the function “filter”, the filter that monoColorFilter has is called.
The result of that filter function is again assigned to the image variable.
Remember that “=” (equal) meant “assign the value on the right side to the variable on the left side”. It does not mean “the left side equals the right side”.

１１行目で読み込み、image変数に代入した画像にフィルターをかけている。monoColorFilterに”.”（ピリオッド）を打ってその後ろに続けて関数”filter”をつけることでmonoColorFilterがもつfilter関数が呼ばれる。
そのfilter関数の結果をもう一度image変数に代入している。
“=”（イコール）は「右側の値を左側の変数に代入する」という意味だったことを思い出していただきたい。決して「左側と右側は正しい」ということを意味しているのではない。