18
8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com http://ispython.com/wp/?page_id=9 1/18 ispython.com a new skin by dave white Entry 1: Turtle graphics 1.5 Worksheet 1 1. What we cover in this Worksheet: Algorithms, Sequence, Simple for-loop repetition, symmetry, patterns; a square, regular polygons, stars, and circles. 2. When you have completed this worksheet you will be able to: Start to think and play in terms of algorithms WRITE, SAVE and RUN a simple python program which directs the movement of a turtle on the screen write sequential code and use a simple for-loop in your programs experiment with the values (parameters) in your program instructions (This worksheet can be used ‘stand alone’ or in combination with Power.py, a program adapted for use on an overhead projector, and which illustrates in slow motion the dynamic flow of the program execution for the examples which follow.) Overview T he principles and process of this worksheet can be easily adapted for starting with Scratch and Blockly programming environments. This worksheet focusses on the introductory essential concepts of programming, which are common to all programming environments. Exercise 1. Unplug g ed: An Alg orithm or T wo to Start Work in pairs:

Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

Embed Size (px)

Citation preview

Page 1: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 1/18

ispython.com

a new skin by dave white

Entry 1: Turtle graphics 1.5

Worksheet 1

1. What we cover in this Worksheet:

Algorithms, Sequence, Simple for-loop

repetition, symmetry, patterns; a square, regular polygons, stars, and circles.

2. When you have completed this worksheet you will be able to:

Start to think and play in terms of algorithms

WRITE, SAVE and RUN a simple python program which directs the movement of

a turtle on the screen

write sequential code and use a simple for-loop in your programs

experiment with the values (parameters) in your program instructions

(T his worksheet can be used ‘stand alone’ or in combination with Power.py, a

program adapted for use on an overhead projector, and which illustrates in slow

motion the dynamic flow of the program execution for the examples which follow.)

Overview

T he principles and process of this worksheet can be easily adapted for starting

with Scratch and Blockly programming environments. T his worksheet focusses on

the introductory essential concepts of programming, which are common to all

programming environments.

Exercise 1. Unplugged: An Algorithm or Two to Start

Work in pairs:

Page 2: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 2/18

T hink of a way you would describe or demonstrate to someone how to draw or

make or explain one or more of the following: (you are free to use in your tool box

any tools that would help : sand, stick,…, paper, pencil, ruler, compass, protractor,

set-square, stencil,…, computer.)

1. a square

2. an equilateral triangle (a triangle with sides of equal length.)

3. a hexagon (a regular polygon with 6 equal length sides, a simple, symmetrical

closed shape.

4. a pentagram (a symmetrical star with 5 points and equal length sides)

T he algorithm you come up with, will almost certainly vary according to the tool

box you have handy.

Where are we going?

In Computer Science we are looking to see how things work, how to complete a

task using the capabilities of a computer. We are looking to write the programs

(code) for algorithms to draw a lot of different shapes including a triangle, square,

regular polygons, symmetric stars and circles. Later on, we may be able to use what

we have learned to develop an app or two on our computer. We are going to use

the Python toolbox, which includes a T urtle-graphics tool box.

Exercise 2. Plugged in: WRITE a Python 3 Program, SAVE it, and RUN it

(We are assuming that you are in front of a computer with Python 3 set up. If not

use this link SET T ING UP PYT HON 3: WORKSHEET to help you set up Python 3.

A few practical pointers:

When you want to work in Screen 2, which is where you type in your program,

you need to CLICK ON Screen 2 before typing

When you have completed typing, you need to SAVE your program by clicking

on ‘File’ at the top of Screen 2, and then clicking on ‘Save’ half way down the

drop-down menu. (Alternatively you can use Ctrl+S). You will be asked to name

your program file the first time you try to save it.

T hen RUN your program by clicking on ‘Run’ at top of Screen 2, and then

Page 3: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 3/18

clicking on ‘Run Module’ at the bottom of the the drop-down menu (or press

the F5 key to RUN it)

See figures 5 and 6 below

Figure 5: Save your program with a name ending in .py

Page 4: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 4/18

Figure 6 RUN your program

Turtle Graphics and Variations on the 2-instructionprogram

T he T urtle module consists of a turtle moving and drawing on a canvas; we shall

use just two instructions (functions) from our T urtle toolbox to operate the turtle

and write several programs using these two instructions. We shall start with just

one tool from our Python 3 toolbox.

The Turtle Toolbox

1. fd(50):fd(50) is short for forward(50); and the turtle moves forward 50 pixels. A pixel

is a very small distance on a screen. (72 pixels to an inch.)

2. lt(90):lt(90) is short for left(90) and the turtle turns left through 90 degrees.

The Python 3 Toolbox

1. Sequence:T he computer, we’ll call her Py3, obeys each instruction in the program one at

a time, from top to bottom in order, line by line — unless told to do differently.

T hat’s enough tools, let’s get started:

Move the mouse and click on Screen 2. T ype in the following as your starting

program making sure that every

new instruction starts against the side on the left:

Page 5: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 5/18

Figure 7. First program with two instructions to drive the turtle

T hen SAVE and name your first program, and RUN as follows: (See figures 5 and 6)

SAVE your program by clicking on ‘File’ on top of Screen 2, and then

‘Save’ on the drop-down menu. (You will be asked to name your program file

the first time you make and try to SAVE it, call it hap.py — it has to end in ‘.py’

to be recognised as a python program). If you are using idle to build your

program, it will add the .py to your program name automatically

T hen RUN your program by clicking on ‘Run’ at top of Screen 2, and then

clicking on ‘Run Module’ on the drop-down menu.

Page 6: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 6/18

Figure 8.The same first Program with comments added to explain the

instructions. (#…)

Discussion

T he first line of the program in Example 1 sets up the facilities of the turtle

module for us

T he second line is a comment beginning with a # sign which signifies a

comment describing the program, and is ignored by the computer.

T he first executable command in our ‘two instruction’ program is fd(100),

which sets the turtle up as an arrow tip, and moves 100 pixels in the direction

the arrow is pointing in. (always starts facing the same way)

In the next instruction, lt(90), you tell the turtle to turn left through 90

degrees

T he final instruction allows you to click your mouse on the turtle screen

(Screen 3) to close it

so you can continue to build your program in Screen 2.

When you RUN your program, the computer takes over and obeys each

Page 7: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 7/18

instruction, one at a time, in order starting at the top. T hat’s the Python 3 tool of

Sequence.

Up comes Screen number 3! T his is our turtle canvas, the home base for turtles to

perform on; and we have just one turtle, Milly, shaped like an arrow tip, at the

centre of the canvas pointing right. T hat’s the customary starting position for the

turtle. Milly has moved 100 pixels to the right and turned through 90 degrees to

her left to face up the screen. T he representation on Screen 3 is the turtle’s

finishing position. Milly may have been too quick for you to see her move! We will

slow Milly down in the next example.

Figure 9. Screen 3 : Milly the turtle moves forward 100 pixels, and then turns left

through 90 degrees

If for any reason your program doesn’t run then if you click on the Interactive Shell

(Screen 1), you may see an error message, which may help you to correct your

program.

Page 8: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 8/18

Figure 10. The program in Screen 2 drives Milly the turtle in Screen 3

Exercise 3. Extending your program

Click in Screen 2 again. Now highlight the two instructions. Copy(Ctrl+C) these two

instructions, leave a line and press (Ctrl+V), or just type in the extra lines of code,

so that your program should look like this:

Example 2

Page 9: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 9/18

Figure 12. Example 2. Screens 2 & 3: Milly the turtle at her starting position.

Where will Milly go?

What do you think will happen?

SAVE and RUN your program and you should be able to see what happens.

Exercise 4

What is happening here? Is there a pattern in the program? What is being

repeated?

What if we now highlight and copy the 4 instructions that drive Milly the turtle in

your previous program and add to them another 4? What do you think Milly will

draw now?

Page 10: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 10/18

Figure 13. What does Milly the turtle draw on Screen 3 this time?

SAVE and RUN and see.

So if your program worked, we ended up with a square, and Milly the turtle in her

original position facing right. And we did it by taking two instructions and

repeating them four times.

Exercise 5. Changing the angle in the lt() instruction.

Ok, so suppose we now have a program with one of the two instructions for Milly

altered, and let’s repeat the instructions as in Figure 14.

Page 11: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 11/18

Figure 14. Two instruction program with 45 degree left turn

(Either set up a New Window and type in your new program, or alter the code in

your existing program to the code above with more copies of the two instructions)

SAVE and RUN.

Exercise 6. Extending your program again

1. Suppose you followed the same course of action you followed on the original

program: taking the two instructions and repeating them over and over as in

Exercises 3 and 4, which ended up as a square. Would Milly eventually come

back to her starting position for you? If so, after how many repeats of the two

instructions?

Ok, give it a go first, and then compare your efforts with some results in the

tables below.

Discussion

Whatever conclusion you came to in the last example, the program starts to get a

lot longer as you repeat those 2 instructions over and over.

Page 12: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 12/18

Fortunately, in the Python 3 toolbox, there is a tool to help us to deal with

repetitive coding, whenever it occurs, in a concise and effective way. T his one is

called a for-loop.

The Python 3 Toolbox: Control Structures

1. Sequence:T he computer, we’ll call her Py3, obeys each instruction in the program one at

a time, from top to bottom in order, line by line — unless told to do differently.

2. ‘A Simple for-loop’ When we know how many times we want Py3 to obey a

series of instructions we put those instructions into the body of a simple for-

loop. It is written in a special way with its own syntax, so that it is clear to us

what it means, and equally importantly, to the computer, Py3. In Python 3, it

looks like this:

Figure 15. Experimenting with a for loop

Let’s move again:

Change your program to look like the program in Fig. 15.

SAVE and RUN your program.

(Or open a new file for your program. T ype this program exactly as it is in Figure 15.

SAVE it, with a name you choose(ending in .py) and RUN it.)

Either way, we will talk about it after you have RUN it.

Discussion

If your program worked, great. We are going to talk about this program now, so if

Page 13: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 13/18

it didn’t work, or crashed as we say, we may be able to see why. And determination

to see why — sometimes difficult — sometimes sitting right under our noses — is

very important in learning to code.

In this for-loop, the computer executes the indented instructions 4 times.

Each time through the for-loop, the variable ‘steps’ takes the values 0,1,2,3. steps is

a variable name that I have chosen; it could be any variable name e.g. count, or i.

T he for-loop is equivalent to the program in Figure 13 ,where we copied the two

instructions 4 times into the program.

Getting the syntax right in a ‘for-loop’

T he first line:

for steps in range(4):

must be in this format:

‘for’, ‘in’, are known as keywords in Python3. (Coloured differently by

Idle to indicate that they are key words.)

‘range()’ is an example of a special built-in function (or method) and the

4 is a parameter for the function which means that the body of the loop

is executed 4 times. We can change it in our program to another value,

say 6, if we wanted to execute the body (the indented instructions) of

the ‘for loop’ 6 times. T o indicate which instructions belong to, and are

repeated by the for loop, they are indented by four spaces. (achieved by

tapping the space bar 4 times).

However, when you correctly type in the first line, including the ‘:’, Idle

will automatically indent 4 spaces for you on the next and subsequent

lines. When you have finished entering the instructions to be included

in the looping, leave a blank line and start the next line of your

program (if there is one) vertically beneath the f of the ‘for’ statement.

(T o illustrate this last requirement, I have included the finishing

statement done(), which marks the end of the turtle program action).

T he indented body instructions (hit the space bar 4 times if there is no

indent, before typing the instruction) are to make it clear which

Page 14: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 14/18

instructions following the ‘for-loop’ first line are to be included in the

repetition.

1. DON’T FORGET T HE ‘:’ AT T HE END OF T HE FIRST LINE OF T HE FOR

LOOP

2. DON’T FORGET T HE 4-SPACE INDENT AT ION FOR EACH INST RUCT ION

IN T HE BODY OF T HE LOOP

3. IT ’S WORT H REMEMBERING T HIS, BECAUSE MOST OF T HE CONT ROL

ST RUCT URE T OOLS IN PYT HON 3 USE T HE FORMAT IN 1 AND 2 ABOVE

Again, we should end up with a square, and Milly the turtle in her original position

facing right. Our program with a for-loop is so much smaller, doesn’t involve so

much typing/copying and, as we shall see, gives us a chance to experiment with the

shapes we program Milly to draw for us.

What happened to the program with lt(45) in it?

from turtle import *# an experimental program with Milly the turtle

fd(100)lt(45)

Did you get Milly to return to the starting point? How many copies of the two

instructions did you try?

If you use your new loop program you can change the 90 degrees to 45, the 100

pixels to 50, and experiment with the number of repetitions. T ry, say 6 repetitions

– range(6), instead of 4, Your program should look like this in Screen 2:

Page 15: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 15/18

Figure 16. Experimenting with number of sides in our drawing

WRIT E, SAVE AND RUN it.

And Milly will have drawn 6 side-and-turns to give the shape you see on Screen 3 in

Figure 16.

How many more side-and-turns does Milly have to draw to complete the polygon?

Exercise 7

You can use your latest program with a ‘for-loop’ to see whether Milly the turtle

comes back to the start and if so, in how many equal moves.

T ry it in your for-loop with a left turn of

1. 22.5 degrees – lt(22.5)

2. 36 degrees – lt(36)

3. 120 degrees -lt(120)

.

Let’s publish our results so far:

Polygon Table 1

T OT AL T URN (DEGREES) ANGLE (DEGREES) NUMBER OF SIDES LENGT H OF SIDE (PIXELS)

SQUARE 360 90 4 100

Page 16: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 16/18

DW

SQUARE 360 90 4 100

OCT AGON 360 45 8 100

Exercise 8: Complete Table 2

1. Can you fill in the blanks in T able 2?

Hint:

square: 4 x 90 = 360;

octagon: 8 x 45 = 360

hexagon: 6 x ? = 360

? x 36 = 360

T ake a copy of your latest program and enter it in a new file, say exp.py.

T hen in your new program, change the angle for Milly the turtle to one

taken from T able 2 ( lt(60), say) and experiment with the number of sides,

say 5. (try a smaller distance, fd(50), when the number of sides increases. )

SAVE and RUN your program.

Polygon Table 2

T OT AL T URN (DEGREES) ANGLE (DEGREES) NUMBER OF SIDES LENGT H OF SIDE (PIXELS)

DW

SQUARE 360 90 4 100

OCT AGON 360 45 8 100

——360 22.5 ? 30

—— 360 36 ? 100

—— 360 120 (polygon?) ? 150

Exercise 9: Complete Table 3

1. Can you fill in the blanks in T able 3?

Page 17: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 17/18

2. If you take your ‘for-loop’ and by experimenting with entries in the ‘left turn

angle’, lt(?) can you find if there is a regular polygon when you turn repeatedly

through that angle with an increasing number of sides?

3. Can you find the angle to turn through (by experimenting with your for-loop)

for a regular polygon with:

1. 10 sides

2. 5 sides

3. 20 sides

You may have to shorten the length of the sides of polygons with many sides to

prevent Milly the turtle disappearing off the screen. Say from 100 pixels down to 30

pixels.

What does the example with 1 degree and 360 sides in table 3 look like? Each

side is only 3 pixels. T ry it and see.

(Hard)Can you draw a regular polygon with any number of sides? T ry a 17-side

regular polygon

(Harder) Does any angle work to make a regular polygon? If not which angles

do?

(Harder still) Can you draw symmetric stars with more than 7 points?

Polygon Table 3

T OT AL T URN (DEGREES) ANGLE (DEGREES) NUMBER OF SIDES LENGT H OF SIDE (PIXELS)

—— 360 ? 10 50

—— 360 ? 5 100

—— 360 ? 20 30

—— 360 1 360 3

——720 144 (polygon?) ? 150

——1080 1080/7 (polygon?) ? 150

Page 18: Entry 1: Turtle graphics 1 - ispython.com | Algorithms …ispython.com/wp/wp-content/uploads/2014/01/Entry-1_ … ·  · 2014-04-088/4/2014 Entry 1: Turtle graphics 1.5 ... task

8/4/2014 Entry 1: Turtle graphics 1.5 | ispython.com

http://ispython.com/wp/?page_id=9 18/18

Exercise 10 : WRITE, SAVE and RUN your own “2 instruction” program

Write a program that draws a line of 50 pixels and puts a dot at the end of it.

(T he turtle instruction to make a dot: dot() ).

Repeat the commands twice and then again as you did in Exercises 3 and 4.

You should then be looking at evenly spaced marks along a straight line: an

axis. (You may need to shorten the 50 pixels to 30 if you want more than a

couple of dots.)

Now make a for-loop for your “2 instruction” program and try different values

in range().

In Worksheet 2, we get to meet more tools in Python 3, to help with drawing new

shapes and colouring.