WEBVTT

0
00:00.060 --> 00:04.470
All right guys. In this lesson, we're going to be building out our turtle race.

1
00:04.830 --> 00:06.060
And through building this race,

2
00:06.090 --> 00:11.090
we're going to get more familiar with these concepts of state and instances.

3
00:11.820 --> 00:15.720
And that's because we need to create multiple turtles to join our race.

4
00:16.110 --> 00:18.390
This is what we're aiming for. In the beginning,

5
00:18.450 --> 00:23.450
there's going to be a little popup that will ask us to bet who will win the

6
00:23.610 --> 00:26.640
race. And it asked me to choose a color.

7
00:27.000 --> 00:29.370
Now the turtles are in the color of the rainbow,

8
00:29.370 --> 00:33.060
so I'm just going to pick the red one. Once I hit okay,

9
00:33.060 --> 00:37.830
we have all of our turtles lined up in the starting position and they will start

10
00:37.860 --> 00:42.450
making random steps towards the right edge of the screen. Now,

11
00:42.450 --> 00:46.620
the first hurdle that reaches past the right edge of the screen is going to be

12
00:46.620 --> 00:47.453
the winner.

13
00:47.670 --> 00:52.670
And at the moment it looks like the green turtle is probably going to get there

14
00:52.770 --> 00:57.750
first. There we go. So as soon as a turtle crosses the finish line,

15
00:58.920 --> 01:03.390
then it will print out a line telling us whether if we won or whether

16
01:03.390 --> 01:06.990
if we lost our bets and which turtle won the game.

17
01:07.200 --> 01:08.430
So this is the goal.

18
01:08.970 --> 01:13.800
Now I'm going to get started by deleting all of the code inside our previous

19
01:13.800 --> 01:17.220
Etch-A-Sketch project other than these few lines.

20
01:17.280 --> 01:19.890
So I've got Tim my turtle, screen

21
01:19.890 --> 01:24.890
which is a screen object that is going to hold the screen until I click on it so

22
01:26.130 --> 01:30.150
that I can see what's going on. Now, because in this game

23
01:30.180 --> 01:35.180
the dimensions of the screen or of the window is really crucial,

24
01:35.940 --> 01:40.020
I'm not just going to get the default screen size show up. Instead

25
01:40.020 --> 01:44.430
I'm actually going to use one of the methods that is in the screen object

26
01:44.460 --> 01:48.060
which is called setup. And setup, as you can see,

27
01:48.060 --> 01:52.290
allows me to set up the width and the height of this window

28
01:52.290 --> 01:53.310
that's going to show up.

29
01:54.510 --> 01:59.510
So I'm going to set the width of my screen to 500 and the height to 400.

30
02:00.360 --> 02:05.000
So I should end up with a 500 pixel wide, 400 pixel high screen.

31
02:05.480 --> 02:09.710
And once I hit run, you can see this is what it gets resized to.

32
02:10.370 --> 02:13.700
Now, if you came across this code and it was somebody else's code,

33
02:14.030 --> 02:17.960
then these numbers and their positions don't actually make a lot of sense,

34
02:17.990 --> 02:21.230
which one's the height, which one's the width. So in these situations,

35
02:21.260 --> 02:25.880
I recommend using keyword arguments rather than positional arguments. Oh,

36
02:25.910 --> 02:29.000
let's write out the parameters explicitly. Our width

37
02:29.030 --> 02:32.540
to be 500 and our height to be 400. This way

38
02:32.540 --> 02:34.880
when somebody else comes along and reads your code,

39
02:34.910 --> 02:38.990
it's a lot easier to understand rather than just 500 and 400,

40
02:38.990 --> 02:40.880
cause it could be both ways.

41
02:41.630 --> 02:44.120
So now that we've got our screen set up,

42
02:44.180 --> 02:49.180
the next thing I want to do is to bring up that popup and ask the user to make a

43
02:49.280 --> 02:53.510
bet. Now, if we take a look at the Python documentation,

44
02:53.960 --> 02:56.750
um, where we've been spending a lot of time recently,

45
02:57.020 --> 03:00.910
you can see that there is a method on the screen

46
03:00.970 --> 03:03.670
which is called textinput.

47
03:04.060 --> 03:09.060
And this is going to show up a popup window and it allow the user to look at the

48
03:09.940 --> 03:13.960
prompt and the title and to enter a piece of text.

49
03:14.410 --> 03:18.100
And if you want the user to enter a number, then you would use numinput.

50
03:18.550 --> 03:22.570
So let's go ahead and add that here. So it will be a method from screen

51
03:22.600 --> 03:26.800
which is called textinput and then it's got two parameters.

52
03:26.860 --> 03:31.000
One is the title which in my case

53
03:31.000 --> 03:33.220
I'm just going to say 'Make your bet'.

54
03:33.850 --> 03:38.710
And then the second parameter is going to be the prompt. And in my case,

55
03:38.740 --> 03:40.750
I will probably say, um,

56
03:40.870 --> 03:45.610
which turtle win the race and tell them to enter a color.

57
03:46.120 --> 03:48.490
Now, this works really similarly to our input

58
03:48.490 --> 03:53.350
which we've been really used to because it will return the string and we can

59
03:53.350 --> 03:56.170
catch that string inside a variable.

60
03:56.200 --> 04:01.200
So we'll call it user_bet and we'll set it to equal the output from this

61
04:02.620 --> 04:03.453
method.

62
04:06.870 --> 04:09.150
Now let's give this a shot.

63
04:09.570 --> 04:14.130
Let's run the code and then let's enter a color, hit okay.

64
04:14.190 --> 04:16.350
And if we take a look in our console,

65
04:16.590 --> 04:20.550
you can see that that bet string is printed in here.

66
04:21.540 --> 04:25.680
So now the next thing we're going to do is we need to do something with our

67
04:25.680 --> 04:28.200
turtle. I'm going to move it down a little bit.

68
04:28.590 --> 04:33.590
And what I want my turtle to do is I want it to go to the start of the line.

69
04:35.130 --> 04:39.810
So the very left edge of my screen. Now I could,

70
04:39.810 --> 04:43.890
of course, just say tim.backward by, um,

71
04:43.920 --> 04:45.330
however many paces,

72
04:45.750 --> 04:50.520
but thinking forward and knowing that I'm going to have six or seven of these

73
04:50.520 --> 04:51.240
turtles,

74
04:51.240 --> 04:54.720
I can't just tell them all to go backwards because they're going to go to the

75
04:54.720 --> 04:59.660
same position. Instead, we're going to use a method that the turtle has

76
04:59.710 --> 05:01.110
which is called goto.

77
05:01.650 --> 05:06.210
And this allows us to define an X value and a Y value.

78
05:06.600 --> 05:10.650
But how do we know what X and Y values to give it? Well,

79
05:10.650 --> 05:14.640
we first have to understand how the Python turtle coordinate system works.

80
05:14.970 --> 05:19.970
So if you imagine your program window as a graph where the center of it is at

81
05:20.460 --> 05:22.740
the coordinate (0, 0). Well

82
05:22.740 --> 05:27.330
then if you have a window that has a height of 400,

83
05:27.690 --> 05:32.690
then that graph will have a Y-axis that extends from the center at zero all the

84
05:34.590 --> 05:37.740
way up to the top edge and then from the middle

85
05:37.740 --> 05:42.630
it goes down to the very bottom edge, which is going to be -200.

86
05:42.840 --> 05:47.840
So 200 plus 200 makes up 400 and the same happens with the X-axis.

87
05:49.500 --> 05:52.530
So if the width of the screen is 500, then

88
05:52.750 --> 05:57.750
the X-axis goes from the center 0 to positive 250,

89
05:58.310 --> 06:03.050
so half of 500. And then from zero to -250.

90
06:03.470 --> 06:07.310
So here's a question. Let's say we wanted to move our turtle here.

91
06:07.430 --> 06:10.370
What do you think would be the X and Y coordinate of that point?

92
06:13.210 --> 06:14.350
<v 2>Okay. So let's say</v>

93
06:14.460 --> 06:19.460
that this is roughly halfway on the X-axis and about halfway on the Y-axis.

94
06:21.250 --> 06:26.250
Then half of 250 is 125 and half of 200 is 100.

95
06:28.300 --> 06:33.300
So at this point would have the coordinate of 125 by 100.

96
06:35.500 --> 06:40.210
If we wanted our turtle to go all the way to the left side of the screen

97
06:40.420 --> 06:44.020
say maybe starting over here or starting over here, well,

98
06:44.020 --> 06:45.520
then we would have to use that

99
06:45.550 --> 06:50.550
goto method and then specify a X-value and a Y-value. Following the logic of the

100
06:54.700 --> 06:59.560
total coordinate system then in order to move our turtle to the very left edge,

101
06:59.800 --> 07:03.520
then we should supply an X-value of minus 250

102
07:03.610 --> 07:05.770
which is half of the width of 500.

103
07:06.400 --> 07:11.400
Now the Y-value will determine where on the Y-axis our turtle moves to.

104
07:12.850 --> 07:14.500
So if we had it at zero

105
07:14.500 --> 07:18.730
then it would basically just go straight backwards and it would not go up or

106
07:18.730 --> 07:21.970
down. But let's say that we put it at, um,

107
07:22.060 --> 07:26.260
-100. So now if I run this code,

108
07:26.920 --> 07:29.170
you can see that it goes in the right direction,

109
07:29.380 --> 07:31.180
but it's actually gone off the screen.

110
07:31.510 --> 07:36.510
So what's happened here is that -250 is on the very,

111
07:36.730 --> 07:38.530
very edge of the window.

112
07:38.890 --> 07:42.910
And once our turtle moves over there and the arrow is at the back,

113
07:43.150 --> 07:45.160
then you can't actually see it at all.

114
07:45.400 --> 07:50.320
So let's try changing that X-value and shifting our turtle a little bit more to

115
07:50.320 --> 07:55.270
the right. Then you can see it moves to pretty much the start of the window.

116
07:55.840 --> 08:00.840
So I recommend using this goto method and trying out some different numbers

117
08:02.170 --> 08:04.570
just to see where it ends up on the screen.

118
08:05.080 --> 08:07.300
And once you put in some different numbers in here,

119
08:07.510 --> 08:11.350
you'll start to get the hang of how this coordinate system actually works.

120
08:11.740 --> 08:15.280
But just remember that the X-axis is along the horizontal.

121
08:15.580 --> 08:18.790
It goes from zero to positive and zero to negative.

122
08:19.120 --> 08:21.790
And then the Y-axis is along the vertical,

123
08:21.820 --> 08:24.940
going from zero to positive and zero to negative.

124
08:25.930 --> 08:30.930
So we want to get rid of this line and we don't actually want our turtle to draw

125
08:31.660 --> 08:36.550
at all. So to do that, we're going to do tim.penup,

126
08:37.000 --> 08:40.300
and we're actually never going to put the pen down because we're going to be

127
08:40.300 --> 08:42.130
moving the turtle itself.

128
08:42.640 --> 08:46.360
And the other thing is that it would be really nice if instead of an arrow,

129
08:46.360 --> 08:48.250
we actually got a turtle.

130
08:48.640 --> 08:53.640
So we can of course say tim.shape and set it to a turtle shape,

131
08:54.960 --> 08:59.370
but here's an even easier way. When we create a new turtle,

132
08:59.700 --> 09:01.770
look at the prompt that it's giving us.

133
09:02.040 --> 09:07.040
It's actually giving us a way to initialize a new turtle object already with a

134
09:08.730 --> 09:09.720
shape set up.

135
09:10.230 --> 09:14.130
Now this shape is set to have a default value

136
09:14.160 --> 09:15.600
which is basically the arrow.

137
09:16.020 --> 09:21.020
But we can also specify the shape and give it the turtle shape to begin with.

138
09:23.580 --> 09:27.570
Now, when I run the code you can see that firstly,

139
09:27.990 --> 09:32.990
I get a turtle shape and then the pen is up and I'm not drawing

140
09:33.120 --> 09:37.980
and then it moves to this place on the graph; -230, -100.

141
09:38.880 --> 09:43.880
So now the next thing we want to do is to be able to create lots of turtles,

142
09:44.430 --> 09:45.263
right?

143
09:45.420 --> 09:50.420
What if we had all of the colors in the rainbow and we create a turtle for each

144
09:51.420 --> 09:52.253
color?

145
09:52.290 --> 09:56.580
So there's six colors in this list and these of course,

146
09:56.670 --> 10:00.600
correspond to the colors which turtle will recognize.

147
10:01.050 --> 10:02.760
So here's a challenge for you.

148
10:03.330 --> 10:06.360
I want you to create six turtles,

149
10:06.840 --> 10:10.050
one for each of the colors in this list of colors.

150
10:10.320 --> 10:15.320
You're aiming for the turtles to all go to the starting line in a distribution

151
10:15.960 --> 10:19.350
that looks something like this. It doesn't have to be precise,

152
10:19.380 --> 10:21.150
you don't have to get it perfectly right.

153
10:21.480 --> 10:25.980
But just make sure that they're sort of evenly spaced out and they are at the

154
10:25.980 --> 10:30.570
starting line. So this is what you're aiming for; six turtles, six colors,

155
10:30.600 --> 10:34.650
all starting at the starting point along a different point on the Y axis.

156
10:35.340 --> 10:36.780
Pause the video and give that a go.

157
10:39.060 --> 10:41.610
So we know that in order to create lots of turtles,

158
10:41.670 --> 10:43.920
we're going to need some sort of a loop.

159
10:44.370 --> 10:49.370
So let's go ahead and use a for loop to say turtle_index

160
10:50.130 --> 10:55.130
and we're going to create a range to specify how many turtles we need.

161
10:56.730 --> 11:00.900
Our range function will go from 0 to 6.

162
11:01.380 --> 11:05.880
And remember that the range function actually doesn't include the number six,

163
11:05.910 --> 11:10.890
so it'll create a range from 0 to 5. And once we've done that,

164
11:10.890 --> 11:15.890
then we can indent this block of code so that we create six turtles.

165
11:17.160 --> 11:19.650
But at the moment, they're all going to the same position.

166
11:20.790 --> 11:23.220
So how can we change this? Well,

167
11:23.580 --> 11:27.900
we want the X-position to always be the same for all the turtles,

168
11:27.960 --> 11:31.260
because the X-position is along the horizontal axis

169
11:31.410 --> 11:34.680
and we want all the turtles to start at the starting point.

170
11:35.010 --> 11:39.780
Nobody gets a headstart. But the Y-position is the thing that we want to change.

171
11:40.290 --> 11:45.290
A really simple way of doing this is to simply create a list of Y-positions

172
11:46.650 --> 11:50.400
and you can work out some sort of reasonable position that you want to take.

173
11:50.670 --> 11:55.660
So let's say we start out at -70 and then we just increased by 30 each

174
11:55.660 --> 11:56.380
time.

175
11:56.380 --> 12:01.380
So then that becomes -40 and then -10 and then 20,

176
12:01.720 --> 12:04.000
50 and 80.

177
12:04.060 --> 12:08.410
So it's roughly distributed somewhere along the middle. Now,

178
12:08.410 --> 12:11.380
instead of using this Y-position

179
12:11.380 --> 12:13.630
which is hardcoded -100,

180
12:14.020 --> 12:19.020
we're going to take the Y-positions and then pass in our turtle_index like

181
12:19.080 --> 12:21.900
this. So now when we rerun this code,

182
12:21.960 --> 12:24.270
you can see that for each of the turtles

183
12:24.300 --> 12:27.060
they're all going to get an individual Y-position

184
12:27.450 --> 12:30.660
and they're all separated by 30 in distance.

185
12:31.080 --> 12:34.650
Now we've got our turtles neatly lined up at the starting point.

186
12:34.950 --> 12:37.530
The next thing is to give them a different color.

187
12:37.650 --> 12:42.030
So we're going to use the list of colors and then picking out the color using

188
12:42.090 --> 12:43.440
the turtle_index.

189
12:43.770 --> 12:48.770
So now we should get some multicolored turtles and it will be much easier to bet

190
12:49.830 --> 12:53.280
on a turtle. So now that we have our turtle race

191
12:53.340 --> 12:55.020
all set up and ready to go,

192
12:55.350 --> 12:58.890
the next step is to actually get the turtles to start moving.

193
12:59.310 --> 13:00.750
But before we can do that,

194
13:00.840 --> 13:05.840
I really want you to get a good grasp of how the coordinate system works in

195
13:05.940 --> 13:08.220
turtle. So in the next lesson,

196
13:08.310 --> 13:11.850
I've got a quick quiz for you just to make sure that you really understand

197
13:11.880 --> 13:12.930
what's going on here.