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

Question

### 前提・実現したいこと

processingにて図形を２つ描いて片方のみを消す方法を教えてください。

例として、
int x;
void draw(){
  background(255);  

  fill(0); 
  text(x, 10 , 10);

  point(x, 100);
  x++;
}

とすると全部消えてしまうので、ポイントはそのまま消さずに軌跡を描いていって、テキストのみ消して新しい値を表示させたいです

Accepted Answer

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

Processing
1void setup() {
2  size(300, 300);
3}
4
5ArrayList< PVector > hist = new ArrayList<PVector>();
6int x;
7void draw() {
8  background(255);  
9
10  fill(0); 
11  text(x, 10, 10);
12  hist.add(new PVector(x,100));//履歴に追加
13  for(PVector v : hist){//履歴を全部描く
14    point(v.x, v.y);
15  }
16  x++;
17}

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

Processing
1void setup() {
2  size(300, 300);
3  noSmooth();//スムージングがあると背景色と前景色の関係で描き方が変わるので綺麗に消えない。オフにする
4  background(255);
5}
6
7int x;
8int prev_x;
9void draw() {
10  //background(255);  
11
12  fill(255); 
13  text(prev_x, 10, 10);//背景色で前のデータを重ね描き(消える)
14  fill(0); 
15  text(x, 10, 10);
16
17  point(x, 100);
18  prev_x=x;//現在のデータを次回に保存
19  x++;
20} 
21

Answer

今回の例ですとテキストを書く前に、`rect`で位置とサイズを指定して白く塗ります。

場合によっては前フレームで書いた内容を白く塗り、新たに描き直す手もあるかもしれません。
重なり合ったりして複雑な時は、配列やリストに保存して全部描き直すほうが楽かもしれません。
```Processing
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);
}
```