Processing Java - Problem with draw an eclipse or load pic

Question

i'm testing a code in Processing with Java for my school.

I try to create a game and i have a problem to draw an eclipse or to load a picture. I think the picture or the eclipse is drawing under my game board .. I don't know how to solved it.

I have a txt file for the game board ( by level). An example :

110000000 000000031 000000000 100000000 000000000 000000000 200000001

Please, can you help me thank you

int cols, rows, w, x, y,level;
String lines[];
PImage flag;

void setup() {
  size(460,360);
  cols = 9;
  rows = 7;
  w = 50 ;
  x= 0;
  y = 0;
  level = 1;
  lines = loadStrings("../../data/niveau"+level+".iwk");
  flag = loadImage("../../data/flag.png");
  ellipseMode(CORNER);
}

void draw() {
  String lines[]= loadStrings("../../data/niveau"+level+".iwk");
  loadCard(cols,rows,w,x,y,lines,flag);
}

void loadCard(int cols, int rows, int w, int x,int y,String lines[],PImage flag) {

  for (int i = 0; i < rows; i++) {
    for (int j = 0; j < cols; j++) {

      if(lines[i].charAt(j) == '1'){
        fill(156,  158,  162);
      }
      else if(lines[i].charAt(j) == '2'){
        fill(225,  169,  26) ;
        ellipse(x,y,w/2,w/2);
      }
      else if(lines[i].charAt(j) == '3'){
        image(flag,x,y,w/2,w/2);

      }else {
        fill(23,  159,  215);
      }

      rect(x, y, w, w);
      x = x + w ;
    }
    y = y + w ;
    x = 0 ;
  }
}

Answer 1

It is indeed drawn under the game board.

Check the loadCard function. First the ellipse / image is draw, then a rect is draw with the same x / y, ergo on top of it.

A modified your code a little, it should show the ellipses / image

void loadCard(int cols, int rows, int w, int x,int y,String lines[],PImage flag) {

  for (int i = 0; i < rows; i++) {
    for (int j = 0; j < cols; j++) {

      //draw default so ellipse / img has a background
      fill(23,  159,  215);
      rect(x, y, w, w);

      //draw other cases on top of default    
      if(lines[i].charAt(j) == '1'){
        fill(156,  158,  162);
        rect(x, y, w, w);
      }
      else if(lines[i].charAt(j) == '2'){
        fill(225,  169,  26) ;
        ellipse(x,y,w/2,w/2);
      }
      else if(lines[i].charAt(j) == '3'){
        image(flag,x,y,w/2,w/2);
      }
      x = x + w ;
    }
    y = y + w ;
    x = 0 ;
  }
}

Since you're learning, allow me to give you 2 tips:

loadStrings() needs to happen only once per level. You should not put it in draw(), because draw() is called every frame. It is already called in setup, that is fine for now. Eventually you can put it in a separate function, and call this function at the beginning of a new level.

If you use a double for loop to draw a game board, you can use the iterators (int i and int j) as x/y variables. Instead of rect(x, y, w, w); you can use rect(i*w, j*w, w, w); . This way you'll have fewer variables to manage.