Processingを使って画像を読み込み、白黒反転する方法

2023/5/23 2023/5/23 書き溜め

Processingを使って画像を読み込み、白黒反転する際には、loadImage()関数とpixels[]配列が利用できます。

今回は、これらの基本的な使い方と、実際に画像を読み込み、白黒反転する方法を書き溜めしときます。

loadImage()とは

loadImage()は、画像ファイルを読み込むための関数です。次の構文で利用できます。

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

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

loadImage()関数では、引数に画像ファイルの名前を指定します。画像はプロジェクトの「data」フォルダ内に配置する必要があります。（絶対パスで指定する分にはどこに置いてても問題ないと思う）

pixels[]とは

pixels[]は、画像のピクセルデータを格納する配列です。配列の各要素は、画像の特定のピクセルの色情報を持ちます。画像の白黒反転には、これらの色情報を操作することで実現します。

画像の白黒反転とは

画像の白黒反転について少しまとめておく。白黒反転とは各ピクセルの色情報を反転させる処理を指します。それにより、白は黒に、黒は白に、そしてその他の色もその補色（反対の色）に変換されます。

この白黒反転の基本的な実現方法は、各色チャンネル（赤、緑、青）の最大値（通常は255）からその色チャンネルの現在の値を引くことです。たとえば、あるピクセルの色がRGB(100, 150, 200)である場合、その補色はRGB(255-100, 255-150, 255-200) = RGB(155, 105, 55)となります。この操作を画像内の全てのピクセルに対して行うことで、全体の色調が反転します。

実際のコードを残しておく

白黒反転のコード例

Processingを使って、画像を読み込み、白黒反転するコードはこんな感じ。

PImage img;

void setup() {
  size(500, 500);
  img = loadImage("your_image.jpg");
  img.loadPixels();
  for (int i = 0; i &lt; img.pixels.length; i++) {
    img.pixels[i] = color(255 - red(img.pixels[i]), 255 - green(img.pixels[i]), 255 - blue(img.pixels[i]));
  }
  img.updatePixels();
}

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

PImage img;

void setup() {

size(500, 500);

img = loadImage("your_image.jpg");

img.loadPixels();

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

img.pixels[i] = color(255 - red(img.pixels[i]), 255 - green(img.pixels[i]), 255 - blue(img.pixels[i]));

}

img.updatePixels();

}

void draw() {

background(255);

image(img, 0, 0);

}

まず、loadImage()関数で画像を読み込み、loadPixels()関数で画像のピクセルデータをpixels[]配列にロードします。

その後、pixels[]配列の各要素の色情報を操作し、その色を白黒反転します。反転した色情報を適用するために、updatePixels()関数を呼び出し、最後にimage()関数を使って画像を表示します。

実行結果はこんな感じ

詳しい情報については、公式ドキュメントを参照してください。

Processing 公式ドキュメント - loadImage()

ではじゃあね～～。