Walking through the Uptown Abbey — GSAPP 2018Fall Datamining the City through Processing

Text:

The idea is to show how people commute and how they have activities in the city by clicking mouse and highlighting the area they are in: in the daytime, people wake up in their homes (small squares that represent residential areas change from black to white), then they go out of their houses and go to public space either for school, work or social interactions (large squares that represent public space change from black to yellow), after that, people would usually spend some time in the park with their children, families or friends (large rectangular that represent green space change from dark green to light green). The whole grid pattern represents a symmetrical city where people live in the city peripheral but have social entertainment activities in the city center. There is also a small square called “daylight” in the lower right corner, the color of which changes from black to white to represent the change from nighttime to daytime.

gif:

def setup():
    size(1350, 800)
    background(126)
    textSize(38)
    text("Walking Through the Uptown Abbey",360,760)
fill(255,255,255)
    rect(1000,400,20,20)
    textSize(22)
    fill(255,255,255)
    text("Daytime Residential Area",1050,420)
    
    fill(0,255,0)
    rect(1000,300,22,22)
    textSize(22)
    fill(0,255,0)
    text("Daytime Green Space",1050,320)
    
    fill(255,215,0)
    rect(1000,350,22,22)
    textSize(22)
    fill(255,215,0)
    text("Daytime Public Space",1050,370)
    
    
    fill(0)
    rect(1000,450,20,20)
    textSize(22)
    fill(0)
    text("Nighttime Community",1050,470)
    
    fill(85,107,47)
    rect(1000,500,22,22)
    textSize(22)
    fill(85,107,47)
    text("Nighttime Green Space",1050,520)
def draw():
x=10
    y=10
    squareSize = 50
    squareSize1 = 110
    squareSize2 = 230
    spacing =10
    daylight = 0
    textSize(25)
    fill(0)
    text( "Daylight",1050,680,)
  
    for row in xrange(0, 12):
        for column in xrange(0, 4):
               if mousePressed and mouseX>10 and mouseX <240:
                  fill(255,255,255)
               else:
                  fill(0,0,0)
               rect(x + column * (squareSize + spacing), y + row * (squareSize + spacing), squareSize, squareSize)
   
 
    for row in xrange(0, 6):
        for column in xrange(5, 6):
               if mousePressed and mouseX>250 and mouseX <360:
                  fill(255,215,0)
               else:
                  fill(0,0,0)
               rect( x-60 + column * (squareSize + spacing), y + row * (squareSize1 + spacing), 110, 110)
for row in xrange(0, 3):
        for column in xrange(5, 6):
               if mousePressed and mouseX>370 and mouseX <480:
                  fill(0,255,0)
               else:
                  fill(85,107,47)
               rect( x+60 + column * (squareSize + spacing), y + row * (squareSize2 + spacing), 110, 230)
    for row in xrange(0, 3):
        for column in xrange(5, 6):
               if mousePressed and mouseX>490 and mouseX <600:
                  fill(0,255,0)
               else:
                  fill(85,107,47)
               rect( x+180 + column * (squareSize + spacing), y + row * (squareSize2 + spacing), 110, 230)
    
    
    
    for row in xrange(0, 6):
        for column in xrange(5, 6):
               if mousePressed and mouseX>610 and mouseX <720:
                  fill(255,215,0)
               else:
                  fill(0,0,0)
               rect( x+300 + column * (squareSize + spacing), y + row * (squareSize1 + spacing), 110, 110)
    for row in xrange(0, 12):
        for column in xrange(0, 4):
               if mousePressed and mouseX>730 and mouseX <960:
                  fill(255,255,255)
               else:
                  fill(0,0,0)
               rect( x+720 + column * (squareSize + spacing), y + row * (squareSize + spacing), squareSize, squareSize)
    
    while daylight < 255:
        fill(daylight)
        rect(1050,600, 50,50)
        daylight += 1