Hi,

Not sure to post at the right place, if not, please forgive me...

For a game project I am working on, I would like to implement a 2D starfield as a background.

I do not want to deal with static tiles, since I plan to slowly animate the starfield. So, I am trying to figure out how to generate a random starfield for the entire map.

I feel that using a uniform distribution for the stars will not do the trick. Instead I would like something similar to the screenshot below, taken from the game Star Wars: Empire At War (all credits to Lucasfilm, Disney, and so on...).

Is there someone who could have an idea of a distribution which could result in such a starfield?

Any insight would be appreciated

Hi there,

I thought I should start with the obvious suggestion;  have you tried simply a random distribution of points?  Remember that stars do not all have uniform brightnesses so 2d random positions plus a random brightness factor would probably give you a nice effect I would have thought (and pretty simple to do).

Also, what do you mean by 'slowly animate'?  I don't know the game in question, but do you mean as you move around the x-y plane and you see the stars in the background move with some sort of parallax effect?  Because if that's the case, my random suggestion above still works but in that case, the brighter the star, the closer it is so the movement parallax will be bigger and pretty easy to generate I think.  Or maybe I'm thinking of something completely different to you :-)

Sorry, I just realised you did say the word 'random', missed that one!  :-) .  But actually my point about the brightnesses still stands.  A 'random' distribution of points does not actually make a 'uniform' distribution of points.  It follows a Poisson distribution with clumps and voids naturally forming.  Adding the brightness factor I think will accentuate this and it will be a pretty decent effect I feel.

Of course, if that was not good enough, you could do some other things, like create some density function across the sky.  Let's say it was sinusoidal (yes, that's crap but just for example).  Then you can use something called Monte-Carlo rejection sampling.  You get some (on average) underlying density field plus an element of randomness on top.  But I think you should try the simple random x/y/brightness approach first.  I think you'll find it is better than you might first think.

Thanks for your kinds replies @sergamer1!

It makes me think that years ago, I have developped a small PRNG visualizer: http://yahiko.co.nf/RNGVisualizer/ (see second row)

And that is quite true that the result is better than I expected when I opened this thread this afternoon.

Playing with the brightness would certainly improve the result too.

When I said "slowly animate", I am not still sure of what to get, but it could be nice if the starfield is not just a static picture in the background. A two-layer starfield with a parallax effect could be interesting indeed.

Also, you mentioned in your second post "density function accross the sky". Could you please explain this?

50 minutes ago, yahiko00 said:

When I said "slowly animate", I am not still sure of what to get, but it could be nice if the starfield is not just a static picture in the background. A two-layer starfield with a parallax effect could be interesting indeed.

Yes, I was thinking more a 3 or 4 layer parallax starfield, but that's your preference of course.  The key to making it work is the further the starfield, the slower it moves in parallax, the more stars it has and the dimmer those stars are.  This should in principle be quite easy to do I think.

52 minutes ago, yahiko00 said:

Also, you mentioned in your second post "density function accross the sky". Could you please explain this?

If you have a uniform (on average) density of stars, then the simple random sampling works.  But let's say you want some structure, like the spiral arms of the galaxy, or perhaps some dense star clusters spread around?  Then you can either tabulate this or make a function of this density field of stars.  And then you perform the Monte-Carlo rejection sampling over the density field, and abracadabra, you have a more interesting density field :-) .  Other possibilities include perhaps Perlin noise or some other combination of simple density modes.  However, like I said, I think you'll find the uniform random (with different brightness parallax layers) to be more than adequate!  ;-)

I've been quite busy this week, so I haven't been able to really work on this project.

However, I've succeeded to implement a first experiment of a 2-layer starfield as suggested. I've used TypeScript and Phaser.

For information, I've implemented a cache where I draw on a hidden canvas before displaying it.

As a begining, I find this result quite promising. A uniform distribution is not an issue after all since stars seem quite scattered with some voids and clusters.

I will try to improve this demonstration a little bit by using HSL colors instead of RGB, and chosing colors according to a gaussian distribution and not a uniform distribution, which is not realistic in such a case.

As a roadmap, I would like to implement some special objects like comets and supernovae. Also, I would be interested to have some hints to produce some gas clouds as we can seen below:

Thanks!

16 hours ago, yahiko00 said:

As a begining, I find this result quite promising. A uniform distribution is not an issue after all since stars seem quite scattered with some voids and clusters.

Yes, I was pretty confident the simple prescription would still look pretty decent and not too uniform so glad to see I was not talking rubbish!  ;-)   Happy you're making progress on it anyway.

16 hours ago, yahiko00 said:

I will try to improve this demonstration a little bit by using HSL colors instead of RGB, and chosing colors according to a gaussian distribution and not a uniform distribution, which is not realistic in such a case.

Sure, I had a couple of things to say about the colours.  Although some are fine, some are not very 'star-like' should we say :-)  Stars typically go through a range of colours like brown-red-orange-yellow-green(ish)-blue in order of increasing mass (i.e. brown dwarfs are the smallest that are visible and blue supergiants are the largest ones you can see before they go supernova anyway)   In principle, other colours are there too but these are the typical ones.  The other thing is they seem to fade in-and-out, almost like twinkling in the night's sky.  Except star's don't twinkle in space :-)  (because it's an effect you get only with an atmosphere).  Of course, I am just saying what is realistic whereas maybe you just want what looks best ;-)

16 hours ago, yahiko00 said:

As a roadmap, I would like to implement some special objects like comets and supernovae. Also, I would be interested to have some hints to produce some gas clouds as we can seen below:

Okay, gas clouds are a whole other ball-game!  Their form is highly irregular and not described by some simple equation (unfortunately).  When astrophysicists try to generate such density fields, they usually try and produce some kind of fractal density field (i.e. with fractal dimension less than 3 so it has holes and other structures).   Maybe you should consider something like Perlin noise (https://en.wikipedia.org/wiki/Perlin_noise) since you'll presumably only be generating in 2d.  Many people generate irregular shaped profiles, such as mountain ranges or islands, using Perlin noise, and I think this the route to take.  I've seen other people try stuff like this (i.e. interstellar gas clouds) in the past, although I'm not sure what method they used.  If I find something that's useful, I'll post it here!  :-)

Hello,

I'm back with some news about my project. I've brought some improvements to the star field generation.

Colors now use HSL instead of RGB. Also, I choose them over a Gaussian distribution giving the star field a more realistic aspect. All stars of a given layer now share a same "tone".

I've encountered some issues with Phaser which seemed to leak into memory above 700 stars --- and drew me lines instead of circles.

So, I changed to Pixi.js which is hopefully quite close to Phaser and seems more reliable since there is no more glitches for a large number of stars.

To give an overall better aspect, I've applied a blur filter to the whole scene. At first, I've tried to blur stars one by one but this is really inefficient...

You can see below a static overview. The animated GIF was too big to upload

From a performance point of view, instead of drawing and redrawing stars each frame, I turned them into sprites. This improved dramatically my FPS.

I've also added a quick and dirty GUI on the right side in order to be able to play along with various parameters. I've uploaded an online version here: http://yahiko.developpez.com/apps/Starfield/

For the time being, I hadn't got the time to implement comets, supernovae or gas clouds, but this is still in the roadmap. I'll let you know.

I think you are approaching the star coloring the wrong way. In space (i.e., not from the atmosphere), all stars are white. You only see faint color tinges at the edges of the stars as they glow, see this hubble image:

Since you said you’re using sprites, consider pre-rendering, say 256 stars that look like the ones in the picture varying along a heat gradient

instead of just using round colored dots. The heat gradient is not gaussian, the true distribution is something astrophysicists have been measuring for god knows how long, but i’d be willing to bet that linear would look more realistic than gaussian.

Then rendering the stars is as easy as picking a random star from your 256 stars.

P.S., you’re confusing star distance with red shift. Closer stars aren’t any more prone to being yellow/red than more distant stars. Red shift comes from star velocity relative to the viewer; if anything more distant stars are slightly redder than nearer stars from universe expansion.

Thanks for your contributions. I know all of these, but this starfield has more aesthetics goals than being accurate astrophysically speaking