Outcomes Turtle Graphics

COMP1021 • After completing this presentation, you are • We will use ‘turtle graphics’
Introduction to Computer Science a lot, to help us learn Python
expected to be able to:
1. Explain what a turtle in turtle graphics can do • Turtle graphics is a simple but
Introduction to in Python powerful kind of graphics programming
2. Use the turtle to draw a variety of things in a • It has a turtle and a turtle window
Turtle Graphics Python program • The turtle moves around the turtle window and
draws wherever it goes
David Rossiter, Gibson Lam and Oz Lam
• You write turtle commands in the code to
control the turtle
COMP1021 Introduction to Turtle Graphics Page 2 COMP1021 Introduction to Turtle Graphics Page 3

Some Examples of Turtle Graphics Getting Started with the Turtle A Turtle Graphics Program
• To start using the turtle in Python, you need to tell • The basic structure of a turtle graphics program
Python that you want to use the turtle commands, then looks like this:
by typing this: import turtle
import turtle
... Draw things using the turtle ...
• After that, you can start to draw things by using
turtle.done()
various turtle commands
• When you finish drawing, you then use the • You don’t need to explicitly ‘open’ the turtle
turtle.done command to tell Python that you window; it is shown automatically the first time
are done with the turtle any turtle command is used in the program
COMP1021 Introduction to Turtle Graphics Page 5 COMP1021 Introduction to Turtle Graphics Page 6

The Turtle The Turtle Window The Turtle Graphics Coordinate System
• The turtle has a position, an orientation and a pen y
• The turtle moves (-width/2, height/2) (width/2, height/2)
– The position is where the turtle is inside the turtle around and draws • You locate the
window inside the turtle turtle based on the
– The orientation is the direction the turtle is looking at, window turtle graphics
which is measured by an angle coordinate system
• Initially, the turtle starts x • The basic unit of
– The turtle holds a pen, which has a certain colour and at position (0, 0), which (0, 0) the system is called
thickness
is in the middle of the a pixel, which is
• The turtle can put the pen down or lift the pen up The ‘arrow’ shown at
window, and it looks the display unit on
the centre is the turtle a computer screen
• When the pen is down and the turtle moves, the turtle towards the right hand
draws wherever it goes side of the window (-width/2, -height/2) (width/2, -height/2)

COMP1021 Introduction to Turtle Graphics Page 7 COMP1021 Introduction to Turtle Graphics Page 8 COMP1021 Introduction to Turtle Graphics Page 9
 Walking Forwards Walking Backwards Changing the Line Thickness
• You can ask the turtle to walk forwards • You can draw a thicker line by changing the
• Similarly, you can ask the turtle to move
• For example, to tell the turtle to walk 250 backwards using the turtle.backward width of the pen the turtle is holding using the
pixels forwards, you can use this line of code: command turtle.width command
turtle.forward(250) • For example, the following line of code asks • The following code draws a thin line and then
the turtle to move backwards by 200 pixels: a thick line by changing the width of the pen to
• After running the code, you can actually see 5 pixels:
the turtle moving from one position to another turtle.backward(200)
turtle.forward(125)
turtle.width(5)
turtle.forward(125)
Starting position
• When the turtle moves, it draws a line COMP1021 Introduction to Turtle Graphics Page 11 COMP1021 Introduction to Turtle Graphics Page 12

Turning Left and Right Moving to an Arbitrary Location Moving Back Home
• The turtle can do much more than • The turtle can move around the window by walking
walking forwards and backwards forwards, backwards and turning • The initial position of the turtle, i.e. (0, 0), is
horizontally • Sometimes it may be useful to ask the turtle to move called the home of the turtle
• You can turn turtle using the turtle.left and directly to a particular position in the window • You can quickly move the turtle back to its
turtle.right commands • To do that you can use the home using this line of code:
• For example, to turn left by 90 degrees: turtle.goto command turtle.home()
turtle.left(90) • For example, you can ask the (50, 50)
turtle to move to the location • This is the same as running this code:
• And, to turn right by 45 degrees:
(50, 50) using this line of code: turtle.goto(0, 0)
turtle.right(45)
turtle.goto(50, 50) Starting position at (0, 0)

COMP1021 Introduction to Turtle Graphics Page 14 COMP1021 Introduction to Turtle Graphics Page 15

An Example Using Multiple Commands Example Code 1/2 Example Code 2/2
turtle.left(5) # Tell the turtle to turn left 5 degrees

• This example demonstrates how the turtle reacts # Draw the right box and the connecting line
• Anything
# Return to the centre
turtle.forward(175) turtle.left(90)
to a combination of the turtle commands that we turtle.left(90) starts with a turtle.forward(75)
turtle.forward(100) ‘#’ is called a turtle.right(95)
have met so far turtle.left(90) comment
turtle.forward(100) # Draw the base
• Result: turtle.left(90) • Comments turtle.forward(25)
turtle.forward(100) are not code turtle.left(90)
and they are turtle.forward(50)
turtle.right(90) ignored by turtle.right(90)
turtle.forward(20)
# Draw the left box and the connecting line
Python turtle.right(90)
turtle.forward(225) turtle.forward(100)
turtle.right(90) turtle.right(90)
turtle.forward(75) turtle.forward(20)
turtle.right(90) turtle.right(90)
turtle.forward(75) turtle.forward(50)
turtle.right(90)
COMP1021 Introduction to Turtle Graphics Page 16
turtle.forward(75)
Lifting Up and Putting Down the Pen Another Example Pen Up/Down Example Code 1/2
• The following example is exactly the same as the turtle.left(5) # Tell the turtle to turn left 5 degrees
• By default, when the turtle moves, the pen draws
previous example, but this time the pen has been turtle.up() # Lift up the pen.
• If you want the turtle to move without drawing, lifted up and put down at appropriate places # From now on, the turtle will not draw anything when it moves.
you tell the turtle to lift up the pen: turtle.forward(75) # Turtle walks forward but draws nothing
• Result:
turtle.up() turtle.down() # Put down the pen

• Nothing is drawn when the turtle moves after that # The turtle draws again

# Draw the right box

• To let the turtle draw again, tell the turtle to put turtle.forward(100)
the pen down using this code: turtle.left(90)
turtle.forward(100)
turtle.left(90)
turtle.down() turtle.forward(100)
turtle.left(90)
turtle.forward(100)
turtle.right(90)
COMP1021 Introduction to Turtle Graphics Page 19 COMP1021 Introduction to Turtle Graphics Page 20

Pen Up/Down Example Code 2/2 Drawing Shapes Drawing Solid Shapes
# Draw the left box
turtle.up() • We can draw lots of different shapes with lines • You can tell the turtle to draw filled
turtle.forward(150) shapes
turtle.down() • Here is an example that draws a triangle:
turtle.forward(75)
• Before drawing a shape, you need to
turtle.right(90) turtle.forward(500) Starting position run this line of code:
turtle.forward(75)
turtle.right(90) turtle.right(120)
turtle.forward(75) # Draw the base turtle.begin_fill()
turtle.right(90) turtle.left(90) turtle.forward(500)
turtle.forward(75) turtle.forward(50)
turtle.right(90)
turtle.right(120) • And after finishing the shape, use this line of code:
# Return to the centre turtle.forward(20) turtle.forward(500) turtle.end_fill()
turtle.up() turtle.right(90)
turtle.left(90) turtle.forward(100)
turtle.forward(75)
turtle.right(95)
turtle.right(90)
turtle.forward(20)
• A hollow triangle is drawn • The shape will then be immediately filled with the
turtle.forward(25) turtle.right(90)
turtle.forward(50)
fill colour
turtle.down()
COMP1021 Introduction to Turtle Graphics Page 23 COMP1021 Introduction to Turtle Graphics Page 24

Changing the Pen Colour Changing the Fill Colour An Example of Using Colours
• You can also change the fill colour using the • This example illustrates how to draw a yellow triangle
• You can easily change the colours
turtle.fillcolor command, like this: with a red border
• The initial colour of the pen is black
turtle.fillcolor("yellow") turtle.color("red", "yellow")
• You can change the pen colour (=line colour)
using the turtle.color command • If you want to, you can change both colours at turtle.begin_fill()
the same time: Line colour Fill colour
• Here is an example changing the pen colour to red: turtle.forward(500)
turtle.right(120) Draw
turtle.color("red") turtle.color("red", "yellow") turtle.forward(500) the
turtle.right(120) triangle
• And to change the pen colour to yellow: • After this line, every line drawn by the turtle turtle.forward(500)
will be red and every filled shape will be filled Fill the shape drawn
turtle.color("yellow") between these two lines
with yellow turtle.end_fill()

COMP1021 Introduction to Turtle Graphics Page 25 COMP1021 Introduction to Turtle Graphics Page 26 COMP1021 Introduction to Turtle Graphics Page 27
 Clearing the Screen Resetting Everything Speeding Up
• To clear everything drawn so far, run the following the Turtle
line of code: • If you want to clear the turtle window as well
turtle.clear()
as resetting everything to the initial state, you • The turtle initially moves fairly slowly
can use turtle.reset() • You can adjust the moving speed of the turtle
• The position and orientation of the turtle remains
• After running the command, everything such using the turtle.speed command
the same as whatever it was before running the code
as the turtle position, orientation and colours • The initial speed value is 3
will be back to their initial values • For example, you can make the turtle move
• For example, the turtle will move back home faster by running this line of code:
and look to the right hand side of the window turtle.speed(8)

COMP1021 Introduction to Turtle Graphics Page 28 COMP1021 Introduction to Turtle Graphics Page 29 COMP1021 Introduction to Turtle Graphics Page 30

The Turtle Speed Value Drawing Circles and Arcs Drawing a Teddy Bear
• To draw a circle, use
• The speed value is an integer from 0 to 10
circle():
• The speed changes from very slow to very fast
turtle.circle( 100 ) • In this example,
from 1 to 10, i.e.
radius=100 pixels Starting
we will draw a
1=slow speed … 6=normal speed … 10=fast speed position cute teddy bear
• You can also draw part of a using all the
• A speed value of 0 means no animation at all circle: commands we
• If you use the value of 0 you will still see the turtle.circle( 250 , 90 ) have learned
turtle ‘jump’ immediately from one position to The centre of the
another instead of moving gradually circle is 250 pixels Draw 90 degrees
left of the turtle of that circle
COMP1021 Introduction to Turtle Graphics Page 31 COMP1021 Introduction to Turtle Graphics Page 32 COMP1021 Introduction to Turtle Graphics Page 33

Teddy Bear Code 1/4 Teddy Bear Code 2/4 Teddy Bear Code 3/4
# Left eyeball # Ears
# Mouth # Face
# Right eyeball turtle.up() turtle.up()
turtle.up() turtle.up()
turtle.up() turtle.goto(0, 0) turtle.goto(0, 0)
turtle.goto(0, 0) turtle.goto(0, 0)
turtle.left(90) turtle.left(270) turtle.right(90)
turtle.right(180) turtle.right(150)
turtle.forward(33) turtle.forward(33) turtle.forward(80)
turtle.forward(70) turtle.forward(190)
turtle.right(90) turtle.left(90) turtle.right(90)
turtle.down() turtle.left(90)
turtle.forward(34) turtle.forward(34) # Dots turtle.forward(100)
turtle.forward(30) turtle.forward(40)
turtle.down() turtle.left(180) turtle.up() turtle.forward(1) turtle.down()
# Two eyes turtle.circle(30, 180) turtle.down()
turtle.fillcolor("cyan") turtle.down() turtle.goto(0, 0) turtle.up() turtle.left(50)
turtle.circle(66) turtle.up() turtle.circle(190, 180)
turtle.begin_fill() turtle.fillcolor("cyan") turtle.backward(110) turtle.forward(19) turtle.circle(-70, 200)
turtle.right(180) turtle.right(180)
turtle.circle(33) turtle.begin_fill() turtle.left(90) turtle.down() turtle.up()
turtle.circle(66) turtle.circle(-30, -180)
turtle.end_fill() turtle.circle(33) turtle.forward(20) turtle.forward(1) turtle.goto(0, 0)
turtle.left(180)
turtle.up() turtle.end_fill() turtle.down() turtle.up() turtle.right(120)
turtle.down()
turtle.forward(15) turtle.up() turtle.forward(1) turtle.right(90) turtle.forward(80)
turtle.circle(-30, 180)
turtle.left(90) turtle.backward(15) turtle.up() turtle.forward(10) turtle.left(90)
turtle.right(180)
turtle.forward(4) turtle.right(90) turtle.forward(19) turtle.right(90) turtle.forward(100)
turtle.circle(30, 90)
turtle.right(90) turtle.backward(4) turtle.down() turtle.forward(10) turtle.down()
turtle.right(90)
turtle.down() turtle.left(90) turtle.forward(1) turtle.down() turtle.right(50)
turtle.fillcolor("red")
turtle.fillcolor("black") turtle.down() turtle.up() turtle.forward(1) turtle.circle(70, 200)
turtle.begin_fill()
turtle.begin_fill() turtle.fillcolor("black") turtle.right(180) turtle.up()
turtle.circle(30, 180)
turtle.circle(11) turtle.begin_fill() turtle.forward(60) turtle.forward(60)
turtle.end_fill()
turtle.end_fill() turtle.circle(11) turtle.down() turtle.down()
turtle.end_fill() turtle.forward(1)
 Teddy Bear Code 4/4 Writing Text Using the Turtle
Hiding the Turtle
# Hair • You can display text using the turtle
turtle.up()
turtle.goto(0, 0) • After the turtle has finished drawing, the • For example, you can use the code below to
turtle.forward(80)
turtle.down() turtle is still shown write the text ‘COMP1021’ in the turtle window:
turtle.circle(50, 60)
turtle.right(180) • It doesn’t look good on top of the teddy turtle.write("COMP1021")
turtle.circle(-50, 60)
turtle.right(180) bear image we have drawn
turtle.circle(-60, 60)
turtle.left(180) • We can make the turtle disappear: • The text is shown all at once
turtle.circle(60, 60)
turtle.left(180)
turtle.hideturtle() instead of being gradually
turtle.circle(-30, 60) drawn

COMP1021 Introduction to Turtle Graphics Page 37 COMP1021 Introduction to Turtle Graphics Page 38 COMP1021 Introduction to Turtle Graphics Page 39

Customising the Font

• If you want to, you can customise the font using
the font option
• For example, a bigger and bold font can be used
to write the text ‘COMP1021’ in the window
turtle.write("COMP1021",
font=("Arial", 20, "bold"))

Using the bold ‘Arial’

font with a size of 20

COMP1021 Introduction to Turtle Graphics Page 40