Animation: Bouncing Ball in Visual Basic 2008

Submitted by janobe on Tuesday, April 29, 2014 - 13:16.
In this tutorial I’m going to teach you how to animate a ball by using Visual basic 2008. The feature of the ball is that, it bounces in every side of the Form. With this, you will learn the functions of the bitmap and the graphics object. Let’s begin: Open the Visual Basic 2008 and create a New Windows Application. Add the timer and the Label which is the title of the Form. first form Double click the Timer and do the following code above the Timer_Tick sub procedure for declaring all the variables that are needed.
  1.     Private b_Size As Integer = 8 'FRACTION OF BALL SIZE
  2.     Private move_Size As Integer = 4 'FRACTION OF CLIENT AREA
  3.     Private btmp As Bitmap
  4.     Private b_PositionX As Integer
  5.     Private b_PositionY As Integer
  6.     Private b_RadiusX As Integer
  7.     Private b_RadiusY As Integer
  8.     Private b_MoveX As Integer
  9.     Private b_MoveY As Integer
  10.     Private b_BitmapWidth As Integer
  11.     Private b_BitmapHeight As Integer
  12.     Private bitmap_WidthMargin As Integer
  13.     Private bitmap_HeightMargin As Integer
In the Timer_Tick Sub Procedure, do the following code for the movement of the ball.
  1.     Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
  2.  
  3.         'DECLARE A VARIABLE TO OBTAIN THE GRAPHICS OBJECT.
  4.         Dim grafx As Graphics = CreateGraphics()
  5.         'DRAW THE BALL IN THE FORM.
  6.         grafx.DrawImage(btmp, _
  7.             CInt(b_PositionX - b_BitmapWidth / 2), _
  8.             CInt(b_PositionY - b_BitmapHeight / 2), _
  9.             b_BitmapWidth, b_BitmapHeight)
  10.  
  11.         grafx.Dispose()
  12.  
  13.         'INCREAMENT THE POSITION OF THE BALL BY ITS DISTANCE TO MOVED BOTH X AND Y AXIS.
  14.         b_PositionX += b_MoveX
  15.         b_PositionY += b_MoveY
  16.  
  17.         'REVERSE THE DIRECTION OF THE BALL WHEN IT HITS TO THE BOUNDARY.
  18.         If b_PositionX + b_RadiusX >= ClientSize.Width _
  19.             Or b_PositionX - b_RadiusX <= 0 Then
  20.             b_MoveX = -b_MoveX
  21.             Beep()
  22.         End If
  23.  
  24.         'SET THE Y BOUNDARY TO 90 SO THAT IT WILL NOT EXCEED TO THE TITLE OF THE FORM.
  25.         If b_PositionY + b_RadiusY >= ClientSize.Height _
  26.             Or b_PositionY - b_RadiusY <= 90 Then
  27.             b_MoveY = -b_MoveY
  28.             Beep()
  29.         End If
  30.     End Sub
Create a control class that overrides the OnResize method. OnResize increases the Resize event and it occurs when the control is resized.
  1.   Protected Overrides Sub OnResize(ByVal ev_arg As EventArgs)
  2.  
  3.         Dim grafx As Graphics = CreateGraphics()
  4.         'ERASE ANY DRAWINGS.
  5.         grafx.Clear(BackColor)
  6.  
  7.         'DECLARE A VARIBLE THAT HOLDS THE RADIUS OF THE BALL
  8.         'THEN SET THE WIDTH OR THE HIEGHT OF IT TO A FRACTION WHICHEVER IS LESS TO THE CLIENT AREA.
  9.         Dim dbl_Radius As Double = Math.Min(ClientSize.Width / grafx.DpiX, _
  10.             ClientSize.Height / grafx.DpiY) / b_Size
  11.  
  12.  
  13.         'SET THE HIEGHT AND WIDTH OF THE BALL.
  14.         b_RadiusX = CInt(dbl_Radius * grafx.DpiX)
  15.         b_RadiusY = CInt(dbl_Radius * grafx.DpiY)
  16.  
  17.         grafx.Dispose()
  18.         'SET THE DISTANCE THAT THE BALL MOVES INTO 1 PIXEL OR THE BALL SIZE WHICHEVER IS GREATER.
  19.         'THIS MEANS THAT THE DISTANCE OF THE BALL MOVES EACH TIME IS PROPORTIONAL TO ITS SIZE,
  20.         'WHICH IS ALSO PROPORTIONAL TO THE SIZE OF THE CLIENT AREA.
  21.         'THE BALL SLOWS DOWN WHENEVER THE CLIENT AREA IS SHRUNK
  22.         'AND THE BALL SPEEDS UP WHEN IT IS INCREASED.
  23.         b_MoveX = CInt(Math.Max(1, b_RadiusX / move_Size))
  24.         b_MoveY = CInt(Math.Max(1, b_RadiusY / move_Size))
  25.  
  26.         'THE VALUE OF THE BALL'S MOVEMENT SERVES AS THE MARGIN AROUND THE BALL,
  27.         'THAT DETERMINES THE ACTUAL SIZE OF BITMAP ON WHICH THE BALL IS DRAWN.
  28.         'THE DISTANCE OF THE BALL MOVES IS EQUAL TO THE SIZE OF THE BITMAP,
  29.         'WHICH ALLOWS THE PREVIOUS BALL'S IMAGE TO BE ERASED BEFORE THE NEXT IMAGE IS DRAWN.
  30.         bitmap_WidthMargin = b_MoveX
  31.         bitmap_HeightMargin = b_MoveY
  32.  
  33.         'TO FIND OUT THE ACTUAL SIZE OF THE BITMAP ON WHICH THE BALL IS DRAWN
  34.         'PLUS THE MARGINS TO THE BALL'S DIMENSIONS.
  35.         b_BitmapWidth = 2 * (b_RadiusX + bitmap_WidthMargin)
  36.         b_BitmapHeight = 2 * (b_RadiusY + bitmap_HeightMargin)
  37.  
  38.         'CREATE A NEW WIDTH AND HEIGHT OF THE BITMAP.
  39.         btmp = New Bitmap(b_BitmapWidth, b_BitmapHeight)
  40.  
  41.         'OBTAIN THE GRAFPHICS OBJECT SHOWN BY THE BITMAP.
  42.         grafx = Graphics.FromImage(btmp)
  43.  
  44.         'CLEAR THE EXISTING BALL AND DRAW A NEW BALL.
  45.         With grafx
  46.             .Clear(BackColor)
  47.             .FillEllipse(Brushes.Blue, New Rectangle(b_MoveX, _
  48.                 b_MoveY, 2 * b_RadiusX, 2 * b_RadiusY))
  49.             .Dispose()
  50.         End With
  51.  
  52.         'RESET THE POSITION OF THE BALL TO THE CENTER OF THE CLIENT AREA.
  53.         b_PositionX = CInt(ClientSize.Width / 2)
  54.         b_PositionY = CInt(ClientSize.Height / 2)
  55.  
  56.  
  57.     End Sub
After that, go back to the Design Views ,double click the Form and do the following code for starting the timer.
  1. Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  2.         Timer1.Start()
  3.     End Sub
You can the download the complete source code on your computer.
Tags
animation
Ball
Bouncing
visual basic

Add new comment

About text formats
  • 627 views