Animated star field on a Javascript canvas

I was watching the film Pixels the other night.  Not the best film ever (by a long way), but it did get me reminiscing about all the cool stuff I programmed when I was a lad.  Back when I made text adventure games and simple animations in QBASIC.  Back when I programmed games on my TI-83 graphical calculator during History lessons.  Ah, those were the days.

So I wondered – how easy would it be to remake some of those programs in the technology I use today?  Specifically, can I recreate my horizontally animated star field that I made in QBASIC, only this time using Javascript?

As it turns out, yes I can.

First of all, we set up a basic HTML5 page, with just a canvas  element on it.  There’s also some CSS to make sure it will work in full-screen and has a black background.

The Javascript is where it gets fun.  And I’m not using jQuery or any other helper libraries.

We set up the canvas width and height here rather than in the CSS, because otherwise it will scale rather than actually get bigger.

Next we create a few variables to hold things like our stars and settings.  You can probably guess what they’ll be used for.

Here’s the function that creates a star.

We’re setting everything to be pretty random here.  Note that Math.random()  creates a number between 0 and 1, so we’ll need to put that into context later.  We Math.sqrt()  the random number for the distance, so that it’s weighted more towards closer stars; these will move faster, so we need more of them there.  The logic in the colour is simply giving us a star that is mostly white but with a slight tint between red and yellow.  It’s worth checking out hsl() and hsla() if you haven’t already, it’s pretty useful!

Now we can initialise our stars array.

Next we’ve got a function to draw the stars.  I’ve put it in a function because we’ll be calling it multiple times shortly.

First off we clear whatever might be on the canvas already.  Modern browsers handle output buffering quite well, so we don’t need to bother about manually double-buffering to avoid the flickering.

Before we draw each star, we move it.  How far it moves depends how close it is to us, and we’re using Math.pow()  to weight it correctly.  This is the inverse of the Math.sqrt()  we used when setting the distance of the star.  We’re also transforming that 0-1 value into something relative to the canvas width.  We also check whether the star has moved off-screen, and reset it if we need to.

And then we actually draw the star on the canvas.  I’ve given it a semi-transparent stroke, to simulate a blur effect.

Finally, we call the updateStars()  function every 30 milliseconds so we get a nice smooth animation.

Here’s the final result.  You can easily change the number of stars and the speed using the variables at the top.

Leave a Reply

Your email address will not be published. Required fields are marked *