WEBVTT

1
00:00:01.939 --> 00:00:06.799
in the previous video we had a quick look
at Python functions and we saw how we can

2
00:00:06.799 --> 00:00:10.809
use them to perform actions or
return results and of course sometimes

3
00:00:10.809 --> 00:00:14.980
do both of those things now our function
to print text centered on a 80 page

4
00:00:14.980 --> 00:00:19.510
character screen was modified to just
return the text to be printed to

5
00:00:19.510 --> 00:00:23.410
demonstrate how a function returns a
result with the return statement and

6
00:00:23.410 --> 00:00:27.830
also that there is often more than one
way to do something and deciding what to

7
00:00:27.830 --> 00:00:31.820
use or which way to use is part really
of the programs designed so functions are

8
00:00:31.820 --> 00:00:36.679
incredibly useful to allow the same
block of code to be used over and over

9
00:00:36.679 --> 00:00:42.989
again now they make programs easier to
design by breaking down the programming

10
00:00:42.989 --> 00:00:47.379
challenge up into manageable tasks and
the use of functions can make programs

11
00:00:47.379 --> 00:00:51.140
more reliable by providing code
blocks that can be thoroughly tested to

12
00:00:51.140 --> 00:00:55.069
make sure they perform their function
reliably now these advantages also

13
00:00:55.069 --> 00:00:59.479
come from using object-oriented
programming and classes and class

14
00:00:59.479 --> 00:01:03.690
methods are just functions so it's
important that you understand functions

15
00:01:03.690 --> 00:01:07.970
before we move on to object oriented
programming in the next section now I'm

16
00:01:07.970 --> 00:01:11.070
gonna start with some maths here but it's
not going to be anything too complicated

17
00:01:11.070 --> 00:01:14.600
so don't be too worried now parabola is a
very interesting shape

18
00:01:15.350 --> 00:01:20.500
parabolic reflectors can be used to
focus light or sound and are also used to

19
00:01:20.500 --> 00:01:25.830
focus the satellite signals used for
modern TV broadcast you can throw a ball in the

20
00:01:25.830 --> 00:01:30.680
air it follows a parabolic path as it
rises and falls back to earth now what I'm going

21
00:01:30.680 --> 00:01:35.220
to do is create a very simple equation
for a parabola so what we're going to do

22
00:01:35.220 --> 00:01:39.440
is so what I've done is I've created a new
project and I've also created a new

23
00:01:39.440 --> 00:01:44.320
python file so let's start with a
definition of a parabola functions so

24
00:01:44.320 --> 00:01:49.210
we're gonna type.....

25
00:01:49.210 --> 00:01:58.909
.....

26
00:02:00.510 --> 00:02:18.680
.....and that's

27
00:02:18.680 --> 00:02:23.570
it so you can see it's a very simplest
equation for parabola is y = x

28
00:02:23.570 --> 00:02:28.600
squared so X times X that I've done
on line 2 and so I've created a simple

29
00:02:28.600 --> 00:02:32.640
function to return the value of y for various values of x so if we run this

30
00:02:32.640 --> 00:02:40.260
we get to see you all the values of y
printed out and if you scroll up and

31
00:02:40.260 --> 00:02:43.060
down as you can see here right down the bottom
you can scroll right to the top

32
00:02:43.060 --> 00:02:48.480
and this is sort of a shape in the
numbers but just do that again you

33
00:02:48.480 --> 00:02:51.540
can see how the numbers sort of going down smaller
and go up again so its a bit of a shape

34
00:02:51.540 --> 00:02:52.750
their

35
00:02:52.750 --> 00:02:59.790
so its an interesting phenomenon with parabola
but it will be much nicer if we could plot them on a graph

36
00:02:59.790 --> 00:03:02.550
because that would actually make a lot of sense
to do it that way so why don't we do that

37
00:03:02.550 --> 00:03:06.410
why don't we continue on from there and do
that so i'm gonna make some modifications

38
00:03:06.410 --> 00:03:11.580
to this file now so that we can do that
so we leave the existing functionality we

39
00:03:11.580 --> 00:03:15.880
got in there but I'm gonna come back up here
and we're going to use tkinter

40
00:03:15.880 --> 00:03:25.470
again so come up with a try to start with you see this a number of times now so.....

41
00:03:25.470 --> 00:03:32.820
....

42
00:03:33.790 --> 00:03:41.650
.....we are going start on
line 7 we leave our parabola method their

43
00:03:42.250 --> 00:03:50.040
we are gonna take out this for loop now because actually we are gonna leave that because we are gonna modify it slowly so lets leave that their so on line 11 I'm gonna

44
00:03:50.040 --> 00:04:00.250
to start a main window for tkinter so....

45
00:04:00.250 --> 00:04:03.470
.....

46
00:04:04.319 --> 00:04:10.120
.....

47
00:04:10.859 --> 00:04:19.130
....and you can make yours
much bigger if you like just change that

48
00:04:19.130 --> 00:04:23.270
to the resolution of your monitor to a
larger value we didn't know how big to

49
00:04:23.270 --> 00:04:27.389
make it because we wanted to use values
that worked on pretty well all computers and

50
00:04:27.389 --> 00:04:30.940
that's why we left it at 640 by 480 but
feel free to increase

51
00:04:30.940 --> 00:04:37.710
those dimensions to larger number to suit
your computer so let's also create a

52
00:04:37.710 --> 00:04:51.830
canvas so.....

53
00:04:51.830 --> 00:05:00.449
.....

54
00:05:00.449 --> 00:05:03.449
....

55
00:05:04.740 --> 00:05:15.330
....so the program just creates a canvas and adds
it to the grid window manager it fills the

56
00:05:15.330 --> 00:05:21.180
Windows so if we just run this is to confirm
what its actually doing and it is not going to work

57
00:05:21.180 --> 00:05:28.820
until I end the main loop call so.... so I just remove the indent

58
00:05:28.820 --> 00:05:38.199
....try that again and it is running now and it's a
very basic window as you can see so the program

59
00:05:38.199 --> 00:05:43.460
creates a canvas and adds it to the grid window manage as you can see it fills the window and that way

60
00:05:43.460 --> 00:05:46.639
we don't have to worry about which
manager to use as its going to be the only

61
00:05:46.639 --> 00:05:50.509
thing in the window so if you want to
the pack manager would also do this as well

62
00:05:50.509 --> 00:05:55.250
but we chose grid because we want to
briefly add another canvas later now

63
00:05:55.250 --> 00:05:58.360
interestingly enough if you checked
out the documentation links from the

64
00:05:58.360 --> 00:06:02.320
tkinter section you may have actually come
across canvas now it lets you draw basic

65
00:06:02.320 --> 00:06:07.120
shapes such as lines rectangles and
circles and you can also place text and

66
00:06:07.120 --> 00:06:08.650
images on a canvas

67
00:06:08.650 --> 00:06:12.490
now the canvas coordinate system has 00 at
the top left

68
00:06:12.490 --> 00:06:14.260
whereas a normal graph

69
00:06:14.260 --> 00:06:18.370
have the origin 00 in the middle so it
also be nice to have the X&Y axis

70
00:06:18.370 --> 00:06:22.560
displayed on the graph now we can find the
midpoint of the screen by dividing the

71
00:06:22.560 --> 00:06:27.160
width and height by 2 and a canvas can
have its origin shifted by using the

72
00:06:27.160 --> 00:06:31.090
scroll region option now we want to
shift it right by half the width

73
00:06:31.090 --> 00:06:35.640
bringing 0 from the left hand edge in to the
middle and also shifted it down by half the

74
00:06:35.640 --> 00:06:39.770
height so this is something we will want
to do when we try to plot graphs on a

75
00:06:39.770 --> 00:06:45.700
canvas or draw axis function would be useful
for that purpose so lets defined that method now

76
00:06:45.700 --> 00:06:53.200
I'm going to close it down for now because we are finish with that come up here after parabola method and we define another

77
00:06:53.200 --> 00:07:01.470
one leaving two spaces between the other
function so as defined......and what I'll do

78
00:07:01.470 --> 00:07:05.920
is type this out and go through what we have done....

79
00:07:08.490 --> 00:07:12.320
......

80
00:07:13.840 --> 00:07:20.800
......

81
00:07:22.070 --> 00:07:38.280
.....

82
00:07:40.310 --> 00:08:09.960
.....

83
00:08:11.480 --> 00:08:14.560
......

84
00:08:14.560 --> 00:08:27.780
.....

85
00:08:27.780 --> 00:08:35.320
...so the first thing
that draw axis function does

86
00:08:35.320 --> 00:08:39.599
is called the canvas update method and it does that to make sure that we can actually

87
00:08:39.599 --> 00:08:44.320
access the width and height now we did
mention this that when we used

88
00:08:44.320 --> 00:08:50.910
winfo width and winfo height methods at the end of the calculator
challenge that you do need to do that

89
00:08:50.910 --> 00:08:52.130
you need to call canvas

90
00:08:52.130 --> 00:08:56.529
.update to make sure that those values
are available for you so we use them on the

91
00:08:56.529 --> 00:08:59.630
main window that time but actually
every widget is a window and has those

92
00:08:59.630 --> 00:09:00.830
methods available

93
00:09:00.830 --> 00:09:05.279
now the function that we have designed just divides those values by two to get the

94
00:09:05.279 --> 00:09:10.290
values for the X&Y origin now the scroll
region is just a box with one corner at

95
00:09:10.290 --> 00:09:16.410
minus x origin minus y origin and the
other and X origin y origin for example if you had a

96
00:09:16.410 --> 00:09:20.510
10 centimeters square piece of paper in
front of you with its top left hand in

97
00:09:20.510 --> 00:09:24.350
the middle of your desk bringing it up five
centimeters and left five centimeters

98
00:09:24.350 --> 00:09:29.050
replace the center of the paper in the
middle of your desk and that's exactly what

99
00:09:29.050 --> 00:09:32.490
we're doing here but on the screen so the
function after does that then draws a

100
00:09:32.490 --> 00:09:37.070
horizontal line for the x axis and a
vertical line for the Y axis so that's

101
00:09:37.070 --> 00:09:40.910
essentially what draw axis is
actually doing so when we call the draw

102
00:09:40.910 --> 00:09:45.780
axis functions we are going to reposition the
canvases origin and draw the X&Y axes on

103
00:09:45.780 --> 00:09:49.950
the canvas so we need to do in order to
do that we need to add a call to it just

104
00:09:49.950 --> 00:09:54.640
below what we've added the grid down here we do that on line 28 so....

105
00:09:54.640 --> 00:10:04.640
...so now we do that we run this we
should see the canvas divided into four

106
00:10:04.640 --> 00:10:06.440
quadrants by the X&Y axes

107
00:10:06.440 --> 00:10:09.440
lets give that a run

108
00:10:14.540 --> 00:10:19.600
if you're running on a Mac you might find you get a
result like this and it may happen on

109
00:10:19.600 --> 00:10:24.820
a Linux or Windows as well if that happens
the reason for its probably self-evident

110
00:10:24.820 --> 00:10:29.910
as I move this over notice on line 17
and 18 I used fill = white well in this

111
00:10:29.910 --> 00:10:35.740
case on my Mac the background is white so of
course drawing some lines is going to be

112
00:10:35.740 --> 00:10:38.740
drawn white on white which we cannot see
so if you are not seeing any results

113
00:10:39.340 --> 00:10:45.320
change the color so fill = white lets
change that to black we should now have black lines on a

114
00:10:45.320 --> 00:10:52.550
white background and thats should work for us so lets try that we can see now that

115
00:10:52.550 --> 00:10:57.880
is actually worked as we can see there
and the purpose was to divide into four

116
00:10:57.880 --> 00:11:02.240
quadrants the canvas and we've done that
it's been divided into four quadrants by

117
00:11:02.240 --> 00:11:07.760
the x and y axis so to draw graphs we want to plot
single points which a canvas doesn't

118
00:11:07.760 --> 00:11:12.290
provide a method for but a line of length one
will do so just a bit of important distinction

119
00:11:12.290 --> 00:11:16.680
so you can't actually plot individual
points on a canvas but by making their

120
00:11:16.680 --> 00:11:19.880
line length of 1 it will effectively do the
same thing so that's what we're gonna do

121
00:11:19.880 --> 00:11:24.030
so that also sounds like something you are gonna do a lot that's drawing those

122
00:11:24.030 --> 00:11:27.750
single points and then a create a
function called plot that will take

123
00:11:27.750 --> 00:11:33.050
a canvas as its first parameter followed by the
X&Y coordinates of the point to be

124
00:11:33.050 --> 00:11:40.590
plotted so lets go ahead and create that
going to come down here so we are gonna define a

125
00:11:40.590 --> 00:11:46.450
function plot and again the parameters
firstly is the canvas and also the X&Y

126
00:11:46.450 --> 00:11:51.140
coordinates where we want to plot and in
terms of what we need to do is gonna be....

127
00:11:51.140 --> 00:11:58.430
....

128
00:11:58.430 --> 00:12:06.760
...and lets got with a different color this time

129
00:12:06.760 --> 00:12:10.170
we are going with red so we should be able to see red on a white

130
00:12:10.170 --> 00:12:13.680
background again substitute the color if
appropriate

131
00:12:13.680 --> 00:12:17.310
if your getting a different result on your computer so that's all the plot needs to do

132
00:12:17.310 --> 00:12:20.800
and what would then do is change that so
instead of printing the output is going

133
00:12:20.800 --> 00:12:23.800
to actually plot the points instead so type...

134
00:12:24.499 --> 00:12:30.439
....ok so lets actually
run that this time

135
00:12:36.040 --> 00:12:40.050
now lets get a close up there you
may be can't see that very well because of

136
00:12:40.050 --> 00:12:44.370
the video but you can see that the
axis are printed and what you really

137
00:12:44.370 --> 00:12:48.160
can't see a lot of detail about is
because the points are very far apart

138
00:12:48.160 --> 00:12:53.579
but there is actually a vague parabola plotted
their you can sort of see that starting down here

139
00:12:53.579 --> 00:12:57.420
and moving down but again it's not really
the best example but with that said

140
00:12:57.420 --> 00:13:01.699
there's really two things wrong with the
graph firstly its upside down and second

141
00:13:01.699 --> 00:13:06.589
the values of y go to 900 which is far
more than half of the 480 that we have

142
00:13:06.589 --> 00:13:09.810
available in windows so in other words
were trying to draw off the screen both

143
00:13:09.810 --> 00:13:13.709
problems as it turns out can be solved
pretty easily and what we gonna do is make

144
00:13:13.709 --> 00:13:14.339
a change

145
00:13:14.339 --> 00:13:20.630
firstly I'm going to close this down on line out with our
parabola method currently we've got y

146
00:13:20.630 --> 00:13:27.019
= x * x if we change that to x * x / 100 that's gonna make sure that things

147
00:13:27.019 --> 00:13:30.579
are fit in that area it prevents the
y values from running off the screen so

148
00:13:30.579 --> 00:13:36.009
that's half the variable but we also then we want to go down to where we are calling plot here on line 36 and if we use the

149
00:13:36.009 --> 00:13:40.149
negative value of y negative y that
should flip the graph over and that's

150
00:13:40.149 --> 00:13:44.639
because the canvas coordinates system has
the y axis starting at the top with

151
00:13:44.639 --> 00:13:48.250
increasing numbers moving down the
screen whereas traditional grappling plotting

152
00:13:48.250 --> 00:13:52.240
has increasing y value moving up from
the axis so lets try running that again

153
00:13:52.240 --> 00:14:01.269
...so you can see we got a little bit different output this time its a bit more clearer but the parabolic

154
00:14:01.269 --> 00:14:05.089
function isn't really doing all it can
do thought at the moment the program needs to loop

155
00:14:05.089 --> 00:14:09.110
through the values it returns in order
to print a parabola so wouldn't it be more

156
00:14:09.110 --> 00:14:13.149
useful if the function plotted the points
no need to tell how big

157
00:14:13.149 --> 00:14:17.149
the parabola should be and give it a canvas to
draw on so we'll look at doing that and

158
00:14:17.149 --> 00:14:20.449
also fixing up some of these warnings
that you can see on the screen in the

159
00:14:20.449 --> 00:14:20.720
next video