NYC, The City That Never Sleeps

Concept

In this assignment, I used loops and basic functions to show the hectic, vibrant, and bustling nightlife of New York City. I wanted to express how I felt when I saw the night sky view of NYC.

I was captured by NYC’s iconic skyline, which is illuminated by countless skyscrapers, billboards, and streetlights. The city’s streets and buildings are bathed in a sea of lights, creating a dazzling and energetic atmosphere. Times Square, in particular, is known for its vibrant, neon-lit signs and bustling nightlife.

Even the moon is vibrantly moving in NYC. The night view of NYC is indeed hectic, but it’s also a unique and exciting experience for visitors and residents alike. When I saw numerous buildings in the skyline, I felt that not only New Yorkers, but everything in NYC kept changing. The city’s energy and vibrancy come to life after dark, offering a wide range of activities and entertainment options to suit every taste.

The highlight of My Code

// Draw cityscape buildings
 fill(100); // Building color
 for (let x = 50; x < width; x += 100) {
   let buildingHeight = random(100, 300);
   rect(x, height - buildingHeight, 80, buildingHeight);
   // Windows in buildings
   for (let y = height - buildingHeight + 20; y < height - 20; y += 40) {
     for (let i = x + 10; i < x + 80; i += 20) {
       fill(random(0,200, 255), random(0,200, 255), 0); // Random yellowish lights
       rect(i, y, 10, 10);
     }
   }
 }

The code then enters a nested loop structure using two “for” loops:

1. The outer loop, for (let x = 50; x < width; x += 100), iterates horizontally across the canvas starting at x = 50 and continuing until it reaches the canvas width. This loop defines the x-coordinate of the buildings, with a gap of 100 pixels between each building.
2. Inside the outer loop, there’s an inner loop: for (let y = height - buildingHeight + 20; y < height - 20; y += 40). This inner loop iterates vertically within each building. It starts at a height just above the building’s base and ends just below the top edge of the building. It defines the y-coordinate for the windows, with a gap of 40 pixels between each row of windows.

Furthermore, fill(random(0,200, 255), random(0,200, 255), 0); this line sets the fill color for each window to a random yellowish color. The random() function is used to generate random values for the red (0-255), green (0-200), and blue (0) components of the color, creating a range of yellowish shades. The 0 in the fill() function is for the blue component, making the color closer to yellow.

Reflection and Ideas for Future Work

There are several ways to enhance this artwork. For instance, I could add more complex building shapes, introduce different lighting effects, or simulate perspective to create a more three-dimensional look. Also, I will design a cityscape that can potentially convey a narrative or mood next time. I could add New Yorkers in these buildings, adjust the colors, or arrangement of windows to evoke specific emotions and tell a story about the city and its inhabitants.