Hi , i got this basic matrix of squares , done with 2 for loops.

I want , that if my mouse is hoovering over one that this rect gets colored lets say white, and that the surrounding squares get also colored but the color goes fading out.

this is how mysketch looks :



this is a muckup in photoshop,but here you see a gradient, i dont want that i just want the rects to have a clearer color  as they are more far away.


any ideas ?
Code:

int largo = 20;
int r = 0;
int g = 0 ;
int b = 0;
void setup() {
  size(300,300);


}

void draw() 
{
 

  frameRate(3);

 
    for (int x = 0; x < width; x+=20) 
{
   for (int y = 0; y < height; y+=20)
  {
    stroke(255);
    fill(r,g,b);
    rect(x,y,largo-1,largo-1);
}
  
		
 

} 

}
 

thanx !

And here is the solution...
Code:

int largo = 20;
int c = 0;
int maxRadius = 4 * largo;

void setup() 
{
  size(300, 300);
  frameRate(3);
}

void draw() 
{
  stroke(255);
  for (int x = 0; x < width; x += largo) 
  {
    // Center of current square (x)
    float cx = x + largo / 2;
    for (int y = 0; y < height; y += largo)
    {
	// Center of current square (y)
	float cy = y + largo / 2;
	// Distance between mouse and current square
	float d = dist(mouseX, mouseY, cx, cy);
	int c = 0; // Default to black
	if (d < maxRadius) // If close enough of mouse
	{
	  // Compute a gray level proportional to distance
	  c = int(255 * (1 - d / maxRadius));
	}
	fill(c);
	rect(x, y, largo-1, largo-1);
    }
  } 
}