Computer Animation Rick Parent Computer Animation Algorithms and Techniques Figure Animation.
COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.
-
Upload
zoe-bailey -
Category
Documents
-
view
219 -
download
0
Transcript of COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.
![Page 1: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/1.jpg)
COM148X1Interactive Programming
Lecture 6
![Page 2: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/2.jpg)
Topics Today
Generate Random Numbers Graphics Animation
![Page 3: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/3.jpg)
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
![Page 4: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/4.jpg)
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
![Page 5: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/5.jpg)
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
![Page 6: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/6.jpg)
Pseudo Random Number Algorithm
Use array to store all number
Use Rnd() function to pick two array position randomly and then SWAP the content
Repeat the step above several times and use the array as random result
2 3 4 5 6 7 8 9 10 11 12 131
2 10 4 5 6 7 8 9 3 11 12 131
4 7 1 13 6 8 12 2 5 3 9 1011
![Page 7: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/7.jpg)
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)
![Page 8: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/8.jpg)
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
![Page 9: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/9.jpg)
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
![Page 10: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/10.jpg)
Graphics
![Page 11: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/11.jpg)
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
![Page 12: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/12.jpg)
Coordinate Systemx
y
(0, 0)
(300,300)
(120, 50)
![Page 13: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/13.jpg)
Point Class
Point object represents a coordinate Example
Dim p As new Point(10, 20)Dim x, y As Integerx = p.X() ‘x = 10y = p.Y() ‘y = 20 ‘change coordinatep = new Point(100, 150)
![Page 14: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/14.jpg)
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
![Page 15: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/15.jpg)
SolidBrush Class
Brushes specified how to fill an object SolidBrush specified which color used to fill a
n object Dim brush_name As New SolidBrush(color)
Example Dim b As SolidBrush(Color.Red)
![Page 16: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/16.jpg)
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)
![Page 17: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/17.jpg)
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 Graphicsg = Panel1.CreateGraphics()
![Page 18: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/18.jpg)
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
![Page 19: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/19.jpg)
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
![Page 20: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/20.jpg)
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)
![Page 21: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/21.jpg)
Animation
![Page 22: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/22.jpg)
Image Preparation
Use ImageList control to prepare a set of images for application
![Page 23: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/23.jpg)
Properties of ImageList
Images is set of Images, index start from 0 ImageSize is the size of image, maximum siz
e is 256x256 Number of images in the ImageList can be fo
und in the Count properties of Images Example
x = ImageList1.Images.Count
![Page 24: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/24.jpg)
Show Picture (Image)
Use picture control to make different animation effects
![Page 25: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/25.jpg)
Properties of PictureBox Control
Location represents the top-left corner of PictureBox Top represents the top most coordinate of PictureBo
x Left represents the left most coordinate of PictureBo
x Width represents the width of PictureBox Height represents the height of PictureBox Image represents the picture showing in the Picture
Box, set Image to Nothing in order to make the PictureBox shows nothing
Example PictureBox1.Image = Nothing
![Page 26: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/26.jpg)
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
![Page 27: COM148X1 Interactive Programming Lecture 6. Topics Today Generate Random Numbers Graphics Animation.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e7e5503460f94b82197/html5/thumbnails/27.jpg)
Animation Example
‘move image from left to right while playing ‘image sequence inside PictureBoxDim i As Integer = 0Private Sub Timer1_Tick(ByVal sender As System.Obj
ect, ByVal e As System.EventArgs) Handles Timer1.Tick
Dim x, y as Integerx = PictureBox1.Location.X + 1y = PictureBox1.Location.YPictureBox1.Location = new Point(x, y)PictureBox1.Image = ImageList1.Images(i)i = (i + 1) mod ImageList1.Images.Count
End Sub