Small Basic Curriculum: Lesson 2.2: Turtle Graphics

Article
1/17/2024

Small Basic > Curriculum >** **Online > Lesson 2.2: Turtle Graphics

Estimated time to complete this lesson: 1 hours

Turtle Graphics

In this lesson, you will learn about:

Moving the Turtle on the screen by using the Turtle object.
Creating graphics by using the various properties and operations of the Turtle object.
Drawing colorful designs by using the Turtle object in For..EndFor loops.

Meet the Turtle

Meet your new friend in Small Basic?the Turtle! The Turtle helps you draw interesting graphics in the graphics window.

You can display the Turtle by using the Show operation.

Turtle.Show()

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

Click the http://msdn.microsoft.com/gg597501.5(en-us,MSDN.10).png button on the Toolbar.

The Turtle appears on the screen.

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

You have learned how to use the text window and the graphics window. You have also learned about various statements, properties, and operations. Now, meet your new friend in Small Basic?the Turtle. With its help, you can draw shapes and graphics on the screen. You can hide the Turtle by using the Hide operation.

Properties and Operations of the Turtle Object

You can give commands to the Turtle by using the Turtle object. In turn, the Turtle draws graphics on the screen. Let’s look at some of these functions…

To set the location of the Turtle on the screen, you use the X and Y properties of the Turtle object.

Turtle.X = 50
Turtle.Y = 200

To move the Turtle a particular distance in pixels, you use the Move operation. To move the Turtle to a particular location, you use the MoveTo operation and its parameters to specify the new location.

Turtle.Move(150)
Turtle.MoveTo(50, 200)

To draw with the Turtle, you use the PenDown operation. To stop drawing with the Turtle, you use the PenUp operation.

Turtle.PenUp()
Turtle.PenDown()

To specify the location at which the Turtle appears or a location to which the Turtle moves, you include the x-coordinate and the y-coordinate of the location that you want.

Let’s look at more functions…

You can set the speed of the Turtle by using the Speed property and specifying a value between 1 and 10. (To see the Turtle’s fastest speed, specify 10.)

Turtle.Speed = 8

You can rotate the Turtle by using the Turn operation and specifying an angle in degrees. As an alternative, you can rotate the Turtle 90 degrees by using the TurnRight or TurnLeft operations, respectively.

Turtle.Turn(90)
Turtle.TurnLeft()
Turtle.TurnRight()

You can turn the Turtle to a specific angle of rotation by using the Angle property and specifying the angle of rotation in degrees. By default, the Turtle faces the top of the screen, which is an angle of 0 degrees.

Turtle.Angle = 90

You can rotate the Turtle to face a particular direction by specifying a value for the Angle property, by using the Turn operation, or by using the TurnRight or TurnLeft operation. For example, you can rotate the Turtle to face the left side of the window by using any of the following strategies:

You can specify the value of the Angle property as 270.
You can use the Turn operation and specify the following values for its parameter:
- 270 if the Turtle is already facing the top of the window
- 180 if the Turtle is already facing the right side of the window
- 90 if the Turtle is already facing the bottom of the window

If you use this operation, the Turtle always rotates to the right (in a clockwise direction).

--You can use the TurnRight operation three times if the Turtle is facing the top of the window, twice if the Turtle is facing the right side of the window, or once if the Turtle is facing the bottom of the window.

--You can use the TurnLeft operation once if the Turtle is facing the top of the window, twice if the Turtle is facing the right side of the window, or three times if the Turtle is facing the bottom of the window.

Making the Turtle Move

Let’s draw a simple triangle by using the Turtle.

GraphicsWindow.Width = 250
GraphicsWindow.Height = 250
GraphicsWindow.Title = "Turtle Graphics"
Turtle.X = 50
Turtle.Y = 200
Turtle.Speed = 5
Turtle.Move(150)
Turtle.Turn(90)
Turtle.Move(150)
Turtle.MoveTo(50, 200)
Turtle.Angle = 45

Click the http://msdn.microsoft.com/gg597501.5(en-us,MSDN.10).png button on the Toolbar.

This is the output you will see:

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

In this example, the Turtle draws a simple triangle on the screen. Let’s understand the code in detail:

In the first three lines of code, you set the width, height, and title of the graphics window.
In the next two lines of code, you make the Turtle appear at a specific location in the graphics window. To specify the location, you set the value of the X property to a particular number of pixels from the left side of the graphics window, and you set the Y property to a particular number of pixels from the top of the graphics window.
You then set the speed at which the Turtle moves by specifying a value between 1 and 10 (inclusive) for the Speed property. To make the Turtle move at its fastest speed, specify 10. To make the Turtle move at its slowest speed, specify 1.
To make the Turtle draw the vertical side of the triangle, you use the Move operation to instruct the Turtle to draw 150 pixels from its original location and in its default direction (up). By default, the Turtle draws when you use the Move operation. If you want the Turtle to move without drawing, you use the PenUp operation.
To make the Turtle draw the horizontal side of the triangle, you first use the Turn operation to rotate the Turtle 90 degrees so that it faces the right side of the window. Then you use the Move operation to instruct the Turtle to draw 150 pixels from its new location and in its new direction.
To make the Turtle draw the diagonal side of the triangle, you use the MoveTo operation and specify a location in the window. To specify the location, you set the value of the X property to a particular number of pixels from the left side of the graphics window, and you set the value of the Y property to a particular number of pixels from the top of the graphics window.
Now that the triangle is complete, you rotate the Turtle by setting the value of the Angle property to 45 degrees.

Having Fun with the Turtle

Now that you know how to communicate with the Turtle, let’s have some fun with it.

Let’s use the For loop and instruct the Turtle to move and turn at specific distances and angles, creating a unique graphical design in the process.

GraphicsWindow.Title = "Turtle Graphics"
GraphicsWindow.Height = 320
GraphicsWindow.Width = 300
GraphicsWindow.PenColor = "Purple"
Turtle.Show()
Turtle.Speed = 8
Turtle.X = 150
Turtle.Y = 150
For i = 0  To 200 Step 5  
Turtle.Move(i)  
Turtle.Turn(90)
EndFor

You can add color to your design by specifying a value for the PenColor property of the GraphicsWindow object.

This is the output you will see:

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

When you click Run on the toolbar or press F5 on the keyboard, the Turtle draws a colored, square design in the graphics window.

You can also draw multiple, colorful designs by using the Turtle. For example, this program produces different shapes in a variety of sizes and colors.

GraphicsWindow.Title = "Turtle Graphics"
GraphicsWindow.Height = 300
GraphicsWindow.Width = 500
Turtle.Show()
Turtle.Speed = 10
Turtle.X = 150
Turtle.Y = 150
For i = 0  To 200 Step 5 
GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor() 
Turtle.Move(i)  
Turtle.Turn(90)
EndFor
Turtle.PenUp()
Turtle.Move(260)
Turtle.Turn(60)
Turtle.Move(120)
Turtle.PenDown()
For i = 0  To 200 Step 5  
GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor()
Turtle.Move(i)  
Turtle.Turn(120)
EndFor

This is the output you will see:

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

In the previous example, we drew one set of nested squares of the same color. However, you can draw more than one shape in the same graphics window by using the PenUp and PenDown operations. You can also create nested versions of different shapes, such as triangles, by assigning a For loop and changing the distance and the angles. In addition, you can also create shapes in a variety of colors by using the GetRandomColor operation to set the value of the PenColor property.

When you click Run on the toolbar or press F5 on the keyboard, the Turtle draws two colorful designs in the graphics window.

Let’s Summarize…

Congratulations!

Now you know how to:

Make the Turtle appear, move, and stop moving.
Create shapes by using various properties and operations of the Turtle object.
Draw colorful designs by using the Turtleobject in For..EndFor loops.

Show What You Know

Perform the following steps to draw colorful graphics by using the Turtle:

Display a graphics window that is 400 pixels high and 400 pixels wide.
Draw two separate, colorful star-shaped graphics by using the Turtle.

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

Next Lesson

Share via

Small Basic Curriculum: Lesson 2.2: Turtle Graphics

Turtle Graphics

Meet the Turtle

Properties and Operations of the Turtle Object

Making the Turtle Move

Having Fun with the Turtle

Let’s Summarize…

Show What You Know

PowerPoint Downloads

Additional resources