I have tried several ways to prototype an Invader object which basically needs to update itself in two recursive actions.  Let me describe it in this diagram:


Yes, what came to my mind was 2D array!  So I assigned each cell a boolean variable and a startup value.  It all went fine, and I was able to draw the first (static) frame, but had no idea how to update and animate the second frame.


And here is my code. I address the problems in red letters:

Bit[][] bitsy;
int cols = 11;
int rows = 11;
boolean a = true;
boolean b = true;
boolean c = false;
boolean d = false;
boolean[][] grid =   { {d,d,d,d,d,d,d,d,d,d,d},
                       {d,d,b,d,d,d,d,d,b,d,d},
                       {c,d,d,b,d,d,d,b,d,d,c},
                       {c,d,b,b,b,b,b,b,b,d,c},
                       {c,b,b,d,b,b,b,d,b,b,c},
                       {b,b,b,b,b,b,b,b,b,b,b},
                       {a,b,b,b,b,b,b,b,b,b,a},
                       {a,d,b,a,a,a,a,a,b,d,a},
                       {a,c,a,d,d,d,d,d,a,c,a},
                       {d,d,d,a,a,d,a,a,d,d,d},
                       {d,d,d,d,d,d,d,d,d,d,d} };

void setup() {
  size(110, 110);
  background(125);
  smooth();
  bitsy = new Bit[cols][rows];
  // Initialize each object
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      bitsy[j][i] = new Bit();                // bitsy[i][j] = new Bit(); will result in a 90-degree rotated image
    }
  }
}

void draw() {
  a = false;
  c = true;
  background(125);
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
       if (grid[j][i] == true) {
        bitsy[j][i].display(i*10, j*10, 10, 10, #FFFF00);      // bitsy[i][j] will result in 90-degree rotated image
      }
    }
  }
}

class Bit {
  float x, y;  // x, y location
  float w, h;  // width and height
  color c;     // fill color
 
  Bit() {}
 
  void display(float xp, float yp, float wt, float ht, color ct) {
    x = xp;
    y = yp;
    w = wt;
    h = ht;
    c = ct; 
    noStroke();
    fill(c);
    rect(x, y, w, h);
  }
 
Questions:

1. At the point where I assign a boolean 2D array named grid.  Could you pls suggest a tidier way of assigning values (in this case, selectively) to a 2D array without doing it in one-go, matrix style like that? (A more algorithmic way, whether through subset(), append(), splice() or other array methods)

2. When I go through a for loop to assign objects to array, int i is a counter variable for cols, and int j for rows.  But when I go bitsy[i][j]....I got a 90-degree rotation.



3. Lastly, please advice how to add an update method so that the frame two play in draw() and loop over and over.  Thanks a whole lot.