清除背景时，矩形移动

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);

此行修改矩形的绘制方式。在第一个运行它仍然设置为默认值（角落），但之后矩形从中心绘制并因此移动到左上角。

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

解决方案 1： 在绘制背景之前添加rectMode(CORNER)。

方案二： 移动 rectMode(CENTER) 到设置并绘制所有形状有点不同。

一般来说，我建议你把背景放到一个函数中，以获得更好的可读性和灵活性。

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);
}

清除背景时，矩形移动

When clearing background, rect moves

java

processing

background

rect