About City Skyline. City Skyline is my second attempt at generative art using threeJS, typescript, and blender. My goal was to make art that changes over time! Right now, when you access this, it generates a new skyline based on the current time and current cloud cover of San Francisco. The boat and clouds are objects made in blender and the cloud cover is generated by pinging the OpenWeather API. The current time is used to choose the colors of the clouds, sky, and water.
Technical Details. The core building block of this is a series of squares. I wrote one function to generate a square with a given color, and used that to make the buildings, the lights, the water, the reflection of the buildings, and the sky. The color of the buildings is a gradient which is generated by interpolating with a moderate amount of steps. These intermediate colors are returned as a list, and then the height of the building is used to index into that list so select the color. The color pallets are hardcoded color schemes which roughly correspond with different times of day.