How to draw two different matrices in Processing

Question

I'm new to Processing. Why don't I see the first matrix drawn? I seem to only see the matrix after the delay, and not the one before. My ultimate goal is to watch how a matrix changes over time steps.

// Number of columns and rows in the grid 
int[][] myArray = {  {0, 1, 2, 3},
                     {3, 2, 1, 0},
                     {3, 5, 6, 1},
                     {3, 8, 3, 4}  };

void setup() {   
  size(200,200); 
}

void draw() {   
  background(204);   
  for (int i = 0; i < 4; i++) {
    for (int j = 0; j < 4; j++) { 
      rect(20+30*j,30+30*i,3,3);
    }   
  }

  delay(2500);
  background(204);

  for (int i = 0; i < 4; i++) {
    for (int j = 0; j < 4; j++) { 
      rect(40+30*j,50+30*i,7,7);
    }   
  }
}

Answer 1

Your myArray variable is misleading, it doesn't seem to be used anywhere. Basically you want to animate/interpolate between values. Your code does this in the draw loop:

clear the background
draw 16 squares
wait 2500 ms
clear the background
draw 16 squares

which you'll tiny squares and after 2500 ms larger squares and that's it.

What want to do can be achieved in many ways, from the simpler to the more complex. Luckily Processing offers a lot of handy functions.

You want to store a property (like x position of a box) in a variable which you'll update over time and use the updated value to redraw on screen:

int x = 20;
int y = 30;
int w = 3;
int h = 3;

void setup() {
  size(200,200);
}

void draw() {   
  //update
  if(x <= 40) x++;
  if(y <= 50) y++;
  if(w <= 7) w++;
  if(h <= 7) h++;
  //draw
  background(204);
  for (int i = 0; i < 4 ; i++) {
    for (int j = 0; j < 4; j++) { 
      rect(x+30*j,y+30*i,w,h);
    }   
  }
}

You could also map() your values to a variable changing over time:

int x,y,s;
int xmin = 20,xmax = 40;
int ymin = 30,ymax = 50;
int smin =  3,smax =  7;

void setup() {
  size(200,200);
}

void draw() {   
  //update
  x = (int)map(mouseX,0,width,xmin,xmax);
  y = (int)map(mouseX,0,width,ymin,ymax);
  s = (int)map(mouseX,0,width,smin,smax);
  //draw
  background(204);
  for (int i = 0; i < 4 ; i++) {
    for (int j = 0; j < 4; j++) { 
      rect(x+30*j,y+30*i,s,s);
    }   
  }
}

Or use linear interpolation (already implemented as lerp()):

int xmin = 20,xmax = 40;
int ymin = 30,ymax = 50;
int smin =  3,smax =  7;

void setup() {
  size(200,200);
}

void draw() {   
  //update
  float t = (float)mouseX/width;
  //draw
  background(204);
  for (int i = 0; i < 4 ; i++) {
    for (int j = 0; j < 4; j++) { 
      rect(lerp(xmin,xmax,t)+30*j,
           lerp(ymin,ymax,t)+30*i,
           lerp(smin,smax,t)     ,
           lerp(smin,smax,t)     );
    }   
  }
}

and you could alter your interpolation amount based on any variable you like:

int xmin = 20,xmax = 40;
int ymin = 30,ymax = 50;
int smin =  3,smax =  7;

void setup() {
  size(200,200);
}

void draw() {   
  //update
  float t = abs(sin(frameCount * .01));
  //draw
  background(204);
  for (int i = 0; i < 4 ; i++) {
    for (int j = 0; j < 4; j++) { 
      rect(lerp(xmin,xmax,t)+30*j,
           lerp(ymin,ymax,t)+30*i,
           lerp(smin,smax,t)     , 
           lerp(smin,smax,t)     );
    }   
  }
}

HTH