WEBVTT 1 00:00:01.950 --> 00:00:06.109 ok so moving on what we going to do now is clean up some of this 2 00:00:06.109 --> 00:00:10.190 code and we're going to put the code back to how it was before because we 3 00:00:10.190 --> 00:00:13.540 finished I finished that part of the video where I just want to demonstrate these 4 00:00:13.540 --> 00:00:18.040 multiple variables canvas and canvas 2 so lets 5 00:00:18.040 --> 00:00:22.080 actually put those back but before I do that there is probably something that you 6 00:00:22.080 --> 00:00:26.590 may have picked up and perhaps its been bugging you for a few videos now I made a 7 00:00:26.590 --> 00:00:32.529 typo here on line 7 I guess I'm human as actually in my haste to create the video 8 00:00:32.529 --> 00:00:37.830 I haven't fixed it so parblolah instead of parabola so I'm going to right click 9 00:00:37.830 --> 00:00:42.100 that refactor rename and call it what it what should have been 10 00:00:43.200 --> 00:00:52.410 and its parabola and color click on refactor and that actually fix it or will fix it 11 00:00:52.410 --> 00:00:56.989 comes up here an basically tells us where it is in the program and we can click on 12 00:00:56.989 --> 00:01:02.420 over here do refactor ok so that's fix that up and you can see that also fixed up on 13 00:01:02.420 --> 00:01:06.689 line 41 ok so let's clean up this program and remove some of 14 00:01:06.689 --> 00:01:12.149 this extra code so in the previous video we removed the print let's get rid of the 15 00:01:12.149 --> 00:01:21.619 multiple draw axis so I'm going to close down and delete these 2 canvas objects which 16 00:01:21.619 --> 00:01:26.579 objects other than the call to it the print going to delete that we no longer need that any more 17 00:01:26.579 --> 00:01:31.649 and also the plot method actually that's ok for now but the other thing I 18 00:01:31.649 --> 00:01:36.130 wanted to point out here what I remembered was i didnt also change lines 14 and 15 19 00:01:36.130 --> 00:01:40.770 notice how its still pointing out to canvas so that was still accessing the canvas 20 00:01:40.770 --> 00:01:43.850 object from the main program and not from the function so that's another 21 00:01:43.850 --> 00:01:49.060 reason why if you wanting to make sure that you don't name these things the same so 22 00:01:49.060 --> 00:01:54.700 there's no confusion so that should actually been be page so I put that back to page now 23 00:01:54.700 --> 00:01:58.799 I can leave that print in their now so their also should be just page now because we just 24 00:01:58.799 --> 00:02:05.090 referencing that variable and the other thing to do is just make sure on line 30 25 00:02:05.090 --> 00:02:09.319 the width is set backed 640 so again if you are using a different number they're 26 00:02:09.319 --> 00:02:13.860 you just basically doubling back to what it originally in my case it was 640 X 480 27 00:02:13.860 --> 00:02:17.200 so now we should have our original program back again so I would just run this gain to make 28 00:02:17.200 --> 00:02:23.830 sure it still works and tab over and we've now got it working nicely again on the 29 00:02:23.830 --> 00:02:28.860 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:28.860 --> 00:02:34.260 it should have been so what we gonna do now is just change this around a 31 00:02:34.260 --> 00:02:36.950 little bit more and I mentioned I think in the last video or the one before 32 00:02:36.950 --> 00:02:41.870 that the parabola function would be more useful if it actually did the plotting 33 00:02:41.870 --> 00:02:45.540 and all we had to do was call it with it the canvas and the size we wanted so 34 00:02:45.540 --> 00:02:50.400 instead of actually having to create a range like this on lines 35 to 37 every 35 00:02:50.400 --> 00:02:54.080 time we want to essentially call the parabola function we should be able to 36 00:02:54.080 --> 00:02:58.650 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:02:58.650 --> 00:03:03.390 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:03.390 --> 00:03:09.880 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:09.880 --> 00:03:22.040 well so..... 40 00:03:22.040 --> 00:03:27.350 ..... 41 00:03:27.350 --> 00:03:32.840 ....and what we're going to do is instead of returning this value 42 00:03:32.840 --> 00:03:35.720 because we won't need to return it anymore we're going to actually call the plot 43 00:03:35.720 --> 00:03:42.260 direct so...... and we don't actually need the return any more 44 00:03:42.260 --> 00:03:45.299 because we're not going to be returning that data type so you can see what we've 45 00:03:45.299 --> 00:03:49.410 done their we've essentially duplicated what was on lines 36 to 38 46 00:03:49.410 --> 00:03:54.090 but we put that into a method so that we can call a method to do that hard work 47 00:03:54.090 --> 00:03:57.970 for us and the method you can see there is calculating X&Y 48 00:03:58.690 --> 00:04:02.570 and basically calling the plot function to actually plot that out on the 49 00:04:02.570 --> 00:04:06.580 screen so consequently now we've done that we can come down here on the line 36 50 00:04:06.580 --> 00:04:14.000 we can delete that and we can type.... 51 00:04:14.000 --> 00:04:19.669 ..... 52 00:04:21.530 --> 00:04:31.800 and if we run this now...you can their's 2 their now so its working 53 00:04:31.800 --> 00:04:36.120 but of course we got the same issue now the parabolas are upside down so what I did 54 00:04:36.120 --> 00:04:40.280 is I actually forgot that we need to plot negative y rather than Y and it's 55 00:04:40.280 --> 00:04:45.470 probably best taken I got so often so I could fix the problem by negating y and plotting the line 56 00:04:45.470 --> 00:04:49.639 this is the code that's on line 10 as you can see up there so I 57 00:04:49.639 --> 00:04:52.960 could negate that they're by putting a negative in front of it but to save 58 00:04:52.960 --> 00:04:55.710 having to do that every time I want to plot a point to its probably a good 59 00:04:55.710 --> 00:04:59.740 idea to make that adjustment in the plot function itself because this is 60 00:04:59.740 --> 00:05:03.480 something we need to do every time we are plotting this parabola so what I'm gonna do 61 00:05:03.480 --> 00:05:06.870 is change the plot function and at the same time you gonna get rid 62 00:05:06.870 --> 00:05:13.729 of that last warning so close “it down and move this over you can see we've largely fix this 63 00:05:13.729 --> 00:05:17.110 errors we still got the original one there in relation to the import 64 00:05:17.110 --> 00:05:17.919 which is fine 65 00:05:17.919 --> 00:05:21.350 we will leave that but this one here is the only one left because we're basically fix 66 00:05:21.350 --> 00:05:26.640 some of these by renaming them correctly but the plot function on line 23 has still 67 00:05:26.640 --> 00:05:30.690 got the old canvas subject or canvas parameter name being canvas and 68 00:05:30.690 --> 00:05:33.470 IntelliJ is still complaining about that or giving us a warning at 69 00:05:33.470 --> 00:05:37.630 least so I will do that will rename that and will also fix this so it's 70 00:05:37.630 --> 00:05:44.430 negative y and that should fix the problems so if I delete that and convert that 71 00:05:44.430 --> 00:05:51.169 and call it page but I could have refactored it of course.....and where its got 72 00:05:51.169 --> 00:05:58.140 y + 1 we are going to input negative y + 1 and that should fix that problem and you can see as 73 00:05:58.140 --> 00:06:02.770 far as IntelliJ is considered now we got the tick there that it's quite happy that we 74 00:06:02.770 --> 00:06:06.450 haven't got any more of these weird errors so I now that I've done that we should be able 75 00:06:06.450 --> 00:06:10.640 to run this and we should find that are actually the correct way up our parabolas 76 00:06:10.640 --> 00:06:14.910 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:14.910 --> 00:06:19.410 happen so what I have done there is added one negative y you can see here 78 00:06:19.410 --> 00:06:23.200 on line 24 but I did not update the other one so what we actually need to do is do 79 00:06:23.200 --> 00:06:27.610 that in both places so the line should be x and that should be 80 00:06:27.610 --> 00:06:33.830 negative y...and then its x +1 and then its negative y + 1 81 00:06:33.830 --> 00:06:34.600 and then 82 00:06:34.600 --> 00:06:42.290 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:42.290 --> 00:06:46.410 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:46.410 --> 00:06:51.780 that was obviously wrong so that's the correct parabolas their is 2 of them and 85 00:06:51.780 --> 00:06:55.080 they are both the right way up there which is good it's good it's a step in the 86 00:06:55.080 --> 00:06:59.170 right direction so the users of the plot function can focus on how they expect the 87 00:06:59.170 --> 00:07:03.600 points to be plotted without having to remember to negate y and that is obviously 88 00:07:03.600 --> 00:07:08.550 ideal to place that in a function to allow the programmer not have to 89 00:07:08.550 --> 00:07:11.480 remember all these things because that's what a function is it's a code 90 00:07:11.480 --> 00:07:16.170 that is going to be duplicated or replicated repeated a number of times so it makes 91 00:07:16.170 --> 00:07:18.880 sense to put that in there so that the program calling it doesn't have to remember 92 00:07:18.880 --> 00:07:23.510 to do that now theres another way that can be made to the parabola function 93 00:07:23.510 --> 00:07:27.470 actually there at the moment the loop calculates 94 00:07:27.470 --> 00:07:32.570 now at the moment the loop calculates the value of y you can see 95 00:07:32.570 --> 00:07:37.740 on line 9 for both positive and negative values of x but the parabola is symmetric about 96 00:07:37.740 --> 00:07:42.010 the y axis so there's really no point calculating y twice so what I mean 97 00:07:42.010 --> 00:07:46.780 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:46.780 --> 00:07:53.500 need to just change this......calculate it once which you can see we doing the on line 9 99 00:07:53.500 --> 00:07:57.630 and that's still going to be the same calculation but when we plot it we can 100 00:07:57.630 --> 00:08:04.520 plot it that's correct there but we can add a second plot now..... 101 00:08:04.520 --> 00:08:08.430 because essentially its the same thing we just negating it and it's save us 102 00:08:08.430 --> 00:08:11.520 having to go through that entire range so hopefully this is really pointing out 103 00:08:11.520 --> 00:08:16.400 some of the advantages of functions here so we're changing the code in a single 104 00:08:16.400 --> 00:08:21.140 place and every parabola that's drawn now benefits from the more efficient code so will just run this 105 00:08:21.140 --> 00:08:27.470 again to make sure it works because and you can see its still working and its more 106 00:08:27.470 --> 00:08:31.600 efficient so that's the great thing about functions you write it in one place 107 00:08:31.600 --> 00:08:35.460 and calling it in multiple places and we can make those changes and it just saves 108 00:08:35.460 --> 00:08:39.340 time and it's way more efficient now this may not look too 109 00:08:39.340 --> 00:08:42.070 impressive because we only drawn 2 parabolas so 110 00:08:42.070 --> 00:08:47.280 let's add a function to draw circles for a bit more practice so we are gonna add some code and 111 00:08:47.280 --> 00:08:58.280 will add it up here on line 14 so.... 112 00:08:58.280 --> 00:09:07.680 ..... 113 00:09:07.680 --> 00:09:21.120 .... 114 00:09:21.120 --> 00:09:29.520 ..... 115 00:09:30.400 --> 00:09:48.550 ..... 116 00:09:48.550 --> 00:10:02.050 ...we are gonna have to fix that math up so 117 00:10:02.050 --> 00:10:07.860 we need to import a library their we need to fix that up so.... 118 00:10:07.860 --> 00:10:12.880 .... 119 00:10:14.800 --> 00:10:23.730 ...and we need to do an import math their 120 00:10:23.730 --> 00:10:37.769 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:37.769 --> 00:10:44.980 have their you can see the code now starting on line 18 y = h + math.squareroot so in terms 122 00:10:44.980 --> 00:10:49.019 of calculating a circle its symmetric about both axis so you only need to 123 00:10:49.019 --> 00:10:51.950 calculate a quarter of the points of its circumference 124 00:10:51.950 --> 00:10:55.670 when you creating functions make sure you've got two spaces between each one 125 00:10:55.670 --> 00:11:01.899 to avoid getting a warning for IntelliJ so on line 18 we get a square root which can be 126 00:11:01.899 --> 00:11:06.260 either positive or negative to give to give this 2 values for y now 127 00:11:06.260 --> 00:11:10.899 rather than calculating the square root twice we can just negate y and add two times h 128 00:11:10.899 --> 00:11:11.649 back on again 129 00:11:11.649 --> 00:11:15.360 so a little bit of algebra involved their that you can actually see there on the screen there now 130 00:11:15.360 --> 00:11:20.000 because minus y will also take off h we add 2 times h back on lines 131 00:11:20.000 --> 00:11:24.630 20 and 22 in the same for x we calculate the values for the other 132 00:11:24.630 --> 00:11:28.610 quadrants now if your struggling with this algebra and don't worry too much about 133 00:11:28.610 --> 00:11:32.390 the actual formula the important thing here is that the use of the function rather 134 00:11:32.390 --> 00:11:37.290 than the maths behind it now mathematical functions are just one of the examples one 135 00:11:37.290 --> 00:11:40.510 of the things I should say that Python functions can be used for 136 00:11:40.510 --> 00:11:44.459 and we are gonna be looking at plenty of other examples as well and I've added the import 137 00:11:44.459 --> 00:11:49.050 as I mentioned on line 1 as well so this will actually work so now we've got this function to 138 00:11:49.050 --> 00:11:53.290 draw circles with any radius centered where we liked on the canvas and we can 139 00:11:53.290 --> 00:11:57.790 call it a few times to create a pattern so let's go ahead and do that now so down 140 00:11:57.790 --> 00:12:02.199 the bottom here just after the two parabola calls lets actually add 141 00:12:02.199 --> 00:12:06.130 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:06.130 --> 00:12:12.060 ...come down here and paste this code and you can see their is a circle we 143 00:12:12.060 --> 00:12:14.680 are gonna call multiple times with different values 144 00:12:14.680 --> 00:12:17.959 ....so lets just run this and see that it works 145 00:12:25.200 --> 00:12:30.790 and one thing to note is the circles themselves do get vague around the edges and at 146 00:12:30.790 --> 00:12:34.200 the moment the function only plots points the integer values of x 147 00:12:34.200 --> 00:12:38.520 so we don't get many points plotted and we can't use decimal values in the step for our range 148 00:12:38.520 --> 00:12:42.350 so I'm gonna leave the video here in the next video we'll just talked a little bit more about 149 00:12:42.350 --> 00:12:46.970 this and then we'll also have a mini challenge for you to do as well so I'll 150 00:12:46.970 --> 00:12:47.830 see you in the next video