COM148X1
Interactive Programming
Lecture 6
Topics Today



Generate Random Numbers
Graphics
Animation
Generate Random Number



In VB, random numbers can be generated
using Rnd() function
Rnd() function returns random number in the
range [0 … 1) (include 0 but exclude 1)
Example



x = Rnd() ‘0 ≤ x < 1
x = Rnd() * 5 ‘0 ≤ x < 5
x = Int(Rnd() * 5) + 1 ‘1 ≤ x ≤ 5, integer only
Randomize() Function



The number sequence generated by Rnd()
will be the same when the application start
Randomize() function is used to shuffle the
sequence again
Call Randomize() once when the
application start
Pseudo Random Number


Sometimes, non-repeatable random number
is required, for example, shuffle a deck of
card (A, 2, 3, … , J, Q, K)
Use the technique called pseudo random
number to generate non-repeatable random
number
Pseudo Random Number Algorithm

Use array to store all number
1

3
4
5
6
7
8
9
10
11
12
13
Use Rnd() function to pick two array position
randomly and then SWAP the content
1

2
2
10
4
5
6
7
8
9
3
11
12
13
Repeat the step above several times and use
the array as random result
11
4
7
1
13
6
8
12
2
5
3
9
10
Pseudo Random Number Example
Dim cards(13) As Integer
Dim j, k, card1, card2 As Integer
For j = 1 To 13
cards(j) = j
Next j
PseudoRandom(cards)
Pseudo Random Number Example
(cont’)
‘Perform pseudo random from 1 … UBound(a)
Sub PseudoRandom(ByRef a() As Integer)
For k = 1 to 10000
card1 = Int(Rnd() * UBound(a)) + 1
card2 = Int(Rnd() * UBound(a)) + 1
Swap(a(card1), a(card2))
Next k
End Sub
Pseudo Random Number Example
(cont’)
Sub Swap(ByRef x As Integer, ByRef
y As Integer)
Dim temp As Integer = x
x = y
y = temp
End Sub
Graphics
Coordinate System





Coordinate of form use (x, y) coordinate
system
Upper left corner is the origin
x value increase from left to right
y value increase from top to bottom
All UI controls use their upper left corner as
their reference position
Coordinate System
x
(0, 0)
(120, 50)
y
(300,300)
Point Class


Point object represents a coordinate
Example

Dim
Dim
x =
y =
p As new Point(10, 20)
x, y As Integer
p.X() ‘x = 10
p.Y() ‘y = 20
‘change coordinate
p = new Point(100, 150)
Color Class


Color object represents a color
Default color available for use


Black, Silver, Gray, White, Maroon, Red, Purple,
Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue,
Teal, Aqua …
Example


Dim c1 As Color = Color.Green ‘use default color
Dim c2 As Color
c2.FromArgb(128, 128, 128) ‘RGB value
SolidBrush Class

Brushes specified how to fill an object
SolidBrush specified which color used to fill
an object

Dim brush_name As New SolidBrush(color)

Example


Dim b As SolidBrush(Color.Red)
Pen Class

Pen class is used to draw difference kinds of
lines and curves

Dim pen_name As New Pen(brush,width)

Example

Dim b As New SolidBrush(Color.Red)
Dim p As New Pen(b, 1.5)
Graphics Class



Before start drawing on UI controls, Graphics
object of the UI control is required
Use CreateGraphics() method of the UI
control to obtain Graphics object
Example

Dim g As Graphics
g = Panel1.CreateGraphics()
Commonly Use Graphics Functions
Function
Description
DrawLine(pen, p1, p2)
Draw line from p1 to p2
DrawRectangle(pen, x, y, w, h) Draw w x h rectangle with top left
corner at (x, y)
DrawEllipse(pen, x, y, w, h)
Draw w x h ellipse with top left corner
at (x, y)
DrawPolygon(pen, points())
Draw polygon by given array of
points
DrawCurve(pen, points())
Draw curve by given array of points
Commonly Use Graphics Functions
Function
Description
FillRectangle(brush, x, y, w, h)
Fill w x h rectangle with top left
corner at (x, y)
FillEllipse(brush, x, y, w, h)
Fill w x h ellipse with top left corner at
(x, y)
FillPolygon(brush, points())
Fill polygon by given array of points
Fill ClosedCurve(brush,
points())
Fill closed curve by given array of
points
Graphics Functions Example
Dim g As Graphics
g = Panel1.CreateGraphics()
Dim brush1 As New SolidBrush(Color.Red)
Dim pen as New Pen(brush1, 10)
g.DrawLine(pen, p1, p2)
Dim brush2 As New SolidBrush(Color.Green)
g.FillRectangle(brush, p1.X(), p1.Y(), 100, 150)
Animation
Image Preparation

Use ImageList control to prepare a set of images for
application
Properties of ImageList




Images is set of Images, index start from 0
ImageSize is the size of image, maximum
size is 256x256
Number of images in the ImageList can be
found in the Count properties of Images
Example

x = ImageList1.Images.Count
Show Picture (Image)

Use picture control to make different animation effects
Properties of PictureBox Control







Location represents the top-left corner of PictureBox
Top represents the top most coordinate of
PictureBox
Left represents the left most coordinate of
PictureBox
Width represents the width of PictureBox
Height represents the height of PictureBox
Image represents the picture showing in the
PictureBox, set Image to Nothing in order to make
the PictureBox shows nothing
Example

PictureBox1.Image = Nothing
Playing Animation

Use Timer control to control the frame rate of
animation and make the application
responsive to other event when the animation
is playing
Animation Example
‘move image from left to right while playing
‘image sequence inside PictureBox
Dim i As Integer = 0
Private Sub Timer1_Tick(ByVal sender As
System.Object, ByVal e As System.EventArgs)
Handles Timer1.Tick
Dim x, y as Integer
x = PictureBox1.Location.X + 1
y = PictureBox1.Location.Y
PictureBox1.Location = new Point(x, y)
PictureBox1.Image = ImageList1.Images(i)
i = (i + 1) mod ImageList1.Images.Count
End Sub