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.
![21 Best Views In NYC At Night To Take In A Manhattan Skyline View](https://jessieonajourney.com/wp-content/uploads/2020/12/Manhattan_from_top_of_the_rock.jpeg)
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:
- 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.
- 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.