Do you like the starry sky picture with this post? Guess what, it’s a generated image. I’ve repeatedly needed cool pictures of stars, and real ones are often copyrighted. So I cobbled some software together to generate starscapes. Have a go if you want.
What, why, how?
You might be wondering what I created. This web app uses some input variables, then randomly generates a star field using that input. It can generate random stars and fake nebulae on top of those. The result can be seen above.
It’s one of those side projects you do when you’re stuck at home for six weeks. Well, and also because you sometimes need pictures of stars to put on your blog. And to practice programming skills. I like to do projects like this to try out new software frameworks or technologies – I’m a nerd that way.
So, let’s look at how it works.
Step one: generate stars
I first created a generator which generates random white dots on a black background. It’s pretty simple: create a black background, then generate white pixels at random x and y coordinates. Getting that to work in a web browser using a so-called Canvas element is a bit trickier, but I’ll not dive into the details. If you want to see that, go to the Github link at the bottom of the article and look at the code.
Next, I extended the generator. I allowed for three sizes of stars, one a single pixel in size, one three-by-three pixels, and one four-by-four, and made the number of each star size configurable. Then I made the brightness randomized instead of always white. Finally, I added the concept of a star cluster.
In real space, stars tend to cluster together in larger and smaller bubbles. I wanted to mimic that. So, I allowed for ‘clusters’ of stars, and added settings for an arbitrary number of them. For each cluster you can choose the number of stars of size 1, 2, and 3 in the cluster. Each cluster has a position as well, and some more settings related to nebula’s which I’ll get to. See the screenshot below.
For each cluster the software generates a number of stars, but randomly with a preference to be close to the cluster’s position. The result is clusters of stars, see the example result below.
Step two: generate nebulae
So, stars are nice, but I wanted to add some color. Space is filled with bubbles of colored gas. These form by stars exploding and pushing bubbles of gas out. So, I thought: I can simulate that.
I started out with generating colored bubbles in random places. That wasn’t going to yield the best result… unless… Unless you generate a whole lot of them that are not very bright. And that’s what I did.
I used the same clusters as before, and added a setting to generate a number of ‘bubbles’. The clusters also got a selectable color.
To make it look less uniform, I added some more random elements: the color strength increases from the bubble center to the sides, and the bubbles are not a perfect circle, but have randomized variations in size along their rim. Here’s an example with only three bubbles:
Now, the three bubbles above look like crap, but generate hundreds of them and you get the effect of the picture at the top of this post.
Step three: fractal nebulae
Bubbles are nice, but fractals are usually the way to go for generating things like clouds.
I thought about it for a bit, then decided to re-use the code for creating the bubbles described above, then create a fractal version of the nebulae.
To do this, the software starts with one big bubble, then divides the bubbles into a number of slices (like a pie!) and generates new, smaller bubbles at those slice ends. Rinse and repeat until the bubbles become smaller than a few pixels in size.
And voila. Fractal nebula bubbles.
Step four: putting it all together
The end result is a generator that puts all these stars and nebulae together into a single picture.
I created the UI using Preact, a hip web-app framework. I hadn’t played around with drag-drop code for fifteen years, so that was fun. The code is up on GitHub for those interested in it.
And here we are. On to my next quarantine project.
