Trouble manipulating single cells in an array

Hello! I any currently working on a grid of gradients. Each gradient is a shape. I want to tie the right and left mouse clicks to expand or contract the width of the object the mouse is hovering over. I also want the row of gradients to adjust accordingly so they are aware of each others size and do not overlap. I am slowly figuring this out. I have all the objects moving together with the mouse click. I’m a bit lost as I think I will have to rearrange this code to manipulate a single object but I’m not sure how to dismantle and reassemble this code. Any hints would help! Thanks!

class GradUnit {
color color1;
color color2;
float x, y;
float gradHeight;
float gradWidth;
GradUnit(float xpos, float ypos, float w, float h, color c1, color c2) {
color1 = c1;
color2 = c2 ;
x = xpos;
y = ypos;
gradHeight = h;
gradWidth = w;
}
void display() {
beginShape();
fill(color1);
vertex(x, y);
vertex(x, y+gradHeight);
fill(color2);
vertex(x-(gradWidth/2), y+gradHeight);
fill(color1);
vertex(x-gradWidth, y+gradHeight);
vertex(x-gradWidth, y);
fill(color2);
vertex(x-(gradWidth/2), y);
endShape();
}
}
GradUnit grid;
int weaveDivision = 10;
int stepLayer = 10;
float maxDistance;
float mouseDist;
float gradWidth;
float zoom = (914)/(weaveDivision-1);
float colTran;
color c1;
color c2;
final static float inc = 0.01;
void setup() {
size(914, 600, P2D);
noStroke();
fill(0);
smooth();
maxDistance = dist(0, 0, width, height);
}
void draw() {
background(255);
grid = new GradUnit[weaveDivision][stepLayer];
for (int i = 0; i < weaveDivision; i+=1) {
for (int j = 0; j < stepLayer; j+=1) {
float layerHeight = height/stepLayer;
float h = layerHeight;
float w = width/(weaveDivision-1);
color blue = color(0, 0, 255, colTran);
color black = color(0, 0, 0, 0);
c1 = blue;
c2 = black;
float x = i * w;
float y = j * h;
float mouseDist = dist(mouseX, mouseY, x, y);
float diameter = (mouseDist / maxDistance)*250;
w = zoom;
if ((j)%2==0) {
c1 = black;
c2 = blue;
}
if (mousePressed)
if (mouseButton == LEFT) zoom += inc;
else if (mouseButton == RIGHT) zoom -= inc;
grid[i][j] = new GradUnit(x, y, w, h, c1, c2);
if (i>0) {
(grid[i][j].x) = grid[i][j].gradWidth + (grid[i-1][j].x);
}
if (i>0) {
grid[i][j].display();
}
}
}
}

Hi.
Do you mean when you write ‘object’ you actually mean the cell of the grid?
But when you adjust the other rows of gradients will there be gaps between the other gradient cells?

Yes! Sorry thats a much clearer way of saying it. I’m new to processing.

if(i>0){ (grid[i][j].x) = grid[i][j].gradWidth + (grid[i-1][j].x); }

I have been relying on this line of code to make sure when I adjust the size of the cells they don’t create gaps or overlap. I don’t want there to be gaps between any cells.