Introduction to Turtle Graphics
Turtle graphics has been used to introduce students to programming and computer graphics for many years. This version is based on JavaScript programming.
Simple commands
Turtle Graphics works by issuing commands to a “turtle” which moves on the screen to draw a figure. All commands are from the perspective of the turtle. The commands look like:
-
// comment to explain what is going on, from the double slash to the end of the line
-
forward (100) // 100 is a distance, usually measured in pixels. “forward” is the name of a function and the parentheses (…) enclose parameters passed to the function.
-
right (90) // 90 is the number of degrees to turn right of current direction
-
left( 90) // to turn 90 degress left of the current direction
-
penup() // lift the pen so future moves will not mark. Even though no parameter is passed to the penup function, the parentheses are still required to signal that penup is a function and not a variable.
-
pendown() // lower the pen so future moves will mark
-
color (“red”) // change the pen color to “red”
Uses JavaScript
-
this is the language used in web browsers
-
gives functionality to web pages
-
it is similar to other languages (c, c++, Java, go)
-
most widely deployed language in the world
-
easy to use (it is not as formal more serious languages like c, c++)
-
powerful in that it is as expressive as many other languages.
Tools
Integrated Development Environment (IDE)
Modern software development uses IDEs to have all the tools needed to write and test code on a single screen. This IDE has three panes: a reference plane with the commands, a canvas where the turtle draws, and an editing area where the commands are recorded.
Lessons
There are a set of lessons to lead a student from drawing a single square through a multiple pointed star. A set of advanced lessons leads a student through the process of creating an animated drawing.
Examples
There are many examples of things drawn with Turtle Graphics. Use these to inspire you to draw similar things or to figure out how the figure was drawn.
Hint: If you really want to learn how to make the examples, do it yourself without looking at the supplied code (unless you get stuck, and then go back and fix your own code).