1 00:00:05,400 --> 00:00:09,550 ok so moving on what we going to do now is clean up some of this 2 00:00:09,550 --> 00:00:13,640 code and we're going to put the code back to how it was before because we 3 00:00:13,640 --> 00:00:16,990 finished I finished that part of the video where I just want to demonstrate these 4 00:00:16,990 --> 00:00:21,490 multiple variables canvas and canvas 2 so lets 5 00:00:21,490 --> 00:00:25,530 actually put those back but before I do that there is probably something that you 6 00:00:25,530 --> 00:00:30,040 may have picked up and perhaps its been bugging you for a few videos now I made a 7 00:00:30,040 --> 00:00:35,970 typo here on line 7 I guess I'm human as actually in my haste to create the video 8 00:00:35,970 --> 00:00:41,280 I haven't fixed it so parblolah instead of parabola so I'm going to right click 9 00:00:41,280 --> 00:00:45,550 that refactor rename and call it what it what should have been 10 00:00:46,650 --> 00:00:55,860 and its parabola and color click on refactor and that actually fix it or will fix it 11 00:00:55,860 --> 00:01:00,430 comes up here an basically tells us where it is in the program and we can click on 12 00:01:00,430 --> 00:01:05,870 over here do refactor ok so that's fix that up and you can see that also fixed up on 13 00:01:05,870 --> 00:01:10,130 line 41 ok so let's clean up this program and remove some of 14 00:01:10,130 --> 00:01:15,590 this extra code so in the previous video we removed the print let's get rid of the 15 00:01:15,590 --> 00:01:25,060 multiple draw axis so I'm going to close down and delete these 2 canvas objects which 16 00:01:25,060 --> 00:01:30,020 objects other than the call to it the print going to delete that we no longer need that any more 17 00:01:30,020 --> 00:01:35,090 and also the plot method actually that's ok for now but the other thing I 18 00:01:35,090 --> 00:01:39,580 wanted to point out here what I remembered was i didnt also change lines 14 and 15 19 00:01:39,580 --> 00:01:44,220 notice how its still pointing out to canvas so that was still accessing the canvas 20 00:01:44,220 --> 00:01:47,300 object from the main program and not from the function so that's another 21 00:01:47,300 --> 00:01:52,510 reason why if you wanting to make sure that you don't name these things the same so 22 00:01:52,510 --> 00:01:58,150 there's no confusion so that should actually been be page so I put that back to page now 23 00:01:58,150 --> 00:02:02,240 I can leave that print in their now so their also should be just page now because we just 24 00:02:02,240 --> 00:02:08,539 referencing that variable and the other thing to do is just make sure on line 30 25 00:02:08,539 --> 00:02:12,760 the width is set backed 640 so again if you are using a different number they're 26 00:02:12,760 --> 00:02:17,310 you just basically doubling back to what it originally in my case it was 640 X 480 27 00:02:17,310 --> 00:02:20,650 so now we should have our original program back again so I would just run this gain to make 28 00:02:20,650 --> 00:02:27,280 sure it still works and tab over and we've now got it working nicely again on the 29 00:02:27,280 --> 00:02:32,310 screen and now its centered and we've now only got one axis so that's good that's all working how 30 00:02:32,310 --> 00:02:37,710 it should have been so what we gonna do now is just change this around a 31 00:02:37,710 --> 00:02:40,400 little bit more and I mentioned I think in the last video or the one before 32 00:02:40,400 --> 00:02:45,320 that the parabola function would be more useful if it actually did the plotting 33 00:02:45,320 --> 00:02:48,990 and all we had to do was call it with it the canvas and the size we wanted so 34 00:02:48,990 --> 00:02:53,850 instead of actually having to create a range like this on lines 35 to 37 every 35 00:02:53,850 --> 00:02:57,530 time we want to essentially call the parabola function we should be able to 36 00:02:57,530 --> 00:03:02,100 just pass size and get it to do the work for us so how do we go about that when we make a 37 00:03:02,100 --> 00:03:06,840 change to this parabola method and what we are going to do is we are going to change this instead of calling it 38 00:03:06,840 --> 00:03:13,330 x we are going to pass the canvas which we are going to call page and we are also gonna pass a size as 39 00:03:13,330 --> 00:03:25,490 well so..... 40 00:03:25,490 --> 00:03:30,800 ..... 41 00:03:30,800 --> 00:03:36,290 ....and what we're going to do is instead of returning this value 42 00:03:36,290 --> 00:03:39,170 because we won't need to return it anymore we're going to actually call the plot 43 00:03:39,170 --> 00:03:45,710 direct so...... and we don't actually need the return any more 44 00:03:45,710 --> 00:03:48,740 because we're not going to be returning that data type so you can see what we've 45 00:03:48,740 --> 00:03:52,860 done their we've essentially duplicated what was on lines 36 to 38 46 00:03:52,860 --> 00:03:57,540 but we put that into a method so that we can call a method to do that hard work 47 00:03:57,540 --> 00:04:01,420 for us and the method you can see there is calculating X&Y 48 00:04:02,140 --> 00:04:06,020 and basically calling the plot function to actually plot that out on the 49 00:04:06,020 --> 00:04:10,030 screen so consequently now we've done that we can come down here on the line 36 50 00:04:10,030 --> 00:04:17,450 we can delete that and we can type.... 51 00:04:17,450 --> 00:04:23,110 ..... 52 00:04:24,980 --> 00:04:35,250 and if we run this now...you can their's 2 their now so its working 53 00:04:35,250 --> 00:04:39,570 but of course we got the same issue now the parabolas are upside down so what I did 54 00:04:39,570 --> 00:04:43,730 is I actually forgot that we need to plot negative y rather than Y and it's 55 00:04:43,730 --> 00:04:48,920 probably best taken I got so often so I could fix the problem by negating y and plotting the line 56 00:04:48,920 --> 00:04:53,080 this is the code that's on line 10 as you can see up there so I 57 00:04:53,080 --> 00:04:56,410 could negate that they're by putting a negative in front of it but to save 58 00:04:56,410 --> 00:04:59,160 having to do that every time I want to plot a point to its probably a good 59 00:04:59,160 --> 00:05:03,190 idea to make that adjustment in the plot function itself because this is 60 00:05:03,190 --> 00:05:06,930 something we need to do every time we are plotting this parabola so what I'm gonna do 61 00:05:06,930 --> 00:05:10,320 is change the plot function and at the same time you gonna get rid 62 00:05:10,320 --> 00:05:17,170 of that last warning so close “it down and move this over you can see we've largely fix this 63 00:05:17,170 --> 00:05:20,560 errors we still got the original one there in relation to the import 64 00:05:20,560 --> 00:05:21,360 which is fine 65 00:05:21,360 --> 00:05:24,800 we will leave that but this one here is the only one left because we're basically fix 66 00:05:24,800 --> 00:05:30,090 some of these by renaming them correctly but the plot function on line 23 has still 67 00:05:30,090 --> 00:05:34,140 got the old canvas subject or canvas parameter name being canvas and 68 00:05:34,140 --> 00:05:36,920 IntelliJ is still complaining about that or giving us a warning at 69 00:05:36,920 --> 00:05:41,080 least so I will do that will rename that and will also fix this so it's 70 00:05:41,080 --> 00:05:47,880 negative y and that should fix the problems so if I delete that and convert that 71 00:05:47,880 --> 00:05:54,610 and call it page but I could have refactored it of course.....and where its got 72 00:05:54,610 --> 00:06:01,590 y + 1 we are going to input negative y + 1 and that should fix that problem and you can see as 73 00:06:01,590 --> 00:06:06,220 far as IntelliJ is considered now we got the tick there that it's quite happy that we 74 00:06:06,220 --> 00:06:09,900 haven't got any more of these weird errors so I now that I've done that we should be able 75 00:06:09,900 --> 00:06:14,090 to run this and we should find that are actually the correct way up our parabolas 76 00:06:14,090 --> 00:06:18,360 so let's have a look at them and that's a very cool effect but that wasn't what was meant to 77 00:06:18,360 --> 00:06:22,860 happen so what I have done there is added one negative y you can see here 78 00:06:22,860 --> 00:06:26,650 on line 24 but I did not update the other one so what we actually need to do is do 79 00:06:26,650 --> 00:06:31,060 that in both places so the line should be x and that should be 80 00:06:31,060 --> 00:06:37,280 negative y...and then its x +1 and then its negative y + 1 81 00:06:37,280 --> 00:06:38,050 and then 82 00:06:38,050 --> 00:06:45,740 the fields so if we do that probably won't look quite as good as that but it will actually be a correct parabola 83 00:06:45,740 --> 00:06:49,860 so lets have a look their you go that's what I should have done so it looks quite cool what we did but 84 00:06:49,860 --> 00:06:55,230 that was obviously wrong so that's the correct parabolas their is 2 of them and 85 00:06:55,230 --> 00:06:58,530 they are both the right way up there which is good it's good it's a step in the 86 00:06:58,530 --> 00:07:02,620 right direction so the users of the plot function can focus on how they expect the 87 00:07:02,620 --> 00:07:07,050 points to be plotted without having to remember to negate y and that is obviously 88 00:07:07,050 --> 00:07:12,000 ideal to place that in a function to allow the programmer not have to 89 00:07:12,000 --> 00:07:14,930 remember all these things because that's what a function is it's a code 90 00:07:14,930 --> 00:07:19,620 that is going to be duplicated or replicated repeated a number of times so it makes 91 00:07:19,620 --> 00:07:22,330 sense to put that in there so that the program calling it doesn't have to remember 92 00:07:22,330 --> 00:07:26,960 to do that now theres another way that can be made to the parabola function 93 00:07:26,960 --> 00:07:30,920 actually there at the moment the loop calculates 94 00:07:30,920 --> 00:07:36,020 now at the moment the loop calculates the value of y you can see 95 00:07:36,020 --> 00:07:41,190 on line 9 for both positive and negative values of x but the parabola is symmetric about 96 00:07:41,190 --> 00:07:45,460 the y axis so there's really no point calculating y twice so what I mean 97 00:07:45,460 --> 00:07:50,230 by that I'm gonna change this range where it's got For x a range of minus size to size we only really 98 00:07:50,230 --> 00:07:56,950 need to just change this......calculate it once which you can see we doing the on line 9 99 00:07:56,950 --> 00:08:01,080 and that's still going to be the same calculation but when we plot it we can 100 00:08:01,080 --> 00:08:07,970 plot it that's correct there but we can add a second plot now..... 101 00:08:07,970 --> 00:08:11,880 because essentially its the same thing we just negating it and it's save us 102 00:08:11,880 --> 00:08:14,970 having to go through that entire range so hopefully this is really pointing out 103 00:08:14,970 --> 00:08:19,850 some of the advantages of functions here so we're changing the code in a single 104 00:08:19,850 --> 00:08:24,590 place and every parabola that's drawn now benefits from the more efficient code so will just run this 105 00:08:24,590 --> 00:08:30,920 again to make sure it works because and you can see its still working and its more 106 00:08:30,920 --> 00:08:35,049 efficient so that's the great thing about functions you write it in one place 107 00:08:35,049 --> 00:08:38,909 and calling it in multiple places and we can make those changes and it just saves 108 00:08:38,909 --> 00:08:42,789 time and it's way more efficient now this may not look too 109 00:08:42,789 --> 00:08:45,520 impressive because we only drawn 2 parabolas so 110 00:08:45,520 --> 00:08:50,730 let's add a function to draw circles for a bit more practice so we are gonna add some code and 111 00:08:50,730 --> 00:09:01,730 will add it up here on line 14 so.... 112 00:09:01,730 --> 00:09:11,130 ..... 113 00:09:11,130 --> 00:09:24,570 .... 114 00:09:24,570 --> 00:09:32,970 ..... 115 00:09:33,850 --> 00:09:52,000 ..... 116 00:09:52,000 --> 00:10:05,500 ...we are gonna have to fix that math up so 117 00:10:05,500 --> 00:10:11,310 we need to import a library their we need to fix that up so.... 118 00:10:11,310 --> 00:10:16,330 .... 119 00:10:18,250 --> 00:10:27,180 ...and we need to do an import math their 120 00:10:27,180 --> 00:10:41,210 for that libraries so we put that up on the first line.....ok so let me put the image on the screen their and what we should 121 00:10:41,210 --> 00:10:48,430 have their you can see the code now starting on line 18 y = h + math.squareroot so in terms 122 00:10:48,430 --> 00:10:52,460 of calculating a circle its symmetric about both axis so you only need to 123 00:10:52,460 --> 00:10:55,400 calculate a quarter of the points of its circumference 124 00:10:55,400 --> 00:10:59,120 when you creating functions make sure you've got two spaces between each one 125 00:10:59,120 --> 00:11:05,340 to avoid getting a warning for IntelliJ so on line 18 we get a square root which can be 126 00:11:05,340 --> 00:11:09,710 either positive or negative to give to give this 2 values for y now 127 00:11:09,710 --> 00:11:14,340 rather than calculating the square root twice we can just negate y and add two times h 128 00:11:14,340 --> 00:11:15,090 back on again 129 00:11:15,090 --> 00:11:18,810 so a little bit of algebra involved their that you can actually see there on the screen there now 130 00:11:18,810 --> 00:11:23,450 because minus y will also take off h we add 2 times h back on lines 131 00:11:23,450 --> 00:11:28,080 20 and 22 in the same for x we calculate the values for the other 132 00:11:28,080 --> 00:11:32,060 quadrants now if your struggling with this algebra and don't worry too much about 133 00:11:32,060 --> 00:11:35,840 the actual formula the important thing here is that the use of the function rather 134 00:11:35,840 --> 00:11:40,740 than the maths behind it now mathematical functions are just one of the examples one 135 00:11:40,740 --> 00:11:43,960 of the things I should say that Python functions can be used for 136 00:11:43,960 --> 00:11:47,900 and we are gonna be looking at plenty of other examples as well and I've added the import 137 00:11:47,900 --> 00:11:52,500 as I mentioned on line 1 as well so this will actually work so now we've got this function to 138 00:11:52,500 --> 00:11:56,740 draw circles with any radius centered where we liked on the canvas and we can 139 00:11:56,740 --> 00:12:01,240 call it a few times to create a pattern so let's go ahead and do that now so down 140 00:12:01,240 --> 00:12:05,640 the bottom here just after the two parabola calls lets actually add 141 00:12:05,640 --> 00:12:09,580 some and what I'm going to do just to save a bit of time I'm gonna paste in some code 142 00:12:09,580 --> 00:12:15,510 ...come down here and paste this code and you can see their is a circle we 143 00:12:15,510 --> 00:12:18,130 are gonna call multiple times with different values 144 00:12:18,130 --> 00:12:21,400 ....so lets just run this and see that it works 145 00:12:28,650 --> 00:12:34,240 and one thing to note is the circles themselves do get vague around the edges and at 146 00:12:34,240 --> 00:12:37,650 the moment the function only plots points the integer values of x 147 00:12:37,650 --> 00:12:41,970 so we don't get many points plotted and we can't use decimal values in the step for our range 148 00:12:41,970 --> 00:12:45,800 so I'm gonna leave the video here in the next video we'll just talked a little bit more about 149 00:12:45,800 --> 00:12:50,420 this and then we'll also have a mini challenge for you to do as well so I'll 150 00:12:50,420 --> 00:12:51,280 see you in the next video