Background appearing above array of images

Processing Coding Questions
1

Hi everyone, I’ve got an issue whereby an array of images I’ve got loading as a grid is appearing behind the background. In the pen I’ve attached the images have been replaced with rectangles, but hopefully the issue can still be spotted. I’ve tried using ‘noLoop()’ in the setup, which prevents it, or if I remove the backgrounds all together that will also fix it, though I need the background resets to draw over the previous screen after changing the state.

I just want to be able to switch to the ‘infoPage’ state when the user clicks, and return to the original page with the images when the user clicks ‘back’ on the info page.

Any advice is appreciated, thank you!

Code Pen

//Kind of working as it should, but the white background is being redrawn over the images?
//Take the background out and it'll work, but I *need* to have a background change when pageInfo() runs so it'll cover up the previous page.


//States
int state = 1;

PFont font;
//Image array
PImage images[] = new PImage[12];
//Image size and positioning
int xPos = 12;
int xPos2 = 12;
int xPos3 = 12;

void setup() {
  frameRate(30);
  font = createFont("Montserrat-Regular.ttf", 32);
  textFont(font, 32);
  noStroke();
  size(800, 800);
  for (int i=0; i<images.length; i++) {
    images[i] = loadImage(i+".jpg");
  }
}

void draw() {

  if (state == 1) {
    drawImages();
  } else if (state == 2) {
    infoPage();
  }
}

void infoPage() {
background(0);
  String info = "Pumpkin info will appear here.";
  fill(255);
  text(info, 10, 10, width, 80);

  fill(#5352ed);
  rect(10, height-height/12-10, width/6, height/12);
  fill(0);
  String back = "Back";
  text(back, 12, height-height/12, width/6, height/12);

  if (mousePressed && mouseX >= 10 && mouseX <= width/6+10 && mouseY >= height-height/12-10 && mouseY <= height/12+height-height/12-10) {
    //background(255,0,0);
    state = 1;
    drawImages();
  }
}

void drawHeader() {
  fill(#5352ed);
  rect(0, 0, width, height/6);
  rect(0, height-(height/24), width, height/24);

  String s = "Welcome.";
  String s2 = "Choose a pumpkin for more info.";
  fill(230);
  textSize(32);
  text(s, 10, height/6/5, width, 80);  // Text wraps within text box
  text(s2, 10, height/6/2, width, 80);
}

void drawImages() {
  background(255);
  fill(#5352ed);
  rect(0, 0, width, height/6);
  rect(0, height-(height/24), width, height/24);

  String s = "Welcome.";
  String s2 = "Choose a pumpkin for more info.";
  fill(230);
  textSize(32);
  text(s, 10, height/6/5, width, 80);  // Text wraps within text box
  text(s2, 10, height/6/2, width, 80);


  if (mousePressed && mouseX >= 12 && mouseX <= width/4-25+12 && mouseY >= height/2-height/4-25 && mouseY <= height/4-25+height/2-height/4-25) {
    println("hitbox1");
    state = 2;
  } else if (mousePressed && mouseX >= 12+width/4 && mouseX <= width/4-25+12+width/4 && mouseY >= height/2-height/4-25 && mouseY <= height/4-25+height/2-height/4-25) {
    println("hitbox2");
  } else if (mousePressed && mouseX >= 12+width/4*2 && mouseX <= width/4-25+12+width/4*2 && mouseY >= height/2-height/4-25 && mouseY <= height/4-25+height/2-height/4-25) {
    println("hitbox3");
  } else if (mousePressed && mouseX >= 12+width/4*3 && mouseX <= width/4-25+12+width/4*3 && mouseY >= height/2-height/4-25 && mouseY <= height/4-25+height/2-height/4-25) {
    println("hitbox4");
  } else if (mousePressed && mouseX >= 12 && mouseX <= width/4-25+12 && mouseY >= height/2-25 && mouseY <= height/4-25+height/2-25) {
    println("hitbox5");
  } else if (mousePressed && mouseX >= 12+width/4 && mouseX <= width/4-25+12+width/4 && mouseY >= height/2-25 && mouseY <= height/4-25+height/2-25) {
    println("hitbox6");
  } else if (mousePressed && mouseX >= 12+width/4*2 && mouseX <= width/4-25+12+width/4*2 && mouseY >= height/2-25 && mouseY <= height/4-25+height/2-25) {
    println("hitbox7");
  } else if (mousePressed && mouseX >= 12+width/4*3 && mouseX <= width/4-25+12+width/4*3 && mouseY >= height/2-25 && mouseY <= height/4-25+height/2-25) {
    println("hitbox8");
  } else if (mousePressed && mouseX >= 12 && mouseX <= width/4-25+12 && mouseY >= height-(height/4+25) && mouseY <= height/4-25+height-(height/4+25)) {
    println("hitbox9");
  } else if (mousePressed && mouseX >= 12+width/4 && mouseX <= width/4-25+12+width/4 && mouseY >= height-(height/4+25) && mouseY <= height/4-25+height-(height/4+25)) {
    println("hitbox10");
  } else if (mousePressed && mouseX >= 12+width/4*2 && mouseX <= width/4-25+12+width/4*2 && mouseY >= height-(height/4+25) && mouseY <= height/4-25+height-(height/4+25)) {
    println("hitbox11");
  } else if (mousePressed && mouseX >= 12+width/4*3 && mouseX <= width/4-25+12+width/4*3 && mouseY >= height-(height/4+25) && mouseY <= height/4-25+height-(height/4+25)) {
    println("hitbox12");
  }

  /////////////////////
  for (int i=0; i<=3; i++) {
    image(images[i], xPos, height/2-height/4-25, width/4-25, height/4-25);
    xPos+= width/4;
  }

  for (int i=4; i<8; i++) {
    image(images[i], xPos2, height/2-25, width/4-25, height/4-25);
    xPos2+= width/4;
  }

  for (int i=8; i<12; i++) {
    image(images[i], xPos3, height-(height/4+25), width/4-25, height/4-25);
    xPos3+= width/4;
  }
}

Full code above too, though I’ve tried running it with everything but the ‘drawImages’ function, the draw, setup and variables and the issue persists.

1 Like
2

Hello!

Welcome to the forum! Great to have you here!

size(800, 800); should be the first line in setup().

Your question

You need to say xPos=0; etc. before the for-loops:

Like this (but with text())


  textSize(32);
  xPos=0; 

  /////////////////////
  for (int i=0; i<=3; i++) {
    // image(images[i], xPos, height/2-height/4-25, width/4-25, height/4-25);
    fill(0); 
    text(str(i), 
      xPos, 144);
    xPos+=100;
  }

  xPos=0; 
  xPos2=0;
  for (int i=4; i<8; i++) {
    // image(images[i], xPos2, height/2-25, width/4-25, height/4-25);
    fill(0); 
    text(i, 
      xPos2, 244); 
    xPos2+= width/4;
  }

  xPos=0; 
  xPos3=0; 
  for (int i=8; i<12; i++) {
    // image(images[i], xPos3, height-(height/4+25), width/4-25, height/4-25);
    fill(0); 
    text(i, 
      xPos3, 320);
    xPos3+= width/4;
  }

Regards, Chrisir

2 Likes
3

Thank you very much for your response! Very helpful. Take care.

1 Like