清除背景時，矩形移動

Question

所以我用一個矩形將屏幕划分為兩種不同的背景顏色。 我編寫的代碼是用於迷你游戲的，它應該在屏幕上移動一個氣泡，但是當我單擊鼠標時，我用來划分屏幕的矩形也會移動。 我可能在描述這個方面做得很糟糕，所以這是代碼，你會明白我的意思。

PFont font1;
int dice = 100;
int num = 0;
float circlex = 300;
float circley = 830;
float xmove = 0;
float ymove = 0;


void setup ()
{
  
  noLoop();
  frameRate(10);
 
  size (600, 900);
  //background (#29C4FF);
  //fill (#C4FFEC);
  //strokeWeight(3);
  //line(1, 225, 599, 225);
  //noStroke ();
  //rect (0, 0, 599, 225);

  font1 = loadFont ("ArialMT-18.vlw");
  ellipseMode(CENTER);

  
}

void draw ()
{
  //OCEAN
  background (#29C4FF);
  fill (#C4FFEC);
  strokeWeight(3);
  line(1, 225, 599, 225);
  noStroke ();
  rect (0, 0, 599, 225);
  textFont(font1, 18);
  fill(0);
  text("Click on the dice to help free Aang from the iceberg.", 100, 50);

  //BUBBLE
  fill(0, 0, 200);
  ellipse(circlex, circley, 125, 125);

  noStroke();

  fill (210);
  ellipse(circlex, circley, 118, 118);

  //AANG
  //BODY
  fill(#FF8E03);
  noStroke ();
  triangle(255, 830, 345, 830, 300, 890);

  //HEAD
  fill(#027A9D);

  ellipse(275, 820, 10, 15);
  ellipse(325, 820, 10, 15);
  ellipse(300, 820, 50, 55);

  rectMode(CENTER);
  fill(255);
  rect(300, 800, 10, 15);
  
  triangle(290, 805, 310, 805, 300, 820);
  
  rect(288, 815, 8, 3);
  rect(312, 815, 8, 3);
  
  //DICE
  fill(#027A9D);
  rect(80, 130, 100, 100, 12);
  fill(#8EC1EA);
  rect(80, 130, 90, 90, 8);

  
  //NUMBERS(DOTS)
  fill(150, 0, 0);
  int num = int(random(1, 7));
  if (num == 1 || num == 3 || num == 5)
    ellipse(80, 130, dice/5, dice/5); 
  if (num == 2 || num == 3 || num == 4 || num == 5 || num == 6) { 
    ellipse(80 - dice/4, 130 - dice/4, dice/5, dice/5);
    ellipse(80 + dice/4, 130 + dice/4, dice/5, dice/5);
  }
  if (num == 4 || num == 5 || num == 6) {
    ellipse(80 - dice/4, 130 + dice/4, dice/5, dice/5);
    ellipse(80  + dice/4, 130 - dice/4, dice/5, dice/5);
  }
  if (num == 6) {
    ellipse(80, 130 - dice/4, dice/5, dice/5);
    ellipse(80, 130 + dice/4, dice/5, dice/5);
  }
  
  if (num == 1 || num == 2) {
    circlex = circlex + xmove;  
    xmove = +20;
  }
  if (num == 3 || num == 4) {
    circlex = circlex + xmove;
    xmove = -20;
  }
  if (num == 5) {
    circley = circley + ymove;
    ymove = -25;
  }
  if (num == 6) {
    circley = circley + ymove;
    ymove = -50;
  }
    
  
  
  
  
  
  
  

  //ROLL
  if (mousePressed && mouseButton == LEFT)
    noLoop();
    
    

}

void mousePressed() {
  loop();
 


}
  

Answer 1

rectMode(CENTER);

此行修改矩形的繪制方式。 在第一次運行時，它仍然設置為默認值 (CORNER)，但之后矩形從中心開始繪制，因此移動到左上角。

參考： https://processing.org/reference/rectMode_.html

方案一：在繪制背景之前添加rectMode(CORNER) 。

解決方案 2：將rectMode(CENTER)移動到設置中並繪制所有形狀有點不同。

一般來說，我建議您將背景放入 function 以獲得更好的可讀性和靈活性。

void setup () {
  noLoop();
  frameRate(10);
  size (600, 900);

  ellipseMode(CENTER); 
  rectMode(CENTER); // added rectMode here.
}

void draw () {

  drawStage();

  //BUBBLE
  // ...
}

// Function to draw the background 
void drawStage() {
  //OCEAN
  background (#29C4FF);
  fill (#C4FFEC);
  noStroke();
  
  rect(width/2, 125, width, 250); // rect drawn with "width" scales if you choose to adjust your sketch size.
  fill(0);
  text("Click on the dice to help free Aang from the iceberg.", 100, 50);
}