Colorful City Grid

<iframe src=”https://giphy.com/embed/cZ6EQofSXewFJadouQ" width=”480" height=”442" frameBorder=”0" class=”giphy-embed” allowFullScreen></iframe><p><a href=”https://giphy.com/gifs/cZ6EQofSXewFJadouQ">via GIPHY</a></p>

Hover the mouse to different parts of the city to have the selected region highlighted in red background !!

def setup():
    size(1100, 1000)
    noStroke()
def draw():
    background(126) # this set up the backgournd color
    
    x= 80 
    y= 60
    squareSize= 40
    spacing = 30
if (mouseX<430 and mouseY<410):
        #rect(0,0, 33, 100)
        
        x1 = 80
        y1 = 60
        squareSize1 = 45
        spacing1 = 30
        for column in xrange(0, 4):
            for row in xrange(0, 4):
                rect(80+x1 + column * (squareSize1 + spacing1), y1 + row * (squareSize1 + spacing1), 
             squareSize1,
             squareSize1)
    #the first quandrant
        
    if (mouseX>430 and mouseY<410):
        #fill(255)
        #rect(0,0, 33, 100)
        x2 = 80
        y2 = 60
        squareSize2 = 45
        spacing2 = 30
        for column in xrange(0, 5):
            for row in xrange(0, 4):
                rect(430+x2 + column * (squareSize2 + spacing2), y2 + row * (squareSize2 + spacing2), 
             squareSize2,
             squareSize2)
    #the second quandrant
    
    if (mouseX<430 and mouseY>410):
        #fill(100)
        #rect(0,0, 33, 100)
        x3 = 80
        y3 = 60
        squareSize3 = 45
        spacing3 = 30
        for column in xrange(0, 4):
            for row in xrange(0, 5):
                rect(80+x3 + column * (squareSize3 + spacing3), 350+y3 + row * (squareSize3 + spacing3), 
             squareSize3,
             squareSize3)
    #the third quandrant 
    
    if (mouseX>430 and mouseY>410):
        #fill(160)
        #rect(0,0, 33, 100)    
        x4 = 80
        y4 = 60
        squareSize4 = 45
        spacing4 = 30
        for column in xrange(0, 5):
            for row in xrange(0, 5):
                rect(430+x4 + column * (squareSize4 + spacing4), 350+y4 + row * (squareSize4 + spacing4), 
             squareSize4,
             squareSize4)
    #the fourth quandrant
    
    for column in xrange(0,10): #column =1
        for row in xrange(0,10): #row =1
            RecX = x + column*(squareSize+ spacing) #RecX= x+1*(50+30)
            RecY = y + row*(squareSize+ spacing) #RecY =
            DistanceX1 = abs(RecX- mouseX)
            DistanceX2 = mouseX- RecX
            #if column == random(0,10) and row == random(0,10):
                #fill(0,255,0)
            
            if column == 4 or row ==4:
                fill(0,0,0)
                rect(x + RecX, RecY, 20, 20)
            #if column == 
            else:
                fill(random(0,255), random(0,255), random(0,255))
                
                rect(x + RecX, RecY, squareSize, squareSize)
          
            
    # those lines sets up the grid
fill (255,0,0)
    ellipse(mouseX, mouseY, 20, 20)
    #these sets up the ellipse 
    
    if mousePressed:        
        fill(255,0,0)
        ellipse (mouseX, mouseY, 40,40)
# Sets the background gray value based on the distance 
# of the mouse from the center of the screen
#def draw(): 
  #  noStroke()
  #  d = dist(width/2, height/2, mouseX, mouseY)
  #  maxDist = dist(0, 0, width/2, height/2)
  #  gray = map(d, 0, maxDist, 0, 255)
   # fill(gray)
   # rect(0, 0, width, height)