Joy Huang
3 min readSep 12, 2018

Deconstructed Bryant Park in Processing

Minimalist Map of Bryant Park (Made in Processing)

In trying to create a neighborhood, I turned to a common public space that I pass everyday: Bryant Park. Given that this was an introduction to Processing, I wanted to pick something more modular without many organic forms in order to play around more with nested loops.

The general rules were that the Avenues and Streets had to be clearly defined and even spaced. I wanted some representation of buildings on every block without being too uniform or detailed. For the park itself, I wanted to show the New York Public Library and the fountain as spatial delimiters. As an extra, I tried to insert simplified cars.

The most difficult part was actually trying to figure out to display the avenue names as they must be rotated vertically. To do that, you must imagine the text before the rotation like a hinge that would slide into position onto the vertical roads.

import randomdef setup():
size(2500, 900)

global canvasWidth, canvasLength, avNum, stNum, blockWidth, blockLength, rdLength, rdWidth, rdThick, footprint, cars
canvasWidth = 2500
canvasLength = 900


avNum = 2 #number of avenues
stNum = 3 #number of streets
rdThick = 75 #thickness of roads

blockLength = (canvasLength-(stNum*rdThick))/(stNum+1)
blockWidth = (canvasWidth-(avNum*rdThick))/(avNum+1)

#making roads
def road(x, y, rdWidth, rdLength):
fill(255,255,255)
stroke(255, 255, 255)
strokeWeight(0)
rect(x, y, rdWidth, rdLength)
def bryantPark(x, y, parkWidth, parkLength):
fill(204, 255, 102)
rect(x, y, parkWidth, parkLength)
fill(0, 0, 0)
textSize(40)
text('Bryant Park', x + parkWidth/8, y + parkLength/4)

def building(x, y, w, l):
fill(217, 210, 217)
rect(x, y, w, l)
def fountain(x, y, c, d):
fill(102, 255, 255)
ellipse(x, y, c, d)

#Library
def library(x, y, w,l):
fill(237, 237, 222)
rect(x, y, w, l)
fill(0, 0, 0)
textSize(40)
text('NYPL', x + w/2, y + l/2)
#tracking mouse movement
value = 0
def mouseMoved():
global value
value = value + 10
if value > 255:
value =0
#cars
def car(xPos, yPos, w, l):
fill(89, 89, 89)
rect(xPos, yPos, w,l)
xPos = 0def draw():
background(242,242,242)

i = 0 #number of iterations
n = 0 #number of iterations
#making streets
while n < 4 :
rdWidth = canvasWidth
rdLength = rdThick
y = (blockLength * n) + rdLength*(n-1)
x = 0
road(x, y, rdWidth, rdLength)
if n == 1:
fill(0, 0, 0)
textSize(40)
textAlign(LEFT, TOP)
text('42nd Street', x+1.5*blockWidth, y)
if n == 2:
fill(0, 0, 0)
textSize(40)
textAlign(LEFT, TOP)
text('41st Street', x+blockWidth/3, y)
text('41st Street', x+2.5*blockWidth, y)
if n == 3:
fill(0, 0, 0)
textSize(40)
textAlign(LEFT, TOP)
text('40th Street', x+1.5*blockWidth, y)
n += 1

#making avenues
while i < 3 :
rdWidth = rdThick
rdLength = canvasLength
x = (blockWidth * i) + rdWidth*(i-1)
y = 0
road(x, y, rdWidth, rdLength)
if i == 1:
rotate(PI/2)
fill(0, 0, 0)
textSize(40)
textAlign(LEFT, BOTTOM)
text('Avenue of the Americas', blockLength*1.5, -blockWidth)
rotate(-PI/2)
if i == 2:
rotate(PI/2)
fill(0, 0, 0)
textSize(40)
textAlign(LEFT, BOTTOM)
text('5th Avenue', blockLength*1.5, -2*blockWidth-rdThick)
rotate(-PI/2)
i += 1

#Park greenspace
bryantPark(blockWidth+rdThick, blockLength + rdThick, blockWidth, 2*blockLength+rdThick)

#distributing buildings into blocks
random.seed(100)
for avPosition in range(avNum+1):
for stPosition in range(stNum+1):
if avPosition == 1 and (stPosition == 1 or stPosition == 2):
continue
offsetX = 50
offsetY = 20
x = offsetX + (blockWidth+rdThick)*avPosition
y = offsetY + (blockLength + rdThick)*stPosition
w = random.randint(50, blockWidth - offsetX)
l = random.randint(100, blockLength - offsetY)
building(x, y+random.randint(0, 20), w, l)
building(x+w, y, blockWidth-w-offsetX*2, l)
#Fountain
fountSize = 30
fountain(blockWidth+rdThick+(blockWidth/8), 2*blockLength+rdThick*1.5, fountSize, fountSize)

library(2*blockWidth+rdThick-(blockWidth/2), blockLength + rdThick +20, blockWidth/2 - 20, 2*blockLength+rdThick- 40)

if mouseMoved:
stroke(0)
strokeWeight(10)
line(mouseX, mouseY, pmouseX, pmouseY)
#car
global xPos
if xPos <= canvasWidth:
car(xPos, blockLength+rdThick/3, rdThick*1, (rdThick/3))
car((canvasWidth - xPos), canvasLength-(blockLength+2*rdThick/3), rdThick*1, (rdThick/3))
xPos += 5

if xPos >= canvasWidth:
xPos = 0