Step 3 - Drawing Shapes

With the window appearing, the next step is to draw some shapes. To start, let’s get the hill drawing.

How do you position a shape on the screen?

Your window is organised to have a number of discrete picture elements (small dots called pixels) that you can draw to. When you created the window you said how many pixels wide it will be, and how many pixels high. The different drawing methods will all need you to pass in coordinates for where the shape should appear.

Caution

Remember the top left is 0,0 (x = 0 and y = 0). The value of y will increase as you go down the window, and the value of x will increase as you go to the right.

The best way to plan this out is to sketch what you want and to try to figure out where each shape needs to be drawn. Below is an illustration of the plan for the house drawing. We need to clear the screen white, draw a green ellipse for the hill, then a grey rectangle, and finally a red triangle.

1. Start by clearing the screen and drawing the filled ellipse.

   Tip

   • ClearScreen needs a color argument - you could pass it ColorWhite().
   • FillEllipse needs a color (use ColorBrightGreen) then four numbers - the top left coordinate (0, 400), and then the width and height (800, 400)

   • Drawing the hill

     using static System.Convert;
     using static SplashKitSDK.SplashKit;
     
     OpenWindow("House Drawing by Andrew", 800, 600);
     
     ClearScreen(ColorWhite());
     FillEllipse(ColorBrightGreen(), 0, 400, 800, 400);
     
     Delay(5000);

   Where is my image?

   Don’t panic when you compile and run this… there is one more thing we need to do to show the scene to the user.

2. Compile and run this… you should not see the shape! Why? SplashKit gives you the control of when things are shown to the user. To show the image you have created you need to call RefreshScreen. This will show the user what you have drawn.

   Think sequence!

   Make sure to refresh the screen before you delay.

   • Making it appear!

     using static System.Convert;
     using static SplashKitSDK.SplashKit;
     
     OpenWindow("House Drawing by Andrew", 800, 600);
     
     ClearScreen(ColorWhite());
     FillEllipse(ColorBrightGreen(), 0, 400, 800, 400);
     
     RefreshScreen();
     
     Delay(5000);

3. Compile and run again. You should now see the white background and the green hill.

Are these hard-coded values ok?

For this program we are just wanting to draw some fixed shapes, so we can tolerate these hard-coded values for now.