FIT 100

Lab 12:  Graphics, Iteration, Procedures and Randomization

Autumn 2001

 

Recommended Reading for Lab 12:

·         p. 462-468 (to top of page) in Chapter 9 of Learn to Program with Visual Basic 6.0

·         How to Use Visual Basic, Chapters 7 (Read the section on Do While Loops)

http://library.books24x7.com/toc.asp?bkid=888
http://library.books24x7.com/viewer.asp?bkid=888&chnkid=378716320
This link will be active through November 12, 2001.

You have to be on campus, or coming in through the UW proxy server, to access the page.

·         Random Numbers and Visual Basic

http://www.vbexplorer.com/random/random_numbers_1.asp

 

Introduction:

For Project 3, you have complete control of the look and design of your program.  Using the functions and methods available in VB to draw lines, boxes, circles and rectangles, you and your program will create a work of art.  This lab covers the basic statements needed to manipulate geographic shapes in a way that is pleasing to the eye.

 

Objectives:

  1. To prove (or disprove) the idea that computers can be creative, or create art.
  2. To write statements directing the creation of geometric shapes on the form.
  3. To write statements that pass parameters in a procedure call.
  4. To write statements allowing the program to decide the location and color of the shapes in the form.
  5. To use the Randomize statement and the Rnd function to generate a random number for use as a coordinate or color value.

 

TO DO: 

  1. Create a folder named Lab12 on the C drive.

 

  1. Open up a new Standard EXE project in Visual Basic.

  2. Name your Project Lab12

  3. Name your Form frmLab12

  4. Place a label in the lower middle of your form with the following caption:

“Click on the Form to see something cool!”

         
          Name the label lblInstructions.  Change the color and font of the label to something pleasing

 

  1. Declare global variables in the General Declarations area of the code window that will hold the values for the number of times someone has:

·         Clicked the form
Dim clickcount as Integer
 

  1. Declare local variable in the form click event procedure that will hold values for:

·         The x coordinate for a line, box or circle
Dim xCoord as Integer

·         The y coordinate for a line, box or circle
Dim yCoord as Integer

·         The radius of a circle
Dim rad as Integer

·         The number of counts used as your program goes through a loop
Dim loopCount as Integer

 

Use the declared variables above to hold values when you want to have the program draw a line, a box or a circle.

 

  1. Initialize clickcount to 0 in the Form load event.  This allows the count to be reset each time the program is started.


clickcount = 0

  1. In the Form_Click event, start tracking the number of times a user clicks on the form by incrementing the clickcount by 1 each time the click event is triggered.

 

clickcount = clickcount + 1

 

  1. Write a condition statement that does the following:

·         If the clickcount is 1, then make the label invisible.

·         Make the BackColor of the form RGB(171, 25, 191)

·         Maximize the WindowState of the form

 

Your statement should look like this:

         
              If clickcount = 1 Then

                        lblInstructions.Visible = False

                        frmLab12.BackColor = RGB(171, 25, 191)

                        frmLab12.WindowState = 2           ‘WindowState is a Form property

‘a WindowState of 0 is Normal,

          End If                                                 ‘1 is Minimized and 2 is Maximized

 

  1. Run your program.

  2. Save your project and form to the Lab12 folder.

  3. Play around with changing the RGB color code of the form to different numbers.

  4. Now you will start to create shapes that are filled with different colors.  There is a property on the Form that has to be changed to allow this.  Go to the properties window, change the FillStyle property of the Form to 0 (Solid).

 

Adding Shapes

  1. Go back to the Form_Click event of your program.  Add another condition into your current if/then statement that does the following:

·         If the clickcount is 2, not 1, make the form FillColor RGB(0, 255, 0)

·         lass=SpellE>yCoord variables the value of 1000

·         Create a Box that goes from the xCoord and yCoord variables to the ScaleWidth – xCoord and the ScaleHeight – yCoord.

·         Make the outline of the Box the color red using  RGB values

 

Your statement should now look like this:

         
              If clickcount = 1 Then

                   lblInstructions.Visible = False

                   frmLab12.BackColor = RGB(171, 25, 191)

                             frmLab12.WindowState = 2

                   ElseIf clickcount = 2 Then

                                    FillColor = RGB(0, 255, 0)

                                    xCoord = 1000

                                    yCoord = 1000

frmLab12.Line (xCoord, yCoord)-(ScaleWidth - xCoord, _

    ScaleHeight - yCoord), RGB(255, 0, 0), B     

‘ScaleWidth and ScaleHeight are variables

‘that always hold the value of form’s current

‘Width and Height in twips   

End If 

  1. Run your program.  What happens?

  2. Save your project

  3. Add a circle into the condition for when the clickcount = 2. (Right after you create the box) 

·         Make the fill color anything you want, but give the circle a radius of at least 500.

·         Use your lecture notes and the Project 3 Appendix to figure out the proper syntax.

 

Procedures-Parameter and Arguments

  1. In your form click event, add yet another condition that does the following:

·         If the clickcount is 3, not 2 or 1, then start a loop using the Do While iteration statement.

·         Use the loopCount variable to keep track of the number of times your program does the loop.

·         Set loopCount to 0

·         While the loopCount is less than 10:

1.      Increment loopCount by 1

2.      Increment xCoord by 500

3.      Increment yCoord by 500

4.      Use the new xCoord and yCoord variable values as arguments and pass them to a procedure called Boxes.

 

·         Create a procedure with the name Boxes at the bottom of your code window.

1.      Set the parameters as integers and name them x and y

2.      Inside the procedure, change the fill color property to Red using RGB

3.      Create a Box that goes from the x and y coordinates to x + 500 and y + 500.

4.      Make the outline color Red as well using RGB

Your additional statement inside the IF/Then of the Form_Click event should look like this:

 

                   ElseIf clickcount = 3 Then

                                    loopCount = 0

   

                                    Do While loopCount < 10

                                    loopCount = loopCount + 1

                                    xCoord = xCoord + 500

                                    yCoord = yCoord + 500

                                   

Call Boxes(xCoord, yCoord)

 

                                    Loop

           

 

Your Boxes procedure should look like this:

 

                   Private Sub Boxes(x As Integer, y As Integer)

frmLab12.FillColor = RGB(255, 0, 0)

frmLab12.Line (x, y)-(x + 1000, y + 1000), RGB(255, 0, 0), B

 

End Sub

 

  1. Run your program.  What happens?

    All the boxes appear at once.  The loop is moving so fast that the naked eye cannot perceive the iteration. To slow down the pace of the loop, we can do one of two things.  The first is to put a loop inside of the first loop.  To do this we will need another iteration variable whose value we can control separately from loopCount. 

 

  1. Declare another variable called loopcount2 as integer in the form click event:

Dim loopcount2 As Integer 

  1. Just after calling the Boxes procedure inside the first loop, initialize loopcount2 to 0 and add a second loop structure:

Do While loopCount < 10

                             loopCount = loopCount + 1

                             xCoord = xCoord + 500

                             yCoord = yCoord + 500

                            

Call Boxes(xCoord, yCoord)

          loopcount2 = 0

            Do While loopcount2 < 32000

                        lblInstructions.Visible = False

                        loopcount2= loopcount2 + 1

            Loop

                             Loop

 

  1. It is also easy to repeat certain instructions over and over in VB without using a looping statement.  What would happen if we used the timer control to call another procedure at regular intervals?

 

Using the Timer Control

  1. Place a timer control on your form.  Name it tmrTime.  Leave the interval at 0.

  2. Write a second procedure.  This procedure will create Circles instead of Boxes.  Declare it using the following information:

·         Name:                Circles

·         Parameters:        x As Integer, y As Integer, r As Integer

·         Definition:           frmLab12.FillColor = RGB(119, 14, 180)

frmLab12.Circle (x, y), r, RGB(119, 14, 180)

 

 

  1. Add a 4th condition to check to your If/Then statement that does the following:

 

·         If the clickcount is 4, not 3, 2 or 1 then set the tmrTime interval to 500. 

·         Go to the tmrTime object and select the Timer procedure from the drop down menus.

·         Declare three local variables, center, xPos and yPos as integers 

·         Initialize center to 500

·         Randomly generate a number between zero and the ScaleWidth and assign that to xPos.

·         Randomly generate a number between zero and ScaleHeight and assign that to yPos.

·         Inside the Timer event, we only want the event to “fire” if the user has clicked 4 times.  Write a condition that checks to see if clickcount is 4.

·         If it is, then on each triggering of the timer event (every 500 milliseconds), call the procedure Circles with xPos, yPos and center as parameters.

 

Your 4th condition to check inside the If/Then of the Form_Click event should look like this:

 

                   ElseIf clickcount = 4 Then

 

                                    tmrTime.Interval = 500

                        End If      

 

The Timer event for the tmrTime control should look like this:

 

                   Private Sub tmrTime_Timer()

 

Dim center As Integer

Dim xPos As Integer

Dim yPos As Integer

 

        If clickcount = 4 Then

           

            center = 500

            xPos = Int(Rnd * ScaleWidth)

            yPos = Int(Rnd * ScaleHeight)

            Call Circles(xPos, yPos, center)

 

            End If

 

End Sub

 

  1. Run your program.  What happens on the 4th click?  Tres cool, no?

    For as long as clickcount is 4, the tmrTime_Timer event will fire with an interval of 500 milliseconds and the statements inside of the If/Then will be executed.  Those statements randomly generate a new value for the xPos and yPos variables using the values set inside the VB named ScaleWidth and ScaleHeight variables. A procedure named Circles is then called and xPos, yPos and center are sent as actual parameters.

    Notice that this use of a procedure is to create and effect rather than return a result.

  2. Add one last condition to the form click event.  If someone clicks a 5th time

·         Set the tmrTime interval to 0

·         Use the Cls method to clear your form of all objects

·         Make the lblInstructions caption visible

·         Change the caption to “Thank you for clicking!”

 

Your last condition should look like this:

 

ElseIf clickcount = 5 Then

 

      tmrTime.Interval = 0

                  frmLab12.Cls

                  lblInstructions.Visible = True

                  lblInstructions.Caption = "Thank you for clicking!"

   

End If

 

  1. Run your program.  What happens on the 5th click? 

 

  1. In your form click event you already have a great deal of code to help create shapes on the screen when the program runs.  Let’s add a command button and use the click event associated with it to create other graphics.

  2. Add a command button to the upper left corner of your form:

·         Name the button cmdShrinkBox

·         Make the Caption “I’m Shrinking!”

·         Set the visibility to false

  1. We will have the button appear for someone to use when they have clicked 5 times (when the “Thanks for Clicking” label reappears), so:

·         Inside of the condition If clickcount = 5, make the cmdShrinkBox visible.
 

cmdShrinkBox.Visible = True

  1. Run your program. 

 

  1. Notice when you get to the fifth click, the label appears and so does the button.

  2. Click the button.  Nothing happens.  We need to add statements to the click event of cmdShrinkBox so that it appears as though a box is slowing shrinking down to nothing.

  3. First, save your project and form.

  4. Declare 4 local variables as integers inside of the cmdShrinkBox click event.  Call them x1, y1, x2 and y2. 

·         Assign x1 and y1 the value of 3000.

·         Assign x2 and y2 the value of 8000.

Private Sub cmdShrinkBox_Click()

Dim x1 As Integer, y1 As Integer

Dim x2 As Integer, y2 As Integer

x1 = 3000

y1 = 3000

x2 = 8000

y2 = 8000

 

End Sub

  1. Create an unfilled box that starts at x1 and y1 and goes to x2 and y2.  Make the box outline color Black using RGB colors.

    **You aren’t given the code for this.  Try to figure it out using the other boxes you have created as a template for creating this one. To make a box look unfilled, you have to change the FillStyle to transparent.**

  2. Run your program. Do you get a large box with a black outline?

 

  1. The next bit is a little tricky.  The box is created, but we want it to appear to shrink.

    The easiest way to make the box look smaller is to create a loop.  Each time through the loop, the box is redrawn, displayed then cleared so that in the next loop another box can be drawn on a clean form. 

    But the box is getting smaller, right?  So each time we draw it, the coordinates have to change a little. 

 

·         The beginning points (x1 and y1) should increment.

·         The end points (x2 and y2) should decrement.

·         Since one end of the box in increasing and one is decreasing, the loop should run until they meet.  That is, it should run for as long as x1 does not equal x2 (or as long as y1 does not equal y2).  You can use either one for the iteration.

·         Draw the new box with the new coordinates

·         Clear the box so that the loop can run again and it looks as though there is movement

Your loop should look like this:

Do While x1 <> x2         ‘run the loop until x1 matches x2, then stop

     

        x1 = x1 + 1                   ‘increment x1 and y1

        y1 = y1 + 1                   ‘by one each time through

        x2 = x2 – 1                    ‘decrement x2 and y2

        y2 = y2 – 1                    ‘by one each time through

       

        Line (x1, y1)-(x2, y2), RGB(0, 0, 0), B

        Cls                       ‘This clears the form of any objects currently on it

    Loop

  1. Run your program. Do you get a large box with a black outline that slowly shrinks?

  2. Save your program

  3. How would you add color to your boxes?  Make the boxes appear blue as you do the loop.

 

Using the RANDOMIZE Statement

The Randomize statement and the Rnd function are extremely useful (especially in this project) when you want to randomly generate a number. 

 

You might want that number for Box coordinates, Circle coordinates, the radius of a circle, Fill styles (they go from 0 to 7), color, etc.

 

  1. Any time you plan on utilizing the Rnd function in a program, you should initialize the random number generator.  Do this by placing the statement Randomize inside of the form load event (remember you are already initializing clickcount here, so add this statement right after it):

    Randomize

  2. Now, let’s randomly generate a box color for our shrinking boxes button.  Since the colors can range from 0 to 255, we want to randomly generate a number from 0 to 255.

         Go into the cmdShrinkBox click event.

·         Inside the loop, change the fill style to 0 so there is a solid color allowed for the boxes

·         Make the Fill color a randomly generated number between 0 and 255 (there are 256 possibilities) and make it change to display as an integer.

 

Your loop should now look like:

Do While x1 <> x2

       

     FillStyle = 0

      FillColor = RGB(Int(Rnd() * 256), Int(Rnd() * 256), Int(Rnd() * 256))                                                                         ‘generates a random number, not

                                                                        ‘exceeding 255 for red, green and blue!

      

          x1 = x1 + 1

          y1 = y1 + 1

          x2 = x2 - 1

          y2 = y2 - 1

       

          Line (x1, y1)-(x2, y2), RGB(0, 0, 0), B

          Cls

Loop

  1. Run your program.  When you get to the button and click it, is a box created that slowly shrinks and changes color?

  2. Experiment with different colors, coordinates. 

 

·         Can you create a series of statements that will slowly increase the size of a box?

·         Can you generate a circle that gets smaller and then bigger?

 

Try to answer these questions in your program outside of lab to give you practice for your project.

         

Going back through what you created for Lab 11 and 12, try adding in more of:

·         The use of the timer (or add additional timers)

·         Do while loops

·         Procedures that when called make boxes and circles

·         Randomly created boxes, circles, colors, etc.

 

Use these to labs and the lecture content to help you create a cool, innovative program that will astound your friends!

 

  1. Save your project to disk or FTP it to your Dante account so you can use it as reference for your project.

 

  1. For your project, practice changing the location of the Box and Circle coordinates.  Use the Timer event and loops within loops to control the flow of shape creation.  Use what you learned about Randomization in lecture and in your reading to randomly place shapes on your form and to randomly choose color.

  2. Save your project and FTP the entire Lab12 folder it to your Dante account.  Use it as a reference for Project 3.  Do not turn it in as Project 3!!!!