Small Basic > Curriculum > Online > Lesson 2.3: Exploring Shapes
In this lesson, you will learn about:
So far, you have learned how to draw patterns in Small Basic by using the GraphicsWindow and the Turtle objects.
This lesson introduces you to the Shapes object that Small Basic offers! By using this object, you can draw, rotate, and animate shapes in the graphics window.
You can color your shapes by using specific properties of the GraphicsWindow object.
By using certain operations of the Shapes object, you can give a vibrant look and feel to the shapes that you create. These operations include:
Let’s look at an example to demonstrate these operations…
rectangle = Shapes.AddRectangle(400, 300) Shapes.Move(rectangle, 100, 50) For i = 1 To 10 Shapes.ShowShape(rectangle) Program.Delay(1000) Shapes.HideShape(rectangle) Shapes.SetOpacity(rectangle, 100 - i * 10) Program.Delay(800) EndFor
This is the output you will see:
In this example, we have used the ShowShape, HideShape, and SetOpacity operations of the Shapes object to perform a variety of actions on a rectangle.
As this example shows, you can insert a shape in the graphics window by using the Shapes object. To insert a rectangle, you can use the AddRectangle operation. Then you can perform actions on the rectangle by using various operations of the Shapes object. For example, you can show and hide the rectangle by using the ShowShape and HideShape operations, and you can change the rectangle’s opacity level by using the SetOpacity operation.
To verify the output of your program, click Run on the toolbar, or press F5 on the keyboard. A rectangle shape should appear in the graphics window and then disappear after one second. When the rectangle reappears, its opacity level is reduced. This process continues until the rectangle is completely transparent.
Let’s examine these operations in detail…
AddRectangle—You can define a rectangle by using this operation and specifying the name, width, and height of the rectangle.
rectangle = Shapes.AddRectangle(150, 100)
HideShape—You can hide a shape by using this operation and specifying the name of the shape.
ShowShape—You can display a shape by using this operation and specifying the name of the shape.
Shapes.HideShape(rectangle) Shapes.ShowShape(rectangle)
SetOpacity—You can set the opacity of a shape by using this operation and specifying the name of the shape and an opacity level from 0 to 100.
GetOpacity—You can return the opacity of a shape by using this operation and specifying the name of the shape.
Shapes.SetOpacity(rectangle, 50) Shapes.GetOpacity(rectangle)
To make a shape completely opaque, you specify the parameter of the SetOpacity operation as 100.
To make a shape completely transparent, you specify the parameter of the SetOpacity operation as 0.
Let’s look at another example to demonstrate more operations…
imagepath = "C:\Small Basic\Water lilies.jpg" image=Shapes.AddImage(imagepath) Shapes.Move(image, 5, 5) Shapes.Animate(image, 20, 20, 1000) Shapes.Zoom(image, 0.1, 0.1) For i=0 To 1 Step 0.1 Program.Delay(1000) Shapes.Zoom(image, 0.1 + i, 0.1 + i) EndFor
In this example, we used the AddImage operation to display an image. Then we used the Move, Animate, and Zoom operations to perform various actions on the image.
You can also display images in the graphics window by using the Shapes object in Small Basic. To display an image, you can use the AddImage operation of the Shapes object. Then you can perform actions on the shape by using various operations of the Shapes object. For example, to move a shape on the screen, you can use Move operation. To animate a shape on the screen, you can use the Animate operation. Similarly, to zoom a shape on the screen, you can use the Zoom operation.
To check the output of your program, click Run on the toolbar, or press F5 on the keyboard. An image appears in the graphics window. The image is then moved to a different location and animated. Finally, the image is zoomed until it covers the entire screen.
AddRectangle - By using this operation, you can add a rectangle shape that will appear in the graphics window.
Move - By using this operation, you can move the shape to a different location in the graphics window. You must specify the name of the shape and the x-coordinate and y-coordinate of the new location.
Shapes.Move(rectangle, 125, 125)
Animate - This operation animates a shape as it moves to a different position. You must specify the name of the shape, the x-coordinate and y-coordinate of the new position, and the duration of the animation.
Shapes.Animate(rectangle, 30 * I, 150, 5000)
Zoom - The Zoom operation enlarges or shrinks a shape to a particular zoom level. You must specify the name of the shape and a zoom level between 0.1 and 20.
Shapes.Zoom(rectangle, 2, 2).
You can use the Shapes object to add different types of shapes in your program.
You can then perform various operations on the Shapes object, such as moving the shape, setting its opacity, or adding a zoom effect. Let’s look at an example…
GraphicsWindow.Title = "Exploring Shapes" GraphicsWindow.Height = 350 GraphicsWindow.Width = 450 GraphicsWindow.PenWidth = 2 GraphicsWindow.PenColor = "Black" GraphicsWindow.BrushColor = "Purple" rectangle1 = Shapes.AddRectangle(100, 100) Shapes.Move(rectangle1, 50, 80) rectangle2 = Shapes.AddRectangle(100, 100) Shapes.Move(rectangle2, 300, 80) For i = 1 To 4 Program.Delay(1000) Shapes.Zoom(rectangle1, i * 0.4, i * 0.4) Shapes.SetOpacity(rectangle1, i * 5) EndFor
Click the button on the Toolbar.
You can create shapes in the graphics window by using the Shapes object. In this example:
To verify the output of your program, click Run on the toolbar, or press F5 on the keyboard. Notice the difference between the two rectangles after you use operations of the Shapes object on one of the rectangles.
Let’s see an example of how to animate a shape by using the Shapes object.
In this example, you animate a shape from its original position to a different position and back to its original position in the graphics window.
GraphicsWindow.Title = "Exploring Shapes" shape1 = Shapes.AddRectangle(100, 100) Sball = Shapes.AddEllipse(100, 100) Shapes.Move(Sball, 0, 340) x = 450 GraphicsWindow.DrawRectangle(550, 0, 80, 450) GraphicsWindow.BrushColor = "Purple" GraphicsWindow.FillRectangle(550, 0, 80, 450) Shapes.Animate(Sball, x, 40, 490) Program.Delay(500) If (Shapes.GetLeft(Sball) = x) Then Shapes.Animate(Sball, 0, 340, 500) EndIf
You can animate shapes in Small Basic by using the Animate operation. For example, you might want to move a ball from one position to another in the graphics window. First, you create the ball shape by using the AddEllipse operation, and you set the original position of the ball in the graphics window by using the Move operation. Next, you define a variable with a new x-coordinate. You use this variable when you animate the ball shape by using the Animate operation. You also create a rectangle shape against which the ball will be animated. You define a simple conditional statement to animate the ball against the rectangle.
To run your program, click Run on the toolbar, or press F5 on the keyboard. When your program runs, the ball is animated against the rectangle.
Let’s explore some more operations of the Shapes object by writing a program to rotate a shape.
In this example, you use a For loop to rotate a shape in its original position in the graphics window.
GraphicsWindow.Title = "Exploring Shapes" GraphicsWindow.BrushColor = "Purple" rotateshape = Shapes.AddRectangle(150, 100) Shapes.Move(rotateshape, 200, 150) For i = 0 To 12 Shapes.Rotate(rotateshape, 30 * i) Program.Delay(1000) EndFor
When you run the program, the rectangle rotates in the graphics window.
You can rotate shapes by using conditions and loops for your shapes. For example, you might want to rotate a rectangle on the graphics window in its original position. First, you create the shape by using the AddRectangle operation, and you set its original position in the graphics window by using the Move operation. Next, you use a For loop to rotate the shape in its original position in the graphics window to a different position.
To run your program, click Run on the toolbar, or press F5 on the keyboard. When your program runs, the rectangle rotates and moves from one position to another.
In addition to drawing shapes of different styles and sizes, you can also create unique shape designs by using conditions and loops in your program.
For example, you can use a For loop to create multiple rectangles in random colors…
GraphicsWindow.Title = "Exploring Shapes" GraphicsWindow.Height = 500 GraphicsWindow.Width = 700 For i = 0 To 20 GraphicsWindow.PenWidth = 0.5 GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor() rectangle1 = Shapes.AddRectangle(i * 20, i * 10) Shapes.Move(rectangle1, i * 10, i * 10) EndFor
In this example, you use a For loop to create multiple rectangles, positioned in ascending order by size. You also use the GetRandomColor operation of the GraphicsWindow object to randomize the color of the rectangles.
To run your program, click Run on the toolbar, or press F5 on the keyboard. When your program runs, a colorful display of rectangles appears.
Congratulations!
Now you know how to:
Write a program to display a graphics window, and perform the following steps:
To see the answers to these questions, go to the Answer Key page.
Next Lesson
Ed Price - MSFT edited Revision 2. Comment: PPD section
Fernando Lugão Veltem edited Revision 1. Comment: added toc