Graphics
Up
This little project introduces the following Visual Basic graphics commands: Pset, Line, Circle and Drawwidth. These commands are rather limited but by completing this project you will realise that even a command as simple as Pset can have useful and interesting uses. You will also learn more about the coordinate system used by VB.

In this project we will try to make VB plot mathematical graphs for us such as y = sin(x). If you're too young to know about sines and cosines then you should skip this rather advanced project and come back in a few years time...

Start a new project and save it immediately into a folder called 'graphics', giving both the form file and the project file the name 'graphics'.

Create 10 command buttons, set captions as below and give names cmdSin, cmdCos etc.

Click on the form to make sure that the properties window shows the properties of the form. Look at the width and height values and notice that although the form is not very big the width  and height numbers are huge. VB can't be measuring the dimensions in centimetres, millimetres or inches otherwise these numbers would be much smaller, so what units ARE being used? The answer is TWIPS. A twip is a Microsoft invention equal to 1/1440 inch. That sounds pretty crazy but it does have one big advantage over cm or mm - a twip is so small that it allows distances to be specified accurately without using decimals or fractions.

So you don't like twips? VB lets you change the 'scalemode' property so that dimensions are given in millimetres, centimetres, points and more. VB even let's you define your own units, and that's what we are going to do in this lesson. Wouldn't it be nice to have the form exactly 100 units wide and 100 units tall? That way we could know easily that the centre of the form is at (50,50) for example (you should remember that in VB coordinates are measured across and DOWN relative to the top left corner, whereas in your math class the coordinates are measured across and UP. If you put the following code in your project it will set a scale such that the width and height of your form are always 100 units, even if the form is resized (note that when you run any VB program a resize event takes place as the form is first displayed, and therefore the code below is run).

Private Sub Form_Resize()
ScaleWidth = 100 ' Set width units.
ScaleHeight = 100 ' Set height units.
End Sub

The above procedure (or subroutine) includes comments to help you understand the code. The beginning of a comment is marked by an apostrophe (') and the computer will ignore everything on that line that is to the right of the apostrophe - the comment is only for the benefit of the programmer. Note how VB colours comments green to help you recognise them as comments. We haven't used comments much in our projects but professional programmers use them a great deal to document the complicated programs that they create so as to help not only themselves but also other programmers who may have to modify the program at  a later date.

Copy the above code into your project but don't expect your project to do anything yet.

You may have realised that if you form is not square then the above code will cause the vertical units to be different from the horizontal units - that's a bit difficult to work with so you may wish to add the following line in bold to make sure that every time you resize the form the height of the form is set to be the same as the width, making the form square (I had to add 398 twips to the height to allow for the presence of the blue title bar).

Private Sub Form_Resize()
ScaleWidth = 100 ' Set width units.
ScaleHeight = 100 ' Set height units.
Form1.Height = Form1.Width + 398
End Sub

Here's some code for the 'Line' button:

Private Sub cmdLine_Click()
Line (0, 50)-(100, 50)
End Sub

This includes an instruction to the computer to draw a line from the point (0,50) to (100,50) - try to visualise where the line will go and then run the program to check.

Here's the code for the CLS button:

Private Sub cmdCLS_Click()
Cls
End Sub

Cls is short for CLear Screen but really means CLEAR FORM - it simply removes any lines or points that have been placed on the form using graphics methods.

Here's the code for the Circle button:

Private Sub cmdCircle_Click()
Circle (50, 50), 40
End Sub

This is an instruction to draw a circles centred on the point (50,50) with a radius of 40 units.

Here's the code for the Square1 button:

Private Sub cmdSquare1_Click()
Line (20, 20)-(20, 30)
Line (20, 30)-(30, 30)
Line (30, 30)-(30, 20)
Line (30, 20)-(20, 20)
End Sub

You should be able to work out how this will draw a square (or a rectangle if your form is not square).

Copy and paste this code for the Square2 button:

Private Sub cmdSquare2_Click()
Line (50, 50)-Step(20, 0)
Line -Step(0, 20)
Line -Step(-20, 0)
Line -Step(0, -20)
End Sub

This introduces the word step which make the position relative rather than absolute. In the line Line (50, 50)-Step(20, 0), for example, the computer draws a line starting at  the middle of the form (50,50) and ending 20 units to the right of where the line began (as opposed to measuring from the top left corner to find the absolute position).

There is a much simpler way to draw a square or rectangle, as shown in the code for the Square3 button:

Private Sub cmdSquare3_Click()
Line (20, 60)-(30, 70), , B
End Sub

The 'B' at the end of the line is an instruction to Visual Basic to draw a Box so only the coordinates of the top left corner and bottom right corner need to be given. Note that the B 'switch' won't work unless it is preceded by the two commas as above - these act as placeholders.

Now for the real challenge - we will try to plot a 'sine curve' on our form. We will do this using the Pset command which simply draws a point on the form in the specified location. How can we get a curve by plotting points? By plotting many points close together we get make what looks to the eye like a smooth curve. We will ask the computer to plot one thousand points for us, stepping across the whole 100 unit width of the form in steps of 0.1. At each step (or each time the loop of code below repeats) we will set or 'plot' a point at a horizontal position given by x (the value of the loop counter) and a vertical position equal to the sine of an angle that is proportional to x. Note that VB assumes the angle is in radians not degrees. The angle in radians that corresponds to a complete cycle or circle is 2 π so I've set up an expression 2 * 3.14159 * x / 100 which becomes equal to 2 π when x becomes equal to one hundred. 3.14159 is a good approximation for π (pi).

Private Sub cmdSin_Click()
For x = 1 To 100 step 0.1
    PSet (x, 50 - 50 * Sin(2 * 3.14159 * x / 100))
Next
End Sub

When you run this code it should give you a result like this:

If you look closely you should be able to see the dots that make up the curve. If you can't see the individual dots then try changing the step in the For...Next loop to 0.5 instead of 0.1 - that way the computer will only draw 200 dots instead of 1000.

Do the points and lines seem too thin to you? If so, do one of the following:

bulletIn the properties panel, set the form's drawwidth property to 2 instead of 1.
bulletAlternatively, include the following code at an appropriate point in your program, such as in the resize procedure:  Form1.DrawWidth = 2

Note how you can change properties either before your program runs, using the properties panel, or while the program is running, using code.

Now see if you can write the code for the Cosine and Tangent buttons. Warning: you are likely to get an error message when you try to plot the tan function because the tangents of pi/2 radians and 3/2 pi radians (90° and 270°) are infinite. Therefore in order to get this to work you will need to do a check using an IF statement to check whether the X value is close to pi/2 or 3/2 pi and if so not to attempt to calculate the tangent value.

Can you make VB plot a parabola e.g. a curve that corresponds to y = x²?

If you have a graphing calculator you will know it is much easier to plot curves using the calculator than using VB, but it's still interesting to see how VB can be made to do it.

As a final challenge, try to give code to the 'House' button so that the computer draws a simple picture of a house for you, like the one below. You can use either relative or absolute coordinates for this.

Previous Up Next