BFOIT - Introduction to Computer Programming

Commanding a Turtle

Introduction

In this lesson, you will write your first computer programs using Logo.  After an introduction to the turtle and its environment, you will learn a few commands that the turtle understands.  Then it's up to you to instruct the turtle to draw a bunch of stuff.

An Overview of Logo and Turtle Graphics

Logo and "turtle graphics" go back quite a long time (1967).  They come from BBN and MIT's Artificial Intelligence Laboratory and the team of Danny Bobrow, Wally Feurzeig, Seymour Papert, and Cynthia Solomon.  Let's read Seymour's own description of it:

   ... "the turtle."  You can think of this as a drawing
   instrument... Imagine that you are looking at a computer
   screen.  On it you see a small turtle, which moves when
   you type commands in a language called "turtle talk,"
   leaving a line as it goes.  The command "Forward 50"
   causes the turtle to move straight ahead a certain
   distance. "Forward 100" will make it move in the same
   direction twice as far.  You soon get the idea that the
   numbers represent the distance it moves; they can be
   thought of as turtle steps.  Now if you want to make it
   go in a different direction, you give it a command like
   "Right 90."  It stays in the same place but turns on
   itself, facing east if it had previously been facing
   north.  With this knowledge you should easily be able to
   make it draw a box.  If that's easy for you, you can
   think about how to draw a circle, and if that's easy you
   can try a spiral.  Somewhere you will meet your level of
   difficulty, and when you do I'll give you this piece of
   advice: Put yourself in the place of the turtle. Imagine
   yourself moving in the outline of a box or a circle or
   a spiral or whatever it may be.
			

Figure 2.1 shows the original turtle from "Mindstorms," Seymour Papert, Basic Books, Inc., 1980.

Turtle Picture Figure 2.1

Wikipedia has a great entry for Logo.

jLogo is a version of Logo that is written in the Java programming language.  It is sort-of a subset of Berkeley Logo extended to have some traits of Java.  Java is just not a good language to start out with.   By starting out with jLogo, you will get a good feel for what programming is all about.  With this experience, transitioning to Java will not be too hard if this is what you want.

The Graphics Canvas - TurtleSpace

You are going to be learning how to write computer programs which draw things on a digital canvas.  This makes a lot of sense because most things that you interact with that contain a computer have a display of some sort or another.  Think about it; desktop and notebook computers have flat-panel displays, mobile phones have small displays, tablets - check, new cars have a couple, and now even the Nest Thermostat has a little display... They are everywhere around you.

You are going to be instructing an object, a turtle, to move around on a virtual canvas, drawing as it goes.  TG, the program you will use, has an area (a subwindow) called the graphics canvas.  Think of it as a two-dimensional world in which the turtle lives.

Here's what the turtle's world looks like.  The turtle starts out at the coordinates: 0,0 (the center of its world), heading North.  The turtle's world is a bit different from the Cartesian coordinate system that you may be familiar with (from your math classes).

TurtleWorld Figure 2.2

If you look closely, you'll notice that the origin for angle measurement is different.  In turtle graphics, 0 degrees is aligned with the positive Y axis instead of the positive X axis.  The other difference is that angle measurement in positive amounts measure clockwise rotation, the opposite direction that you've learned in math classes. 

Four Basic Commands

Table 2.1 shows a few Logo commands.

Command Inputs Description Example
FD
FORWARD
number Moves the turtle forward, in the direction it is facing, by the specified number of turtle steps. One turtle step is equal to one pixel. FD 100
BK
BACK
number Moves the turtle backward, i.e., exactly opposite to the direction that it's facing, by the specified number of turtle steps. One turtle step is equal to one pixel. BACK 150    
LT
LEFT
number Turns the turtle counterclockwise by the specified angle measured by a number of degrees (1/360 of a circle). LEFT 180
RT
RIGHT
number Turns the turtle clockwise by the specified angle, measured in degrees (1/360 of a circle). RT 90
Table 2.1

Notice that these commands must include a number, an input.  As an example, when you type in a forward command, you must specify some number of turtle steps.  This makes sense; if you didn't specify a distance, how would the turtle know when to stop?  If you forget to provide the number, you will be reminded, e.g., typing

   forward   

followed by the Enter key will result in a little pop-up box that contains:

Make sure to separate the command name and the input with at least one space.  Here's what you will see if you type

   right90   

followed by the Enter key.

Ok, enough of an introduction; it is time for you to try stuff out for yourself.

I've written a computer program that has been embedded in these web pages (it's a Java applet) which understands the Logo language.  I've named it TG, an acronym for Turtle Graphics.

If TG is behaving as it should, you will see two white areas divided horizontally by a gray namestripe with "CommandCenter" and "t1" in it.  This namestripe can be dragged up and down by positioning the mouse on it, holding the left button down, and moving the mouse up/down.  Move the namestripe if necessary so that there is approximately equal space above and below it.

The turtle (the hexagon with head, legs and a tail) is in the middle of the graphics canvas.  It is heading north.  It has its black pen down, ready to draw a line as it moves.  Click the left mouse button in the CommandCenter - an interaction area below the graphics canvas.  The namestripe will turn black and a cursor (small, thick, black vertical bar) to the right of a "? " prompt will start to blink indicating it is ready for you to type in instructions.

Your browser does not support Java applets. Click here for more information. TG Programming Environment Applet

To get started, try typing the following instructions which will draw a box:

   forward 100
   right 90
   forward 100 right 90
   fd 100 rt 90 fd 100 rt 90   

Exploration: Additional Commands

Table 2.2 shows a few more Logo commands.

Command Inputs Description
HOME   Moves the turtle to the center of the graphics canvas, i.e., coordinates 0,0.
PENUP
PU
  Lifts the turtle's pen up so that it leaves no trace when the turtle moves.
PENDOWN
PD
  Puts the turtle's pen down so that it leaves a trace when the turtle moves.
CG
CLEAN
  Erases (cleans) everything that the turtle has drawn on the graphics area (ClearGraphics). The turtle's state (position, heading, pen color, etc.) is not changed.
PLAYCLIP clipNumber A WAV (waveform) audio clip is played.
Number
Audio Clip
Number
Audio Clip
1 Cat Meow 5 Horse
2 Computer Beeps 6 Laser
3 Dog Bark 7 Pop
4 Fairy Dust 8 Zoop
SETBACKGROUND
SETBG
number Sets the color of the background of the graphics canvas.  Color is expressed as a number.
Number
Color
Number
Color
Number
Color
Number
Color
0
black
8
brown
16
navy
24
peru
1
blue
9
tan
17
skyblue
25
wheat
2
green
10
forest
18
lime
26
palegreen
3
cyan
11
aqua
19
steelblue
27
lightblue
4
red
12
salmon
20
chocolate
28
khaki
5
magenta
13
violet
21
purple
29
pink
6
yellow
14
orange
22
gold
30
lawngreen
7
white
15
grey
23
lightgrey
31
olive
SETC
SETPC
SETPENCOLOR
number Sets the turtle's pen color. Color is expressed as a number as with SETBACKGROUND.
SETPENSIZE
SETPS
number Sets the width of the turtle's pen, which determines the thickness (in pixels) of the trace it leaves, the line it draws.
SETSHAPE
SETSH
number Sets the turtle's image to a specified shape.  Shape is expressed as a number.  The built-in shapes are:
Number
Shape
Number
Shape
0
Turtle
4
Cross
1
Arrow
5
Triangle
2
Ball
6
Diamond
3
Box    
HT
HIDETURTLE
  Hides the turtle, makes it invisible.
ST
SHOWTURTLE
  Makes the turtle visible.
Table 2.2

Play around with all these commands.  You've seen how easy it is to draw a box; draw some additional boxes that are different colors, that are drawn with different sized pens.  Explore...

Practice: Draw Some Figures

"One must learn by doing the thing; for though you think you know it, you have no certainty, until you try." - Sophocles

Instruct the turtle to draw a triangle, a square, a pentagon, a hexagon, ...  Again, vary the colors, use different sized pens, and place them at different places in TurtleSpace.

Figure 2.3

Help at Your Fingertips

In addition to giving the turtle commands, the CommandCenter can be used to get help when you need it.  Type "help setpencolor" in the CommandCenter and press Enter.  Figure 2.4 shows what happens.

SetPenColorHelp Figure 2.4

For more information about what you can get help with, type help and press Enter.  Figure 2.5 shows what happens.

Help Figure 2.5

Explore what you can do with the help command.  help tg will get you an overview of the TG programming environment.  All of the commands that were covered in this lesson are from the GrafCmd category.  You will get the full listing of commands that fall into this category by typing help grafcmd and pressing Enter. 

Running TG as an Application

The nice feature of Java applets is that they are part of web pages.  Once you have the browser on the page containing the applet, you have access to the applet.  But, an important security feature of a Java applet is that it can't do anything to the computer on which it's running.  To insure this, applets have no access to stuff on the computer they are executed on. 

But, as our programs get bigger and more complicated, it is necessary for TG (the turtle graphics program) to be able to read a file containing commands and execute them as it reads the file.  You need to be able to change the instructions and/or add instructions to the program, and then save what you've done to a file.

Java applications can provide this functionality.

The TG programming environment you have been using on this web page can also run on your computer as an application.  It does everything that the applet does and more.  But, for you to run it on your computer, you need to have a copy of it (TG.jar).  Appendix H (Installation of TG) covers how to get it and run it.

Summary

   
   Writing software, computer programs, is a lot
   like writing down the steps to do something.
   
			

You've learned some of the the jLogo language.  If you got the turtle to draw a triangle, a box, etc..., for you, you got experience instructing it to do things in a specific order.  And, the order is very important.  In programming we refer to this order of steps as a sequence.  In our programs, we moved the turtle and then turned it, moved it, then turned it, told it to raise its pen, moved it,...  If you put all of the movement commands first followed by all the turn commands, you would not get what you want - you would get a straight line.  So, writing a program is all about putting together instructions in a specific order.

Exercises

  1. Go back to the TG applet, get the turtle to the HOME location and type:

       loadpicture "maze    

    into the CommandCenter. This will paint an image of a maze onto the background of TG's graphics canvas. Your challenge... use commands you've learned in this lesson to get the turtle to draw a path out of the maze. Figure 2.6 shows me starting to work the turtle out.

    Maze Figure 2.6
  2. Draw a collection of boxes that looks like the one in Figure 2.7.

    Rectangles Figure 2.7
  3. Draw a pair of axes that look like the ones in Figure 2.8.

    Axes Figure 2.8
  4. Draw a small grid that looks like Figure 2.9.

    Grid Figure 2.9


Back to What Is Computer Programming?
Go to the Table of Contents
On to the Pseudocode

Public Domain Mark
This work (BFOIT: Introduction to Computer Programming, by Guy M. Haas),
identified by Berkeley Foundation for Opportunities in IT (BFOIT),
is free of known copyright restrictions.