Begin Programming Logo
Home | KPL | Object Pascal | General Programming | Code Database | About Us
   
Graphics
   
   

KPL has built in commands which will allow you to very quickly draw shapes on your program.  We are going to use the ‘pen’ tool.  The pen in KPL is just like a pen in real life. It has colour, width and can either be up or down.

When drawing in KPL, we use a co-ordinate system, like the co-ordinate system in maths.  However, there is one major difference between the computing and maths co-ordinate system.  In maths (0,0) is the bottom left corner and as the ‘y’ co-ordinate increases, we go ‘up’ the graph, however in computing, (0,0) is the top left corner and so as we increases y, we go down the screen.
Explanation of co-ordinate system
The default pen position is (0,0), the top left hand corner.  We are going to draw the below square:
Diagram of 200*200 square
First, we will draw the top horizontal line.  In ‘Method Main()’, type:

MoveTo(200,0)

Run your program and you will see that we have drawn a single, horizontal line.  Next we will draw the line on the right; after the above line, type:

MoveTo(200,200)

Next, we will complete the square with the following two lines:

MoveTo(0,200)
MoveTo(0,0)

Your program will now look like this:
Draw square source
Notice that the code is all indented by one tab from ‘Method Main()’.  This is house style as it allows us to easily see that all the MoveTo lines are part of the Method Main().  As a rule of thumb, if KPL puts square blocks around part of your code, that should be indented further.

We are now going to change the pen’s colour by using the following code:

Color(Blue)
Color(Green)

We are going to make the top and right lines blue, therefore put ‘Color(Blue)’ at the top of your code.  The pen retains its colour and so we do not have to reset the colour to blue before we draw the right hand side.

Add Color(Green) before the line MoveTo(0,200) and run your game.  YOU will now find that the bottom and left lines are green, whilst the other two are Blue.

References – The Pen Tool

Pen(False)  - This tells the computer that the pen is either drawing (True) or not drawing (False).
PenWidth(10) -This sets the pen width to ten.
Color(Blue) - This changes the color of the pen to blue.
MoveTo(100,100)  - This moves the pen to the point 100,100 of the screen.

Excerises

  • Draw a pink square of length 400
  • Draw a rectangle of size 100*300 with the pen width set to 30

So far, we have only drawn a continuous set of lines, in that the next line begins where the last line ends.  We will now look at how to draw non-continuous shapes such as the following:

A series of lines

To code this, imagine you were drawing it by hand, you would probably use the following procedure:

  • Put your pen down on the top left corner
  • Move your pen to the right
  • Move your pen down
  • Lift up your pen
  • Move your pen to the start of the diagonal line
  • Move your pen to the end of the diagonal line

We can use the same procedure in KPL.  By using Pen(True) and Pen(False) we can lift up and put down the pen. Therefore, to draw the above shape we could use the following code, which follows the procedure mentioned above.

Code to draw lines

Exercises

  • Write the lowercase letter ‘t’ on the screen – again imagine how you would normally write ‘t’ and “translate” it into KPL
   

Valid XHTML 1.0 Transitional Valid CSS!