Here is the link to my sketch:
https://editor.p5js.org/WentaoWang/sketches/qdw1qAeo_
When first starting the sketch, buildings will be randomly created at the bottom of the canvas. When you change the mouse’s X position, several things will change: day and night background color, the rise and fall of the sun and moon, the turning on and off of the lights in the building.
I created separate functions for drawing the buildings, the windows, and the moon.
I tried to generate all buildings randomly when the sketch starts by using for loop instead of hard coding each parameters of the buildings, but I failed. If I draw the buildings in setup, I couldn’t change the window color; if I draw the buildings in draw, the buildings are all changing constantly. So instead of making all building random, I ended up hard coding two random buildings, and then use the for loop to create duplicates of the two buildings to add some randomness.
Thank you for sharing your sketch in class yesterday! It’s evident that you took care to set up variables in the right proportions to one another in order to draw everything in alignment. This is also an excellent demonstration of how to make use of functions with parameters to reuse code multiple times. After our introduction to classes yesterday, do you have any ideas about how you might create a building class? And within that, its own method to draw a grid of windows?