Processingで背景が透過された画像をsaveする方法

2022 3/15

2022.03.15

こんにちは！

子供プログラミング教室kobakoスタッフです。

子供から大人まで、プログラミング初心者におすすめなProcessing / p5.jsには、

現在の画面の状態をキャプチャして画像として保存するsave()という命令、関数があります。

ですがProcessing Javaでは背景が透過されたキャプチャを生成できないことに気がつきました。

p5.jsでは背景をclearすれば透過されるのですが、Processing Javaでは真っ黒な背景にされてしまいます。

今回は、Processing Java版で、背景が透過されたキャプチャ画像を保存する方法をお伝えします。

ところで・・・

この記事を書いている人はだれ？

子供向けプログラミング教室です！

JavaScriptを使ったゲームプログラミング、ゲーム企画が得意な教室です。

プログラミング教室で実際に使用している、学習成果のある教材をYouTube無料配信しています。

YouTubeチャンネルをチェック!

やり方

基本的な考え方としては、

空っぽの画像を作り、

現在のdrawの状態を空っぽの画像に転写し、

画像から白色のピクセル部分を探し出して透過し、

転写画像をsaveする、

という流れになります。

空っぽの画像を作る

PImage img = createImage(width, height, ARGB);

これで空っぽの画像を生成できます。大きさは画面の大きさに合わせます。

現在のdrawの状態を空っぽの画像に転写

loadPixels();
img.pixels = pixels;

loadPixels命令をすると、あらかじめ用意されているpixelsという配列にピクセルの色情報が入ります。

そのピクセル配列を空っぽの画像に渡すことで転写することができます。

画像から白色のピクセル部分を探し出して透過する

for (int y=0; y<img.height; y++) {
  for (int x=0; x<img.width; x++) {
  　　color c = img.pixels[y*img.width+x];
     if(red(c) == 255 && green(c) == 255 && blue(c) == 255){
       img.pixels[y*img.width+x] = color(255, 255, 255, 0);
     }
  }
}

転写した画像のピクセル情報を1つずつみていき、白色の部分を見つけたら透明度100の色と差し替えます。

転写画像をsaveする

// updatePixelsが必要とドキュメントにあるが、なくても動作した
// img.updatePixels();
img.save();

PImageオブジェクトのsaveメソッドを叩くことで、その画像を保存することができます。

関数にまとめる

ということで、saveWithAlphaとして関数にまとめました。ご自由にお使いください。

void saveWithAlpha(String name){
  PImage img = createImage(width, height, ARGB);
  loadPixels();
  img.pixels = pixels;
  for (int y=0; y<img.height; y++) {
    for (int x=0; x<img.width; x++) {
      color c = img.pixels[y*img.width+x];
      if(red(c) == 255 && green(c) == 255 && blue(c) == 255){
         img.pixels[y*img.width+x] = color(255, 255, 255, 0);
      }
    }
  }
  img.updatePixels();
  img.save(name);
}