1
00:00:05,500 --> 00:00:10,360
in the previous video we had a quick look
at Python functions and we saw how we can

2
00:00:10,360 --> 00:00:14,370
use them to perform actions or
return results and of course sometimes

3
00:00:14,370 --> 00:00:18,550
do both of those things now our function
to print text centered on a 80 page

4
00:00:18,550 --> 00:00:23,080
character screen was modified to just
return the text to be printed to

5
00:00:23,080 --> 00:00:26,980
demonstrate how a function returns a
result with the return statement and

6
00:00:26,980 --> 00:00:31,400
also that there is often more than one
way to do something and deciding what to

7
00:00:31,400 --> 00:00:35,390
use or which way to use is part really
of the programs designed so functions are

8
00:00:35,390 --> 00:00:40,240
incredibly useful to allow the same
block of code to be used over and over

9
00:00:40,240 --> 00:00:46,550
again now they make programs easier to
design by breaking down the programming

10
00:00:46,550 --> 00:00:50,940
challenge up into manageable tasks and
the use of functions can make programs

11
00:00:50,940 --> 00:00:54,710
more reliable by providing code
blocks that can be thoroughly tested to

12
00:00:54,710 --> 00:00:58,630
make sure they perform their function
reliably now these advantages also

13
00:00:58,630 --> 00:01:03,040
come from using object-oriented
programming and classes and class

14
00:01:03,040 --> 00:01:07,260
methods are just functions so it's
important that you understand functions

15
00:01:07,260 --> 00:01:11,540
before we move on to object oriented
programming in the next section now I'm

16
00:01:11,540 --> 00:01:14,640
gonna start with some maths here but it's
not going to be anything too complicated

17
00:01:14,640 --> 00:01:18,170
so don't be too worried now parabola is a
very interesting shape

18
00:01:18,920 --> 00:01:24,070
parabolic reflectors can be used to
focus light or sound and are also used to

19
00:01:24,070 --> 00:01:29,400
focus the satellite signals used for
modern TV broadcast you can throw a ball in the

20
00:01:29,400 --> 00:01:34,250
air it follows a parabolic path as it
rises and falls back to earth now what I'm going

21
00:01:34,250 --> 00:01:38,790
to do is create a very simple equation
for a parabola so what we're going to do

22
00:01:38,790 --> 00:01:43,010
is so what I've done is I've created a new
project and I've also created a new

23
00:01:43,010 --> 00:01:47,890
python file so let's start with a
definition of a parabola functions so

24
00:01:47,890 --> 00:01:52,780
we're gonna type.....

25
00:01:52,780 --> 00:02:02,470
.....

26
00:02:04,080 --> 00:02:22,250
.....and that's

27
00:02:22,250 --> 00:02:27,140
it so you can see it's a very simplest
equation for parabola is y = x

28
00:02:27,140 --> 00:02:32,170
squared so X times X that I've done
on line 2 and so I've created a simple

29
00:02:32,170 --> 00:02:36,210
function to return the value of y for various values of x so if we run this

30
00:02:36,210 --> 00:02:43,830
we get to see you all the values of y
printed out and if you scroll up and

31
00:02:43,830 --> 00:02:46,630
down as you can see here right down the bottom
you can scroll right to the top

32
00:02:46,630 --> 00:02:52,050
and this is sort of a shape in the
numbers but just do that again you

33
00:02:52,050 --> 00:02:55,110
can see how the numbers sort of going down smaller
and go up again so its a bit of a shape

34
00:02:55,110 --> 00:02:56,320
their

35
00:02:56,320 --> 00:03:03,360
so its an interesting phenomenon with parabola
but it will be much nicer if we could plot them on a graph

36
00:03:03,360 --> 00:03:06,120
because that would actually make a lot of sense
to do it that way so why don't we do that

37
00:03:06,120 --> 00:03:09,980
why don't we continue on from there and do
that so i'm gonna make some modifications

38
00:03:09,980 --> 00:03:15,150
to this file now so that we can do that
so we leave the existing functionality we

39
00:03:15,150 --> 00:03:19,450
got in there but I'm gonna come back up here
and we're going to use tkinter

40
00:03:19,450 --> 00:03:29,040
again so come up with a try to start with you see this a number of times now so.....

41
00:03:29,040 --> 00:03:36,390
....

42
00:03:37,360 --> 00:03:45,220
.....we are going start on
line 7 we leave our parabola method their

43
00:03:45,820 --> 00:03:53,610
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:53,610 --> 00:04:03,820
to start a main window for tkinter so....

45
00:04:03,820 --> 00:04:07,040
.....

46
00:04:07,880 --> 00:04:13,690
.....

47
00:04:14,420 --> 00:04:22,700
....and you can make yours
much bigger if you like just change that

48
00:04:22,700 --> 00:04:26,840
to the resolution of your monitor to a
larger value we didn't know how big to

49
00:04:26,840 --> 00:04:30,950
make it because we wanted to use values
that worked on pretty well all computers and

50
00:04:30,950 --> 00:04:34,510
that's why we left it at 640 by 480 but
feel free to increase

51
00:04:34,510 --> 00:04:41,280
those dimensions to larger number to suit
your computer so let's also create a

52
00:04:41,280 --> 00:04:55,400
canvas so.....

53
00:04:55,400 --> 00:05:04,010
.....

54
00:05:04,010 --> 00:05:07,010
....

55
00:05:08,310 --> 00:05:18,900
....so the program just creates a canvas and adds
it to the grid window manager it fills the

56
00:05:18,900 --> 00:05:24,750
Windows so if we just run this is to confirm
what its actually doing and it is not going to work

57
00:05:24,750 --> 00:05:32,390
until I end the main loop call so.... so I just remove the indent

58
00:05:32,390 --> 00:05:41,760
....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:41,760 --> 00:05:47,030
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:47,030 --> 00:05:50,200
we don't have to worry about which
manager to use as its going to be the only

61
00:05:50,200 --> 00:05:54,070
thing in the window so if you want to
the pack manager would also do this as well

62
00:05:54,070 --> 00:05:58,820
but we chose grid because we want to
briefly add another canvas later now

63
00:05:58,820 --> 00:06:01,930
interestingly enough if you checked
out the documentation links from the

64
00:06:01,930 --> 00:06:05,890
tkinter section you may have actually come
across canvas now it lets you draw basic

65
00:06:05,890 --> 00:06:10,690
shapes such as lines rectangles and
circles and you can also place text and

66
00:06:10,690 --> 00:06:12,220
images on a canvas

67
00:06:12,220 --> 00:06:16,060
now the canvas coordinate system has 00 at
the top left

68
00:06:16,060 --> 00:06:17,830
whereas a normal graph

69
00:06:17,830 --> 00:06:21,940
have the origin 00 in the middle so it
also be nice to have the X&Y axis

70
00:06:21,940 --> 00:06:26,130
displayed on the graph now we can find the
midpoint of the screen by dividing the

71
00:06:26,130 --> 00:06:30,730
width and height by 2 and a canvas can
have its origin shifted by using the

72
00:06:30,730 --> 00:06:34,660
scroll region option now we want to
shift it right by half the width

73
00:06:34,660 --> 00:06:39,210
bringing 0 from the left hand edge in to the
middle and also shifted it down by half the

74
00:06:39,210 --> 00:06:43,340
height so this is something we will want
to do when we try to plot graphs on a

75
00:06:43,340 --> 00:06:49,270
canvas or draw axis function would be useful
for that purpose so lets defined that method now

76
00:06:49,270 --> 00:06:56,770
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:56,770 --> 00:07:05,040
one leaving two spaces between the other
function so as defined......and what I'll do

78
00:07:05,040 --> 00:07:09,490
is type this out and go through what we have done....

79
00:07:12,060 --> 00:07:15,890
......

80
00:07:17,410 --> 00:07:24,370
......

81
00:07:25,640 --> 00:07:41,850
.....

82
00:07:43,880 --> 00:08:13,530
.....

83
00:08:15,050 --> 00:08:18,130
......

84
00:08:18,130 --> 00:08:31,350
.....

85
00:08:31,350 --> 00:08:38,890
...so the first thing
that draw axis function does

86
00:08:38,890 --> 00:08:43,159
is called the canvas update method and it does that to make sure that we can actually

87
00:08:43,159 --> 00:08:47,890
access the width and height now we did
mention this that when we used

88
00:08:47,890 --> 00:08:54,480
winfo width and winfo height methods at the end of the calculator
challenge that you do need to do that

89
00:08:54,480 --> 00:08:55,700
you need to call canvas

90
00:08:55,700 --> 00:09:00,090
.update to make sure that those values
are available for you so we use them on the

91
00:09:00,090 --> 00:09:03,200
main window that time but actually
every widget is a window and has those

92
00:09:03,200 --> 00:09:04,400
methods available

93
00:09:04,400 --> 00:09:08,840
now the function that we have designed just divides those values by two to get the

94
00:09:08,840 --> 00:09:13,860
values for the X&Y origin now the scroll
region is just a box with one corner at

95
00:09:13,860 --> 00:09:19,980
minus x origin minus y origin and the
other and X origin y origin for example if you had a

96
00:09:19,980 --> 00:09:24,080
10 centimeters square piece of paper in
front of you with its top left hand in

97
00:09:24,080 --> 00:09:27,920
the middle of your desk bringing it up five
centimeters and left five centimeters

98
00:09:27,920 --> 00:09:32,620
replace the center of the paper in the
middle of your desk and that's exactly what

99
00:09:32,620 --> 00:09:36,060
we're doing here but on the screen so the
function after does that then draws a

100
00:09:36,060 --> 00:09:40,640
horizontal line for the x axis and a
vertical line for the Y axis so that's

101
00:09:40,640 --> 00:09:44,480
essentially what draw axis is
actually doing so when we call the draw

102
00:09:44,480 --> 00:09:49,350
axis functions we are going to reposition the
canvases origin and draw the X&Y axes on

103
00:09:49,350 --> 00:09:53,520
the canvas so we need to do in order to
do that we need to add a call to it just

104
00:09:53,520 --> 00:09:58,210
below what we've added the grid down here we do that on line 28 so....

105
00:09:58,210 --> 00:10:08,210
...so now we do that we run this we
should see the canvas divided into four

106
00:10:08,210 --> 00:10:10,010
quadrants by the X&Y axes

107
00:10:10,010 --> 00:10:13,010
lets give that a run

108
00:10:18,110 --> 00:10:23,170
if you're running on a Mac you might find you get a
result like this and it may happen on

109
00:10:23,170 --> 00:10:28,390
a Linux or Windows as well if that happens
the reason for its probably self-evident

110
00:10:28,390 --> 00:10:33,480
as I move this over notice on line 17
and 18 I used fill = white well in this

111
00:10:33,480 --> 00:10:39,310
case on my Mac the background is white so of
course drawing some lines is going to be

112
00:10:39,310 --> 00:10:42,310
drawn white on white which we cannot see
so if you are not seeing any results

113
00:10:42,910 --> 00:10:48,890
change the color so fill = white lets
change that to black we should now have black lines on a

114
00:10:48,890 --> 00:10:56,120
white background and thats should work for us so lets try that we can see now that

115
00:10:56,120 --> 00:11:01,450
is actually worked as we can see there
and the purpose was to divide into four

116
00:11:01,450 --> 00:11:05,810
quadrants the canvas and we've done that
it's been divided into four quadrants by

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

118
00:11:11,330 --> 00:11:15,860
provide a method for but a line of length one
will do so just a bit of important distinction

119
00:11:15,860 --> 00:11:20,250
so you can't actually plot individual
points on a canvas but by making their

120
00:11:20,250 --> 00:11:23,450
line length of 1 it will effectively do the
same thing so that's what we're gonna do

121
00:11:23,450 --> 00:11:27,600
so that also sounds like something you are gonna do a lot that's drawing those

122
00:11:27,600 --> 00:11:31,320
single points and then a create a
function called plot that will take

123
00:11:31,320 --> 00:11:36,620
a canvas as its first parameter followed by the
X&Y coordinates of the point to be

124
00:11:36,620 --> 00:11:44,160
plotted so lets go ahead and create that
going to come down here so we are gonna define a

125
00:11:44,160 --> 00:11:50,020
function plot and again the parameters
firstly is the canvas and also the X&Y

126
00:11:50,020 --> 00:11:54,710
coordinates where we want to plot and in
terms of what we need to do is gonna be....

127
00:11:54,710 --> 00:12:02,000
....

128
00:12:02,000 --> 00:12:10,330
...and lets got with a different color this time

129
00:12:10,330 --> 00:12:13,740
we are going with red so we should be able to see red on a white

130
00:12:13,740 --> 00:12:17,250
background again substitute the color if
appropriate

131
00:12:17,250 --> 00:12:20,880
if your getting a different result on your computer so that's all the plot needs to do

132
00:12:20,880 --> 00:12:24,370
and what would then do is change that so
instead of printing the output is going

133
00:12:24,370 --> 00:12:27,370
to actually plot the points instead so type...

134
00:12:28,060 --> 00:12:34,000
....ok so lets actually
run that this time

135
00:12:39,610 --> 00:12:43,620
now lets get a close up there you
may be can't see that very well because of

136
00:12:43,620 --> 00:12:47,940
the video but you can see that the
axis are printed and what you really

137
00:12:47,940 --> 00:12:51,730
can't see a lot of detail about is
because the points are very far apart

138
00:12:51,730 --> 00:12:57,140
but there is actually a vague parabola plotted
their you can sort of see that starting down here

139
00:12:57,140 --> 00:13:00,990
and moving down but again it's not really
the best example but with that said

140
00:13:00,990 --> 00:13:05,260
there's really two things wrong with the
graph firstly its upside down and second

141
00:13:05,260 --> 00:13:10,150
the values of y go to 900 which is far
more than half of the 480 that we have

142
00:13:10,150 --> 00:13:13,380
available in windows so in other words
were trying to draw off the screen both

143
00:13:13,380 --> 00:13:17,270
problems as it turns out can be solved
pretty easily and what we gonna do is make

144
00:13:17,270 --> 00:13:17,900
a change

145
00:13:17,900 --> 00:13:24,200
firstly I'm going to close this down on line out with our
parabola method currently we've got y

146
00:13:24,200 --> 00:13:30,580
= x * x if we change that to x * x / 100 that's gonna make sure that things

147
00:13:30,580 --> 00:13:34,140
are fit in that area it prevents the
y values from running off the screen so

148
00:13:34,140 --> 00:13:39,570
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:39,570 --> 00:13:43,710
negative value of y negative y that
should flip the graph over and that's

150
00:13:43,710 --> 00:13:48,200
because the canvas coordinates system has
the y axis starting at the top with

151
00:13:48,200 --> 00:13:51,820
increasing numbers moving down the
screen whereas traditional grappling plotting

152
00:13:51,820 --> 00:13:55,810
has increasing y value moving up from
the axis so lets try running that again

153
00:13:55,810 --> 00:14:04,830
...so you can see we got a little bit different output this time its a bit more clearer but the parabolic

154
00:14:04,830 --> 00:14:08,650
function isn't really doing all it can
do thought at the moment the program needs to loop

155
00:14:08,650 --> 00:14:12,680
through the values it returns in order
to print a parabola so wouldn't it be more

156
00:14:12,680 --> 00:14:16,710
useful if the function plotted the points
no need to tell how big

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

158
00:14:20,710 --> 00:14:24,010
also fixing up some of these warnings
that you can see on the screen in the

159
00:14:24,010 --> 00:14:24,290
next video