WEBVTT

0
00:00.270 --> 00:05.270
Now that we've used colorgram to extract all of the colors from our image

1
00:06.630 --> 00:11.490
and we've created a list from that extraction and we've gotten rid of all the

2
00:11.490 --> 00:12.323
white shades,

3
00:12.660 --> 00:17.660
then we're now ready to go ahead and start using this color list to create our Hirst

4
00:18.630 --> 00:19.463
painting.

5
00:19.620 --> 00:23.490
So you can either delete the rest of the code or leave it commented out.

6
00:24.000 --> 00:29.000
But the goal of the challenge is to use turtle and those colors that you've just

7
00:29.400 --> 00:33.240
extracted to create a spot painting like this.

8
00:33.750 --> 00:36.270
Here's the requirements of the program.

9
00:36.810 --> 00:41.810
You're going to paint a painting with 10 by 10 rows of spots.

10
00:42.900 --> 00:47.700
So that's going to be 10 along this side and 10 along this side.

11
00:48.330 --> 00:53.330
Each of your dots should be around 20 in size and spaced apart by around 50

12
00:53.490 --> 00:54.323
paces.

13
00:54.990 --> 00:59.990
So you're going to need to look at the documentation for turtle to figure out

14
01:00.060 --> 01:01.590
how to draw these dots.

15
01:02.160 --> 01:06.750
You're going to have to figure out how to move your turtle so that it creates

16
01:06.780 --> 01:11.780
this 10 by 10 pattern and paint our hundred dots using the color palette that

17
01:13.260 --> 01:16.410
we generated. This is your chance to shine,

18
01:16.710 --> 01:20.100
and it's time to pause the video and complete the final project.

19
01:25.880 --> 01:30.140
So the first thing we're going to do is we're of course going to need to import

20
01:30.200 --> 01:31.070
our turtle.

21
01:31.640 --> 01:35.720
And I'm going to give it an alias just to make it more clear what it is that I'm

22
01:35.720 --> 01:40.550
referring to. I'm going to create my turtle, which I'll call Tim again.

23
01:40.970 --> 01:45.050
And it's going to be created from the turtle module and inside there,

24
01:45.080 --> 01:46.700
there's a turtle class.

25
01:47.360 --> 01:51.740
Now that we have our object created and saved inside Tim,

26
01:52.160 --> 01:55.310
we're ready to go ahead and do some things with this turtle.

27
01:55.880 --> 01:59.210
If you take a look at the documentation for turtle,

28
01:59.630 --> 02:04.630
you can see that instead of just drawing circles or just moving forwards or left

29
02:05.030 --> 02:07.280
or right, you can also draw a dot.

30
02:07.820 --> 02:10.280
Now a dot takes two parameters,

31
02:10.580 --> 02:13.310
its size and its color.

32
02:13.760 --> 02:18.170
So we mentioned that we were going to draw a 20-size dot and then we're going to

33
02:18.170 --> 02:22.340
pass in a random color. So let's create our dot.

34
02:22.370 --> 02:25.040
Let's say tim.dot,

35
02:25.550 --> 02:30.550
and then let's give it a size of 20 and then let's give it a random color. Now

36
02:31.640 --> 02:36.640
because we're using the RGB color that has the r, g and b values between 0 and

37
02:39.380 --> 02:40.790
255,

38
02:41.330 --> 02:46.330
we first have to get the turtle module to change its color mode to

39
02:46.610 --> 02:49.910
255. And we saw this in previous lessons already.

40
02:50.510 --> 02:55.510
So now we can go into our color list and pick a random color using the random

41
02:56.870 --> 02:57.703
module.

42
02:58.160 --> 03:03.160
So let's tap the random module and get hold of the choice method and pass in our

43
03:04.450 --> 03:05.320
color_list.

44
03:05.830 --> 03:10.210
So now it's going to choose a random color from that list and then create a dot

45
03:10.360 --> 03:15.360
hopefully. Now we don't want our painting to disappear once we hit run,

46
03:15.760 --> 03:17.800
because right now if I run this code,

47
03:18.040 --> 03:20.650
you can see it paints a dot and then it quickly flashes away.

48
03:21.190 --> 03:26.190
So let's create a new screen object from the turtle module and the class is

49
03:27.580 --> 03:28.630
called a screen.

50
03:29.170 --> 03:34.170
And then we can get our screen to change its behavior by calling exitonclick.

51
03:36.430 --> 03:40.030
This way when we run our code, you can see our dot painted,

52
03:40.450 --> 03:42.910
and then only when we click does it disappear.

53
03:43.450 --> 03:46.060
So we've managed to get our first dot onto the screen.

54
03:46.570 --> 03:50.710
The next step is figuring out how we can get this process repeated.

55
03:51.280 --> 03:56.280
What if we get our Tim to move forwards by say,

56
03:56.500 --> 04:00.520
50 paces, and then we draw another dot.

57
04:00.640 --> 04:03.100
So let's put this into a loop,

58
04:04.540 --> 04:06.460
let's get it to run 10 times,

59
04:07.090 --> 04:11.800
and then let's indent this block so that it goes inside the loop.

60
04:12.430 --> 04:15.670
And now our turtle is going to draw 10 dots.

61
04:16.180 --> 04:20.620
But notice how it goes off the screen and it kind of starts bang in the middle.

62
04:21.130 --> 04:25.120
And there's also other problems like we're drawing the path as the turtle is

63
04:25.120 --> 04:28.330
traveling. Let's address one thing at a time.

64
04:28.390 --> 04:33.100
Let's try to move our starting dot so it starts somewhere down here.

65
04:33.730 --> 04:38.730
Now there's quite a few ways of solving this. One way is simply by turning our

66
04:40.120 --> 04:45.120
Tim, the turtle, before we go into the loop and setting its heading so that it

67
04:46.000 --> 04:48.250
points in this direction.

68
04:51.030 --> 04:56.030
You can have a play around with the heading and through my experimentation or

69
04:56.820 --> 04:58.110
playing around with the code,

70
04:58.140 --> 05:03.060
I've realized that I need to get this heading somewhere between 180 and 

71
05:03.060 --> 05:03.893
270.

72
05:04.320 --> 05:09.120
So what's halfway between 270 and 180? Well,

73
05:09.120 --> 05:12.150
it's going to be 225.

74
05:12.630 --> 05:16.080
So let's change our heading and let's try again.

75
05:17.670 --> 05:22.320
And you can see that our turtle is now moving roughly in the right direction.

76
05:22.890 --> 05:26.250
So we know that each time the turtle moves by 50.

77
05:26.640 --> 05:31.530
So if we want it to start about here, ish, then we need to move it one,

78
05:31.530 --> 05:33.480
two, three, four, five times.

79
05:33.480 --> 05:36.840
So 50 times five is 250.

80
05:37.230 --> 05:42.230
So we'll set our heading for Tim and then we'll get him to move forward by 250

81
05:42.720 --> 05:47.580
paces. So that way we get started right over here.

82
05:48.270 --> 05:49.290
Now, at this point

83
05:49.290 --> 05:53.880
it's still going to be pointing in that direction that we set over here.

84
05:54.240 --> 05:57.680
So we'll have to set the heading back to zero

85
05:57.710 --> 06:00.560
if we want it to continue in this direction.

86
06:03.380 --> 06:04.280
Now at this stage,

87
06:04.310 --> 06:09.310
you might realize you need to do a little bit of tweaking. So we could maybe move

88
06:10.220 --> 06:15.220
our turtle forwards a little bit more so that it starts around here and we get

89
06:15.950 --> 06:18.440
enough space for our dots.

90
06:19.640 --> 06:23.270
But the next important thing we need to solve before we get rid of the lines

91
06:23.300 --> 06:25.730
because we can still see the path of our turtle

92
06:25.760 --> 06:29.990
which is really helpful, is we need to figure out how to get the turtle to

93
06:30.260 --> 06:33.860
turn left, move up by 50, turn left again

94
06:34.220 --> 06:36.650
and then start creating the second row.

95
06:37.580 --> 06:42.230
That means we need to turn Tim so that it faces up

96
06:42.620 --> 06:45.500
which is a heading of 90,

97
06:45.860 --> 06:48.650
or you could also just turn it left by 90 degrees.

98
06:49.190 --> 06:53.570
And then we're going to get it to move forwards by 50 paces.

99
06:54.110 --> 06:57.200
And then we're going to get it to turn left again.

100
06:57.230 --> 07:01.400
So we'll set the heading to 180, which is facing left.

101
07:02.270 --> 07:05.450
It's through these step-wise changes to your code

102
07:05.660 --> 07:08.660
that you can actually get a good sense of what it's doing

103
07:08.840 --> 07:12.680
because you can see it drawing and then see if it's doing what you want it to

104
07:12.680 --> 07:16.970
do. Now we know that we have our for loop

105
07:17.000 --> 07:20.840
which is able to draw a line of dots going from left to right.

106
07:21.350 --> 07:25.040
Why don't we move our turtle so that it starts out here again,

107
07:25.460 --> 07:28.100
and then it can move along and create another line?

108
07:29.510 --> 07:31.250
So after turning it to the left,

109
07:31.490 --> 07:36.170
we're going to get it to go forwards by one, two, three, four,

110
07:36.170 --> 07:38.240
five, six, seven, eight, nine,

111
07:38.240 --> 07:42.110
ten, by 10 times 50 paces.

112
07:42.380 --> 07:44.450
So that's going to be 500.

113
07:46.940 --> 07:51.940
So now the final thing we need to do is to change its heading so that it faces

114
07:53.450 --> 07:56.390
right again. And now we're pretty close.

115
07:56.600 --> 07:59.060
All we need to do is to get this

116
07:59.090 --> 08:02.690
to repeat every single time we draw 10 dots.

117
08:03.680 --> 08:06.830
How can we do that? Well, firstly,

118
08:06.860 --> 08:10.460
this needs to go inside the for loop. Well,

119
08:10.490 --> 08:15.490
let's say that we create a new variable called number_of_dots,

120
08:18.170 --> 08:22.790
and we set it to a hundred. We're going to use that instead of the range

121
08:23.390 --> 08:27.680
and we're going to create a range from 1 to the total number of dots we need

122
08:27.680 --> 08:28.513
to create.

123
08:28.700 --> 08:32.750
And then we can replace this underscore with an actual variable that we'll use

124
08:32.780 --> 08:35.480
inside the for loop. So we'll call it

125
08:36.980 --> 08:41.980
dot_count because this is going to represent the current number of dots that

126
08:42.590 --> 08:46.250
have been painted. Now that we've got the dot count,

127
08:46.400 --> 08:51.400
we can then go ahead and use an if statement to check and see if the dot_count

128
08:54.720 --> 08:59.460
% 10 is equal to zero.

129
09:00.060 --> 09:05.040
Then this means that the dot count is either 10 or it's 20, 30,

130
09:05.040 --> 09:07.410
40, 50, 60, 70, 100.

131
09:08.430 --> 09:10.680
And under those circumstances,

132
09:10.740 --> 09:15.740
we want our tim to move so that it can go to a new line.

133
09:16.770 --> 09:18.270
So now, if I run this,

134
09:19.320 --> 09:24.320
you can see that Tim draws one row of dots and then swings back around,

135
09:24.900 --> 09:29.900
start at the beginning and draws another row of dots. And then keeps on repeating

136
09:30.030 --> 09:34.020
this until it gets to the point where it's drawn hundred dots.

137
09:34.530 --> 09:36.300
But this is obviously very slow

138
09:36.390 --> 09:41.390
so we could speed things up a little bit by changing the speed of Tim at the

139
09:42.060 --> 09:44.280
very beginning to fastest.

140
09:44.730 --> 09:49.730
So this way it'll animate a lot quicker and we can see our dots show up and it

141
09:51.060 --> 09:53.310
takes a little bit less time to see it in action.

142
09:54.060 --> 09:57.930
Once our painting is completed, you can see there's one other bug.

143
09:58.440 --> 10:02.580
Our final dot is not painted. And this is of course

144
10:02.580 --> 10:07.350
because our range operator goes from 1 to 100

145
10:07.890 --> 10:12.890
and that means it's only going to run 99 times because 100 - 1 is equal to

146
10:15.120 --> 10:18.330
99. So we can add one to this.

147
10:21.140 --> 10:21.590
<v 2>Yeah.</v>

148
10:21.590 --> 10:25.550
<v 0>So once we've changed that, then we managed to get our hundredth dot,</v>

149
10:26.000 --> 10:29.660
which of course, again, triggers a new line. Now,

150
10:29.720 --> 10:32.180
a lot of these lines were really useful when

151
10:32.250 --> 10:35.540
we were trying to visualize how our turtle is moving.

152
10:36.020 --> 10:37.970
But now that we've got our painting in place,

153
10:38.180 --> 10:40.220
we need to try and get rid of these lines.

154
10:40.880 --> 10:45.880
So we know that from the documentation we can use pen up and pen down. At the

155
10:46.310 --> 10:49.310
very beginning and the moment where we've created Tim,

156
10:49.610 --> 10:54.610
we can already get the pen to come up so that we don't draw those lines that you

157
10:54.980 --> 10:59.420
see. By drawing dots we don't actually need the pen to go down.

158
10:59.720 --> 11:02.000
It's just going to leave a dot and then move on.

159
11:02.450 --> 11:05.300
So just by writing pen up and no pen down,

160
11:05.540 --> 11:08.150
we already to get our dots being drawn.

161
11:09.830 --> 11:14.300
Now the very last improvement that I can think of is once our painting is

162
11:14.300 --> 11:18.440
completed, I'd really like to get rid of the shape of the turtle,

163
11:18.470 --> 11:20.720
which in our case is a little arrow.

164
11:21.170 --> 11:24.140
Now that's really helpful when we're trying to figure out which direction it's

165
11:24.140 --> 11:29.090
facing or how it's moving. But at the very end, we don't really want this.

166
11:31.010 --> 11:35.660
So again, back to the documentation, how can we get rid of our turtle?

167
11:36.110 --> 11:39.290
Well, there's show turtle and hide turtle.

168
11:39.710 --> 11:41.540
And this is how we make the turtle

169
11:41.540 --> 11:46.540
invisible. It even tells us that you can do this while in the middle of a drawing because

170
11:47.660 --> 11:50.840
hiding the turtle will speed up the drawing observably.

171
11:51.320 --> 11:56.320
So let's go ahead and hide our turtle as well as moving the pen up.

172
11:58.570 --> 12:01.390
And let's re-visualize this.

173
12:03.400 --> 12:07.570
And you can see our dots being drawn without our turtle

174
12:07.930 --> 12:12.930
and we end up with a beautiful Hirst painting that we've created completely

175
12:13.930 --> 12:15.220
from scratch. Well,

176
12:15.250 --> 12:18.310
maybe with a little bit of help from Damien Hirst's color palette.

177
12:19.060 --> 12:23.920
So I hope you enjoyed this project. And I look forward to seeing you tomorrow.