Processing マウスでできた描画を残したまま新しい描画を作成する方法

Question

Processingでマウスを使って描画をするプログラムを作っています。
その際1つの描画ができた後に新しい描画を描くと前の描画が消えてしまいます。
どのようにすれば残像を残したまま新しい描画を描けますか?

int count;
float cx = 0; float cy = 0;
boolean mode = false;

void setup(){
  size(500,500);
  background(255);
  frameRate(50);
  count = 0;
}

void draw(){
  
  for(int i=0;i<50;i++){
    for(int j=0;j<50;j++){
      
      
      float x = 1 + 10*i;
      float y = 1 + 10*j;
        
      if(dist(cx,cy,x,y)<count){
        fill(255,100,0);
      }else{
        fill(0);
      }
      rect(x,y,8,8);
      }
    }
    if(mode){
      count++;
    }
}
      
      
void mousePressed(){
  cx = mouseX;  cy = mouseY;
  count = 0;
  mode = true;
}

void mouseReleased(){
  mode = false;
}

Comments

[TN8001]

> わかりやすい説明ありがとうございました。

解決したのであれば解決済みにしてください。
不明点（不満点？）があれば、それぞれの回答にコメントしてください。

「ほかの（方の）回答ももう少し見てみたい」のような場合は、質問に何か注記がないとそうそう回答されません（teratailはすでにある回答で十分だろうと思われる場合は、回答を重ねない傾向が強いです）

Answer 1

その際1つの描画ができた後に新しい描画を描くと前の描画が消えてしまいます。
どのようにすれば残像を残したまま新しい描画を描けますか?

単に黒く塗るのをsetupに持っていくだけでいいのでは？（今後どうなっていくかにもよるでしょうが）

クリックした場所によって微妙にゆがむのが気になったので、cx・cyをマスサイズに調整しました（余計なお世話だったらすいません^^;

int count;
int cx;
int cy;
boolean mode;

void setup() {
  size(500, 500);
  frameRate(50);
  background(255);
  fill(0);
  for (int y = 0; y < height; y += 10) {
    for (int x = 0; x < width; x += 10) {
      square(x + 1, y + 1, 8);
    }
  }
}

void draw() {
  if (!mode) {
    return;
  }

  fill(255, 100, 0);
  for (int y = 0; y < height; y += 10) {
    for (int x = 0; x < width; x += 10) {
      if (dist(x, y, cx, cy) < count) {
        square(x + 1, y + 1, 8);
      }
    }
  }
  count++;
}

void mousePressed() {
  cx = mouseX / 10 * 10;
  cy = mouseY / 10 * 10;
  count = 0;
  mode = true;
}

void mouseReleased() {
  mode = false;
}

Comments

[huruhuru]

わかりやすい説明ありがとうございました。

Answer 2

いろいろな方法がありそうですが、
一度塗ったマス目を覚えておいて、次の draw でも塗るようにすればよさそうです。

boolean [] flag = new boolean[50*50]; //★
void draw(){
  for(int i=0;i<50;i++){
    for(int j=0;j<50;j++){
      float x = 1 + 10*i;
      float y = 1 + 10*j;
      if(flag[i*50+j] || dist(cx,cy,x,y)<count){  // ★
        fill(255,100,0);
        flag[i*50+j] = true; //★
      }else{
        fill(0);
      }
      rect(x,y,8,8);
      }
    }
    if(mode){
      count++;
    }
}

Comments

[huruhuru]

わかりやすい説明ありがとうございました。