Spawning PGraphics using 2D array

Processing Coding Questions
1

Hello Processing forum! I’ve been learning a lot of stuff using processing, its really fun and all errors and things i didnt understand were easy to find here in the forum or in the reference, today i wanted to start using PGraphics and 2d arrays, so started making this simple program that creates a few different triangles and then place them on a grid based on the array ive created storing what triangle should i use:

PGraphics tri1;
PGraphics tri2;
PGraphics tri3;
PGraphics tri4;

int hue = 80;
int x = 2;
int y = 2;
int tileX;
int tileY;
int[] symbols = new int[x*y];

void setup() {
  frameRate(4);
  size(800, 800);
  background(230);

  tileX = width/x;
  tileY = height/y;

  tri1 = createGraphics(tileX, tileY);
  tri2 = createGraphics(tileX, tileY);
  tri3 = createGraphics(tileX, tileY);
  tri4 = createGraphics(tileX, tileY);

  tri1.beginDraw();
  tri1.beginShape();
  tri1.fill(hue);
  tri1.noStroke();
  tri1.vertex(0, 0);
  tri1.vertex(tileX, 0);
  tri1.vertex(tileX, tileY);
  tri1.vertex(0, 0);
  tri1.endShape(CLOSE);
  tri1.endDraw();

  tri2.beginDraw();
  tri2.beginShape();
  tri2.fill(hue);
  tri2.noStroke();
  tri2.vertex(0, 0);
  tri2.vertex(0, tileY);
  tri2.vertex(tileX, tileY);
  tri2.endShape();
  tri2.endDraw();

  tri3.beginDraw();
  tri3.beginShape();
  tri3.fill(hue);
  tri3.noStroke();
  tri3.vertex(0, 0);
  tri3.vertex(tileX, 0);
  tri3.vertex(0, tileY);
  tri3.endShape();
  tri3.endDraw();

  tri4.beginDraw();
  tri4.beginShape();
  tri4.fill(hue);
  tri4.noStroke();
  tri4.vertex(tileX, 0);
  tri4.vertex(0, tileY);
  tri4.vertex(tileX, tileY);
  tri4.endShape();
  tri4.endDraw();

  for (int e = 0; e < symbols.length; e++) {
    symbols[e] = int(random(4));
    println("Symbol#"+e+" = " + symbols[e]);
  }
}

Ok, so this works so far! i know how to fill the canvas with the triangles using this

void randomFill() {
  background(220);
  for (int i = 0; i < width; i = i + tileX) {
    for (int n = 0; n < height; n = n + tileY) {
      int sym = int(random(4));

      if (sym == 0) {
        image(tri1, i, n);
      }
      if (sym == 1) {
        image(tri2, i, n);
      }
      if (sym == 2) {
        image(tri3, i, n);
      }
      if (sym == 3) {
        image(tri4, i, n);
      }
    }
  }
}

But i cant wrap my head around how to use my symbols array to spawn the desired triangles, been trying something like:

void arrayFill() {

  for (int arrayPos = 0; arrayPos < symbols.length; arrayPos++) {
    for (int i = 0; i <= width; i = i + tileX) {
      for (int n = 0; n < height; n = n + tileY) {
        if (symbols[arrayPos] == 0) {
          image(tri1, i, n);
        }
        if (symbols[arrayPos] == 1) {
          image(tri2, i, n);
        }
        if (symbols[arrayPos] == 2) {
          image(tri3, i, n);
        }
        if (symbols[arrayPos] == 3) {
          image(tri4, i, n);
        }
      }
    }
  }
}

But no luck so far :frowning: i think the problem is in how im nesting those for loops, but maybe im wrong and there is something more im missing.
I would love to know if you see anything that could be improved beyond my problem too!