Colorful Grid

Junyu Cao
Data Mining the City
1 min readSep 19, 2018

Rules: 1. make the grid of a neighborhood 2. make the expansion of each block 3. add colour as the blocks expand 4. make the colour change as mouse move

def setup():
size(800,800)
background(250,250,100)


global road, blocksPerNeighborhood, blocksPerRow,blocksPerCol,blockLength,ANG
ANG=0

blocksPerNeighborhood = 40
blocksPerRow = int(sqrt(blocksPerNeighborhood))
blocksPerCol = int(sqrt(blocksPerNeighborhood))
blockLength = int((width/blocksPerRow))
rectMode(CENTER)
frameRate(10)

def draw():
global ANG
background(255)
#make blocks

for r in range(blocksPerRow):
for c in range(blocksPerCol):
with pushMatrix():
translate(0.3*blockLength+r*blockLength,
0.3*blockLength+c*blockLength)
if (width-blockLength)*0.5<mouseX and (height-blockLength)*0.5<mouseY:
fill((ANG*(r)*©)%255,(ANG*(r)*©)%255,(ANG*(r)*©)%255,144)
rect(0,0,100*sin(ANG/5),
100*sin(ANG/5))
elif (width-blockLength)*0.5<mouseX and (height-blockLength)*0.5>mouseY:
fill((ANG*(r)*©)%255,(ANG*(r)*©)%255,144,(ANG*(r)*©)%255)
rect(0,0,100*sin(ANG/5),
100*sin(ANG/5))
elif (width-blockLength)*0.5>mouseX and (height-blockLength)*0.5<mouseY:
fill((ANG*(r)*©)%255,144,(ANG*(r)*©)%255,(ANG*(r)*©)%255)
rect(0,0,100*sin(ANG/5),
100*sin(ANG/5))
else:
fill(250,250,250,250)
rect(0,0,100*sin(ANG/5),
100*sin(ANG/5))
ANG +=0.01

--

--