3D Starfield

Setup

JSE's Starfield command only draws 2D stars that pan in a direction.

If we want a starfield that looks 3D, with stars coming outwards towards up, we're going to have to build our own.

Let's build this!

The concept will be stars coming from a central point, and moving in a straight line with a random direction and speed.

As they continue, they get subtly larger, then once they're off the edge of the screen, they reset back to the middle again.

Visually, this should look quite lovely!

Let's start with our usual setup.

Repeat
CLS
ResetDraw

  Star 320,240,16

Flip
Forever

Seeing Stars

Let's add a drawing loop into our main program loop.

  // Drawing Loop
  For J=1 to 100
    Star Stars(J,StarX),Stars(J,StarY),16
  Next

If you run it from here, you'll notice all the stars stuck up on the top left of the screen.

That's because they're starting from 0,0 which is the top corner.

We need to move all the draw commands to the middle of the screen.

Let's change the Drawing Loop to include a Middle.

  // Drawing Loop
  MiddleX=320
  MiddleY=240
  
  For J=1 to 100
    DrawX=Stars(J,StarX)+MiddleX
    DrawY=Stars(J,StarY)+MiddleY
    Star DrawX,DrawY,16
  Next

Back to the Middle!

Ring of Stars?

It's a Ring!

One odd quirk right now is that all the stars are forming a ring on the screen.

What we need to do is give each of the stars a random speed to go with their random angle.

Up where we do our Star Creation loop, we'll add a Speed to the Angle.

  Angle=Rnd(0,360)  // The angle the star should move in.
  Speed=Rnd(0.5,1.5)  // The speed the star should move in.
  Stars(J,StarXSpeed)=Cos(Angle)*Speed  // Cos is X
  Stars(J,StarYSpeed)=Sin(Angle)*Speed  // Sin is Y

Much better!

Relativity

Something odd you might've noticed is that the stars seem faster in the middle than they do at the edges, even though they're moving at a constant speed.

This is because your eyes are used to things far away moving slower than things closer.

We can "cheat" this effect by simply making the stars speed up, as they move.

Hop back down to our Drawing loop, and add in a multiplier for the speed.

First, we'll add a new SpeedUp variable to our variable list

  // Drawing Loop
  MiddleX=320
  MiddleY=240
  SpeedUp=1.01

Then, inside the drawing loop itself, simply multiply the Speed by this new variable.

Now that the speed is increasing over time, you'll find they shoot off too fast when they reset back to 0.

This is because we haven't reset our Speed, yet.

We'll add this to the Reset section at the end of our drawing loop.

    If Far>500
      // Reset the Star
      Stars(J,StarX)=0
      Stars(J,StarY)=0
      
      // Reset the Speed
      Angle=Rnd(0,360)  // The angle the star should move in.
      Speed=Rnd(0.5,1.5)  // The speed the star should move in.
      Stars(J,StarXSpeed)=Cos(Angle)*Speed  // Cos is X
      Stars(J,StarYSpeed)=Sin(Angle)*Speed  // Sin is Y
    EndIf

Now the stars will slow back down to their normal speed when they reset.

Bigger!

Now that we have our refactored code, it'll be easier to add additional changes to our stars.

Let's start with the size of stars. They really should grow as they get closer.

We'll start, up at the top of our code. Add an extra Slot Name for the size.

  StarSize=5

Don't forget, this is the Slot in the array that we're using, not the value!

Next, hop back to the bottom of our code, and inside the ResetStar subroutine, to give the new size slot a value.

      // Give the star a Size
      Stars(J,StarSize)=4  // Not too big.  Not too small!

To increase this size, we'll use the same technique that we use to increase the speed.

  // Multiply the Size
    // We can use the same SpeedUp multiplier from earlier.
    Stars(J,StarSize)=Stars(J,StarSize)*SpeedUp

And finally, where we draw the star, let's change the size which is currently 16 to be this new array value.

    Star DrawX,DrawY,Stars(J,StarSize)

Getting bigger!

Quick Effects

And finally, let's try adding some fun effects.

First, we'll make things a bit more colourful.

Throw in a simple SetHue just before the Star command.

Instead of adding a new "StarColour" slot to the array, we can simply reuse the J value that the For-Next loop gives us.

    // Change Colour!
    SetHue J*3,0.4,1

More Colour!

And we can add a quick trail to the whole effect by changing the CLS command.

CLS 0,0,0, 0.2 // A low alpha leaves the previous frame behind.

Feedback is Fun!