Processingで画像を部分的に透過したいです

Question

前提・実現したいこと

表題の通りです。

透過したい部分のピクセルが白に変更されたある画像を、それより大きなサイズの背景画像の上に表示しています。
この白い部分を透過する方法はありますでしょうか？

試したこと

loadPixels()をしてpixels[]の中で白いピクセルにアルファ値0のcolor型変数を代入してみましたが、アルファ値が反映されませんでした。

白い部分に背景画像の画素値を入れることも考えましたが、手前の画像(透過したい画像)は絶えず動く上に画像サイズが背景と異なるので、私の能力では計算するのは少し厳しいです。

PGraphicsを使うことも考えましたが、どうやらこちらではProcessingにもともとある命令でかけるものでしか透過画像を作れないようで、既製画像からは厳しそうです。

補足情報（FW/ツールのバージョンなど）

Processingは2系です。

当方Processing初心者で長々とわかりにくい説明で申し訳ありませんが、どなたかお力をお貸しいただけると幸いです。
よろしくお願いします。

Answer 1

古い投稿なのですでに解決済ですかね。
pixelのドットの色を抽出して小さい図形orスポットとして描画すれば、実現可能です。

PImage img;
int imgWidth, imgHeight;

//透過させたい範囲
int xstart = 100;
int xstop = 200;
int ystart = 50;
int ystop = 100;

void setup() {
  size(480, 320);
  img = loadImage("dataName");
  imgWidth = img.width;
  imgHeight = img.height;
  noStroke();
  smooth();
  background(255);
  frameRate(60);
}

void draw() {
  background(255);
  img.loadPixels();
  for (int x =0; x<imgWidth; x++) {
    for (int y=0; y<imgHeight; y++) {
      color imgColor = img.get(x,y);
      //x,yが選択した範囲であれば透過させる。
      if(x>xstart && x<xstop && y>ystart && y<ystop){
        fill(imgColor, 100);
      }else{
        fill(imgColor);
      }
      ellipse(x, y, 1, 1);
    }
  }
}

上記の

fill(imgColor, 100);
ellipse(x, y, 1, 1);

は

stroke(imgColor, 100);//透過度
strokeWeight(1);//pointのドットのサイズ。1未満も設定可能です。
point(x, y);

としてもよいです。
*一応jpgデータを用いて、透過度が設定できる事が確認しました。

Answer 2

透過png形式の画像をPImageで読み込んで普通の画像と同じように表示すれば透過部分はしっかり反映されますよ。
透過pngはweb上でも作れますし、使いやすいフリーソフトもたくさんあるので探してみてください。

Comments

[iijima140]

回答ありがとうございます。
外部から透過pngを読み込むのではなく、Processingでかかれたプログラム上で作成された画像を部分的に透過したいので、その方法では解決できなさそうです。
せっかくご回答いただいたのにすみません。

Answer 3

  //ここに<背景の画像>を読み込んでください。
  //
  for(int y=0;y<height;y++){
    for(int x=0;x<width;x++){
      color col=a.get(x, y);//a=白い部分を透過表示させたいPImae画像です
      if(col!=color(255, 255, 255)){
        fill(col);
        rect(x, y, 1, 1);
      }
    }
  }