Small Basic > Curriculum > Online > Lesson 2.3: Exploring Shapes



Estimated time to complete this lesson: 1 hours

Exploring Shapes

In this lesson, you will learn about:

  • Creating shapes by using the Shapes object.
  • Using various operations of the Shapes object.
  • Animating shapes on the screen.

Introduction to the Shapes Object

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.

Shapes

You can color your shapes by using specific properties of the GraphicsWindow object.

Operations of the Shapes 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:

  • AddImage
  • AddRectangle
  • HideShape
  • ShowShape
  • SetOpacity
  • GetOpacity
  • Move
  • Animate
  • Zoom

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:

Actions on a rectangle

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

 

This is the output you will see:

Zoom

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.

rectangle = Shapes.AddRectangle(150, 100)

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 Run button on the Toolbar.

This is the output you will see:

Output Output

 

You can create shapes in the graphics window by using the Shapes object. In this example:

  1. You use the PenWidth, PenColor, and BrushColor properties of the GraphicsWindow object to set the color and width of the pen that you use to draw the outline of the shape and the color of the brush that you use to color inside the shape.
  2. To draw two rectangles of the same size, you use the AddRectangle operation of the Shapes object, and you specify the width and height of the rectangle as parameters.
  3. To set the location of the rectangles in the graphics window, you use the Move operation, and you specify the x-coordinate and y-coordinate of the location to which you want the rectangle to move.
  4. To set the opacity level of the rectangle, you use the SetOpacity operation, and you specify the name of the shape and its opacity level as parameters.
  5. To zoom a rectangle, you use the Zoom operation, and you specify the name of the rectangle and the zoom level on the x-axis and y-axis, respectively.

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.

Animating a Shape

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

 

This is the output you will see:

AddEllipse operation

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.

Rotating a Shape

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

 

Click the Run button on the Toolbar.

This is the output you will see:

Shape Rotating

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.

Fun with Shapes

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

 

This is the output you will see:

Randomized Rectangle

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.

Let’s Summarize…

Congratulations!

Now you know how to:

  • Create shapes by using the Shapes object.
  • Use various operations of the Shapesobject.
  • Animate the shapes on the screen.

Show What You Know

Write a program to display a graphics window, and perform the following steps:

  • Add a line and a circle to the window.
  • Set the color, size, and location of the shapes.
  • Animate the circle so that it moves on top of the line from the left side to the right side of the graphics window.

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

Next Lesson

PowerPoint Downloads