WEBVTT 0 00:00.180 --> 00:05.180 Now the final challenge for today comes courtesy of a childhood toy that you 1 00:05.190 --> 00:08.310 might've already seen. So this is going to be our training bike, 2 00:08.610 --> 00:12.330 and it's going to be the last coding exercise before we tackle our final 3 00:12.330 --> 00:16.500 project. So what are we doing? We're making a spirograph. 4 00:16.800 --> 00:19.350 Do you remember those geometric gear shaped things 5 00:19.350 --> 00:23.160 which you would draw and draw and it would make these funky circular shapes? 6 00:23.490 --> 00:25.980 Well, that's what we're going to be doing, but with turtle. 7 00:26.400 --> 00:31.400 We're going to get our turtle to draw a number of circles each with a radius of 8 00:32.040 --> 00:35.250 a hundred in distance. And once it's done, 9 00:35.280 --> 00:39.060 we should end up with something that looks like this. 10 00:39.900 --> 00:43.710 So we're going to be using our random colors and we're going to be using the 11 00:43.710 --> 00:44.640 documentation. 12 00:45.540 --> 00:50.070 I want you to dig through the documentation and see if you can figure out how to 13 00:50.070 --> 00:54.330 draw a circle and to determine how large the circle should be. 14 00:55.020 --> 00:59.910 And then I want you to figure out how you can get it to repeatedly draw a circle 15 01:00.180 --> 01:05.130 and change the tilt of the circle by a little bit each time, 16 01:05.370 --> 01:09.930 so that you end up with that effect. Pause the video and give that a go now. 17 01:12.960 --> 01:13.770 Alright. Again, 18 01:13.770 --> 01:16.530 we're going to be scrolling through all of the available methods 19 01:16.590 --> 01:18.960 looking for something that might help us. 20 01:19.800 --> 01:23.790 I think it's going to be somewhere in the turtle motion's move and draw section. 21 01:24.150 --> 01:25.740 And if you look down this list, 22 01:25.770 --> 01:30.770 you can see there is a method that allows us to draw a circle with a given 23 01:31.110 --> 01:31.943 radius. 24 01:32.070 --> 01:37.070 So we can put in the radius as one of the inputs and draw our circle. Heading 25 01:37.950 --> 01:39.420 back to our code, 26 01:39.450 --> 01:44.450 I'm going to delete some of the previous parts where we've got the directions 27 01:44.970 --> 01:46.710 and also changing the pen size. 28 01:47.040 --> 01:51.090 I'm going to leave the speed as fastest because we're going to need it to go 29 01:51.090 --> 01:53.430 pretty quick to draw all of those circles. 30 01:53.910 --> 01:56.400 And I'm also going to delete the final for loop. 31 01:57.270 --> 02:01.710 Now notice how I've got this warning here telling me that it doesn't really like 32 02:01.740 --> 02:06.740 the idea of me calling a variable the same as the name of a function. 33 02:07.470 --> 02:10.890 So why don't we just call this color instead 34 02:11.250 --> 02:16.230 and then we can return that as the output and get rid of that warning. 35 02:16.860 --> 02:20.490 Now we're ready to code up our spirograph. 36 02:20.820 --> 02:25.170 So the first thing that we're going to try and do is to draw a circle. 37 02:25.650 --> 02:29.100 Now the circle requires a radius, 38 02:29.130 --> 02:33.570 so I'm going to give it a radius of a hundred. And when I hit run, 39 02:33.810 --> 02:37.080 we can see briefly that it painted a circle. 40 02:37.530 --> 02:42.060 So let's go ahead and create our screen from t.screen. 41 02:42.660 --> 02:47.660 And then we can use that screen.exitonclick method so that when we run our 42 02:48.480 --> 02:53.130 code, it doesn't actually remove the window until we click on it. 43 02:53.880 --> 02:57.120 So I can see that I've painted my first circle 44 02:57.300 --> 03:01.750 and I would like, if possible, to make my circle 45 03:01.960 --> 03:04.060 have a different color each time. 46 03:04.420 --> 03:09.420 So I'm going to change the color to use a random color that's produced by this 47 03:10.030 --> 03:13.630 function. So now every time I run my code, 48 03:13.690 --> 03:16.270 you'll see a different colored circle. 49 03:17.050 --> 03:22.050 The turtle is basically gonna draw out this path and then go back to its 50 03:22.870 --> 03:25.600 original position facing East. 51 03:26.020 --> 03:29.740 If we wanted multiple circles to overlap with each other, 52 03:29.860 --> 03:34.150 then we're going to have to change the heading or the pointing direction of our 53 03:34.150 --> 03:37.450 turtle. If we look at this section, 54 03:37.750 --> 03:40.300 the current state of our turtle, 55 03:40.540 --> 03:43.420 you can see that you can get the current position, 56 03:43.450 --> 03:46.900 the current Y coordinate and X coordinate, 57 03:47.110 --> 03:49.450 but you can also get hold of the current heading, 58 03:49.480 --> 03:52.150 so which direction it's pointing towards. 59 03:52.720 --> 03:55.840 And all we have to do is just call this heading method. 60 03:56.770 --> 04:01.210 So now if I print my tim.heading, 61 04:01.720 --> 04:06.720 then you can see that when I run my code and I take a look inside the console, 62 04:07.030 --> 04:09.400 it's pointing at 0.0. 63 04:10.090 --> 04:15.040 What if we could change the heading to make it a little bit shifted? 64 04:15.670 --> 04:15.880 Well, 65 04:15.880 --> 04:20.740 there's actually a different method for changing the heading and getting the 66 04:20.740 --> 04:25.570 heading. For example, if we want to set the heading, 67 04:25.600 --> 04:29.590 then we have to use this method and give it a number. 68 04:30.370 --> 04:32.890 So what if I get the current heading 69 04:35.980 --> 04:39.580 and then maybe I add 5 or 10 degrees to it, 70 04:39.910 --> 04:44.050 and then I change my turtle's heading using set 71 04:44.050 --> 04:47.560 heading to the current heading plus 10. 72 04:49.450 --> 04:54.190 And then we get a new circle drawn. So let's see what this looks like. 73 04:55.840 --> 04:59.830 And you can see that I've drawn one circle and then I've tilted to the left a 74 04:59.830 --> 05:03.940 little bit and then drawn a second circle. So extrapolating this, 75 05:03.970 --> 05:06.610 you can imagine that if we had a loop that kept going, 76 05:06.850 --> 05:09.610 then we could draw our final spirograph shape. 77 05:10.180 --> 05:11.860 Let's create that loop. 78 05:12.160 --> 05:15.910 So the parts that don't need to be in the loop is setting the speed. 79 05:16.300 --> 05:18.880 But the color needs to change each time, 80 05:19.120 --> 05:23.410 the circle needs to be drawn each time and the heading needs to be updated each 81 05:23.410 --> 05:24.243 time. 82 05:24.280 --> 05:29.280 Now I'm going to simplify this line of code to contract it into a single line. 83 05:31.540 --> 05:34.870 So I'm setting Tim to a new heading 84 05:35.230 --> 05:38.290 and that is from the current heading plus 10. 85 05:39.250 --> 05:43.000 So now let's create our loop and let's say 86 05:43.000 --> 05:45.550 we're going to loop a hundred times. 87 05:48.540 --> 05:51.900 Now let's run our code and see what it looks like. 88 05:54.090 --> 05:56.910 You can see it's drawing out our spirograph. 89 05:56.930 --> 06:00.350 It's not as dense as it previously was, 90 06:00.830 --> 06:02.330 but look at what it's doing. 91 06:02.390 --> 06:06.410 It's drawing the same circle on top of a previous circle, 92 06:06.650 --> 06:08.510 cause it doesn't know when to stop. 93 06:09.200 --> 06:13.790 It's stopping only once it's gone through the hundred rotations. 94 06:14.270 --> 06:19.270 So how can we figure out a way to get it to only draw as many circles as we 95 06:19.730 --> 06:20.563 need? 96 06:21.740 --> 06:26.740 Let's say that I created a new function called draw_spirograph, 97 06:27.890 --> 06:31.520 and this function accepts a single parameter, 98 06:31.790 --> 06:35.390 which is the size of the gap. 99 06:37.550 --> 06:42.260 And that is going to be the size that's going to be in between each of these 100 06:42.260 --> 06:43.490 circles that gets drawn. 101 06:44.000 --> 06:48.230 And that's of course determined by the direction heading of my arrow. 102 06:48.890 --> 06:51.710 So if I pass in this size of gap, 103 06:51.740 --> 06:56.450 I'm going to use it here to change the tilt of my circle. 104 06:57.020 --> 07:02.020 But I can also use that because it's a degree to determine how many times my 105 07:02.780 --> 07:04.460 spirograph needs to be drawn. 106 07:04.910 --> 07:09.440 So we know that there's 360 degrees in a full circle. 107 07:09.980 --> 07:12.980 And for each circle that we're drawing, 108 07:13.310 --> 07:17.720 we're basically giving it a different offset right? And 109 07:17.720 --> 07:19.070 that's our size_of_gap. 110 07:19.490 --> 07:22.760 So if we divide 360 by each offset, 111 07:23.120 --> 07:28.120 then we'll repeat our code for as many times as we need to draw all the circles 112 07:28.760 --> 07:31.940 and complete the final spirograph. Now, 113 07:32.000 --> 07:35.960 the only problem is if I call this method, 114 07:36.770 --> 07:40.460 dra, I think I meant to write draw. 115 07:41.540 --> 07:45.410 So draw spirograph and I give it a size of five. 116 07:45.470 --> 07:47.750 So a little bit smaller than last time, 117 07:48.050 --> 07:52.100 tilting a little bit less each time. You can see that if I run this code, 118 07:52.490 --> 07:53.780 we get an error. 119 07:54.350 --> 07:59.350 And the error says that the float object can't be used as an integer 120 08:00.650 --> 08:03.380 and it's telling us where we have that float object. 121 08:03.950 --> 08:08.240 So remember that this number is going to go into here 122 08:08.300 --> 08:13.220 and then 360 divided by five is actually going to give us a floating point 123 08:13.220 --> 08:16.070 number, even though it divides cleanly 124 08:16.100 --> 08:19.340 just because this is how division works in Python. Now, 125 08:19.370 --> 08:24.370 unfortunately though our range function is going to need a whole number, 126 08:25.160 --> 08:26.030 an integer. 127 08:26.360 --> 08:30.890 It can't take a floating point number because then how many times are we 128 08:30.890 --> 08:34.070 repeating it? 3.4 times? What does that even mean? 129 08:34.370 --> 08:37.130 So this input has to be a whole number. 130 08:37.520 --> 08:42.520 So let's turn it into an integer by creating an integer and then wrapping this 131 08:44.060 --> 08:48.470 calculation inside the brackets. So now when we run our code, 132 08:48.500 --> 08:53.500 you can see it paints our spirograph, shifting by five degrees each time. 133 08:54.710 --> 08:59.670 And once it's gone through all of the iterations and the spirograph is 134 08:59.670 --> 09:02.280 complete, then it actually stops. 135 09:03.750 --> 09:07.050 Did you manage to get the solution for this challenge? 136 09:07.500 --> 09:12.500 If not, be sure to review this lesson and fix your code as needed. Once you're 137 09:13.020 --> 09:15.600 happy with everything that we've explained so far, 138 09:16.050 --> 09:19.080 then it's time to head to the final challenge. 139 09:19.530 --> 09:22.560 Let's go ahead and create a million dollar painting. 140 09:23.160 --> 09:26.400 So for all of that and more, I'll see you on the next lesson.