P5 COLOR GRIDS but how?

Processing Coding Questions
1

Hi hello!

Recently I coded a grid system to create typography. My question, how can I change the color of individual tiles??

Here’s the code, feel free to play around!!

int amount = 10;
int[][] state = new int[amount][amount];
color fg = (200);

int mx, my;

void setup() {
size(800, 800);
for (int x = 0; x < amount; x++) {
for (int y = 0; y < amount; y++) {

}

}
}

void draw() {

if (keyPressed){
if (key == ‘b’);
background(0,255,0);
} else {
background(0,0,255,0);
}
background(0);
cursor(CROSS);

float tileW = width/amount;
float tileH = height/amount;
fill(fg);
noStroke();
ellipseMode(CORNER);

// Check where the mouse is

mx = int(map(mouseX, 0, width, 0, amount));
my = int(map(mouseY, 0, height, 0, amount));

// Draw the visual

for (int x = 0; x < amount; x++) {
for (int y = 0; y < amount; y++) {

  if (state[x][y] == 0) {
  
    pushMatrix();
    translate(x*tileW, y*tileH);
    rect(0, 0, tileW, tileH);
    popMatrix();
  } else if (state[x][y] == 2) {
    
    pushMatrix();
    translate(x*tileW, y*tileH);
    triangle(tileW, tileH, 0, tileW, tileH, 0);
    popMatrix();
  } else if (state[x][y] == 5) {

    pushMatrix();
    translate(x*tileW, y*tileH);
    triangle(0, 0, tileW, tileH, 0, tileW);
    popMatrix();
  } else if (state[x][y] == 3) {
    
    pushMatrix();
    translate(x*tileW, y*tileH);
    triangle(tileW, tileH, tileW, 0, 0, 0);
    popMatrix();
  } else if (state[x][y] == 4) {
    
    pushMatrix();
    translate(x*tileW, y*tileH);
    triangle(tileW, 0, 0, 0, 0, tileH);
    popMatrix();
  } else if (state[x][y] == 5) {
    
    int sx = int(tileW*x);
    int sy = int(tileH*y);
    int sw = int(tileW);
    int sh = int(tileH);

    int dx = sx;
    int dy = sy;
    int dw = sw;
    int dh = sh;

    copy(sx, sy, sw, sh, dx, dy, dw, dh);
  } else if (state[x][y] == 4) {

    int sx = int(tileW*x);
    int sy = int(tileH*y);
    int sw = int(tileW);
    int sh = int(tileH);

    int dx = sx;
    int dy = sy;
    int dw = sw;
    int dh = sh;

    copy(sx, sy, sw, sh, dx, dy, dw, dh);
}
}

}
}

void countUp(int x, int y) {
if (state[x][y] < 5) {
state[x][y]++;
} else {
state[x][y] = 0;
}
}

void keyPressed() {
countUp(mx,my);
}

2

I don’t know if thats what you wanted but I added the option to change the color of newly painted tiles with the s key and changing the color of a tile with the c key. Also you can erase tiles with the e key. Here is the code.
I will also post a optimized version and if you so wish I’ll tell you details about my changes.

int amount= 100;
int[][] state = new int[amount][amount];
int[][] stateCol = new int[amount][amount];
color fg = (200);
color[] colors={color(255), color(255, 0, 0), color(0, 255, 0), color(0, 0, 255)};
int mx, my;
int running_color=0;
void setup() {
  size(800, 800);
  for (int x = 0; x < amount; x++) {
    for (int y = 0; y < amount; y++) {
      //NEW
      stateCol[x][y]=0;
      state[x][y]=0;
    }
  }
}

void draw() {

  if (keyPressed) {
    // This is dead code 
    background(0, 255, 0);
  } else {
    background(0, 0, 255, 0);
  }
  background(0);
  cursor(CROSS);

  float tileW = width/amount;
  float tileH = height/amount;
  fill(fg);
  noStroke();
  ellipseMode(CORNER);

  // Check where the mouse is

  mx = int(map(mouseX, 0, width, 0, amount));
  my = int(map(mouseY, 0, height, 0, amount));
  // Draw the visual

  for (int x = 0; x < amount; x++) {
    for (int y = 0; y < amount; y++) {
      //New
      fill(colors[stateCol[x][y]]);
      if (state[x][y] == 1) {

        pushMatrix();
        translate(x*tileW, y*tileH);
        rect(0, 0, tileW, tileH);
        popMatrix();
      } else if (state[x][y] == 2) {

        pushMatrix();
        translate(x*tileW, y*tileH);
        triangle(tileW, tileH, 0, tileW, tileH, 0);
        popMatrix();
      } else if (state[x][y] == 5) {

        pushMatrix();
        translate(x*tileW, y*tileH);
        triangle(0, 0, tileW, tileH, 0, tileW);
        popMatrix();
      } else if (state[x][y] == 3) {

        pushMatrix();
        translate(x*tileW, y*tileH);
        triangle(tileW, tileH, tileW, 0, 0, 0);
        popMatrix();
      } else if (state[x][y] == 4) {

        pushMatrix();
        translate(x*tileW, y*tileH);
        triangle(tileW, 0, 0, 0, 0, tileH);
        popMatrix();
      } else if (state[x][y] == 5) {

        int sx = int(tileW*x);
        int sy = int(tileH*y);
        int sw = int(tileW);
        int sh = int(tileH);

        int dx = sx;
        int dy = sy;
        int dw = sw;
        int dh = sh;

        copy(sx, sy, sw, sh, dx, dy, dw, dh);
      } else if (state[x][y] == 4) {

        int sx = int(tileW*x);
        int sy = int(tileH*y);
        int sw = int(tileW);
        int sh = int(tileH);

        int dx = sx;
        int dy = sy;
        int dw = sw;
        int dh = sh;

        copy(sx, sy, sw, sh, dx, dy, dw, dh);
      }
    }
  }
}

void countUp(int x, int y) {
  stateCol[x][y]=running_color;
  if (state[x][y] < 5) {
    state[x][y]++;
  } else {
    state[x][y] = 0;
  }
}

void keyPressed() {

  //NEW!
  if (key=='c') stateCol[mx][my]=(stateCol[mx][my]+1)%colors.length;
  else if (key=='s') running_color=(running_color+1)%colors.length;
  else if (key=='e') state[mx][my]=0;
  else countUp(mx, my);
}
3

Here is a slightly optimated version:

int amount= 100;
int[][] state = new int[amount][amount];
int[][] stateCol = new int[amount][amount];
color fg = (200);
color[] colors={color(255), color(255, 0, 0), color(0, 255, 0), color(0, 0, 255)};
int mx, my;
int running_color=0;
float tileW,tileH;

void setup() {
  size(800, 800);
  cursor(CROSS);
  noStroke();
  ellipseMode(CORNER);
  tileW = width/amount;
  tileH = height/amount;
  for (int x = 0; x < amount; x++) {
    for (int y = 0; y < amount; y++) {
      stateCol[x][y]=0;
      state[x][y]=0;
    }
  }
}

void draw() {
  // This is dead code 
  /*
  if (keyPressed) {
    background(0, 255, 0);
  } else {
    background(0, 0, 255, 0);
  }*/
  background(0);
  // Check where the mouse is
  mx = int(map(mouseX, 0, width, 0, amount));
  my = int(map(mouseY, 0, height, 0, amount));
  // Draw the visual
  for (int x = 0; x < amount; x++) {
    for (int y = 0; y < amount; y++) {
      pushMatrix();
      fill(colors[stateCol[x][y]]);
      translate(x*tileW, y*tileH);
      if (state[x][y] == 1) rect(0, 0, tileW, tileH);
      else if (state[x][y] == 2) triangle(tileW, tileH, 0, tileW, tileH, 0);
      else if (state[x][y] == 5) triangle(0, 0, tileW, tileH, 0, tileW);
      else if (state[x][y] == 3) triangle(tileW, tileH, tileW, 0, 0, 0);
      else if (state[x][y] == 4) triangle(tileW, 0, 0, 0, 0, tileH);
      popMatrix();
      if (state[x][y] >= 4) {

        int sx = (int)(tileW*x);
        int sy = (int)(tileH*y);
        int sw = (int)(tileW);
        int sh = (int)(tileH);

        copy(sx, sy, sw, sh, sx, sy, sw, sh);
      }
    }
  }
}

void countUp(int x, int y) {
  stateCol[x][y]=running_color;
  state[x][y]=(state[x][y]+1)%5;
}

void keyPressed() {
  if (key=='c') stateCol[mx][my]=(stateCol[mx][my]+1)%colors.length;
  else if (key=='s') running_color=(running_color+1)%colors.length;
  else if (key=='e') state[mx][my]=0;
  else countUp(mx, my);
}
4

Thank you so much you are one hell of a legend!!