processing 特定の図形のみ消す方法

Question

前提・実現したいこと

processingにて図形を２つ描いて片方のみを消す方法を教えてください。

例として、
int x;
void draw(){
background(255);

fill(0);
text(x, 10 , 10);

point(x, 100);
x++;
}

とすると全部消えてしまうので、ポイントはそのまま消さずに軌跡を描いていって、テキストのみ消して新しい値を表示させたいです

Comments

[thkana]

タグのArduinoは内容に関係ないので外して下さい。

Answer 1

汎用的には、図形間の重なりがある場合は片方を消すことでもう一方が損なわれますから、「画面上に残す図形は覚えておいて、毎回画面クリアして全部描き直す」ことになるでしょう。

void setup() {
  size(300, 300);
}

ArrayList< PVector > hist = new ArrayList<PVector>();
int x;
void draw() {
  background(255);  

  fill(0); 
  text(x, 10, 10);
  hist.add(new PVector(x,100));//履歴に追加
  for(PVector v : hist){//履歴を全部描く
    point(v.x, v.y);
  }
  x++;
} 

図形間の重なりが無いという限定条件があるなら、変化する部分だけを背景色で埋めてしまう、というやり方も考えられます。矩形とか円とかを消したい部分に背景色で描くというのは既に示されているので、まったく同じ図形を背景色で描くという考え方でサンプルを。

void setup() {
  size(300, 300);
  noSmooth();//スムージングがあると背景色と前景色の関係で描き方が変わるので綺麗に消えない。オフにする
  background(255);
}

int x;
int prev_x;
void draw() {
  //background(255);  

  fill(255); 
  text(prev_x, 10, 10);//背景色で前のデータを重ね描き(消える)
  fill(0); 
  text(x, 10, 10);

  point(x, 100);
  prev_x=x;//現在のデータを次回に保存
  x++;
} 

Comments

[dra_emon]

ありがとうございます

Answer 2

今回の例ですとテキストを書く前に、rectで位置とサイズを指定して白く塗ります。

場合によっては前フレームで書いた内容を白く塗り、新たに描き直す手もあるかもしれません。
重なり合ったりして複雑な時は、配列やリストに保存して全部描き直すほうが楽かもしれません。

void setup() {
  size(400, 400);
  background(255);  
  strokeWeight(5);
  textSize(32);
}

void draw() {
  fill(200); // わかりやすいように色を付けたが255でよい
  stroke(128); // わかりやすいように色を付けたが255でよい

  float w = textWidth(str(frameCount)) + 10; // 文字の幅
  float h = textAscent() + textDescent(); // 文字の高さ
  rect(0, 0, w, h); // 文字を書くところだけ四角を描いてきれいにする

  fill(0); // 色を黒に戻す
  stroke(0);// 色を黒に戻す
  text(str(frameCount), 0, 0, w, h); // 範囲を指定し描画
  point(mouseX, mouseY);
}

Comments

[dra_emon]

ありがとうございます