Small Basic Curriculum: Lesson 2.1: Graphics Window

  • Article

Small Basic > Curriculum >** **Online > Lesson 2.1: Graphics Window

Estimated time to complete this lesson: 1 hours

Graphics Window

In this lesson, you will learn about:

  • Statements that use the GraphicsWindow object.
  • Properties of the GraphicsWindow object.
  • Operations of the GraphicsWindow object.

Introducing the Graphics Window

So far, you have used the text window to understand the fundamentals of programming using Small Basic.

In this lesson, you discover some exciting graphic capabilities that Small Basic offers.

http://msdn.microsoft.com/gg701784.Graphics_Window(en-us,MSDN.10).png

You start with a graphics window that you can display by using the GraphicsWindow object.

Properties of the Graphics Window

You can display a graphics window and draw colorful shapes in it if you use the Show operation of the GraphicsWindow object.

http://msdn.microsoft.com/gg701784.Picture1(en-us,MSDN.10).png

You can also specify properties of the graphics window, such as its title, height, width, and background color.

Let’s see how to use different properties of the GraphicsWindow object in a program…

GraphicsWindow.Show()
GraphicsWindow.Title = "A Graphics Window"
GraphicsWindow.Height = 300
GraphicsWindow.Width = 350
GraphicsWindow.BackgroundColor = "Cyan"

This is the output you will see:

http://msdn.microsoft.com/gg701784.Picture2(en-us,MSDN.10).png

You can display the graphics window by typing the statement GraphicsWindow.Show() in the editor window.

Similarly, you can hide the graphics window by using the GraphicsWindow.Hide() statement.

You can also modify the look and feel of the graphics window by specifying a range of properties. For example, you can set its title by using the Title property of the GraphicsWindow object. Similarly, you can modify the height, width, and background color of the graphics window by specifying the Height, Width, and BackgroundColor properties, respectively.

When you run the program below, a graphics window appears with the properties that you specified, instead of the black text window.

You can enhance the shapes that you create if you specify certain properties of the GraphicsWindow object. These properties include the following:

PenColor?By specifying this property, you can draw shapes whose borders are whatever colors you choose.

PenWidth?By specifying this property,you can draw shapes whose borders are whatever thickness you choose.

BrushColor?By specifying this property, you can fill the shapes that you draw with whatever colors you choose.

GraphicsWindow.PenColor = "Purple"
GraphicsWindow.PenWidth = 3
GraphicsWindow.BrushColor = "Green"

MouseX?By specifying this property, you can find the horizontal position of the mouse.

MouseY?By specifying this property, you can find the vertical position of the mouse.

x = GraphicsWindow.MouseX
y = GraphicsWindow.MouseY

You can use some properties and operations of the GraphicsWindow object only for displaying shapes, but you can use other properties (such as MouseX and MouseY) when you work with mouse and keyboard actions in your program. You will learn more about these properties, along with events and interactivity in Small Basic, later in the curriculum.

Operations on the Graphics Window

You can create colorful shapes in your program by using operations and their properties.

This list shows some of the operations that you can use for the GraphicsWindow object:

  • DrawRectangle
  • DrawEllipse
  • DrawLine
  • FillRectangle
  • GetRandomColor
  • SetPixel
  • ShowMessage
  • DrawResizedImage

Exploring the Graphics Window

By writing a program to create shapes, you can explore the different properties and operations of the GraphicsWindow object.

GraphicsWindow.Title = "Graphics Window"
GraphicsWindow.Height = 300
GraphicsWindow.Width = 300
GraphicsWindow.PenColor = "Black"
GraphicsWindow.PenWidth = 3
GraphicsWindow.DrawRectangle(70, 60, 100, 150)
GraphicsWindow.FillRectangle(70, 60, 100, 150)
GraphicsWindow.BrushColor = "Green"
GraphicsWindow.DrawEllipse(200, 150, 50, 100)
GraphicsWindow.FillEllipse(200, 150, 50, 100)
GraphicsWindow.PenColor = "Gold"
GraphicsWindow.DrawLine(10, 200, 250, 200)

This is the output you will see:

http://msdn.microsoft.com/gg701784.Picture3(en-us,MSDN.10).png

In this example:

  1. You start by setting the title, the width, and the height of the graphics window.
    • When you set the width and the height, make sure to specify an area that is large enough to hold all of the shapes that you want to draw.
  2. You then use the PenColor and PenWidth properties to specify the border color and border thickness of the first shape that you want to draw.
    • You can also use these properties later to specify a different border color and border thickness for your next shape.
  3. To draw a rectangle, you use the DrawRectangle operation, and you specify its parameters, which are values that determine how the rectangle looks.
    • These parameters include not only the x-coordinate and the y-coordinate of the rectangle, which determine the location of its upper-left corner, but also the width and the height of the rectangle, which determine its size and proportions.
  4. To fill the rectangle with a color, you use the FillRectangle operation, and you specify the same parameters as you specified for the DrawRectangle operation.
    • If you do not specify a fill color with the BrushColor property, the shape is filled with slate blue, as the output shows.
  5. To draw an ellipse and fill it with a different color, you specify the color by using the BrushColor property, draw the ellipse by using the DrawEllipse operation, and fill the ellipse with the FillEllipse operation.
    • Just as you did with the DrawRectangle operation, you specify parameters that determine the location, size, and shape of the ellipse. For example, you can draw a circle by specifying the same value for the width and height of the ellipse. You should specify the same values for the parameters of the FillEllipse operation as you did for the DrawEllipse operation.
  6. To draw a line, you specify the color of the line by using the PenColor property, and you specify the location, length, and angle of the line by using the DrawLine operation and its parameters.
    • To specify the parameters of the DrawLine operation, you must include the x-coordinate and the y-coordinate of one end of the line and the x-coordinate and the y-coordinate of the other end of the line.

Using Colors in the Graphics Window

You can use a range of colors in the graphics window to create colorful shapes. Let’s look at a few of the colors that Small Basic supports.

http://msdn.microsoft.com/gg701784.11(en-us,MSDN.10).png

You can also choose from a variety of other colors that include pink, orange, yellow, purple, brown, white, and gray.

You can choose from a variety of colorsthat Small Basic supports. In this slide, the colors are categorized by their base hue. In your code, you can specify the color by either its name or its color code, which is a hexadecimal (base 16) number.

Exploring the Graphics Window

Let’s look at an example that explores more properties and operations of the GraphicsWindow object.

GraphicsWindow.Title = "Graphics Window"
GraphicsWindow.BackgroundColor = "White"
GraphicsWindow.Width = 325
GraphicsWindow.Height = 200
For i = 1 To 15
GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor()
GraphicsWindow.PenWidth = i
GraphicsWindow.DrawLine(i * 20, 20, i * 20, 180)
EndFor
GraphicsWindow.ShowMessage("Create wonderful designs and shapes in Small Basic", "Message")

This example displays a message box, which contains text and an OK button, and a graphics window, which contains a design like a barcode with random colors.

This is the output you will see:

http://msdn.microsoft.com/gg701784.Picture7(en-us,MSDN.10).png

http://msdn.microsoft.com/gg701784.Picture8(en-us,MSDN.10).png

Lines by using a For loop. You also randomize the colors of the lines by using the GetRandomColor operation. You can display a message box in your program by using the ShowMessage operation of the GraphicsWindow object. For this operation, you must provide only two parameters?the message that appears in the box and the title that appears at the top of the message box.

To run the program, you click Run on the toolbar, or you press F5 on the keyboard.

You can display images by using the DrawImage and DrawResizedImage operations of the GraphicsWindow object. Let’s look at an example…

GraphicsWindow.Title = "Graphics Window"
GraphicsWindow.Width = 800
GraphicsWindow.Height = 600
image1 = "C:\Small Basic\Sunset.jpg"
GraphicsWindow.DrawImage(image1, 0, 0)
image2 = "C:\Small Basic\Winter.jpg"
GraphicsWindow.DrawResizedImage(image2, 100, 100, 200, 200)

For the DrawImage operation, you specify only the file name of the image and the location on the screen where you want the image to appear.

For the DrawResizedImage operation, you specify the file name, the location on the screen, and the new size of the image.

This is the output you will see:

http://msdn.microsoft.com/gg701784.Picture9(en-us,MSDN.10).png

For both the DrawImage and DrawResizedImage operations, you must specify not only the file name of the image that you want to display but also its path. If the file is stored on your computer, you can specify the local path. If the file is stored on a website or network server, you can specify the URL or absolute path. The images in this example are provided with Small Basic and are stored on your computer.

You must also specify the location where the image or resized image will appear on the screen, and you specify that location by including the x-coordinate and the y-coordinate of the upper-left corner of the image. For the DrawResizedImage operation only, you specify how big you want the image to appear by including the new width and height of the image.

To run your program and display your images, you click Run on the toolbar, or you press F5 on the keyboard.

You can also use the SetPixel operation to draw a pixel in the graphics window at the location that you specify by including its x-coordinate and its y-coordinate.

Let’s Summarize…

Congratulations!

Now you know how to:

  • Show and hide the GraphicsWindow object.
  • Draw shapes and lines in the GraphicsWindow object.
  • Display images in the GraphicsWindow object.

Show What You Know

Explore your creativity by writing a program that displays a graphics window and performs the following steps:

  • Displays a graphics window that is 640 pixels tall and 800 pixels wide.
  • Shows two shapes that are of different colors and that partially overlap each other.
  • Shows multiple rectangles in random colors.
  • Shows a resized image at a suitable location on the screen.
  • Shows a message box that contains the message "Have a nice day!"

To see the answers to these questions, go to the Answer Key page.

Next Lesson

PowerPoint Downloads