Synthwave Synthscape

Verticality

Cool. Next we'll add some vertical lines to our floor, to make a nice grid that runs across the floor.

Let's start from the Middle, and draw lines running down the screen in 64 pixel intervals.

Each line should have a gap in-between.

  // Vertical Lines
  
  // Draw from minus 10 to plus 10
  // So that our middle line will be at zero.
  
  For J=-10 to 10
    X=(J*64)
    // Each X position has a 64 pixel gap

    // Then add the MiddleX to centre them    
    Line X+MiddleX,MiddleY,X+MiddleX,480
  Next

We multiply each of the J values by 64, and then add it to the MiddleX value, to centre it on the screen.

Lines go down.

Scrolling

Let's Scroll the lines!

You might think that scrolling this 3D Effect would be hard, but since we've already used maths to space everything out, all we really need to do is add a Scroll value to the X number.

We'll begin with a Scroll variable at the top of our code.

LineScroll=0

Once per loop, we'll move the Scroll.

We want the scroll value to move across, but we also need it to jump back to 0 when it gets too high, otherwise all of our lines will eventually scroll off the screen!

We can use the Wrap command to do this looping for us.

  LineScroll=Wrap(LineScroll+1,0,64)
  // Add 1 to the Scroll
    // Wrap between 0 to 64,
    // because our X gap is 64 pixels wide

We can now simply add this value to our X value inside our Vertical Lines loop

    X=(J*64)+LineScroll

Now we're synthing!

Layering The Sun

Let's add a big sun into the mix.

We'll just draw a great big circle. That'll do!

  // The Sun
  Oval MiddleX,MiddleY-80,240,240,64

A simple sun would do, but we can recolour it to add extra effect.

Let's draw it twice, at slightly different sizes, each time with a different shade of yellow.

  // The Sun
    // Outline
  SetCol 255,255,0
  Oval MiddleX,MiddleY-80,250,250,64
    // Inside
  SetCol 128,128,0
  Oval MiddleX,MiddleY-80,240,240,64

  // And don't forget to reset the colour after
  ResetDraw

Be sure to place your Sun at the right point in our program.

Before vs After

You want the sun to be drawn before the lines are drawn, otherwise the sun will be over the top of our lines.

Parallax

The furthest mountain is "J==1" and the closest mountain is "J==10"

If we want the closest mountain to move at full scrolling speed, then we'd need the furthest mountain to move at 1/10th of the speed.

That's our maths, right there. All we have to do is divide J by 10.

Smaller J = Slower Speed

As we divide by 10, the smaller J's get closer to 0 whilst the larger J's stay close to 1.

We'll place the Speed into a new Speed variable for each mountain, and then multiply the MountainScroll by this new Speed.

Replace the X=Wrap(.. line with this.

    Speed=J/10
    X=Wrap(J*120+MountainScroll*Speed,0-256,640+256)

Oooh, Synthy!

Final Touches

First, because we're starting the mountains at 0, they all start off very predictably.

Instead, where we create the MountainScroll variable, give it a random offset to start things off.

MountainScroll=Rand(500000)

That should help.

You might want to try juggling a few more numbers, though, to give it a more varied set of mountain positions.

      // Move all the mountains, and wrap them around the screen
    Speed=J/10
    
      // Create a wider offscreen wrap for each mountain
    WrapLimit=256+J*10  
    X=Wrap(J*120+MountainScroll*Speed,0-WrapLimit,640+WrapLimit)

And what about the sky?

We can use the SetGradient to achieve a nice fade in the sky.

Simply give the command a dark colour for the top, and a lighter blue for the bottom, then draw a rectangle where we want the sky to be.

  // Gradiented Sky
      // High = Dark
            // Low = Lighter
  SetGradient RGB(0,0,10),RGB(0,0,90)
    // then draw a rectangle
  Rect 0,0,640,240
    // and don't forget to reset afterwards
  ResetDraw

Blue, blue skies, I see.