Programming a View

This chapter is somehow an example for the functions chapter. In this chapter we will create a very simple world generator. As you have played with 2D games. There are always worlds. So let’s create world ourselves like this:



As you see in the image, our world has a surface, some trees, stars, and rock under it’s surface, So how to implement all of them? Let’s code!




Where to start?

If you look closely you see 4 four different layers. The back layer is the Stars, and then tress, ground and the most front layer rocks. That’s why we start with stars. So we need a !drawStars(number) function. Let’s create it.



!drawStars(number)

So our first function is !drawStars(number) this function draws @number times of stars so like !drawStarts(20) draws 20 stars, So we have to first implement the @number in our header and then set the color to #n = 3 then print stars.

Something you should know is half of the screen is going to be under the surface layer so we don’t need to draw stars there. All we have to do is to draw stars for the half of the screen:


< number >

// Setting #n to 3
   nnn

// Printing 50 dots
   [ @number ,
      [ #i  #rnd , r ]
      [ #j  #rnd 2 , d ]
      pi
   ]

// done

Now what we need is to have a way to create trees…

### !drawTree() So we need to create a few trees so we need to program a tree on a function and then use the func to have create trees as much as we need. A tree should look like this. And remember we need a long trunk for it because we will generate it with random heights and when we do so we need the trunk to be so long to still be covered by the surface. So a trunk will look like this:



To create this tree we have to write this very simple function:


<>
[ 3 , rp ] rd

[ 3 ,
   [ 5 , pl ]
   [ 5 , r ]
   d
]

[ 3 , lp ] r
[ 20 , pd ]

So now that we have two of our functions ready let’s implement them to the our main blueprint. So I’ll name the main blueprint `world.arendelle` At the first of the app we will need maybe 50 stars so I start the file with this:

!drawStars(50)

And now I need to put random trees in the page. How can I do that? look at this:



Also we render them randomly between 1 to 7 dot in the height. So let’s look how my code does that:


!drawStars(50)

// Trees

   ( spacing , 0 )

   [ #i 3,

      i

      // we set a random color
         [ #rnd  4 , n ]

      // random height
         [  ( #rnd  -7 ) - 5 + #j 2 , d ]

      // and we keep where we are using
      // @spacing, This way we can count
      // how many 6 dot should we add

         [ @spacing , r ]

      !drawTree ()

      // 6 dot is not the real
      // displacement but the 7 is look
      // at the image and you see why
         ( spacing , + 7 )
   ]




!drawGround()

The ground is easy. We create some lines with a random difference in height like this:


<>
   ( col , 0 )

   [ #n > 0 , n ]

   [ #i ,

      i [ @col , r ]

      [ #rnd * 5 + #j 2 , d ]
      [ #j , pd ]

      ( col , +1 )

   ]

   n




!drawRocks()

We have to put some random dots like the way we did it in the !drawStart(number) but this time the other half of the screen. So:


<>

( col , 1 )

[ #width 3 - 1 ,

   i [ @col , r ]

   [ #j 2 + 6 + #rnd  4 , d ]

   [ #rnd  10 , d ] p

   ( col , + 3 + #rnd * 2 )

]


And we need to draw this rocks for quite a few times to be sure it happens cool so we add it to the main code with a loop: [ 4 , !drawRocks() ]



And it’s done!

You see the app is ready! You should have this main blueprint by now:


!drawStars(50)

// Trees

   ( spacing , 0 )

   [ #i 3,

      i

      // we set a random color
         [ #rnd  4 , n ]

      // random height
         [  ( #rnd  -7 ) - 5 + #j 2 , d ]

      // and we keep where we are using
      // @spacing, This way we can count
      // how many 6 dot should we add

         [ @spacing , r ]

      !drawTree ()

      // 6 dot is not the real
      // displacement but the 7 is look
      // at the image and you see why
         ( spacing , + 7 )
   ]

// Ground
   !drawGround()

// Rocks
   [ 4 , !drawRocks() ]

// done


So run it and see your world!




Exercise

Add functions to draw birds, clouds and a sun to the world!