processingで条件分岐を利用した色の変更ができません。

Question

前提・実現したいこと

processingで黒い円1個と赤い円20個を動かし、
黒い円と赤い円が重なっているとき、背景の色を変更する
というものを作っていますが、背景の色が変更されません。

該当のソースコード

int n = 20;
int p = 400;
int q = 250;
float[] x,y,vx,vy;
boolean caution = false;

void setup(){
  size(800,500);
  x = new float[n];
  y = new float[n];
  vx = new float[n];
  vy = new float[n];
  for(int i = 0; i < n; i++){
    float angle = random(360);
    x[i] = random(10,width-10);
    y[i] = random(10,height-10);
    vx[i] = 2*cos(degrees(angle));
    vy[i] = 2*sin(degrees(angle));
  }
}

void draw(){
  hitCheck_circle();
  player();
  drawCircle();
}

void player(){
  fill(0);
  ellipse(p,q,20,20);
  if(p < mouseX){
    p += 5;
  }
  if(p > mouseX){
    p -= 5;
  }
  if(q < mouseY){
    q += 5;
  }
  if(q > mouseY){
    q -= 5;
  }
}

void drawCircle(){
  fill(255,0,0);
  for(int i = 0; i < n; i++){
    ellipse(x[i],y[i],20,20);
    x[i] += vx[i];
    y[i] += vy[i];
    if(x[i] < 10 || x[i] > width-10){
      vx[i] = -vx[i];
    }
    if(y[i] < 10 || y[i] > height-10){
      vy[i] = -vy[i];
    }
    if((dist(p,q,x[i],y[i])) <= 20){
      caution = true;
    } else {
      caution = false;
    }
  }
}

void hitCheck_circle(){
  if(caution){
    background(255,255,0);
  } else {
    background(255);
  }
}

Answer 1

どれかの丸に当たって一度はcaution = trueになってても、forループで全ての丸に対して判定されてるので、最後の丸に当たってない限り最後にcaution = falseになってしまってるのだと思います。
なので、forループの前で一度だけcaution = falseをして、

if (dist <= 20) {
  caution = true
}

という感じでelseでfalseを代入しないようにしたらうまくいくと思います！