Hi,

I'm quite new to processing, and I'm trying to make a grid where you can change the color according to a color scheme for research purposes on a project.

I started to draw the grid, and the loop to change the color, I would like each cell to be independant according to it's filling. And I'm a bit stuck at the moment.

So I'm kindly requesting your help.

This is the code I have so far :

1. 
   
   // Click within the image to change
   // the value of the rectangle after
   // after the mouse has been clicked
       color red =     color(255, 0, 0, 255);
       color yellow =  color(255, 255, 0, 255);
       color blue =    color(0, 0, 255, 255);
       color grey =    color(200, 200, 200, 255);
       color base =    color(246, 242, 210, 255);
     
   
       int value = 5; // your state counter
   
   // 2D Array of objects
   
   Cell[][] grid;
   
   // Number of columns and rows in the grid
   int cols = 30;
   int rows = 10;
   
   void setup() {
     size(1300,800);
     grid = new Cell[cols][rows];
     for (int i = 0; i < cols; i++) {
       for (int j = 0; j < rows; j++) {
         // Initialize each object
         grid[i][j] = new Cell(i*50,j*100,45,95,i+j);
          
       }
     }
   }
   
   void draw() {
     background(200);
     // The counter variables i and j are also the column and row numbers and
     // are used as arguments to the constructor for each object in the grid. 
     for (int i = 0; i < cols; i++) {
       for (int j = 0; j < rows; j++) {
         grid[i][j].display();
       }
     }
   }
   
   // A Cell object
   class Cell {
     // A cell object knows about its location in the grid as well as its size with the variables x,y,w,h.
     float x,y;   // x,y location
     float w,h;   // width and height
   
     // Cell Constructor
     Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) {
       x = tempX;
       y = tempY;
       w = tempW;
       h = tempH;
     }
    
    
   
     void display() {
       stroke(255);
       strokeWeight(1);
       // Color calculated using loop & references
       rect(x,y,w,h);
     }
   }
   void mouseClicked() {
      if(value == 1) {
           fill(red);
         }
          else if(value == 2) {
           fill(yellow);
         }
         else if(value == 3) {
           fill(blue);
         }
        
         else if(value == 4) {
           fill(grey);
         }
         else if(value == 5) {
           fill(base);
         }
   }
       void mouseReleased() {
        value++; // increase the counter
        if(value == 6) {
          value = 1;  // loop after 5
        }
         println(value);
       }