WEBVTT 00:00:00.000 --> 00:00:07.000 Hi everyone, some of you are again to tell you a little bit about the drawing project. 00:00:07.000 --> 00:00:11.320 So if you go to the page, it tells you at the start this project you will make a drawing 00:00:11.320 --> 00:00:12.880 using Python's Turtle Library. 00:00:12.880 --> 00:00:15.960 It's up to you to make a drawing you actually care about making. 00:00:15.960 --> 00:00:21.440 This drawing could be static or you could create an animation using the Super Turtle Library. 00:00:21.440 --> 00:00:25.160 This is always one of the projects that is my students' favorites. 00:00:25.160 --> 00:00:30.160 You can see all of these examples are of previous student work of students that I've taught. 00:00:30.160 --> 00:00:33.320 So it's really fun to see their work displayed here. 00:00:33.320 --> 00:00:37.380 And what I really love about this project is that it's up to the students to pick a difficulty 00:00:37.380 --> 00:00:40.160 level that's appropriate to them. 00:00:40.160 --> 00:00:44.160 So if you feel like what's most comfortable for you is to experiment with colors, practice 00:00:44.160 --> 00:00:47.560 functions, really practice those fundamentals. 00:00:47.560 --> 00:00:50.080 This project is scalable to you. 00:00:50.080 --> 00:00:54.920 But say you really want to push the limits of your abilities, experiment with Super Turtle, 00:00:54.920 --> 00:01:00.680 with animation, you can create something a little bit more complex like this, Pac-Man drawing. 00:01:00.680 --> 00:01:07.960 So it's really up to you to think about for you what makes the most sense. 00:01:07.960 --> 00:01:12.560 I thought I would walk you through a little bit how I introduced this project to my students 00:01:12.560 --> 00:01:15.640 and I think it may help you as well. 00:01:15.640 --> 00:01:20.240 So what I first do is I just show you some examples of previous student work. 00:01:20.240 --> 00:01:24.440 Here are also a few more examples specifically using the Super Turtle Library. 00:01:24.440 --> 00:01:29.280 Some of the examples on the project page are when we did not use Super Turtle, but now 00:01:29.280 --> 00:01:32.440 animation is even easier with Chris's package. 00:01:32.440 --> 00:01:36.360 So these are all examples specifically using the Super Turtle Library. 00:01:36.360 --> 00:01:44.600 It allows you to easily rotate items or scale items or what's called interpolate items or 00:01:44.600 --> 00:01:47.200 move them around or fade colors. 00:01:47.200 --> 00:01:51.000 It allows you to do those things a little bit more easily. 00:01:51.000 --> 00:01:55.920 So hopefully you can take this as a bit of inspiration as well. 00:01:55.920 --> 00:02:00.600 And then what I have them do is start to consider what is Turtle particularly good at? 00:02:00.600 --> 00:02:05.840 Turtle is not particularly good at making super exact and precise drawings and curves, 00:02:05.840 --> 00:02:09.120 ways that you would actually draw with in real life. 00:02:09.120 --> 00:02:14.800 But what it's particularly good at is shapes and geometry and kind of like math drawing, 00:02:14.800 --> 00:02:17.000 not that you have to be super mathematical. 00:02:17.000 --> 00:02:20.520 So what I do is I have them look at the stuck and I also consider how could you break the 00:02:20.520 --> 00:02:22.440 stuck into only two shapes. 00:02:22.440 --> 00:02:28.240 So we can look at it and we all know it's a duck, but actually it's only made up of rectangles 00:02:28.240 --> 00:02:30.000 and a circle. 00:02:30.000 --> 00:02:34.680 And so for this stuck image, you would actually only need two functions, one rectangle function 00:02:34.680 --> 00:02:36.840 and one circle function. 00:02:36.840 --> 00:02:42.320 And what's great about it is that the rectangles can be adjustable in different shapes and 00:02:42.320 --> 00:02:46.680 sizes, although this is with Google size, the functions work exactly the same way by 00:02:46.680 --> 00:02:53.320 just in the height, it gets taller by just the width, it'll get skinnier, the same concept, 00:02:53.320 --> 00:02:55.400 and it can also easily adjust for the color. 00:02:55.400 --> 00:02:59.560 So you just need one function that draws a rectangle of any width or any height and of 00:02:59.560 --> 00:03:02.720 any color and you can create a duck. 00:03:02.720 --> 00:03:06.600 And what's nice about this is that then you can move small pieces of it. 00:03:06.600 --> 00:03:09.560 Perhaps you want the eye to move back and forth. 00:03:09.560 --> 00:03:13.080 Perhaps you want the beak to rotate. 00:03:13.080 --> 00:03:17.120 Maybe you want the neck to grow and shrink. 00:03:17.120 --> 00:03:24.040 These are all super easy transformations thanks to the Super Turtle Library. 00:03:24.040 --> 00:03:28.480 Then I have the students think about what can you draw with just a triangle or rectangle 00:03:28.480 --> 00:03:30.080 and a circle. 00:03:30.080 --> 00:03:33.920 And I often rely on whiteboards, like I said in the previous video, so I really give them 00:03:33.920 --> 00:03:38.080 whiteboards or get them standing up on the standing whiteboards we have in my school 00:03:38.080 --> 00:03:40.400 and really just drawing, trying to go quick. 00:03:40.400 --> 00:03:45.360 There are some creative things that you can think of ways to use a triangle, a rectangle, 00:03:45.360 --> 00:03:46.760 and a circle. 00:03:46.760 --> 00:03:50.040 Students have come up with the ideas of a llama. 00:03:50.040 --> 00:03:56.800 You can create buildings or robots or cars or water bottles or really anything that you 00:03:56.800 --> 00:04:03.960 can imagine with just these three shapes used in creative ways. 00:04:03.960 --> 00:04:08.040 And then lastly what I have them do before nailing down an idea is do a little bit of 00:04:08.040 --> 00:04:09.880 research for inspiration. 00:04:09.880 --> 00:04:15.840 So each one of these terms you can just directly pop into Google and you'll see some of these 00:04:15.840 --> 00:04:18.120 animations that I've added here. 00:04:18.120 --> 00:04:22.120 So for example this one is just a creative use of circles. 00:04:22.120 --> 00:04:28.120 This is simply rectangle circles and you could use just kind of like a thick line for the 00:04:28.120 --> 00:04:30.360 little candle wick. 00:04:30.360 --> 00:04:38.640 This squid you could really just use a rectangle, a half circle circles and thick lines. 00:04:38.640 --> 00:04:41.320 You could even be more creative, it doesn't have to look exactly like this. 00:04:41.320 --> 00:04:42.920 You don't have to do a half circle. 00:04:42.920 --> 00:04:49.920 You could easily just imagine a full circle with a rectangle underneath as well. 00:04:49.920 --> 00:04:53.560 And then the eyes are really just circles, right? 00:04:53.560 --> 00:04:54.920 Circles use creatively. 00:04:54.920 --> 00:04:59.920 You don't have to get quite as advanced as how it starts to adjust some perspective 00:04:59.920 --> 00:05:01.680 as it moves over. 00:05:01.680 --> 00:05:06.360 So I recommend taking a few minutes, Google a couple of these terms and see what sparks 00:05:06.360 --> 00:05:09.600 your interest. 00:05:09.600 --> 00:05:13.920 Okay so I want to show you a little bit how to get technically set up. 00:05:13.920 --> 00:05:17.960 So if you're on the website it has a few project requirements. 00:05:17.960 --> 00:05:23.840 So the main requirement is that when you run Python drawing.py it should produce a drawing 00:05:23.840 --> 00:05:25.800 without any additional user interaction. 00:05:25.800 --> 00:05:30.800 And when it says without any additional user interaction it means that it should not ask 00:05:30.800 --> 00:05:35.040 the user what color do they want, what size, what dimensions. 00:05:35.040 --> 00:05:37.480 As the designer of this project you get to decide those. 00:05:37.480 --> 00:05:44.400 You get to decide what colors, what size, what shape, what dimensions are you drawing. 00:05:44.400 --> 00:05:49.360 Then it says your drawing should use multiple functions as well as iteration. 00:05:49.360 --> 00:05:51.960 So multiple functions, that's what we're talking about. 00:05:51.960 --> 00:05:57.040 You may want a triangle function, a rectangle function, a circle function. 00:05:57.040 --> 00:06:02.640 Maybe you want a number function because you want to draw a number in your animation. 00:06:02.640 --> 00:06:06.280 I don't know but it's whatever makes most sense to you. 00:06:06.280 --> 00:06:08.160 And as well as iteration. 00:06:08.160 --> 00:06:11.160 So by this it means you want to start practicing. 00:06:11.160 --> 00:06:18.760 If you were going to for example draw these circles, especially the rows of circles, you 00:06:18.760 --> 00:06:27.880 wouldn't want to have 25 multiples of all of lines of code to draw all those circles. 00:06:27.880 --> 00:06:34.640 You would want just one set of circle of I drawing lines and then use iteration to repeat 00:06:34.640 --> 00:06:36.480 them 25 times. 00:06:36.480 --> 00:06:40.440 And so really think about where are pieces in your code that you can repeat. 00:06:40.440 --> 00:06:45.680 When I look at the squid one thing that I noticed is the repetition of these tentacles. 00:06:45.680 --> 00:06:51.640 I think those are also an area where you could use iteration. 00:06:51.640 --> 00:06:56.080 And here as well obviously all the circles moving. 00:06:56.080 --> 00:06:59.120 It also says additionally or optionally. 00:06:59.120 --> 00:07:01.360 Optionally additional Python files could be used. 00:07:01.360 --> 00:07:03.480 I'll show you a little bit about what that means. 00:07:03.480 --> 00:07:08.040 Then it says the read we should contain a short description, evidence of your planning. 00:07:08.040 --> 00:07:11.240 And then you submit your work after each major change. 00:07:11.240 --> 00:07:14.080 And you should have at least three commits over the course of your project. 00:07:14.080 --> 00:07:19.200 You can have more commits but you must have at least three commits to show the progression 00:07:19.200 --> 00:07:21.000 of your project. 00:07:21.000 --> 00:07:25.200 Okay so let's take a look at the code. 00:07:25.200 --> 00:07:27.800 Let me clear this so we start from a fresh start. 00:07:27.800 --> 00:07:32.160 So inside my project I'm also already inside the poetry shelf. 00:07:32.160 --> 00:07:35.000 If I type a less I can see the files. 00:07:35.000 --> 00:07:40.080 I'm going to show you guys a little trick which is as of before today before I show you 00:07:40.080 --> 00:07:41.080 this trick. 00:07:41.080 --> 00:07:44.520 You've always been opening up files one by one. 00:07:44.520 --> 00:07:48.440 But what can be helpful when you're working with a bigger project where you may have one 00:07:48.440 --> 00:07:52.200 or two or three different files is you can do code dot. 00:07:52.200 --> 00:07:56.160 This example of the dot represents the current directory and the current folder. 00:07:56.160 --> 00:08:01.120 So when you run code dot it opens up the whole folder for you and you can see and click on 00:08:01.120 --> 00:08:02.720 all these files. 00:08:02.720 --> 00:08:06.880 You can ignore almost all of them but the only ones you can focus on or should focus 00:08:06.880 --> 00:08:09.040 on are the read me and drawing. 00:08:09.040 --> 00:08:13.000 Feel free to peek around at the others if you would like but really the only ones you 00:08:13.000 --> 00:08:17.880 should be editing are drawing, read me and if you create any additional files. 00:08:17.880 --> 00:08:22.120 So if you take a look in the read me this is where you're going to write the description 00:08:22.120 --> 00:08:25.080 and information on your planning. 00:08:25.080 --> 00:08:28.960 Read me documents are quite common in software packages if you start peeking around and looking 00:08:28.960 --> 00:08:33.480 at code that people post online or even from back in the day when you download and put in 00:08:33.480 --> 00:08:36.880 a disk for software there's almost always a read me file. 00:08:36.880 --> 00:08:41.440 The purpose of the read me file is to communicate to others how to use your software or what 00:08:41.440 --> 00:08:42.800 the software is. 00:08:42.800 --> 00:08:44.200 So same with this project. 00:08:44.200 --> 00:08:50.200 The purpose is to communicate to you and to me and others what is your drawing. 00:08:50.200 --> 00:08:53.000 A markdown file is really just a text file. 00:08:53.000 --> 00:08:59.160 It has some built in syntax for formatting such as hashtags, hashtags create priority so 00:08:59.160 --> 00:09:01.040 hashtag is like a heading one. 00:09:01.040 --> 00:09:07.160 Two hashtags are header two and there's some fancy formatting from that images but you 00:09:07.160 --> 00:09:09.800 don't have to worry about that if you don't want. 00:09:09.800 --> 00:09:15.120 If you're curious to see what the formatting looks like when it's presented, Visual Studio 00:09:15.120 --> 00:09:19.240 Code if you click on this button you can see an example of what it will look like when 00:09:19.240 --> 00:09:25.360 it's actually presented and not only in the code format of the markdown file. 00:09:25.360 --> 00:09:30.000 Okay it says the read me is for your drawing you can place the text in the parentheses 00:09:30.000 --> 00:09:32.480 it's all written in a simple language called markdown. 00:09:32.480 --> 00:09:35.960 Once you've read that you can delete it you can keep it up to you. 00:09:35.960 --> 00:09:41.880 Description of your goal if you would like to include a link or an image please do. 00:09:41.880 --> 00:09:47.120 So here's where if you want you can delete all of this or keep it and then delete it but 00:09:47.120 --> 00:09:55.440 for example I'll say like I will create an animation of a duck with its eyes moving. 00:09:55.440 --> 00:09:57.280 It can be as simple as that. 00:09:57.280 --> 00:10:01.640 If you find a link you can simply just copy and paste the link of inspiration you can 00:10:01.640 --> 00:10:07.400 even add a video or sorry a picture or a video perhaps. 00:10:07.400 --> 00:10:11.480 So what this is telling you is if you want you can drag a picture directly into here 00:10:11.480 --> 00:10:12.760 and then embed it. 00:10:12.760 --> 00:10:19.280 So for example I'm going to use this cs add picture again you can drag it directly into 00:10:19.280 --> 00:10:23.680 your folder on the side and then you can reference it. 00:10:23.680 --> 00:10:31.160 So now I can try to reference my cs add dot png and then when I go over here to the presentation 00:10:31.160 --> 00:10:33.520 we can now see it's directly embedded. 00:10:33.520 --> 00:10:38.280 You do not have to use this fancy embedding syntax but it's optional if you're curious 00:10:38.280 --> 00:10:41.240 about experimenting with markdown. 00:10:41.240 --> 00:10:46.400 Okay now it says planning include your planning here include your project milestones. 00:10:46.400 --> 00:10:51.160 So this is a pretty big project especially if you decide to experiment with animation. 00:10:51.160 --> 00:10:56.760 So I highly recommend having multiple milestones that could align with your three major commits. 00:10:56.760 --> 00:11:02.480 So you can simply you could do something like three hashtags for our milestone one and you 00:11:02.480 --> 00:11:10.480 could just kind of set yourself up for milestone one milestone two milestone three. 00:11:10.480 --> 00:11:13.840 What I recommend is considering what are the pieces of your project. 00:11:13.840 --> 00:11:19.120 So if I'm going to draw my duck like I talked about in the example on the slides my duck 00:11:19.120 --> 00:11:24.680 is going to have two main functions a circle for the eyes and then a rectangle for the 00:11:24.680 --> 00:11:27.720 body and the beak and the arms and the legs. 00:11:27.720 --> 00:11:37.200 So our first good step might be to to write rectangle and circle functions that can be 00:11:37.200 --> 00:11:38.800 a great first step. 00:11:38.800 --> 00:11:43.880 You could be more detailed if you want by saying my rectangle will include with high 00:11:43.880 --> 00:11:52.800 color and for circles well perhaps I want to make sure it has radius and color. 00:11:52.800 --> 00:11:56.400 It's totally up to you to decide what your first milestone is but I often recommend students 00:11:56.400 --> 00:12:01.120 the first milestone should be for actually writing and testing those functions. 00:12:01.120 --> 00:12:11.480 My second milestone might be to combine functions and create the duck that way I can see does 00:12:11.480 --> 00:12:13.280 my duck actually look like a duck. 00:12:13.280 --> 00:12:18.360 When I say create the duck this could be another function or it could just be directly in the 00:12:18.360 --> 00:12:23.840 drawing.py file this is kind of up to you to decide what direction you want to go. 00:12:23.840 --> 00:12:30.840 My third milestone for my duck animation I think that's going to be the enemies the 00:12:30.840 --> 00:12:35.200 eyes moving left to right. 00:12:35.200 --> 00:12:39.480 So this is my quick example of the planning of course you can go into more detail and 00:12:39.480 --> 00:12:43.000 I actually recommend it especially with students I think the more detailed the easier it is 00:12:43.000 --> 00:12:46.800 to follow the different steps that they have to go through. 00:12:46.800 --> 00:12:53.720 Okay once they have their planning you can if you want just put directly everything into 00:12:53.720 --> 00:13:00.640 the drawing you could just have like a function here function here and then you could call 00:13:00.640 --> 00:13:03.840 the function to actually draw the duck. 00:13:03.840 --> 00:13:08.800 You could put all the directly in drawing.py but if you'd like to have multiple different 00:13:08.800 --> 00:13:14.680 files you could have one file called drawing you could have another file called shapes.py 00:13:14.680 --> 00:13:23.960 and perhaps in shapes here's where I have my rectangle function for example. 00:13:23.960 --> 00:13:28.840 We also have to say that from the real import star. 00:13:28.840 --> 00:13:33.280 This is a very simple rectangle function just for the example but if you made your own file 00:13:33.280 --> 00:13:39.920 called shapes you can then import a function into another file and to do that you simply 00:13:39.920 --> 00:13:48.280 just write the file name from shapes from shapes import and then I get some import rectangle. 00:13:48.280 --> 00:13:54.880 And now I'm able to use the rectangle inside my drawing.py. 00:13:54.880 --> 00:13:57.240 We can even test that if we go to terminal. 00:13:57.240 --> 00:14:04.600 I think drawing.py I think it's drawing but it's going so fast. 00:14:04.600 --> 00:14:12.240 So again to keep it open I recommend including inputs that way it doesn't close and you can 00:14:12.240 --> 00:14:16.240 see what you drew. 00:14:16.240 --> 00:14:22.280 So that's for if you're interested in a static drawing or animation both I recommend experimenting 00:14:22.280 --> 00:14:27.360 with having separate files you can make your code a little bit more organized. 00:14:27.360 --> 00:14:32.440 If you're interested in animating I'm going to walk you through that right now. 00:14:32.440 --> 00:14:36.640 So if you're interested in animating you'll scroll to the top and click on this super 00:14:36.640 --> 00:14:40.760 turtle library where you could right click and go open link in new tab. 00:14:40.760 --> 00:14:43.520 I already had one open but click on that one. 00:14:43.520 --> 00:14:47.320 And here is a documentation for Chris's super turtle library. 00:14:47.320 --> 00:14:54.760 So super turtle is a wrapper over turtle that allows you to super easily animate your functions 00:14:54.760 --> 00:14:56.760 your total functions. 00:14:56.760 --> 00:15:00.800 So I recommend starting at the introduction. 00:15:00.800 --> 00:15:04.600 Here there are a bunch of examples of things that you can do. 00:15:04.600 --> 00:15:09.800 And what I recommend doing to be honest is just copying one of these just directly full 00:15:09.800 --> 00:15:15.560 copy that bring it in to your visual studio code and I would make a new file. 00:15:15.560 --> 00:15:19.280 I would make a new file called animation tests. 00:15:19.280 --> 00:15:22.200 Well you can hold our view like but I might call animation tests. 00:15:22.200 --> 00:15:26.440 I'm just going to directly copy the whole code. 00:15:26.440 --> 00:15:28.760 Now I'm going to try to run it see what happens. 00:15:28.760 --> 00:15:32.200 So if I do a less now I have the new file animation tests. 00:15:32.200 --> 00:15:35.280 Python animation test.py. 00:15:35.280 --> 00:15:39.480 If you get this error that says no module names super turtle you just simply have to 00:15:39.480 --> 00:15:43.640 run poetry install that will install the necessary libraries. 00:15:43.640 --> 00:15:46.240 It only took five seconds. 00:15:46.240 --> 00:15:50.840 Then you can use the up arrow to go back animation tests. 00:15:50.840 --> 00:15:53.000 And here it is. 00:15:53.000 --> 00:15:59.120 You now have a simple test of how to change the scale of a square. 00:15:59.120 --> 00:16:03.600 And if we return to that idea of use modify create you're using. 00:16:03.600 --> 00:16:10.920 Now you could modify but experimenting with these numbers and then run it again. 00:16:10.920 --> 00:16:11.920 And then see. 00:16:11.920 --> 00:16:12.920 Hmm. 00:16:12.920 --> 00:16:13.920 Oh I changed it to 200. 00:16:13.920 --> 00:16:16.840 Now it seems like the square is getting a bit bigger. 00:16:16.840 --> 00:16:21.360 So you've used you modify and then when you get comfortable with the concept you can try 00:16:21.360 --> 00:16:24.080 creating it for yourself. 00:16:24.080 --> 00:16:30.040 If I go back to that documentation there are a ton of different things you can do from 00:16:30.040 --> 00:16:37.240 scaling to moving rotating animating easing there's so many different features. 00:16:37.240 --> 00:16:40.600 I recommend first reading through the introduction. 00:16:40.600 --> 00:16:45.680 Then I recommend going into the API which is kind of more of the nitty-gritty definitions 00:16:45.680 --> 00:16:47.520 and see what else is available. 00:16:47.520 --> 00:16:53.320 You may want to go to stroke for example stroke will change when you draw a line is 00:16:53.320 --> 00:17:01.840 it with dashes is it with dots is it colorful movement movement is here where things actually 00:17:01.840 --> 00:17:03.720 where the turtle moves in different ways. 00:17:03.720 --> 00:17:09.880 So again you could just directly copy this into your code and see what happens. 00:17:09.880 --> 00:17:13.360 I particularly recommend focusing on animation. 00:17:13.360 --> 00:17:19.920 So if we find rotate again we could try directly copying and pasting this code going back to 00:17:19.920 --> 00:17:22.600 visual studio code. 00:17:22.600 --> 00:17:28.200 I'm going to put it there and because I want to focus on this code and not this code I'm 00:17:28.200 --> 00:17:30.080 going to use something that's called a comment. 00:17:30.080 --> 00:17:36.400 If you hit command question mark it will add hashtags and the hashtags tell the computer 00:17:36.400 --> 00:17:40.760 hey don't just skip these lines for right now and it's a really good way to run some 00:17:40.760 --> 00:17:41.760 test. 00:17:41.760 --> 00:17:46.880 So I'm going to save it go back to my terminal and then run it again. 00:17:46.880 --> 00:17:52.880 So now I can see now I can see an example of rotating. 00:17:52.880 --> 00:17:57.360 If we go back to the code you can try to figure out why did it close so quickly. 00:17:57.360 --> 00:18:01.920 What is different about this one that closed quite quickly and this one that stayed on 00:18:01.920 --> 00:18:04.120 an infinite loop. 00:18:04.120 --> 00:18:10.280 So I'm going to let you continue to try to figure that out. 00:18:10.280 --> 00:18:14.000 But like I said it's totally up to you to go ahead and experiment. 00:18:14.000 --> 00:18:17.000 So I hope you enjoy this project. 00:18:17.000 --> 00:18:18.000 It's one of my favorites. 00:18:18.000 --> 00:18:19.560 It's one of the students favorites. 00:18:19.560 --> 00:18:22.360 I think it allows you to have a lot of personal freedom. 00:18:22.360 --> 00:18:23.880 Draw things that you're interested in. 00:18:23.880 --> 00:18:27.560 Go down past that interest you based on your idea. 00:18:27.560 --> 00:18:29.400 So it's super open ended. 00:18:29.400 --> 00:18:30.560 Let me know if you have any questions. 00:18:30.560 --> 00:18:35.600 I can help point you in directions of projects that are of your skill level. 00:18:35.600 --> 00:18:38.080 I think everybody's capable of doing animation. 00:18:38.080 --> 00:18:40.680 If that looks like something that's interesting to you. 00:18:40.680 --> 00:18:42.680 But like I said let me know if you have any questions. 00:18:42.680 --> 00:18:46.200 I look forward to reading your planning documents. 00:18:46.200 --> 00:18:49.080 Your planning read me files. 00:18:49.080 --> 00:18:50.080 Okay. 00:18:50.080 --> 00:18:51.080 Bye.