Visual Basic GraphicsVisual Basic Graphics

Warning:

The way I am using Visual Basic graphics is somewhat different (and much simpler!) to that of the book. Use these slides as you main reference.

picturebox

EamonnsPicBox

We will change color to white

Note size 696 , 224

Assume that all code you see today is written here.

When we run our program, we see this form, with a blank picturebox control

696

224

Almost all computer graphic systems (including VB) use an “upside down” Cartesian coordinate system…

696

224

0 348

0

112

(0,0) (696,224)(102,112)

Any point in the Cartesian coordinate system is specified by a pair of numbers X and Y.

(0,0)

(696,224)Let us draw the line above in VB

There is a built-in function that will draw a line…

EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue, 0, 0, 696, 224)

The parameter list is:1) The Pen object (more later)2) The first points X coordinate3) The first points Y coordinate4) The second points X coordinate5) The second points Y coordinate

Note: You must click on the control to make the line appear

EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue, 0, 0, 696, 224)

EamonnsPicBox.CreateGraphics.DrawLine(Pens.Red, 0, 224, 696, 0)

We can draw multiple lines…

Dim shtLoopCounter As Short

For shtLoopCounter = 0 To 224 Step 20

EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue, 0, 0, 696, shtLoopCounter)

Next shtLoopCounter

We can use all the VB tools we have previously learned in conjunction with the graphics tools!

There is a function Rnd which produces random numbers

Syntax: Single = Rnd()Syntax: Single = Rnd()

Function Description: Returns a pseudo random decimal number that is greater than or equal to 0 and less than 1.

By passing Rnd an optional numeric parameter, you can further control the type of random number you generate.

Common Uses: Random numbers are required for a great many reasons.

By combining the output of the Rnd function with some basic mathematics, random numbers can be generated within a given range.

Function call Return Value

Int(Rnd()*3) Generates a random number from 0 to 2

Int(Rnd()*3)+1 Generates a random number from 1 to 3

Int(Rnd()*6)+1 Generates a random number from 1 to 6

Int(Rnd()*6) +1) + (Int(Rnd()*6) +1)

Generates a random number from 2 to 12 similar to rolling a pair of dice

To produce random numbers in a range, from lowerbound to upperbound…

Int((upperbound - lowerbound + 1) * Rnd + lowerbound)

Review

Dim shtLoopCounter, shtX, shtY As Short

For shtLoopCounter = 0 To 100

shtX = Int((696 - 0 + 1) * Rnd() + 0)

shtY = Int((224 - 0 + 1) * Rnd() + 0)

EamonnsPicBox.CreateGraphics.DrawLine(Pens.Blue, 348, 112, shtX, shtY)

Next shtLoopCounter

Note, this example suffers from “magic numbers”, we will learn to fix this latter

EamonnsPicBox.CreateGraphics.DrawRectangle(Pens.Black, 100, 100, 10, 90)

EamonnsPicBox.CreateGraphics.DrawRectangle(Pens.Red, 200, 100, 10, 80)

EamonnsPicBox.CreateGraphics.DrawRectangle(Pens.Blue, 300, 100, 50, 50)

The parameter list is:1) The Pen 2) The top left corner X’s coordinate3) The top left corner Y’s coordinate4) The width of the rectangle5) The height of the rectangle

There is a built-in function that will draw (axis parallel) rectangles …

EamonnsPicBox.CreateGraphics.DrawRectangle(Pens.Black, -20, 10, 100, 90)

It is legal (and sometimes useful) to draw objects that do not fit on the screen (even if this means giving a negative value for a coordinate )

EamonnsPicBox.CreateGraphics.DrawEllipse(Pens.Black, 100, 100, 90, 60)

EamonnsPicBox.CreateGraphics.DrawEllipse(Pens.Red, 300, 100, 30, 80)

EamonnsPicBox.CreateGraphics.DrawEllipse(Pens.Blue, 500, 100, 50, 50)

There is a built-in function that will draw (axis parallel) ellipses…

The parameter list is the same as for drawing rectangles, except we imagine the smallest rectangle that the ellipses we want could fit into…

EamonnsPicBox.CreateGraphics.DrawArc(Pens.Blue, 100, 20, 350, 150, 0, 160)

There is a built-in function that will draw arcs…

The parameter list is the same as for drawing ellipses, except we also specify the start and sweep of the arc

start

sweep

EamonnsPicBox.CreateGraphics.DrawArc(Pens.Blue, 100, 20, 350, 150, 0, 160)

EamonnsPicBox.CreateGraphics.DrawPie(Pens.Blue, 100, 20, 350, 150, 0, 160)

There is a built-in function that will draw pie segments…

The parameter list is the same as for drawing arcs.

The Pen revisitedA Pen is an object. We are not going to study objects in VB too much. For now lets think of it like this…

We know that a variable, like shtAge has exactly one property, its value, for example 24 or 58.

We can think of an object, as having more than one property.

What properties do real pens have? They have color, and width

We can declare and use a new pen like this..

Dim MyPen As New Pen(Color.Purple, 5) EamonnsPicBox.CreateGraphics.DrawPie(MyPen, 100, 20, 350, 150, 0, 160)

Dim MyPen As New Pen(Color.Purple, 5)

EamonnsPicBox.CreateGraphics.DrawPie(MyPen, 100, 20, 350, 150, 0, 160)

Dim MyPen As New Pen(Color.Black, 3)

EamonnsPicBox.CreateGraphics.DrawEllipse(MyPen, 100, 100, 90, 60)

MyPen.Color = Color.Red

MyPen.Width = 15

EamonnsPicBox.CreateGraphics.DrawEllipse(MyPen, 300, 100, 90, 60)

Once we have created a pen, we can change its properties and reuse it again and again

The SolidBrush Object IAll the functions we have seen thus far have solid versions

Dim MyBrush As New SolidBrush(Color.Blue) EamonnsPicBox.CreateGraphics.FillRectangle(MyBrush, 100, 100, 100, 90) EamonnsPicBox.CreateGraphics.FillEllipse(MyBrush, 200, 100, 100, 90) MyBrush.Color = Color.Red EamonnsPicBox.CreateGraphics.FillPie(MyBrush, 300, 20, 350, 150, 0, 160)

The SolidBrush Object IIA SolidBrush is an object.

What properties do real SolidBrushes have? They have color…

We can declare and use a new SolidBrush like this..

Dim MyBrush As New SolidBrush(Color.Blue)EamonnsPicBox.CreateGraphics.FillRectangle(MyBrush, 100, 100, 300, 90)

The Font ObjectA Font is an object.

What properties do real Fonts have? They have typeface and size

We can declare and use a new Font like this..

Dim MyFont = New Font("Arial", 46)eamonnsPicBox.CreateGraphics.DrawString("Pan is Dead", MyFont, MyBrush, 100, 100)

Homework/LabHomework/LabDue on Friday 19th of November (Thursday the 11th is a holiday) at the beginning of class.Use the tools you have learned today (and a few more we will see next time) to create an image of one of the Simpson's characters (I would especially prefer a minor character).

You need to first sketch it out on graph paper, and have myself or Eric sign off on it before you proceed.

The graph paper drawing should include the locations of some of the major features.

Hand in a screen dump, the graph paper, and a printout of the code

Do a good job! Because the final project in the class will extend your work here.