music programming text book

turtle graphics


OSdata RSS
News Feed

OSdata blog RSS.

OSdata blog RSS - add to Bloglines
OSdata blog RSS - add to Google Reader.
OSdata blog RSS - add to My AOL
OSdata blog RSS - add to Newsgator.

    The first lesson is how to use turtle graphics.

    The most recent version of my self-contained development environment is at stable release version or

    Free Open Souce: Licensed under MIT license. License printed in full below.

previous page   next page
previous page
introduction to lessons
  next page
reference manual

turtle graphics


Using buttons for Turtle Graphics

    If you are using a mobile device, you may want to click on the large button labelled “button size”. This will make all of the buttons finger sized.

    Click on the labelled “turtle GrafX” to bring up the buttons needed for this lesson.

    The Massachusetts Institute of Technology (M.I.T.) invented turtle graphics as a method to teach mathematical thought and computer programming to children.

    Turtle graphics remains valid as a quick and easy method to see how a computer responds to a series of instructions one step at a time.

    Introduction tour: Learn how to use turtle graphics.

    Find the section of buttons labelled “Turtle GrafX” by clicking on the button.

    Click on the button labelled “start”. This stops the opening animation and places an old-school turtle in the center of the graphics area. If you skip this step, the animation will keep covering up your art work.

    If you are feeling adventurous, you can try clicking on the buttons in the “TurtleGrafX” area and see what happens. Or you can follow the step by step instructions explaining what each button does.

    Click once on the button labelled “forward”. You will see the turtle move forward and leave behind a short red line.

    Click once on the button labelled “right”. You will see the turtle swing to the right (without drawing any new lines).

    Click once on the button labelled “forward”. You will see the turtle move forward and leave behind a short red line.

    Repeat the above two steps (click “right” then click “forward”) and you will end up with a small red square.

    Click once on the button labelled “left”. The turtle will now swing to the left.

    Click on the button labelled “color chart”. This will cause a large color chart to appear (you can click again on the “color chart” button to make it disappear and reappear). Click on the second color in the second row (yellow). If yo0u are feeling adventurous, you may pick any color you like. Dark colors and bright colors will work better. You may be very disappointed if you choose a white or very light color.


    [OPTIONAL] If you want to type your commands, click on the button labelled “drawing” and look at the section labelled “drawing inputs” and find the box labelled “stroke color” (top left). You will see a strange looking value of “#ff0000”. Type in “yellow”.

    Now click on the “forward” button and you will see that the turtle leaves behind a yellow line. If you picked a different color, the line will match the color you picked.

    Change the “stroke color” to “green” (the third color in second row) and “back” button and the turtle leaves behind a green line. But you can’t see the line because the turtle is covering it up. You may pick any color you want.


    Click on the “hideturtle” button and the turtle will disappear, revealing the green line (or whatever color you picked).

    Click on the “back” button again and the green line will get longer, even though you can’t see the turtle.

    Click on the “showturtle” button to bring the turtle back to the screen.

    It is completely up to you whether you want to draw with the turtle visible or invisible. DIfferent people prefer different methods. If you draw with the turtle invisible and lose track of where you are drawing, you can briefly make the turtle visible again.

    Click on the “clearscreen” button and the previous drawing will be erased and the turtle will be centered in the drawing area. If the turtle was visible, it will remain visible. If the turtle was invisible, it will remain invisible.

    Now you are going to make a dotted line. Feel free to pick any new color you like.

    Click on the “right” button so that you have plenty of room for your line.

    Next click on the “penup” button and then click on the “forward” button twice. The turtle (whether visible or not) will move forward two steps.

    Now click on the “pendown” button and then click twice on the “forward” button. The turtle (visble or not) will start drawing again.

    Next click on the “penup” button and then click on the “forward” button twice. Then click on the “pendown” button and then click on the “forward” button twice. Repeat. You should end up with a dotted line.

    If you experiment a little, you will find that repeating “penup” over and over again just makes sure that the pen is up. The “penup”, “pendown”, “hideturtle”, “showturtle” buttons don’t change anything if you keep pressing the same button over and over again. So, it is always safe to press those buttons again if you forgot how you have them set.

    You can click on the “home” button to make your turtle (visible or not) jump back to the center of the drawing area. No line will drawn from the old location to the center. You can use this method to quickly get back to the center without erasing your picture.

    Let’s return briefly to the “stroke color”. You can change the color you are drawing at any time. Just click on the color you want from the color chart near the Turtle GrafX buttons. If you are color blind, use the top row (black, grays, and white) and whatever you draw will look the same to you and your classmates.

    There are 140 officially recognized color names. You can type in any of the following color names (it does not matter if you use upper or lower case letters).

color namecolorhex
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
AquaMarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
DarkOrange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370DB
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #DB7093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32

    If you try using white to erase previous lines, you may (depending on the browser you use) find that faint edges of the old color are left behind. Try to get your drawing right without having to erase.

    If you want to record your drawing as you create it, press the “record“ button. Every step you use for making your picture will be recorded. When you are done, press the “stop“ button (the same button, renamed). You can copy and paste the resulting text to replay your drawing, turn in assignments, and share with friends.

    End of introduction tour.

    Assignment: Now that you have a feel for how turtle graphics works, try to create your own picture.

    This assignment will require planning, because you will need to figure out the right steps to maneuver the turtle for you artistic vision. This is the exact kind of thinking that you will need to program computers and make your own game.

    Once you have planned out how to draw your picture, you can share your list of steps with your classmates and they can exactly copy your artwork.

    You will make mistakes as you learn how to tell the computer how to draw. Be patient. Relax. Accept the mistakes and you will be able to draw a great picture.

    Optional advanced techniques: You may want to try out some additional optional techniques. These are not required and may be beyond the ability of younger children, but if you want to use any of these to improve your drawing, feel free to experiment.

    You may have noticed that there are several buttons above the color chart and that “Stroke” is currently selected. “Stroke” is the name for the line the turtle draws. It is also the name for the outline on more advanced shapes.

    One of the other choices is “Background”. Try clicking on “Background” and then select any color of your choice (other than white). You will see the entire background change to match the color you just clicked on. The “Background” always starts as white, but you can set it to any color you want.

    Coming up: You may have noticed that turtle graphics is somewhat slow and clumsy. Next you will learn how to use the “drawing inputs” and the “drawing buttons” to create pictures using some basic shapes.

    This is part of an instructional series on the building of a Forth programming environment in any standard browser using JavaScript.

    Threaded Interpreted Languages (TILs), including Forth, are designed for customization.

    In addition to writing your own Forth programs, please modify the underlying engine to meet your specific needs.

    Please have fun with this project. Make it your own.

    The most recent version is at stable release version or

return to computer programming lessons
return to Forth in JavaScript
return to Source Code Examples

return to Outrageous Coder
previous page   next page
previous page
introduction to lessons
  next page
reference manual

comments, suggestions, corrections, criticisms

because of ridiculous spam attacks,
contact through Twitter (@OutrageousCoder) will be more reliable than the contact form

please contact us

your name:
email address:
phone number:

return to table of contents
free downloadable college text book


    This is example code from OSdata, This Side of Sanity, and Twiddledom, released under the MIT License.

    Copyright © 2014, 2015 Milo

    Licensed under the MIT License. You may obtain a copy of the License at

    The MIT License (MIT)

    Copyright © 2014, 2015 Milo

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.


previous page   next page
previous page
introduction to lessons
  next page
reference manual


Made with Macintosh

    This web site handcrafted on Macintosh computers using Tom Bender’s Tex-Edit Plus and served using FreeBSD .

Viewable With Any Browser

    †UNIX used as a generic term unless specifically used as a trademark (such as in the phrase “UNIX certified”). UNIX is a registered trademark in the United States and other countries, licensed exclusively through X/Open Company Ltd.

    Names and logos of various OSs are trademarks of their respective owners.

    Copyright © 2015 Milo

    Created: January 6, 2015

    Last Updated: January 18, 2015

return to table of contents
free downloadable college text book

previous page   next page
previous page
introduction to lessons
  next page
reference manual