I decided to explore the pattern of my daily commute from Myrtle Ave / Broadway to ITP at Jay St MetroTech. The assignment prompt asked us to observe patterns both outside (our surroundings) and inside (our thoughts and feelings), and my subway route immediately came to mind - it's a pattern I repeat every day, a rhythm that defines my week.
The Route
My commute follows a specific path: I start at Myrtle Ave in Brooklyn (Bushwick), take the brown J train to Delancey St/Essex St in Manhattan (Lower East Side), then transfer to the orange F train back into Brooklyn to Jay St MetroTech. This triangular route crosses the East River twice, creating a geographic pattern that became the foundation of my sketch.
MTA Map Aesthetic
I wanted to capture the iconic look of the NYC subway map - the clean lines, bold colors, and simplified geography. I used beige tones for the boroughs (Manhattan and Brooklyn), blue for the East River between them, and the official MTA colors: brown [153, 102, 51] for the J train and orange [255, 99, 25] for the F train. Getting the geographic layout correct was crucial - Manhattan on the left, Brooklyn on the right, with the transfer station positioned in the Lower East Side.
The animation uses lerp() to smoothly interpolate between station positions, creating a flowing line that transitions from brown to orange at the transfer point. I used a for loop (this week's focus) to draw gradient effects along the route - each segment is broken into 20 smaller lines with decreasing opacity, creating a fade effect that makes the animation feel more dynamic.
The route animates in three phases:
The progress variable cycles from 0 to 1, controlling which segment is currently animating. The transfer station is marked with overlapping circles in both train colors, emphasizing the moment of transition between lines.
Challenges I Faced
Getting the geography right was surprisingly difficult. I initially had Manhattan and Brooklyn reversed, which completely broke the logic of the commute. Logically, Manhattan is on the west side (left) and Brooklyn on the east side (right), but I had them flipped on the sketch.
I also struggled with keeping the code minimal while still maintaining the MTA aesthetic. My first versions had too many elements - grids, particles, labels, complex shapes - that cluttered the visual. Stripping it down to just the essential elements (boroughs, river, animated route, stations) made the pattern more clear and powerful.