Add text above rect

Processing Coding Questions
1

I tried to add text on top of the rects in the shop, but the text appeared behind the rects, why is this?

int clicks = 0;
color cookie;
color black;
color white;

PImage home;

boolean shop= false;

void  setup() {
  rectMode(CORNER);
  size(660, 660);
  background(100);

  home= loadImage("home.png");

  cookie = color(132, 86, 60, 255);
  black = color(0, 0, 0, 255);
  white = color(255, 255, 255, 255);
  textAlign(LEFT);
  textSize(30);
}

void  draw() {
  rectMode(CORNER);
  background(100);
  if (!shop) {
    fill(cookie);
    ellipse(width / 2, height / 2, height / 3, height / 3);

    fill(0);
    textSize(30);
    text("clicks " + clicks, 20, 30);


    rect(10, height/2+15, 60, 60);
    fill(255);
    textSize(25);
    text("shop", 10, height/2+55);
  }

  if (shop) {
    fill(0);
    rectMode(CORNERS);
    imageMode(CORNERS);
    image(home, width/2-12, 2, width/2+13, 25);
    filter(INVERT);
    fill(38, 208, 213);
    rect(10, 10, width/2-11, height/3-10);
    rect(10, height/3+11, width/2-11, height/3+height/3-10);
    rect(10, height/3+height/3+11, width/2-11, height/3+height/3+height/3-10);

    fill(213, 38, 208);
    rect(width/2+12, 10, width-10, height/3-10);
    rect(width/2+12, height/3+11, width-10, height/3+height/3-10);
    rect(width/2+12, height/3+height/3+11, width-10, height/3+height/3+height/3-10);
  }
}

void  mousePressed() {
  if (!shop) {
    if (get(mouseX, mouseY) == cookie) {
      clicks++;
    }

    if (get(mouseX, mouseY) == black) {
      shop=true;
    }
  }

  if (shop) {
    if (get(mouseX, mouseY) == white) {
      shop=false;
    }
  }
}
2

Hi @MoonAlien822,

Which text are you talking about? The Shop and Clicks texts?

Because right now if the shop variable is true then you are not entering your first condition that is displaying the text so it doesn’t work :wink:

3

I am talking about all the rects in here

4

first draw rects THEN draw text with different fill

also add 33 to y value in text() command, since y is the baseline for the text output

example:


int clicks = 0;
color cookie;
color black;
color white;

PImage home;

boolean shop= true;

void  setup() {
  rectMode(CORNER);
  size(660, 660);
  background(100);

  home= loadImage("home.png");

  cookie = color(132, 86, 60, 255);
  black = color(0, 0, 0, 255);
  white = color(255, 255, 255, 255);
  textAlign(LEFT);
  textSize(30);
}

void  draw() {
  rectMode(CORNER);
  background(100);
  if (!shop) {
    fill(cookie);
    ellipse(width / 2, height / 2, height / 3, height / 3);

    fill(0);
    textSize(30);
    text("clicks " + clicks, 20, 30);


    rect(10, height/2+15, 60, 60);
    fill(255);
    textSize(25);
    text("shop", 10, height/2+55);
  }

  if (shop) {
    fill(0);
    rectMode(CORNERS);
    imageMode(CORNERS);
    //   image(home, width/2-12, 2, width/2+13, 25);
    filter(INVERT);
    fill(38, 208, 213);
    rect(10, 10, width/2-11, height/3-10);
    rect(10, height/3+11, width/2-11, height/3+height/3-10);
    rect(10, height/3+height/3+11, width/2-11, height/3+height/3+height/3-10);

    fill(213, 38, 208);
    rect(width/2+12, 10, width-10, height/3-10);
    rect(width/2+12, height/3+11, width-10, height/3+height/3-10);
    rect(width/2+12, height/3+height/3+11, width-10, height/3+height/3+height/3-10);

    fill(255);
    text("Here", 
      width/2+12 + 33, height/3+height/3+11 + 33 );
  }
}

void  mousePressed() {
  if (!shop) {
    if (get(mouseX, mouseY) == cookie) {
      clicks++;
    }

    if (get(mouseX, mouseY) == black) {
      shop=true;
    }
  }

  if (shop) {
    if (get(mouseX, mouseY) == white) {
      shop=false;
    }
  }
}

Please consider using a grid / array / class for this

makes your life easier

1 Like