turtle.html

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.9: http://docutils.sourceforge.net/" />
<title></title>
<style type="text/css">

/*
:Author: David Goodger (goodger@python.org)
:Id: $Id: html4css1.css 7056 2011-06-17 10:50:48Z milde $
:Copyright: This stylesheet has been placed in the public domain.

Default cascading style sheet for the HTML output of Docutils.

See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/

/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
  border: 0 }

table.borderless td, table.borderless th {
  /* Override padding for "table.docutils td" with "! important".
     The right padding separates the table cells. */
  padding: 0 0.5em 0 0 ! important }

.first {
  /* Override more specific margin styles with "! important". */
  margin-top: 0 ! important }

.last, .with-subtitle {
  margin-bottom: 0 ! important }

.hidden {
  display: none }

a.toc-backref {
  text-decoration: none ;
  color: black }

blockquote.epigraph {
  margin: 2em 5em ; }

dl.docutils dd {
  margin-bottom: 0.5em }

object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
  overflow: hidden;
}

/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
  font-weight: bold }
*/

div.abstract {
  margin: 2em 5em }

div.abstract p.topic-title {
  font-weight: bold ;
  text-align: center }

div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
  margin: 2em ;
  border: medium outset ;
  padding: 1em }

div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
  font-weight: bold ;
  font-family: sans-serif }

div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title {
  color: red ;
  font-weight: bold ;
  font-family: sans-serif }

/* Uncomment (and remove this text!) to get reduced vertical space in
   compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
  margin-bottom: 0.5em }

div.compound .compound-last, div.compound .compound-middle {
  margin-top: 0.5em }
*/

div.dedication {
  margin: 2em 5em ;
  text-align: center ;
  font-style: italic }

div.dedication p.topic-title {
  font-weight: bold ;
  font-style: normal }

div.figure {
  margin-left: 2em ;
  margin-right: 2em }

div.footer, div.header {
  clear: both;
  font-size: smaller }

div.line-block {
  display: block ;
  margin-top: 1em ;
  margin-bottom: 1em }

div.line-block div.line-block {
  margin-top: 0 ;
  margin-bottom: 0 ;
  margin-left: 1.5em }

div.sidebar {
  margin: 0 0 0.5em 1em ;
  border: medium outset ;
  padding: 1em ;
  background-color: #ffffee ;
  width: 40% ;
  float: right ;
  clear: right }

div.sidebar p.rubric {
  font-family: sans-serif ;
  font-size: medium }

div.system-messages {
  margin: 5em }

div.system-messages h1 {
  color: red }

div.system-message {
  border: medium outset ;
  padding: 1em }

div.system-message p.system-message-title {
  color: red ;
  font-weight: bold }

div.topic {
  margin: 2em }

h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
  margin-top: 0.4em }

h1.title {
  text-align: center }

h2.subtitle {
  text-align: center }

hr.docutils {
  width: 75% }

img.align-left, .figure.align-left, object.align-left {
  clear: left ;
  float: left ;
  margin-right: 1em }

img.align-right, .figure.align-right, object.align-right {
  clear: right ;
  float: right ;
  margin-left: 1em }

img.align-center, .figure.align-center, object.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-left {
  text-align: left }

.align-center {
  clear: both ;
  text-align: center }

.align-right {
  text-align: right }

/* reset inner alignment in figures */
div.align-right {
  text-align: inherit }

/* div.align-center * { */
/*   text-align: left } */

ol.simple, ul.simple {
  margin-bottom: 1em }

ol.arabic {
  list-style: decimal }

ol.loweralpha {
  list-style: lower-alpha }

ol.upperalpha {
  list-style: upper-alpha }

ol.lowerroman {
  list-style: lower-roman }

ol.upperroman {
  list-style: upper-roman }

p.attribution {
  text-align: right ;
  margin-left: 50% }

p.caption {
  font-style: italic }

p.credits {
  font-style: italic ;
  font-size: smaller }

p.label {
  white-space: nowrap }

p.rubric {
  font-weight: bold ;
  font-size: larger ;
  color: maroon ;
  text-align: center }

p.sidebar-title {
  font-family: sans-serif ;
  font-weight: bold ;
  font-size: larger }

p.sidebar-subtitle {
  font-family: sans-serif ;
  font-weight: bold }

p.topic-title {
  font-weight: bold }

pre.address {
  margin-bottom: 0 ;
  margin-top: 0 ;
  font: inherit }

pre.literal-block, pre.doctest-block, pre.math {
  margin-left: 2em ;
  margin-right: 2em }

span.classifier {
  font-family: sans-serif ;
  font-style: oblique }

span.classifier-delimiter {
  font-family: sans-serif ;
  font-weight: bold }

span.interpreted {
  font-family: sans-serif }

span.option {
  white-space: nowrap }

span.pre {
  white-space: pre }

span.problematic {
  color: red }

span.section-subtitle {
  /* font-size relative to parent (h1..h6 element) */
  font-size: 80% }

table.citation {
  border-left: solid 1px gray;
  margin-left: 1px }

table.docinfo {
  margin: 2em 4em }

table.docutils {
  margin-top: 0.5em ;
  margin-bottom: 0.5em }

table.footnote {
  border-left: solid 1px black;
  margin-left: 1px }

table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
  padding-left: 0.5em ;
  padding-right: 0.5em ;
  vertical-align: top }

table.docutils th.field-name, table.docinfo th.docinfo-name {
  font-weight: bold ;
  text-align: left ;
  white-space: nowrap ;
  padding-left: 0 }

h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
  font-size: 100% }

ul.auto-toc {
  list-style-type: none }

</style>
</head>
<body>
<div class="document">


<p>Turtle is like a drawing board.</p>
<p>It has functions like <tt class="docutils literal"><span class="pre">forward(...)</span></tt> and <tt class="docutils literal"><span class="pre">left(...)</span></tt> which can move the
turtle around.</p>
<pre class="literal-block">
from turtle import *
</pre>
<img alt="default.png" src="images/default.png" />
<pre class="literal-block">
forward(25)
</pre>
<img alt="forward.png" src="images/forward.png" />
<pre class="literal-block">
left(30)
</pre>
<img alt="left.png" src="images/left.png" />
<p>The <tt class="docutils literal"><span class="pre">forward(...)</span></tt> function takes the number of pixels which you want to move
forward, <tt class="docutils literal"><span class="pre">left(...)</span></tt> takes a number of degrees which you want to rotate to
the left.  (There are <tt class="docutils literal"><span class="pre">backward(...)</span></tt> and <tt class="docutils literal"><span class="pre">right(...)</span></tt>, too.)</p>
<hr class="docutils" />
<p><strong>Exercise:</strong>  Draw a square as in the following picture:</p>
<img alt="square.png" src="images/square.png" />
<p>For a square you will probably need a right angle, which is 90 degrees.</p>
<p><strong>Solution:</strong></p>
<pre class="literal-block">
from turtle import *
forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)
</pre>
<div class="note">
<p class="first admonition-title">Note</p>
<p class="last">As per convention, we want to terminate all figures in our starting
position.  This will make it easier to draw multiple shapes later on.</p>
</div>
<p><strong>Bonus:</strong></p>
<p>If you want to get creative, you can modify your shape with the <tt class="docutils literal"><span class="pre">width(...)</span></tt>
and <tt class="docutils literal"><span class="pre">color(...)</span></tt> functions.  If you cannot figure out the <em>signature</em> of a
function (that is the syntax and semantics of it, say, number of parameters and
their meaning) you can use <tt class="docutils literal">help(color)</tt>.</p>
<div class="caution">
<p class="first admonition-title">Caution!</p>
<p class="last">If you misdrew anything, you can tell turtle to erase its drawing board with
the <tt class="docutils literal">reset()</tt> directive.</p>
</div>
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>Can you draw a (non-square) rectangle too?</p>
<img alt="rectangle.png" src="images/rectangle.png" />
<p><strong>Solution:</strong></p>
<pre class="literal-block">
from turtle import *
forward(100)
left(90)
forward(50)
left(90)
forward(100)
left(90)
forward(50)
left(90)
</pre>
<p><strong>Bonus:</strong></p>
<p>How about a triangle?  (A triangle with 120 degrees angles will have all legs
equally sized.)</p>
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>Now, draw a tilted square.  And another one, and another one.  You can
experiment with the angles between the individual squares.</p>
<img alt="tiltedsquares.png" src="images/tiltedsquares.png" />
<p>Try 20, 90 and 180 for example.</p>
<p><strong>Solution:</strong></p>
<pre class="literal-block">
from turtle import *

left(20)     # &lt;--

forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)

left(20)     # &lt;--

forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)

left(20)     # &lt;--

forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)
</pre>
<p>Whew.  Experimenting with the angles requires you to change three different
places each time.  Imagine you'd want to experiment with the square sizes, let
alone with rectangles!  We can do better than that.</p>
<hr class="docutils" />
<p>This is where names come into play:  You can tell Python that from now on,
whenever you refer to a name, you actually mean something else.  That concept
might be familiar from symbolic maths, where you would write:  <em>Let x be 5.</em>
Then x*2 will obviously be 10.  That's why those names are known as variables,
too.</p>
<p>In Python syntax, that very statement translates to:</p>
<pre class="literal-block">
x = 5
</pre>
<p>After that statement, if you do <tt class="docutils literal">print x</tt>, it will actually output its value
--- 5.  You can well use that for turtle too:</p>
<pre class="literal-block">
forward(x)
</pre>
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>If we have a variable called <tt class="docutils literal">angle</tt>, how could we use that to experiment
much faster with our tilted squares program?</p>
<p><strong>Solution:</strong></p>
<pre class="literal-block">
from turtle import *
angle = 20

left(angle)

forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)
forward(50)
left(90)

left(angle)
# ...
</pre>
<p><strong>Bonus:</strong></p>
<p>Can you apply that principle to the size of the squares, too?</p>
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>Draw a house.</p>
<img alt="house.png" src="images/house.png" />
<p>You can calculate the length of the diagonal line with Pythagoras.  That value
is a good candidate for a name binding.</p>
<hr class="docutils" />
<p>There is still a lot of duplicated code --- the actual drawing of the rectangle
--- around.  If you need to copy and paste code, that is usually a sign of
lacking abstractions.  (Programmers call it a <em>code smell.</em>)</p>
<p>Functions are one way to express abstractions in Python.  Let's take
<tt class="docutils literal">reset()</tt> for example.  It is actually an abstraction for a number of steps,
namely:</p>
<ul class="simple">
<li>Erase the drawing board</li>
<li>Set the width and color back to default</li>
<li>Move the turtle back to its initial position</li>
</ul>
<p>A function can be defined with the <tt class="docutils literal">def</tt> keyword in Python:</p>
<pre class="literal-block">
def line_without_moving():
  forward(50)
  backward(50)
</pre>
<p>You can access names in functions as well:</p>
<pre class="literal-block">
size = 50
def line_without_moving():
  forward(size)
  backward(size)
</pre>
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>Write a function that draws a square.  Can you see how you could improve the
tilted squares program with that and greatly relieve experimentation?</p>
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>Write a function that draws a hexagon.</p>
<img alt="hexagon.png" src="images/hexagon.png" />
<p>Now combine that function into a honeycomb.</p>
<img alt="honeycomb.png" src="images/honeycomb.png" />
<p><strong>Solution:</strong></p>
<pre class="literal-block">
def hexagon():
    forward(100)
    left(60)
    forward(100)
    left(60)
    forward(100)
    left(60)
    forward(100)
    left(60)
    forward(100)
    left(60)
    forward(100)
    left(60)

hexagon()
forward(100)
right(60)

hexagon()
forward(100)
right(60)

hexagon()
forward(100)
right(60)

hexagon()
forward(100)
right(60)

hexagon()
forward(100)
right(60)

hexagon()
forward(100)
right(60)
</pre>
<hr class="docutils" />
<p>One more thing:  Our programs often featured repetition.  There is a powerful
concept in Python called looping, which we will elaborate later on.  For now,
take that easy example:</p>
<pre class="literal-block">
for i in range(10):
    print &quot;Hello!&quot;
</pre>
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>Draw a dashed line.  You can move the turtle without tracing a line behind you
with the <tt class="docutils literal">up()</tt> function;  put it back on the ground with <tt class="docutils literal">down()</tt>.</p>
<img alt="dashed.png" src="images/dashed.png" />
<p><strong>Solution:</strong></p>
<pre class="literal-block">
for i in range(10):
    forward(15)
    up()
    forward(5)
    down()
</pre>
<p><strong>Bonus:</strong></p>
<p>Can you make the dashes become larger as the line progresses?</p>
<img alt="dashedprogressing.png" src="images/dashedprogressing.png" />
<hr class="docutils" />
<p><strong>Exercise:</strong></p>
<p>Take your honeycomb program and make it easier with loops.  How small can you
get it?</p>
<p><strong>Solution:</strong></p>
<pre class="literal-block">
def hexagon():
    for i in range(6):
        forward(100)
        left(60)

for i in range(6):
  hexagon()
  forward(100)
  right(60)
</pre>
</div>
</body>
</html>