Introduction
Turtle Graphics are an easy way to learn computer programming and to do computer graphics. You give simple commands to a turtle and it moves accordingly. The turtle has a pen in its belly, so that as it moves it can mark the screen. These commands are things like:
- move forward some distance,
- move backward some distance,
- turn right so many degrees,
- turn left so many degrees,
- lift the pen up,
- put the pen down,
- change the color of the pen, and
- change the width of the pen.
The commands are interpreted by the turtle from its perspective, so a right turn command is the turtle's right, not your right or the computer screen's right.
The intent of this implementation is to help students make the bridge between Blocky drag and drop code and real programming with text that has to be typed. This implementation is based on JavaScript, the language that provides action to internet browsers. JavaScript is an easy to learn language, but it is also has the power to do complex things and is used on some network computers that serve web content, or in other words, network servers.
Students will have to learn to debug dreaded syntax errors. Syntax is a fancy way to say grammar. Words and symbols must be used in a fairly precise way to communicate program intent to a very picky computer. This is similar to how how English must be used a precise way to communicate effectively, although we sometimes get lazy and allow some incorrect or grammar. Computers are not very tolerant. Debugging is part of a programmer's skill. You will find that enbugging, the art of putting bugs into your code, takes very little skill at all, but debugging sometimes takes the skills of a detective.
When you use JavaScript Turtle Graphics you will use a set of functions that command the turtle to do things. These functions extend JavaScript and are collectively known as a library. The functions are expressed in JavaScript and are implemented in JavaScript. You may be aware of other implementations of Turtle Graphics, like Scratch, CodeWarrior, BitsBox. The functions here share some commonality with those, but there are some differences from those.
This implementation extends the traditional Turtle Graphics to provide functions to fill in shapes, control animations, provide the rich web coloring options while incorporating features of other implementations. The details of the Turtle Graphics functions are contained in the Language Reference.
This implementation also includes an Integrated Development Environment (IDE). The IDE allows you to write code and then run it to immediately see its effects. You can save your code or drawings to your computer. You can load the saved code when you want to return to your work.
Turtle Graphics and the IDE are written in JavaScript and runs on common modern browsers. It has been tested extensively on Chrome and Firefox. No other code is required. If desired, Turtle Graphics can run on your computer without an internet connection. Just clone or download the files found at https://github.com/kirkcarlson/js-turtle into a directory on your computer. This gives you all of the source files, documentation and Linux development tools. Use it by accessing one of the .html files with your browser.
If you are new to programming you may want to take a look at a tutorial on JavaScript or a tutorial for JavaScript Turtle Graphics. There is an Integrated Development Environment that allows you to write code and immediately see the results of that code. If you want, there is a guide for using the IDE.
History
Turtle Graphics were originally introduced by MIT in the 1960s as part of the Logo language. Since then Turtle Graphics have been implemented in many ways and in many languages. Turtle Graphics have been used to explore topics in computer science as well as to help beginners learn how to program. The commands allow someone to program drawings without having to know much about how graphics are done by the underlying computer.