We will develop algorithms to draw polygons using turtle graphics. Turtle graphics were developed by Seymour Papert in 1967 to create algorithmic art by moving a geometric "turtle."
Five Basic Turtle Commands
With turtle graphics, you have the following Primitive functions:
||Selects a line color for drawing (|
||Moves the turtle forward by some pixels.|
||Pivots the turtle right by some degrees.|
||Pivots the turtle left by some degrees.|
||Slides the turtle back by some pixels.|
There are other turtle primitives, but these five are already enough to do a lot. Here is a house:
A Little Blue House
pen blue fd 50 rt 90 bk 10 lt 45 fd 60 lt 90 bk 60 lt 45 fd 10 lt 90 fd 50
Warming Up: Create Your own Program
Go to pencilcode.net and create your own program to test out turtle graphics.
Polygons: Square, Triangle, and Pentagon.
Now create programs to make a square, an equilateral triangle, and a regular pentagon. Save them using the names "square", "triangle" and "pentagon".
Since a square has four corners and four sides, it should take no more than 4+4=8 commands to draw a square after choosing a pen color. Similarly, a triangle should take no more than six steps after picking a pen, and a pentagon should take no more than ten steps after the pen.
# Purple square pen purple fd 50 rt 90
# Orange triangle pen orange fd 100
pen orange for [1..3] fd 100 rt 120
# Green pentagon pen green
Even though our triangle has a smaller angle, the turtle must pivot a larger number of degrees to make that angle. The reason is that turtle motions are measured using exterior angles.
Read about exterior angles on Google if you do not remember what they are.
Exercises: (Review your geometry knowledge!)
rt. Include final turns to return the turtle to its starting direction in each program.
Simplifying an Algorithm with Loops
Remember that an algorithm can be written with Primitives, Control flow, Memory, and Arithmetic. So far we have been able to make fine drawings using only Primitives: why use anything else?
Here is a simple loop using
to demonstrate Control flow in CoffeeScript:
pen crimson for [1..4] # This line controls the indented block below. fd 50 # This indented line is repeated 4 times. rt 90 # This indented line is also repeated 4 times.
The result is a square again, but with a shorter program.
Indenting Under a
for in CoffeeScript
for keyword repeats a block of code
once for each number in a range we provide. To use
for we do the following:
for [1..4]to repeat 4 times.
In CoffeeScript, indenting is important! The program will not run correctly if you do not line up the indenting neatly.
Drawing Faster and Filling Shapes
Here are two more turtle primitives for solving common problems:
for [1..n]technique to simplify your triangle and pentagon programs. How many lines of code are in each program now? _______
Generalizing an Algorithm Using Variables
Variables can let us generalize an algorithm.
Consider a polygon algorithm that defines a
n to be the number of
n = 6 # n is the number of corners. k = plum # k is the color a = 60 # a is the size of an exterior angle. speed Infinity pen path for [1..n] # Loop n times: fd 50 # Move by 50 pixels. rt a # Turn by a degrees. fill k
Wherever the program needs to know the number of
corners, it uses
n instead of the number.
The code above defines three variables
and uses them instead of numbers and colors.
Using Arithmetic To Compute Side-Length
To draw a 10-sided polygon,
we would just alter
n to be 10 and
to be 36 degrees.
When we add more sides, the polygon gets too big to
be useful. Instead of always using
it might be more
convenient to specify the target perimeter, and automatically
adjust the lengths based on the number of corners.
Some simple arithmetic does the trick:
n = 10 k = skyblue a = 36 p = 300 # p is the desired perimeter. speed Infinity pen path for [1..n] fd p / n # This will calculated to be 30. rt a fill k
Exercises: Writing Elegant Algorithms for Polygons
aand compute the needed angle automatically. Save the program as "polygon".