T w e n t y S i d e d

Gradient Sky

I need to make a sky for my city. So… I guess I better add one.

This is not religious iconography.

There are a lot of techniques for rendering skies. The most common is probably the “skybox”, which is a simple box with pre-rendered images pasted on it. Sometimes the images are taken with a special camera, but more commonly they’re designed by artists. To the right is an example of a skybox, which I gleefully pilfered from Google. (You could cut that image out and fold it up along the white lines to form a real-world skybox if you wanted.) Imagine folding up the box and wearing it on your head with the images facing inward. Note that all around you would be a seamless mountain vista. Also note that you would look like an idiot and likely bump into things.

On the computer, it’s possible to draw this box, and then render everything else in the world on top of it, which creates the illusion that the mountains are a huge distance (infinite, actually) away. Now, my skybox isn’t going to be box shaped. Since I’m focusing on making a night time scene, I don’t need the top or bottom. So I’ll make some textures and place them on in side of a shortened tube instead of a cube. So, the viewer of my program is unwittingly wearing a lampshade on their head. Ha ha.

I make a smear of colors and put it on the lampshade.

It’s amazing how you can blur just about any two colors across the view and see it as a horizon. I start with a random warm color, which then fades to a blue, then fades to a very dark blue, and then to black. The specific colors are randomly chosen. I don’t know if it’s supposed to be a sunset or simply city lights bouncing off the atmosphere. It’s a little bright and colorful to be ambient light. But it goes all the way around the horizon, which is something sunsets don’t usually do.

I add some stars.

That’s good, but I’m going to need clouds if I really want to make this lampshade look sky-esque. For some reason, I thought I’d try and generate some puffy clouds fractally. It became apparent very early on that this was a foolhardy approach, but I messed with it a bit longer than I should simply because it was generating such interesting images.

One of the many fractal non-clouds:

Eventually I stop playing around and get back to work. This is very far from my mission parameters. My goal is to sell the scene using simple tricks, and trying to create believable clouds using fractals is the opposite of that. I save the fractal code elsewhere in case I want to play with it again, and devise a simple trick:

I draw my fading circle texture onto the canvas, only I color the circle black. Then I squash it vertically and draw it again, only slightly lighter. The further down the canvas I go, the more I compress my circles vertically. So the circles near the top will be nearly round, but those at the bottom will be nearly a horizontal line. The result:

And now I slap that texture over top of the gradient and the stars:

This is the way to go. I spend some time fussing with the color parameters: Cloud size, opacity, density, the contrast of the lit underside of the cloud, and the degree to which they flatten out as they approach the bottom of the texture. (The horizon, from the user’s point of view.) Unlike the buildings, these parameters aren’t something I can just plug into the random number spewer and create infinite content. Most of these numbers are tradeoffs, and making it look better one way will diminish it in another. Eventually I decide to stop messing with it:

We’re getting close now.

Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.

The time spent contemplating the program did not go to waste. I was able to correct several things that had been bothering me.

Building Textures

I mentioned before that I had two approaches to making the building textures: One would light windows completely scattershot. Each window had a fixed chance to be lit or unlit. The other approach was to light them in horizontal groups, so that the lit windows would always be grouped together.

Stepping back and looking at what I’m trying to simulate, I can see the scattershot doesn’t make much sense, and doesn’t seem to match what we see in cityscapes. Worse, all buildings had the same percentage of lit windows, which made the view even more monotonous.

All buildings should exhibit some level of lit-window grouping. The only difference from one building to the next is in how big each office / apartment is. Also, not all buildings have the same ratio of lit windows to dim ones.

So I replaced the old window-generating code with a new one. It randomly decides at the outset how big the interior spaces are, and what percent of the windows should be lit.

Now different buildings have different window shapes and different densities of lit windows and different group sizes. The city lights now look less like uniform noise and more like chaos that springs from complex ordered systems.

Tower Buildings

As I mentioned in the post on building shapes, my classic tower-style buildings weren’t going to cut it. I was supposedly making these buildings with elaborate stonework. My goal was to present the outline of such a building and allow the viewer’s imagination and prior experience to fill in the blanks with engravings and such. But I didn’t leave any blanks for them to fill in! Every building was all windows, edge-to-edge, top-to-bottom. I tore out the old code and replaced it with a new building generator:

These new buildings are very rarely covered in windows. They have vertical stripes or windowless areas running down the face of the building. The buildings are broken into tiers, and there are a few blank floors between each tier. It begins at the bottom, drops a tier into place, then puts a lid on that tier, then builds a new tier on top of the lid, onward until it reaches the planned building height.

I love the new one because it has a ton of parameters that govern the shape of the building:

1. How tall each tier is. (More accurately, how much of the remaining height is given to the current tier. One-half, one-third, one-forth, etc.)
2. How much (if any) the lid sticks out from the side, forming a ledge.
3. How tall the lid is, in stories.
4. If the corners of the building are explicitly windowless.
5. The grouping of the windows and blank areas on the face of the building.
6. If the tower gets narrower towards the top.
7. The window texture used.
8. The tint of the window texture, from a handful of various types of light sources.

These values allow for a huge number of meaningful changes to the shape of the structure, giving the world a ton of visual variety. Also, the vertical blank areas seem very subtle, but it’s shocking how the eye can instantly spot the break in the pattern:

Modern Buildings

These buildings looked fine to begin with, but they didn’t have a lot of variety. A slight change brought about compelling results.

Instead of just randomly cutting off sections of a cylinder, it chooses to do so at regular intervals. And it can make cuts in 45 degree sections as well as 90. And as with the other buildings, I added some vertical window gaps. Although, it doesn’t really make the buildings that much more interesting.

They look interesting in wireframe, but without the lines one deformed cylinder looks much like another.

Other Changes

As you’ve probably noticed in the screenshots, I’ve added a few polygons of roof clutter to hint at HVAC systems and whatnot. The building colors are now limited to a handful of hues that match common lights. And I put larger gaps between buildings, which gives their silhouettes more opportunities to stand out.

A few improvements to the existing systems made a big difference to the overall appearance.

Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.