When clearing background, rect moves

Question

So i've used a rect to divide the screen for two different background colours. The code im writing is for a minigame and its supposed to move a bubble up the screen, but when I click my mouse the rect I used to divide the screen moves as well. I probably did a very poor job at describing this so heres the code and you'll see what I mean.

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

This line modifies how your rectangles are drawn. On the first run its still set to default (CORNER), but afterwards the rect get drawn from the center and thus moves to the top left.

Reference: https://processing.org/reference/rectMode_.html

Solution 1: Add rectMode(CORNER) before drawing the background.

Solution 2: Move rectMode(CENTER) to the setup and draw all shapes a bit different.

In general I suggest you put the background into a function for a better readability and flexibility.

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