Before embarking on this journey, you may want to check out JavaScript For Cats or Eloquent JavaScript to understand the basics of the language. Or you can just start hacking and learn things from the glossary as you go.
Turtle geometry is a different style of doing geometry, just as Euclid’s axiomatic style and Descartes’s analytic style are different from one another. Euclid’s is a logical style. Descartes’s is an algebraic style. Turtle geometry is a computational style of geometry. Seymour Papert, Mindstorms
The TinyTurtle API makes it easy to experiment with Turtle geometry.
The forward function tells the Turtle to move forward by
some number of pixels.
The right function tells it to turn right by
some number of degrees.
The stamp function tells it to draw its current
state: that is, its position and orientation. This is
visualized as a small, pointy triangle.
Can you add to the code below to make the Turtle draw a square 100 pixels wide and end with the same state that it started?
If we encapsulate our square-drawing code into a function that takes an argument specifying the size of square to draw, we can use it as a building block for more interesting things.
Can you complete the code below?
One of the principles of Turtle geometry is called the Total Turtle Trip Theorem:
If a Turtle takes a trip around the boundary of any area and ends up in the state in which it started, then the sum of all turns will be 360 degrees. Seymour Papert, Mindstorms
Can you use this theorem to fix the code below, which is trying to
draw an equilateral triangle and finish with the Turtle in the same
state that it started? You just need to replace SOMETHING
with an actual number.
Can you use the Turtle Total Trip Theorem to finish this function that draws a circle based on a given circumference, and returns with the Turtle in its original state?
Playing with Turtle Graphics in this tutorial is nice, but you might be wondering how to put your design into a real webpage. See the TinyTurtle documentation for instructions on how to do this.
You might also want to take a look at the TinyTurtle source code, tiny-turtle.js, to see how it works. It's pretty short, and reading other people's code—especially code you use yourself—is one of the best ways to learn. If you find bugs, you can even file an issue and fix it.
Finally, consider reading Mindstorms by Seymour Papert, which explains the pedagogy behind Turtle graphics, among many other revolutionary ideas about education.