WEBVTT

1
00:00:01.930 --> 00:00:06.580
so in the previous video we create we
ended up creating this circle function

2
00:00:06.580 --> 00:00:11.870
and actually ran it and I'll just run it
again let's have a look at the output

3
00:00:11.870 --> 00:00:19.039
and their is the output their and as I mentioned the circles are a lil bit vague you can see just

4
00:00:19.039 --> 00:00:23.960
around the edges to the left and the
right their and just a little bit vague the line

5
00:00:23.960 --> 00:00:28.690
the dots don't sort of lined up
correctly the reasons for that at the moment is

6
00:00:28.690 --> 00:00:32.890
we were only plotting points for integer
values of x so we don't get many points plotted

7
00:00:32.890 --> 00:00:37.640
and we can't use decimal values in the
step for our range

8
00:00:38.399 --> 00:00:42.940
and I'm referring to the code here showing there
on line 16 which of course is our

9
00:00:42.940 --> 00:00:47.469
circle function but what we can do is
multiply the range up so that more

10
00:00:47.469 --> 00:00:52.640
values are used and scale each value back down again so doing this by a factor of a

11
00:00:52.640 --> 00:00:59.829
hundred will give the same effect as a range
and increments by 0.01 and that should therefore

12
00:00:59.829 --> 00:01:03.180
then fix up the circle so let's have a look at that

13
00:01:03.180 --> 00:01:06.440
so what we wanna do is make a change to the code on line 17

14
00:01:07.010 --> 00:01:13.080
in the way you can see for x in range g then
g + radius so let's just add the

15
00:01:13.080 --> 00:01:18.890
multiplication step to that so.....

16
00:01:18.890 --> 00:01:26.380
....but then what we

17
00:01:26.380 --> 00:01:34.960
need to do is scaled back X as well so
put.......because again we're just using

18
00:01:34.960 --> 00:01:38.380
the multiplied by a
hundred to give us a bigger range

19
00:01:38.380 --> 00:01:44.579
effectively the same as we had a range
that increments 0.01 so we then have to divide it back by a

20
00:01:44.579 --> 00:01:48.270
hundred to take it back to the original
point that it was before so they will

21
00:01:48.270 --> 00:01:51.270
plot if we now run this again

22
00:01:53.330 --> 00:02:05.860
...and their you can see it's now a lot better it's actually plotting a hundred times as many points

23
00:02:05.860 --> 00:02:10.770
as it was previously and as a result
looking at that it's a lot better but

24
00:02:10.770 --> 00:02:15.660
did you notice that it also took
significantly longer so I'll just run it again

25
00:02:15.660 --> 00:02:23.190
so I ran it and try to tab over and I can't still tab over because it is still generating it and their it is in the screen

26
00:02:23.190 --> 00:02:28.530
there now their you go did you see it pop ups
it took a quite a deal more time to actually

27
00:02:28.530 --> 00:02:32.480
create that and again the reason is why we are
plotting a hundred times as many points

28
00:02:32.480 --> 00:02:38.160
as we did previously so its doing a
hundred times more calculations but the

29
00:02:38.160 --> 00:02:42.280
end result is the circle is a much more
well defined with modifications that

30
00:02:42.280 --> 00:02:46.130
are actually made now if you're not sure
what's going on with scaling the range

31
00:02:46.130 --> 00:02:50.620
what we can do is print the value of x so
let's go ahead and do that just so we

32
00:02:50.620 --> 00:03:01.680
can sort of see what is going on so if
we add a print their...and run that that showing us

33
00:03:01.680 --> 00:03:05.709
a representation of the values that are
being plotted you can see their is quiet a

34
00:03:05.709 --> 00:03:14.320
a few their and if I tab over now and see if its finished we got our parabola their on the screen you can see everything

35
00:03:14.320 --> 00:03:19.570
at once so for the first circle we
ended up with the range running from 100 to 200 in

36
00:03:19.570 --> 00:03:26.530
steps of 0.01 you can see the 0.01 their for each one of course we
did that by scaling up the start and end

37
00:03:26.530 --> 00:03:31.380
values of the range and then scaling x back down again before actually using it so

38
00:03:31.380 --> 00:03:34.620
that it would actually plot in the
right position so although the range

39
00:03:34.620 --> 00:03:39.890
function can only use integer values it can still
be used to produce a range of decimals by

40
00:03:39.890 --> 00:03:43.910
and I'll be showing how to do that now by
multiplying it by a hundred now we are

41
00:03:43.910 --> 00:03:47.519
going to be looking at another way to do
the same thing using a generator later

42
00:03:47.519 --> 00:03:51.750
in the course which can result in much
more readable code now the disadvantage

43
00:03:51.750 --> 00:03:56.200
with this is that performances is
suffered but the result is much nicer

44
00:03:56.200 --> 00:04:00.510
and by having the circle drawing code in
a function you saw that the change has

45
00:04:00.510 --> 00:04:03.590
applied to all circles that were drawn so basically putting the code

46
00:04:03.590 --> 00:04:06.840
in one place enabled us to make the
change to every single circle

47
00:04:06.840 --> 00:04:11.440
that was actually drawn but with that said
in fact the canvas widget has a create

48
00:04:11.440 --> 00:04:15.660
oval method that can be used to draw
circles and is actually much faster than

49
00:04:15.660 --> 00:04:20.419
the method data we've come up with so the
create oval method needs the coordinates

50
00:04:20.419 --> 00:04:25.280
of the top left and bottom right of a
bounding rectangle but we're working with

51
00:04:25.280 --> 00:04:29.729
the radius and coordinates of the center we can still use our circle method we just

52
00:04:29.729 --> 00:04:33.770
change it so that it calculates the
coordinates that the create oval method

53
00:04:33.770 --> 00:04:41.600
needs so lets go ahead and do that so lets close it down and I'm making it a lot easier so comment out this code in our circle

54
00:04:41.600 --> 00:04:52.830
function and the code at the top so all we
need to do is put.....and then

55
00:04:52.830 --> 00:04:58.669
we need to calculate the coordinates for
the create oval method it needs again what it needs is

56
00:04:58.669 --> 00:05:02.650
the coordinates of the top left and bottom
right of a bounding rectangle then it is

57
00:05:02.650 --> 00:05:10.440
gonna draw it over within those parameters so put....

58
00:05:10.440 --> 00:05:17.080
.......

59
00:05:18.750 --> 00:05:27.910
.....

60
00:05:27.910 --> 00:05:35.680
and that's all we need to do and I just need to add a line

61
00:05:35.680 --> 00:05:41.330
there to keep that happy 2
lines in between each function so now if we run

62
00:05:41.330 --> 00:05:52.169
that...and bingo we already got our circles and I have made a

63
00:05:52.169 --> 00:05:56.550
mistake their what I've done is I've actually
multiplied the radius instead of adding

64
00:05:56.550 --> 00:05:59.550
it so that should have been G Plus right radius.....

65
00:06:02.740 --> 00:06:09.789
...and the other two should be fine so again the top left of the first

66
00:06:09.789 --> 00:06:14.759
2 parameters are the bottom right of the last 2 so if I run it again we should get basically results similar to what

67
00:06:14.759 --> 00:06:18.940
we had before you can see that was significantly faster and

68
00:06:18.940 --> 00:06:22.340
it's reduced a very good effect and the
advantage with that is we are using

69
00:06:22.340 --> 00:06:28.400
optimized code those built in part of
Python so always a good idea where possible

70
00:06:28.400 --> 00:06:32.900
if you could find some code that has been already written to
use that rather than reinventing the

71
00:06:32.900 --> 00:06:38.620
wheel that we did initially with our
function circle function on line 60 now

72
00:06:38.620 --> 00:06:44.199
I use the term method instead of function
when referring to the create_oval method and

73
00:06:44.199 --> 00:06:49.330
because a canvas is actually class and
class functions are called methods that's

74
00:06:49.330 --> 00:06:55.580
actually the right terminology to use so
in this case the create_oval is a method and again as

75
00:06:55.580 --> 00:07:00.190
classes methods the correct term
instead of functions but don't worry too

76
00:07:00.190 --> 00:07:03.449
much about that because we'll be looking
at classes and object-oriented

77
00:07:03.449 --> 00:07:07.180
programming in the next section and
you'll understand why they're called

78
00:07:07.180 --> 00:07:11.560
that and once we go through that it will make a lot more sense but it's probably a good idea

79
00:07:11.560 --> 00:07:15.469
to start using the correct terminology
as you can see their isn't really a great

80
00:07:15.469 --> 00:07:18.340
deal of difference between functions and
class methods when it comes down to

81
00:07:18.340 --> 00:07:19.280
actually using them

82
00:07:19.280 --> 00:07:23.740
okay so it's time for a mini challenge
and it is very much a mini challenge

83
00:07:23.740 --> 00:07:27.690
and I'm just going to type it just above the circle
method because it's ultimately where we

84
00:07:27.690 --> 00:07:36.930
are going to be using it we will modify the
circle function so that it allows

85
00:07:38.980 --> 00:07:55.250
the color of the circle to be specified
and defaults to red color is not given and just a

86
00:07:55.250 --> 00:08:12.090
note here you may want to review the previous lecture about named parameters and default values so that's basically it

87
00:08:12.090 --> 00:08:15.920
modify the circle functions so that it allows
the color of the circle to be specified

88
00:08:15.920 --> 00:08:20.690
it defaults to red if the color is not given
now you may want to review the previous

89
00:08:20.690 --> 00:08:25.740
lectures about named parameters and default values to get it working so it's now time to pause the

90
00:08:25.740 --> 00:08:31.630
video go away and make the change to the
circle function and when you made your change come back and

91
00:08:31.630 --> 00:08:35.890
you can compare the code that we've
actually about to put in ours

92
00:08:35.890 --> 00:08:44.940
so we'll see you when you get back pause the video now ok so
hopefully you figure it out all we really need

93
00:08:44.940 --> 00:08:51.070
to do is change make the change now on line 19 actually I'll put 2 spaces their keep it happy

94
00:08:51.070 --> 00:08:54.590
and we need to add an extra parameter

95
00:08:55.590 --> 00:09:03.560
and we just put....so by putting the
equals red that's defaulting that as a parameter

96
00:09:03.560 --> 00:09:07.950
if one is passed and of course we
need to change the code here where it is

97
00:09:07.950 --> 00:09:14.710
hard coded for red and make that color so once we do that that should work that should be all we need to do

98
00:09:14.710 --> 00:09:17.190
and we can test this by the

99
00:09:17.190 --> 00:09:21.960
first four lets changed those so put.....

100
00:09:26.050 --> 00:09:42.380
...and notice we are not getting any errors with
these other circle calls on line 63 through 67

101
00:09:43.029 --> 00:09:46.769
because we are not specifying a parameter its going to default to red and it doesn't come up with an error

102
00:09:46.769 --> 00:09:51.290
but the first four circle should be in green yellow black and blue so

103
00:09:51.290 --> 00:10:01.440
lets try running that and you can see it's working nicely so we got a blue yellow black and green circle

104
00:10:01.440 --> 00:10:05.610
so that's actually it that's the end of the
lecture and I'll see you in the next

105
00:10:05.610 --> 00:10:10.420
lecture where are we are going to take a
little bit of a different tack and we are going to

106
00:10:10.420 --> 00:10:14.440
start looking at creating a blackjack
card game so we'll see you in the next

107
00:10:14.440 --> 00:10:14.660
video