1
00:00:00,180 --> 00:00:06,870
So will come back again in this exercise you're supposed to produce an ad that draws a chart or a group

2
00:00:06,870 --> 00:00:08,070
of graphs.

3
00:00:08,070 --> 00:00:13,530
Imagine this is an app that takes a lot of statistics and based on that draws differing graphs with

4
00:00:13,530 --> 00:00:15,840
different heights or different weights.

5
00:00:15,840 --> 00:00:18,250
Now I've done one variation of that.

6
00:00:18,270 --> 00:00:22,760
I'm going to show you and then you can build either that or something similar to that.

7
00:00:22,890 --> 00:00:25,940
Or you can just get an expression of that and draw your own version.

8
00:00:26,100 --> 00:00:32,310
So what they have done is this when you go in here you type it just throws a bunch of graphs up.

9
00:00:32,310 --> 00:00:34,140
The numbers are put to use randomly.

10
00:00:34,170 --> 00:00:39,610
But I'm sure you understand how to take those random numbers and feed the numbers that you want with

11
00:00:39,610 --> 00:00:45,690
the software and also Currently it has only 10 boards and I'm sure you can find out how to change those

12
00:00:45,690 --> 00:00:49,550
numbers make your app a little bit more dynamic so it can take on.

13
00:00:49,650 --> 00:00:55,700
So it can take on five bars or maybe 10 bars or depending on the number of the statistics that you have.

14
00:00:55,710 --> 00:01:02,360
Now for me for the sake of simplifying things and having less code to show you guys get it right the

15
00:01:02,360 --> 00:01:06,860
way that is random and for you guys you can just you know build on top of that.

16
00:01:06,910 --> 00:01:12,630
Also the colors that I have are being chosen randomly each time that I touch you could essentially put

17
00:01:12,710 --> 00:01:18,810
the specific colors in that I I've seen a few libraries out there that people have written charts and

18
00:01:18,810 --> 00:01:21,700
graphs and pie graphs and things of the sort.

19
00:01:21,780 --> 00:01:25,860
And this is essentially one of those that draws some graphs where you guys.

20
00:01:25,860 --> 00:01:32,340
Now I could always suggest that you pause the video at this point wait for a little while or give it

21
00:01:32,340 --> 00:01:34,560
a shot on your own and then follow me.

22
00:01:34,560 --> 00:01:40,440
Or if you want you can have a look at what I'm going to do and then based on that rebuild the app to

23
00:01:40,570 --> 00:01:45,360
produce something that you might find useful for some of your applications in the future.

24
00:01:45,540 --> 00:01:51,510
Now here is a little requirement that I want to pose to you guys and that is I wanted to set up to be

25
00:01:51,510 --> 00:01:58,500
done programmatically like I don't want us to go to a storyboard not even once do I do everything within

26
00:01:58,500 --> 00:02:00,620
the body of the View Controller.

27
00:02:00,630 --> 00:02:07,230
So everything programmatically that chart application that takes on a certain number of balls and draws

28
00:02:07,230 --> 00:02:13,020
them based on a certain weight or height or whether you want to think of our let's get started.

29
00:02:13,020 --> 00:02:13,820
Good luck with it.

30
00:02:13,830 --> 00:02:19,970
And you can follow me with my solution in just a few seconds.

31
00:02:20,020 --> 00:02:22,360
So let's go ahead and get started the next court.

32
00:02:22,390 --> 00:02:24,520
I'm going to go in here to start a new application.

33
00:02:24,520 --> 00:02:33,010
I'm going to call it chart graph up and here is something I will tell you sometime in the beginning

34
00:02:33,010 --> 00:02:38,860
essentially and that is I have obviously done this code before I could just go through the code line

35
00:02:38,860 --> 00:02:45,030
by line for you or I could do another approach which is what I'm thinking of doing and that is to develop

36
00:02:45,030 --> 00:02:50,470
the app as if this was the first time I'm doing it and I would just go to the different challenges and

37
00:02:50,470 --> 00:02:54,240
I might write something that later turns out that I have to change it.

38
00:02:54,280 --> 00:03:00,760
So prepare yourself for going back and forth between different pieces of the code so keep that in mind

39
00:03:00,760 --> 00:03:01,130
please.

40
00:03:01,150 --> 00:03:02,040
I'm going to go in here.

41
00:03:02,070 --> 00:03:03,270
Get us started.

42
00:03:03,280 --> 00:03:08,830
And from what I remember the good news is this is not usually the case but they do have the option here.

43
00:03:08,850 --> 00:03:12,490
You can have a look at it and try to figure out what they want to do.

44
00:03:12,490 --> 00:03:17,330
Apparently I have this white background that I have to be able to draw everything on it.

45
00:03:17,350 --> 00:03:21,110
I'm going to call that canvas that Scambos for drawing everything.

46
00:03:21,130 --> 00:03:25,660
So I'm going to go ahead and say I have a valuable called Canvas.

47
00:03:25,660 --> 00:03:33,880
It is of the type you view and the commerce is going to be a new eye view and that view is initialising

48
00:03:33,880 --> 00:03:38,240
with a frame and that frame is got x y Witan height.

49
00:03:38,270 --> 00:03:42,970
A lot of this code I'm going to write them a little bit faster I'm not going to really pay so much attention

50
00:03:42,970 --> 00:03:45,330
to it or there Witan height effect.

51
00:03:45,340 --> 00:03:52,160
However I have to be self dot dot lbs dot that I'm going to say for that.

52
00:03:52,180 --> 00:03:56,650
It's up to 40 feet that is 20 pixels under left and 20 on the right.

53
00:03:56,800 --> 00:04:03,990
And then I'm going to say for the height do self don't view doth bounce that height.

54
00:04:04,030 --> 00:04:11,140
Minus 60 this time simply because we have 40 pixels from the top and 20 at the bottom the subtotal will

55
00:04:11,140 --> 00:04:12,280
be sixty.

56
00:04:12,310 --> 00:04:17,550
So that's going to be my charmless then my canvas is of white background so I'm going to say Chamas

57
00:04:17,590 --> 00:04:25,520
dark background color is a color that white and my actual view has a light gray background so.

58
00:04:25,630 --> 00:04:32,430
So self Dadda view that gun color is you white light gray color.

59
00:04:32,500 --> 00:04:37,490
So we got that part taken care of and of course we have to add the combis to our self of you.

60
00:04:37,510 --> 00:04:45,670
So I'm going to say self-taught view that I view canvas so by not fire on this application we should

61
00:04:45,670 --> 00:04:46,420
have the camera.

62
00:04:46,420 --> 00:04:51,300
So let's go ahead and run that so I make sure that I'm not doing something terribly wrong.

63
00:04:54,620 --> 00:04:59,840
So we got that part taken care of now the next thing we have to do is we have to actually make the boards

64
00:04:59,840 --> 00:05:03,850
that we want to showing here and here are a few things that I know about those boards.

65
00:05:03,860 --> 00:05:10,250
If I go back to the other application I know that each board should have a color chosen randomly.

66
00:05:10,340 --> 00:05:12,690
Each one is going to have a certain event.

67
00:05:12,710 --> 00:05:18,220
Of course everybody should have a height and every bar it has to be animated at some point.

68
00:05:18,320 --> 00:05:24,670
So we have to maintain these bars within an array or some sort of a collection as well as their vits.

69
00:05:24,770 --> 00:05:27,720
So we know where they are and what is there of it.

70
00:05:27,830 --> 00:05:30,470
So with that in mind I'm going to go back to school.

71
00:05:30,650 --> 00:05:33,590
So based on that I'm going to give this thought of with a new function.

72
00:05:33,620 --> 00:05:35,190
I'm going to call it function.

73
00:05:35,210 --> 00:05:41,720
Make your balls and it may make pause I need to change a few things up here in the valuables but I'm

74
00:05:41,720 --> 00:05:46,790
going to get started with the make wars first and then realize what we should change.

75
00:05:46,790 --> 00:05:51,810
So the first thing I'm going to do is I'm going to try to add one more I'm going to say let us call

76
00:05:51,810 --> 00:05:58,370
it board that's going to be a white label and this label is going to be built by a frame and the frame

77
00:05:58,370 --> 00:06:00,540
is going to have a Cjra.

78
00:06:00,620 --> 00:06:02,690
They'll have to place it to somebody.

79
00:06:02,690 --> 00:06:07,790
Now the question becomes where do we have to place this one where the first one going to be with the

80
00:06:07,790 --> 00:06:13,700
next one is going to be so on and so forth for they could tell you are a few things one of them is that

81
00:06:13,700 --> 00:06:19,760
the X is going to be zero for all of them because they are all stuck to the uttermost left side of the

82
00:06:19,760 --> 00:06:20,620
canvas.

83
00:06:20,680 --> 00:06:23,350
But the weather light is we need to change that.

84
00:06:23,360 --> 00:06:25,340
Every time that we make a new one.

85
00:06:25,340 --> 00:06:32,470
So for that one I'm going to have to actually produce in your valuable what I call their origin.

86
00:06:32,500 --> 00:06:38,480
Why for instance at the very beginning I'm going to put that at zero even though that I'm going to change

87
00:06:38,480 --> 00:06:42,010
as well over Origin why it becomes that.

88
00:06:42,140 --> 00:06:48,390
And then we have to get it for this labor as well as a height for it's now the height of it our value

89
00:06:48,380 --> 00:06:51,560
is that we have to somehow calculate the height of it.

90
00:06:51,560 --> 00:06:58,250
Let me go back in here becomes a matter of finding what is the total height of the canvas and then dividing

91
00:06:58,250 --> 00:07:03,890
it by the number of the bars that we have and then accounting for this little gap between them.

92
00:07:04,080 --> 00:07:08,450
So in here I'm going to go ahead and say let's find out what is the total height.

93
00:07:08,480 --> 00:07:19,820
I'm going to say let's just call this camis height and that becomes combis doth bounce that height and

94
00:07:19,820 --> 00:07:23,750
that is the value that we have for the total combis height.

95
00:07:23,750 --> 00:07:30,500
So if we get that number on I divide it by the number of the balls then I can get the size for each

96
00:07:30,500 --> 00:07:30,990
bar.

97
00:07:31,040 --> 00:07:32,380
And it's gap.

98
00:07:32,390 --> 00:07:37,220
So the next thing becomes about how many of these bars you're going to have so I'm going to add that

99
00:07:37,220 --> 00:07:43,190
one when I say let's number of balls let's say 10 to four now.

100
00:07:43,280 --> 00:07:47,430
And like I said in a real life application you want to make this a dynamic thing.

101
00:07:47,450 --> 00:07:52,980
But I leave it to you guys to find a way to put this as an argument for this function.

102
00:07:53,000 --> 00:07:56,230
For now I'm going to assume there always is statically 10.

103
00:07:56,390 --> 00:08:04,070
So now they have that I'm going to say well based on that let's highlight of each of these bars is off

104
00:08:04,070 --> 00:08:11,300
the type CGU flawed become charmless heights and I have to get the camera's height and divided by the

105
00:08:11,300 --> 00:08:17,160
number of the balls and keep in mind the number of the bar is an integer and we need a C.G. floor.

106
00:08:17,210 --> 00:08:20,920
So we have to actually cast it into a C-g float.

107
00:08:20,960 --> 00:08:24,460
So now we get the height which is the height of everything.

108
00:08:24,620 --> 00:08:29,760
Essentially it is the height of the war as well as the little gap beneath it.

109
00:08:29,900 --> 00:08:31,840
So we have to keep that in mind.

110
00:08:32,030 --> 00:08:38,420
And also I'm going to suggest that for each of these balls you spend two thirds of the total height

111
00:08:38,480 --> 00:08:43,280
to be the height of the bar and of one tared to be the height of the gap.

112
00:08:43,310 --> 00:08:48,090
So essentially the height will be used as Tutera of this height.

113
00:08:48,110 --> 00:08:55,070
So based on that I'm going to say height is actually this height supplied by two divided by three.

114
00:08:55,100 --> 00:09:00,140
So we managed to find the exact height that we wanted and we're going to change something and that's

115
00:09:00,140 --> 00:09:02,520
just a little bit of a luxury that we have.

116
00:09:02,690 --> 00:09:08,890
You see up there we have a little gap if we don't have that on the origin where he's at zero.

117
00:09:08,900 --> 00:09:10,620
We will get it right up there.

118
00:09:10,660 --> 00:09:12,770
I want to have it a little bit lower.

119
00:09:12,830 --> 00:09:20,450
And what is that lower that is essentially height one where the feet remain there for the gap and half

120
00:09:20,510 --> 00:09:21,370
of that.

121
00:09:21,440 --> 00:09:24,710
Let me write it down and maybe that kind of makes sense.

122
00:09:24,710 --> 00:09:34,190
So this origin of why I'm going to bring it for the lower because height multiplied by 1 which is kind

123
00:09:34,190 --> 00:09:36,010
of meaning that's what I'm putting it there.

124
00:09:36,230 --> 00:09:37,410
Divided by 30.

125
00:09:37,420 --> 00:09:45,500
So one 10 feet and that one tenth of the height on it divided by two because they want to have half

126
00:09:45,500 --> 00:09:47,830
of it up then and half of them here.

127
00:09:47,960 --> 00:09:53,430
If I zoom in to this you might be a little bit more expend artery that I'm trying to get this much this

128
00:09:53,430 --> 00:09:53,690
time.

129
00:09:54,270 --> 00:09:59,550
And that is half of the gap because the actual gap is this much.

130
00:09:59,550 --> 00:10:02,470
So now that we have that I'm going to go ahead.

131
00:10:02,880 --> 00:10:08,210
We also need a vet for all of our labels and the video is something that we're going to animate with

132
00:10:08,220 --> 00:10:11,740
if you remember in our actual application it gets animated.

133
00:10:11,760 --> 00:10:16,140
So I'm going to give it something like your five point points so at the very beginning we kind of see

134
00:10:16,140 --> 00:10:18,510
them but they are not really being animated.

135
00:10:18,570 --> 00:10:22,440
So I'm going to say that my view is actually five point zero.

136
00:10:23,100 --> 00:10:26,880
Since each of the callers in here are actually a you or you label.

137
00:10:26,910 --> 00:10:29,290
And they have a text and they have a font.

138
00:10:29,310 --> 00:10:32,800
I have actually said they're fun as well as their text alignment.

139
00:10:33,000 --> 00:10:38,280
So I'm going to go in here and say bar dot takes the alignment and that's going to be common.

140
00:10:38,300 --> 00:10:44,850
And as this alignment center and then I'm going to go ahead and say bar that font and that's going to

141
00:10:44,850 --> 00:10:49,310
be a fun dot system font of size.

142
00:10:49,350 --> 00:10:50,650
Actually not this one.

143
00:10:50,670 --> 00:10:54,760
I have to use the system fond of size.

144
00:10:54,930 --> 00:11:01,130
Let's give you the numbers such as Torak of various small number actually I could actually trying this

145
00:11:01,130 --> 00:11:03,200
down all the way to zero.

146
00:11:03,210 --> 00:11:09,840
And then when the animation is running I'm going to crank it up to a number maybe 15 or 18.

147
00:11:09,930 --> 00:11:16,950
I'm also going to go ahead and say Ball thought text color becomes color dot black.

148
00:11:17,230 --> 00:11:22,350
And the only thing I still have to do is to choose a color for the background of the label.

149
00:11:22,540 --> 00:11:25,740
And if you recall this column was meant to be a random color.

150
00:11:25,980 --> 00:11:30,630
And if you want to be able to choose a random color each time you have to somehow store all of these

151
00:11:30,630 --> 00:11:34,460
different colors somewhere preferably inside an array.

152
00:11:35,190 --> 00:11:44,590
So I'm going to say I have a variable called crullers array that is going to be an array of all the

153
00:11:44,600 --> 00:11:47,040
different UI colors.

154
00:11:47,200 --> 00:11:50,420
And then within that I'm going to have to hide all the colors.

155
00:11:50,440 --> 00:11:57,910
So I want to try to add as many of them as a child color dot of red and then I'm going to on color dot

156
00:11:58,080 --> 00:12:06,020
green essentially the whole are G-B so color dot blue maybe not black because they're using like someone

157
00:12:06,020 --> 00:12:07,200
else so blue.

158
00:12:07,480 --> 00:12:14,670
And then I'm going to add color dot yellow and then I'm going to you or I Eldard magenta and then add

159
00:12:14,810 --> 00:12:21,030
white color dot same on white color dot light gray color.

160
00:12:21,040 --> 00:12:25,370
I can add a color dot gray color not green gray.

161
00:12:25,480 --> 00:12:26,820
And then I'm going to add color.

162
00:12:26,830 --> 00:12:36,260
Dark dark gray and maybe at the end I'm going to add white color or orange for instance.

163
00:12:36,280 --> 00:12:41,800
So now we kind of have all the different colors that we could use inside an array other solution for

164
00:12:41,800 --> 00:12:47,650
this would be randomly producing the colors by the R G and B values but I will leave that for another

165
00:12:47,650 --> 00:12:50,710
lesson so you get familiar with all different ways.

166
00:12:50,710 --> 00:12:55,990
So now every time that we make one of these balls we are actually going to give it to one of the random

167
00:12:55,990 --> 00:12:58,270
colors from our callers array as well.

168
00:12:58,300 --> 00:13:02,360
So I'm going to copy that come down here and say bore dot.

169
00:13:02,410 --> 00:13:08,800
Background color becomes colors array and then we have to find a random index.

170
00:13:08,830 --> 00:13:16,270
So I'm going to say let's run random index on that random index you have to put your see from the count

171
00:13:16,330 --> 00:13:18,010
of the colors array.

172
00:13:18,010 --> 00:13:25,510
So for say Arc 4 and on and on but I get an odd four random uniform with an upper bound which is you

173
00:13:25,750 --> 00:13:31,690
in 32 of crullers array that count.

174
00:13:31,690 --> 00:13:32,720
So we get that.

175
00:13:32,740 --> 00:13:39,280
And this is going to give us a you eans 32 which is not what we want but we do want is an integer.

176
00:13:39,280 --> 00:13:42,360
So I'm going to say Give me an integer of this value.

177
00:13:42,850 --> 00:13:49,200
So you can look for Andong from something which is another in 32 converted to you in 32.

178
00:13:49,240 --> 00:13:52,670
Give me the random result which is not an integer.

179
00:13:52,680 --> 00:13:58,690
Convert it back to an integer and then give me the random index to be the color we choose from an array

180
00:13:58,900 --> 00:14:01,570
and be assigned to the bar that we have.

181
00:14:01,570 --> 00:14:09,260
Once we do that we actually have to add our board to there to the combis I'm going to say Come us come

182
00:14:09,300 --> 00:14:11,120
us like that.

183
00:14:11,500 --> 00:14:14,770
I view the board to it.

184
00:14:14,890 --> 00:14:19,030
And this by now we'll add one bar to our species.

185
00:14:19,030 --> 00:14:26,170
Not really what we want but we do want is doing this whole process 10 times or as many times as we have

186
00:14:26,170 --> 00:14:27,680
the number of the bars.

187
00:14:27,790 --> 00:14:29,410
So that's what I'm going to do next.

188
00:14:29,410 --> 00:14:33,530
I'm going to say let's do this for all I mean.

189
00:14:33,620 --> 00:14:36,640
I don't think if I meet the guy or not I'm not sure.

190
00:14:36,640 --> 00:14:40,980
We'll see about that from 0 to number of bars.

191
00:14:40,990 --> 00:14:42,620
Let's repeat this process.

192
00:14:42,640 --> 00:14:46,530
So many many times or 10 times in this case.

193
00:14:46,600 --> 00:14:51,320
Now I'm not using the oil in anything so I could replace it with with an underscore.

194
00:14:51,460 --> 00:14:56,860
And then in here I'm going to say when you make the very first one and you place it in origin why that's

195
00:14:56,860 --> 00:15:00,980
all good and well but then the next one shouldn't be built there.

196
00:15:01,090 --> 00:15:05,230
So the next one should be all region wide plus equal height.

197
00:15:05,260 --> 00:15:11,090
So whatever is the height that we decided which is the height of the bar as well as the gap underneath

198
00:15:11,410 --> 00:15:12,520
I that to it.

199
00:15:12,520 --> 00:15:19,040
So when we do this 10 times every time we add a little bit of space to it and we push one a space and

200
00:15:19,040 --> 00:15:19,850
lower.

201
00:15:20,110 --> 00:15:27,310
If this all works well by now we should be able to see ten little balls on the floor on the left corner

202
00:15:27,340 --> 00:15:28,600
of our canvas.

203
00:15:28,670 --> 00:15:36,220
So I'm going to go ahead and say make was this point in the view the pitches in here and I run the application

204
00:15:40,030 --> 00:15:46,170
and now we have 10 boards that they are all only five units and they're all stuck for the left corner.

205
00:15:46,170 --> 00:15:48,650
Obviously they don't animate or they don't do anything.

206
00:15:48,900 --> 00:15:54,580
So the next thing we have to do is this you have to come here to make wars and say even though everybody

207
00:15:54,580 --> 00:16:01,770
in here has a veto of five we actually need a bigger vet and we have to memorize that somewhere because

208
00:16:01,770 --> 00:16:04,000
we need to use that to animate it.

209
00:16:04,020 --> 00:16:09,540
Now for you if you were doing this as a real life exercise you would want to feed that as an argument

210
00:16:09,540 --> 00:16:11,520
into your make boss function.

211
00:16:11,520 --> 00:16:16,710
You would have an array that that array includes the number of the bars and for each floor would have

212
00:16:16,710 --> 00:16:17,770
a certain weight.

213
00:16:17,910 --> 00:16:21,960
But for me I'm going to make those values randomly essentially.

214
00:16:22,170 --> 00:16:29,580
I'm going to come in here and say everything that you make fun of this was also do this say let's ball

215
00:16:29,670 --> 00:16:37,560
w or bar with the same Shirdi become and viewed a random number that we have to produce from the video

216
00:16:37,590 --> 00:16:38,820
of the canvas.

217
00:16:38,880 --> 00:16:48,930
So I'm going to say Give me an arc for random with an upper bound of canvas canvas not bounce out of

218
00:16:48,930 --> 00:16:54,450
it and I could perhaps put this in a different variable to simplify our code.

219
00:16:54,450 --> 00:16:58,500
However he's is going to give us that error again saying that that is not.

220
00:16:58,540 --> 00:17:05,610
And you in some way to combat that say make it that you and now part of it is not a C-g float which

221
00:17:05,610 --> 00:17:06,600
is what I need.

222
00:17:06,600 --> 00:17:15,680
So I'm going to say make this one a C G float C G float so convert that cost into it.

223
00:17:15,810 --> 00:17:20,520
And I'm going to add a little thing to it as well just so that you know we have a bit of a safety in

224
00:17:20,520 --> 00:17:21,110
here.

225
00:17:21,210 --> 00:17:24,210
I don't want any of the numbers to be very small.

226
00:17:24,240 --> 00:17:27,970
Let's say I don't want any number to be smaller than 50.

227
00:17:28,200 --> 00:17:36,620
So I'm going to say by default at the 52 everyone and from David subtract 50.

228
00:17:36,660 --> 00:17:39,140
So let me go ahead and remake this.

229
00:17:39,150 --> 00:17:43,200
I'm going to write it off housewife's.

230
00:17:43,410 --> 00:17:45,740
That's going to be disbarred.

231
00:17:45,760 --> 00:17:55,790
You cut down pasted there and I'm going to say produce a random value from of combis minus 50 whatever

232
00:17:55,790 --> 00:17:56,340
it is.

233
00:17:56,350 --> 00:17:58,350
At 50 to it no matter what.

234
00:17:58,400 --> 00:18:02,900
Which makes sure every bar is at least 50 points.

235
00:18:02,900 --> 00:18:08,520
Now we have this far and we have the actual Boisseau we have the vets and the actual board.

236
00:18:08,720 --> 00:18:15,030
And we have to somehow memorize them somewhere because we need them later on for doing the actual animation.

237
00:18:15,030 --> 00:18:19,610
And here is how they're going to do it the most efficient way of doing such a thing is putting them

238
00:18:19,610 --> 00:18:22,460
inside a dictionary or a separate class.

239
00:18:22,460 --> 00:18:28,990
But I'm going to put it in a dictionary for now here I'm going to go ahead and say I have a valuable

240
00:18:29,170 --> 00:18:31,780
that is my board a array.

241
00:18:32,020 --> 00:18:37,010
It is not a dictionary it's an array of dictionary.

242
00:18:37,150 --> 00:18:42,260
And that's an array of dictionary that each of those dictionaries are made of.

243
00:18:42,270 --> 00:18:49,560
There's a key and a different kind of value because some of them are born which is a label.

244
00:18:49,570 --> 00:18:54,950
Some of them are born of it which is a C.G. float someone to go ahead and say it's a dictionary of a

245
00:18:54,970 --> 00:18:55,860
string.

246
00:18:56,140 --> 00:19:00,390
That's the key and a value which I don't know what it's going to be.

247
00:19:02,680 --> 00:19:04,390
Now they have the bars array.

248
00:19:04,390 --> 00:19:10,480
I'm going to go ahead and say every time you're about to make the balls make it empty.

249
00:19:10,480 --> 00:19:13,950
So bars are a becomes an empty new worry.

250
00:19:14,050 --> 00:19:20,060
And then every time you make one of these bars and one of these bar vits you have to make a dictionary.

251
00:19:20,110 --> 00:19:22,400
And I to this for array.

252
00:19:22,590 --> 00:19:33,830
So I'm going to go ahead and say let's bar dictionary to be a dictionary of a string and a knee.

253
00:19:34,210 --> 00:19:43,130
And that's going to have these values is going to have a value called Bar key and Boricua the bar itself.

254
00:19:43,400 --> 00:19:53,880
And it has another key called bar that she just call it with a key and that's going to be bar vits.

255
00:19:53,950 --> 00:20:03,830
So we placed both of our values inside a dictionary and data dictionary added 12 balls array of pens

256
00:20:04,330 --> 00:20:07,070
and we are appending the bar dictionary.

257
00:20:07,150 --> 00:20:14,350
So by the end of this process we should have an array that includes 10 dictionaries that the 10 dictionaries

258
00:20:14,680 --> 00:20:20,690
each of them has the information about a ball of the type you label on it.

259
00:20:20,740 --> 00:20:24,880
You could if you wanted to print this even though it's not very meaningful but I'm going to try that

260
00:20:24,880 --> 00:20:26,630
for you in the view that lot.

261
00:20:26,710 --> 00:20:38,440
Once the bars are made I'm going to say print what ever you find which is inside the bars.

262
00:20:38,440 --> 00:20:44,590
Ari on this one this visually this application should be no different than what it was before.

263
00:20:44,590 --> 00:20:47,970
We should still see exactly the same thing visually.

264
00:20:48,100 --> 00:20:53,360
However we get this printout in here which is the law of text and maybe not very readable.

265
00:20:53,560 --> 00:20:56,690
But it essentially says there is a Borachio.

266
00:20:56,830 --> 00:20:59,110
Let me go in here and zoom into it.

267
00:20:59,110 --> 00:21:02,330
So what are the key label so on and so forth.

268
00:21:02,470 --> 00:21:10,060
Finally vate three hundred and other three oh one another with three live and some or all of the bits

269
00:21:10,060 --> 00:21:11,600
are somewhere around 300.

270
00:21:11,600 --> 00:21:15,430
I don't know why that is happening but we'll see that soon in action.

271
00:21:15,430 --> 00:21:21,510
So we kind of have everything we needed to go ahead and get us started with animating these guys.

272
00:21:22,000 --> 00:21:26,530
And from the animation of them I want to show you something just in case you didn't notice it.

273
00:21:26,550 --> 00:21:32,920
When we have this final product I click some variant it starts animating it doesn't animate all of them

274
00:21:32,920 --> 00:21:37,730
together it finishes one dingo's the next one then the next one then the next one.

275
00:21:37,750 --> 00:21:42,620
So we kind of have a progressive animation that each of them happens after another one.

276
00:21:42,730 --> 00:21:44,410
And that's something that they want to implement.

277
00:21:44,410 --> 00:21:45,940
In this exercise as well.

278
00:21:46,120 --> 00:21:54,030
So to do that I'm going to go ahead in here and say we have a new function called function animate and

279
00:21:54,190 --> 00:21:59,140
our animation function we have to have a system that we and he made to one at a time.

280
00:21:59,290 --> 00:22:04,600
And he is the system that I'm thinking in my head and maybe you have a better one but what I'm thinking

281
00:22:04,600 --> 00:22:11,230
is this I wanted to run a view on your view animation on the very first the one in the array.

282
00:22:11,380 --> 00:22:14,130
When it's finished go to the second one underneath.

283
00:22:14,180 --> 00:22:18,500
Again when it's finish coat with head one until we finish.

284
00:22:18,790 --> 00:22:23,440
So once again I want to go through the elements of the array in order there and the moment I finished

285
00:22:23,440 --> 00:22:25,140
then I don't want to go there anymore.

286
00:22:25,330 --> 00:22:32,380
So to do that you have to have a system that somehow counts how many of the elements of the array we

287
00:22:32,380 --> 00:22:34,840
have been through to do that.

288
00:22:34,870 --> 00:22:37,350
I'm going to introduce a very simple counter.

289
00:22:37,390 --> 00:22:43,430
I'm going to say our counter and that begins from zero.

290
00:22:43,450 --> 00:22:49,100
So this is the first time that we are going through the array and we're animating things.

291
00:22:49,120 --> 00:22:54,040
So in the UI view animate I'm going to say you I view that animate.

292
00:22:54,140 --> 00:23:00,260
I want an animation with completion on I'm going to go ahead and say animation duration is maybe point

293
00:23:00,300 --> 00:23:00,780
2.

294
00:23:01,090 --> 00:23:07,330
And the animation that you want to run is something that you have to figure out and at completion we

295
00:23:07,330 --> 00:23:16,510
have to do this thing we have to say that the value counter it has to add the twe itself because it's

296
00:23:16,510 --> 00:23:18,700
going back to the next one.

297
00:23:18,850 --> 00:23:26,260
And then we have to do something very tricky which is saying selve got an inmate and I should have called

298
00:23:26,260 --> 00:23:27,910
self in here as well.

299
00:23:28,090 --> 00:23:34,240
So let's see what's happening when the first time we call animate it comes in here I mention goes to

300
00:23:34,240 --> 00:23:39,340
completion adds one to itself comes back and really animates.

301
00:23:39,400 --> 00:23:45,160
So it seems like this is going to continue forever because every time it finishes comes back and does

302
00:23:45,160 --> 00:23:47,050
this again and again and again.

303
00:23:47,230 --> 00:23:48,880
And that's something that we have to avoid.

304
00:23:48,890 --> 00:23:50,540
And we have to stop and stop it.

305
00:23:50,560 --> 00:24:02,170
Going to say if that counter the value that we are counting up if it's reached the array if it reached

306
00:24:02,170 --> 00:24:08,720
the size of the array that means we have to return we don't need to continue anymore.

307
00:24:08,920 --> 00:24:13,100
So right at the very beginning counter-IED zero bars count is 10.

308
00:24:13,240 --> 00:24:17,770
So that's not the case this is going to happen the next time this is going to happen the next time it's

309
00:24:17,770 --> 00:24:20,920
going to happen until the counter is nine and 9.

310
00:24:20,920 --> 00:24:22,710
Is it equal to 10 No.

311
00:24:22,760 --> 00:24:27,010
It is going to happen again this becomes 10 and we come back.

312
00:24:27,280 --> 00:24:28,860
Is 10 equivalent to 10.

313
00:24:28,870 --> 00:24:31,970
Yes 310 and don't do this anymore.

314
00:24:32,290 --> 00:24:37,460
So that part is taking care of the part that we still have to do is this far.

315
00:24:37,480 --> 00:24:40,260
So what are we doing when we are animating.

316
00:24:40,260 --> 00:24:48,820
Actually we have to find Barlas array object that is currently counted and that needs cells and we have

317
00:24:48,820 --> 00:24:50,670
to somehow animate this.

318
00:24:50,740 --> 00:24:55,540
So I'm going to write this in a separate method some way to comment this out so I don't have an error

319
00:24:55,870 --> 00:25:01,090
so that we know what we have to do and the function animate is going to call that are their function

320
00:25:01,410 --> 00:25:07,180
and that function I'm going to call it the redraw and the reason I call it the redraw is simply because

321
00:25:07,480 --> 00:25:11,240
we already have the labels inherent in our application.

322
00:25:11,410 --> 00:25:17,530
You can already see them but we're redrawing them to be wider and to show us the text so we have to

323
00:25:17,530 --> 00:25:18,520
redraw them.

324
00:25:18,700 --> 00:25:20,140
And what are they going to redraw.

325
00:25:20,140 --> 00:25:27,340
We're going to redraw an object that includes a bar and a bar of it an object that is very similar to

326
00:25:27,340 --> 00:25:29,300
this guy abor dictionary.

327
00:25:29,440 --> 00:25:33,350
So the input argument here is a dictionary.

328
00:25:33,370 --> 00:25:43,360
So I'm going to say the input bar dictionary that's going to be a dictionary of a string and any so

329
00:25:43,720 --> 00:25:49,910
if you input a bar dictionary into this function it has to redraw it for us.

330
00:25:50,020 --> 00:25:51,850
The victim this time.

331
00:25:51,940 --> 00:25:57,630
So the animation happens here the body of the animation happens here what it is going to do.

332
00:25:57,670 --> 00:25:59,180
It happens in the reader all.

333
00:25:59,260 --> 00:26:04,150
So let's go ahead and call that in here so we are done with the animate function and we only go to the

334
00:26:04,140 --> 00:26:11,080
rethrow function to call it in yet it would become very simple it becomes self darte redraw.

335
00:26:11,190 --> 00:26:14,030
I was asking for a dictionary of the same type.

336
00:26:14,030 --> 00:26:20,810
And that's going to be Bohr's array self counted and I need a self for the borders array as well.

337
00:26:20,990 --> 00:26:29,000
So they're saying every time you go in there based on the count 0 1 2 or 8 or 9 in case of my application

338
00:26:29,210 --> 00:26:30,460
yours might be different.

339
00:26:30,500 --> 00:26:37,100
Find one of those from the bar's array and interpret that as a dictionary which we know it is and feed

340
00:26:37,100 --> 00:26:38,620
it into the redraw.

341
00:26:38,610 --> 00:26:40,750
And now let's see what the redraw has to do.

342
00:26:40,910 --> 00:26:44,250
Now the tree of life you have to do in here is actually very simple.

343
00:26:44,300 --> 00:26:47,110
We have to find the bar inside this dictionary.

344
00:26:47,190 --> 00:26:52,610
If you have to find the bar of it inside this dictionary and apply it to the width of the bar.

345
00:26:52,700 --> 00:26:59,380
So let's go ahead and do all of these letters for me in football dictionary.

346
00:26:59,790 --> 00:27:10,030
She and the key is called I think we typed it up here more akey and let's inferred that as a label.

347
00:27:10,370 --> 00:27:17,900
And then I'm going to go ahead and say let's more of it to be in the dictionary and that's going to

348
00:27:17,900 --> 00:27:24,350
be called qi and that is a C.G. float.

349
00:27:24,350 --> 00:27:34,050
And once you got that Savon dot frame dot sized dot it becomes a part of it.

350
00:27:34,130 --> 00:27:38,480
So every time we come in here we find the bar we find it and we apply it to the bar.

351
00:27:38,740 --> 00:27:41,000
And of course I want to add two things in here as well.

352
00:27:41,000 --> 00:27:46,050
One of them is that you want to change the text that the bar is showing because it's not showing anything.

353
00:27:46,050 --> 00:27:52,270
I'm I to ball that text becomes whatever you have in the bar of it.

354
00:27:52,820 --> 00:27:54,030
So that's easy.

355
00:27:54,170 --> 00:28:03,200
And then I want to say also animate the size of its fun so that the fund becomes a fund dart system

356
00:28:03,200 --> 00:28:09,080
font of size and the value of it is and I'm just going to randomly put 18 and hope there is going to

357
00:28:09,080 --> 00:28:09,890
work.

358
00:28:09,980 --> 00:28:15,480
So every time that the animators call it is going to go through every one in year.

359
00:28:15,500 --> 00:28:17,730
One other time based on the counter.

360
00:28:17,960 --> 00:28:25,290
And then I made each of them using the redraw and or match balls is being called at the end of the view

361
00:28:25,350 --> 00:28:25,880
that.

362
00:28:26,110 --> 00:28:31,460
I want to add something else in here that helps me rerun this animation over and over every time that

363
00:28:31,460 --> 00:28:32,240
I touch.

364
00:28:32,370 --> 00:28:41,200
So I'm going to go at the end of The View a lot say touches and not that touches and that nuthatches

365
00:28:41,460 --> 00:28:46,390
and that I'm going to go ahead and say a few things make the balls.

366
00:28:46,400 --> 00:28:51,950
That's something that we know we have to do also call the function called animate.

367
00:28:51,980 --> 00:28:58,220
So I'm going to animate things on here something I'm going to give it to you for free because I know

368
00:28:58,220 --> 00:29:01,340
this is going to come up but I don't want to make the video any longer.

369
00:29:01,340 --> 00:29:08,470
If Fitri make the balls is going to keep adding them over the combis So you have to empty the combis.

370
00:29:08,540 --> 00:29:13,560
So I'm going to say first of all do this for me in combat.

371
00:29:13,910 --> 00:29:20,540
Dadds subfields for anyone in there say any doubts removed from super.

372
00:29:20,550 --> 00:29:23,070
You get rid of them or so.

373
00:29:23,070 --> 00:29:29,210
And here is a little thing that I want to mention is every time that we come to this animate counter

374
00:29:29,210 --> 00:29:30,240
goes up.

375
00:29:30,320 --> 00:29:34,350
So we have to reset the counter if you want to redo everything.

376
00:29:34,350 --> 00:29:36,830
So I'm going to say counter is zero.

377
00:29:37,250 --> 00:29:39,500
And I think that's all we have to do.

378
00:29:39,500 --> 00:29:41,240
Let me run the application.

379
00:29:41,240 --> 00:29:45,820
If it works well the way we've been hoping I'm going to do a quick recap of everything for you.

380
00:29:48,080 --> 00:29:56,660
So top and they work top again it's a little bit too slow I think that number wasn't really good points

381
00:29:56,670 --> 00:30:00,140
to a point the 0 7 5 would do better.

382
00:30:00,170 --> 00:30:09,020
Now before I read on the animation quick recap we have an array of a dictionary of I string and anything

383
00:30:09,020 --> 00:30:13,950
else because this could either be a label or could be a CGI float.

384
00:30:13,940 --> 00:30:15,580
We have an idea of all the colors.

385
00:30:15,680 --> 00:30:18,410
We have a canvas and we have a counter for animation.

386
00:30:18,470 --> 00:30:23,720
We make our cameras programmatically it would be us similar to doing it in a storyboard.

387
00:30:23,750 --> 00:30:30,020
And of course we added to our set of that view added as a sub view and then in the touches and that

388
00:30:30,020 --> 00:30:32,840
this is the part that the things actually happen.

389
00:30:32,960 --> 00:30:36,250
We remove everything from combis resets counter.

390
00:30:36,300 --> 00:30:40,040
We make the balls again and we animate them in making the balls.

391
00:30:40,040 --> 00:30:45,760
We calculated the height of each of them orange and while each of them we reset our balls and then we

392
00:30:45,760 --> 00:30:53,120
go to the number of the balls and we make new UI labels in each labeled the said things that are such

393
00:30:53,120 --> 00:31:00,440
as text on font and color and background color based on a random value and we exclude those values as

394
00:31:00,440 --> 00:31:08,270
a ball of weight as well as the board itself within a dictionary and we apply that dictionary as a new

395
00:31:08,300 --> 00:31:10,590
element to our boards array.

396
00:31:10,760 --> 00:31:13,420
Everything that we want to animate the animate.

397
00:31:13,420 --> 00:31:21,950
One other time when it completes we count up on the re-animate the count up on the re-animate until

398
00:31:22,220 --> 00:31:23,330
we hit the end of it.

399
00:31:23,510 --> 00:31:28,160
If we had the end of it we don't do anything anymore in the animation part.

400
00:31:28,220 --> 00:31:34,490
We actually do this find the bar find it upright and wait till the bosh handler stuff is actually very

401
00:31:34,490 --> 00:31:35,770
self-explanatory.

402
00:31:35,990 --> 00:31:37,320
Let me run the application.

403
00:31:37,340 --> 00:31:43,280
I was hoping they'd want to become this long but I think it became nearly about half an hour of programming

404
00:31:43,400 --> 00:31:46,270
and is working exactly the way we're hoping it will work.

405
00:31:46,310 --> 00:31:49,410
So I leave you with that I'm assuming the next lesson.