1
00:00:09,679 --> 00:00:12,448


2
00:00:12,448 --> 00:00:15,718
This presentation is delivered by the Stanford Center for Professional 

3
00:00:15,718 --> 00:00:22,719
Development.

4
00:00:25,429 --> 00:00:28,460
All right. So I want to spend the beginning of class actually talking a bit about your 

5
00:00:28,460 --> 00:00:29,570
next 

6
00:00:29,570 --> 00:00:32,689
assignment. So if you're still kind of in the mindset of thinking about name surfer, and you're 

7
00:00:32,689 --> 00:00:36,240
like, oh, I'm just so in the mindset of assignment No. 6, 

8
00:00:36,240 --> 00:00:39,140
take that little part of your head that's got assignment No. 6. Pop it 

9
00:00:39,140 --> 00:00:40,670
off the stack. 

10
00:00:40,670 --> 00:00:44,609
That's my whole head. Yeah, that might be painful. 

11
00:00:44,609 --> 00:00:48,109
Pop it off the stack for a second, and we're going to think about our friend, 

12
00:00:48,109 --> 00:00:49,520
the face pamphlet. 

13
00:00:49,520 --> 00:00:53,200
So just a quick show of hands, 

14
00:00:53,200 --> 00:00:56,890
how many people are part of a social network or do some social 

15
00:00:56,890 --> 00:00:58,910
networking online. 

16
00:00:58,909 --> 00:01:02,000
That's good to see. So I won't need to spend too much time telling you about what a 

17
00:01:02,000 --> 00:01:03,098
social network is, but 

18
00:01:03,098 --> 00:01:06,530
I'll spend a little bit of time in case you're not familiar with social networks. Basically, 

19
00:01:06,530 --> 00:01:08,239
a 

20
00:01:08,239 --> 00:01:10,420
social network 

21
00:01:10,420 --> 00:01:15,579
is just a way of keeping track of some set of people, or profiles of people, 

22
00:01:15,579 --> 00:01:19,260
and relationships among people. At the simplest level, that's all it is. 

23
00:01:19,260 --> 00:01:21,279
So what you can think about is you have 

24
00:01:21,278 --> 00:01:26,028
some profile for a person. In some sense, you can think of the notion of a profile and a 

25
00:01:26,028 --> 00:01:27,640
person interchangeably 

26
00:01:27,640 --> 00:01:28,700
most of the time. 

27
00:01:28,700 --> 00:01:31,990
But as most of you know, if you've ever read the New Yorker and seen that 

28
00:01:31,989 --> 00:01:35,379
cartoon that no one on the internet knows youfre a dog. 

29
00:01:35,379 --> 00:01:38,780
So you don't necessarily have to be a person to have a profile. So when we think 

30
00:01:38,780 --> 00:01:41,099
about a social network in the abstract sense, 

31
00:01:41,099 --> 00:01:44,379
we always just talk in terms of profile. But if want to think about it 

32
00:01:44,379 --> 00:01:45,170
concretely, 

33
00:01:45,170 --> 00:01:48,329
you can just think of a profile as being synonymous with a person, but it 

34
00:01:48,328 --> 00:01:50,929
need not be, so we generally refer to a profile. 

35
00:01:50,930 --> 00:01:54,409
So what a profile has associated with it, it has some attributes or some 

36
00:01:54,409 --> 00:01:56,478
things that we keep track of for that profile. 

37
00:01:56,478 --> 00:01:58,560
For example, it has a name. 

38
00:01:58,560 --> 00:02:01,810
In the case of your assignment, it's also going to have some status that 

39
00:02:01,810 --> 00:02:05,200
we care about, keeping track of the person. It might have some other things, 

40
00:02:05,200 --> 00:02:09,310
like the reason why it might be called face pamphlet is because 

41
00:02:09,310 --> 00:02:12,159
say you want to keep track of people's faces. You want to actually see what 

42
00:02:12,159 --> 00:02:15,389
they look like. So you might actually have some image in there. 

43
00:02:15,389 --> 00:02:19,108
Then I mentioned you want to keep track of some list of friends. So there's 

44
00:02:19,109 --> 00:02:24,620
some notion of a list of friends that is also associated with a profile. Real 

45
00:02:24,620 --> 00:02:27,769
social networks also have other things associated with them, and the assignment talks 

46
00:02:27,769 --> 00:02:30,769
about extensions you can do, but we're not going to get into extensions right now. 

47
00:02:30,769 --> 00:02:33,248
But these are things we want to think about. 

48
00:02:33,248 --> 00:02:37,769
For a person's profile, there's a name. One of the things based on some 

49
00:02:37,769 --> 00:02:41,140
of the ideas we talked about in the last lecture, is you can think of name 

50
00:02:41,139 --> 00:02:44,138
as a unique identifier. 

51
00:02:44,139 --> 00:02:47,920
What that means is that you will never have two profiles 

52
00:02:47,919 --> 00:02:51,018
in your social network that have the same name. 

53
00:02:51,019 --> 00:02:54,718
So once you have a name in your profile, in your social 

54
00:02:54,718 --> 00:02:56,248
network, that name is yours. 

55
00:02:56,248 --> 00:03:00,528
That profile will be associated with that name until, at some point we 

56
00:03:00,528 --> 00:03:03,079
decide, maybe we want to delete the profile to get rid of it. 

57
00:03:03,080 --> 00:03:05,499
But the whole time the profile's actually live, 

58
00:03:05,498 --> 00:03:09,009
it will have that unique identifier, which is the name of that profile. So if you 

59
00:03:09,009 --> 00:03:11,159
ever try to create another profile with the same name, 

60
00:03:11,159 --> 00:03:15,098
the application will tell you that you can't. I'll show you some examples of that in a bit. 

61
00:03:15,098 --> 00:03:18,168
But the name is a unique identifier, and this thing's just some string that we keep 

62
00:03:18,169 --> 00:03:19,459
track of the name. So it can 

63
00:03:19,459 --> 00:03:23,088
be like your real name or whatever name you want to 

64
00:03:23,088 --> 00:03:26,189
have, like Code Dog. 

65
00:03:26,189 --> 00:03:29,478
That can be your profile name. That's cool, too. 

66
00:03:29,479 --> 00:03:32,889
Status is just what you're doing right now. You can think of this as 

67
00:03:32,889 --> 00:03:37,039
some string which is what you happen to be up to at the time. Like 

68
00:03:37,038 --> 00:03:38,798
Maron is teaching. 

69
00:03:38,799 --> 00:03:41,629
I don't know. Ben is contemplating life. 

70
00:03:41,628 --> 00:03:43,038
It's just some 

71
00:03:43,038 --> 00:03:45,278
particular string of the thing you happen to be doing. You might 

72
00:03:45,278 --> 00:03:46,908
want to change this a fair bit. 

73
00:03:46,908 --> 00:03:52,588
This image thing is just an image. In our world, that means it's a G image. 

74
00:03:52,588 --> 00:03:55,938
That means it's some picture. Originally, when you create a profile, 

75
00:03:55,938 --> 00:03:58,848
you may not have a status, and you may not have an image. You may want to add 

76
00:03:58,848 --> 00:04:02,228
one. You may want to change one as life goes on. We should be able to 

77
00:04:02,229 --> 00:04:03,730
allow for that. 

78
00:04:03,729 --> 00:04:07,228
Then you have a list of friends. When you're born into the world, 

79
00:04:07,229 --> 00:04:10,689
your list of friends is empty. Over time, you can gradually build up 

80
00:04:10,688 --> 00:04:13,780
friends. That's the other part of the social network to consider, 

81
00:04:13,780 --> 00:04:16,959
besides the fact that we have profiles 

82
00:04:16,959 --> 00:04:22,220
is that we also have some notion of friendship. 

83
00:04:22,220 --> 00:04:26,710
The way you can think of friendship is basically some profile or some person 

84
00:04:26,709 --> 00:04:28,680
just has a list of friends. 

85
00:04:28,680 --> 00:04:32,560
So an easy way to think of a list of friends is a list 

86
00:04:32,560 --> 00:04:36,949
of names of friends because names are unique identifiers. So if we keep track of a 

87
00:04:36,949 --> 00:04:38,689
list of names, we have a 

88
00:04:38,689 --> 00:04:41,778
list of the unique identifiers that are our friends. That's an easy way to 

89
00:04:41,778 --> 00:04:45,370
be able to look them up, for example. 

90
00:04:45,370 --> 00:04:49,139
The idea behind friendship that's key to us - this is not necessarily true in the 

91
00:04:49,139 --> 00:04:50,639
real world, sadly enough, 

92
00:04:50,639 --> 00:04:54,418
but for our intents and purposes, as far as the assignment's concerned, friendship 

93
00:04:54,418 --> 00:04:57,378
is reciprocal. 

94
00:04:57,379 --> 00:05:00,550
That means the if your friendship is 

95
00:05:00,550 --> 00:05:01,329
reciprocal. 

96
00:05:01,329 --> 00:05:04,359
Not all the time. That's the way it is. 

97
00:05:04,360 --> 00:05:08,290
What the really means is if I have two people, like I have Bob over 

98
00:05:08,290 --> 00:05:11,639
here and I have Alice over here, 

99
00:05:11,639 --> 00:05:13,639
you can think of those as profiles. 

100
00:05:13,639 --> 00:05:19,250
If they are friends, we draw a line between their names in our little social 

101
00:05:19,250 --> 00:05:23,459
network. This is not actually how we keep track of them in the 

102
00:05:23,459 --> 00:05:26,258
application that you'll see, but this is often how social networks are drawn. 

103
00:05:26,259 --> 00:05:29,669
We put in sort of a circle for each profile in the social network. 

104
00:05:29,668 --> 00:05:33,798
Here's Don over here, and here's Chelsea. 

105
00:05:33,798 --> 00:05:37,799
Notice there's the ABCD phenomenon. Always a good time. 

106
00:05:37,800 --> 00:05:41,278
So when we put what we refer to as a link between two people, that 

107
00:05:41,278 --> 00:05:45,149
means they're friends. Friends are reciprocal. So if Bob is a friend of Alice, 

108
00:05:45,149 --> 00:05:49,009
that means that Alice is a friend of Bob. That's just the way life is all the 

109
00:05:49,009 --> 00:05:52,439
time in face pamphlet. It's just a happier place. Everyone's like, oh, 

110
00:05:52,439 --> 00:05:55,829
I'll be your friend. Okay. Then you're my friend, too. 

111
00:05:55,829 --> 00:05:59,248
So that's the way you want to think about it. So if Bob ever adds Alice as a 

112
00:05:59,249 --> 00:05:59,689
friend, 

113
00:05:59,689 --> 00:06:03,049
that automatically means Alice becomes Bob's friend. There's never a 

114
00:06:03,048 --> 00:06:06,088
directionality of friendship. Bob clicks, oh, Alice, be my friend. She's like, no. 

115
00:06:06,088 --> 00:06:07,319
Talk to the hand. 

116
00:06:07,319 --> 00:06:10,848
That happens in real life all the time, 

117
00:06:10,848 --> 00:06:14,279
but not here because it's just a happier place to be in. 

118
00:06:14,279 --> 00:06:16,598
So think of friendships as reciprocal. 

119
00:06:16,598 --> 00:06:17,459
Again, 

120
00:06:17,459 --> 00:06:21,758
we don't necessarily have to have anything explicit to model this link. 

121
00:06:21,759 --> 00:06:25,929
All we need to do is think about just having a list of names. So Bob might 

122
00:06:25,928 --> 00:06:29,698
have Alice in his list of names of friends that he's keeping track of. 

123
00:06:29,699 --> 00:06:31,408
That's how I would keep track of the link. 

124
00:06:31,408 --> 00:06:35,069
What that also means is that reciprocally, Alice should have Bob in her list of 

125
00:06:35,069 --> 00:06:38,020
friends because the links are always reciprocal. 

126
00:06:38,019 --> 00:06:41,899
When we actually draw this out, if we want to draw the stylized 

127
00:06:41,899 --> 00:06:45,489
picture, we could say Alice is friends with Chelsea and Don, and Don and Chelsea are 

128
00:06:45,490 --> 00:06:46,800
also friends over here. 

129
00:06:46,800 --> 00:06:51,100
This is where the name network comes from. When we draw this thing out, 

130
00:06:51,100 --> 00:06:54,719
eventually you have millions and millions 

131
00:06:54,718 --> 00:06:58,588
on these things in there, all over the place. Everyone's holding hands and 

132
00:06:58,588 --> 00:07:00,009
singing Kum Ba Ya. 

133
00:07:00,009 --> 00:07:03,419
You have a social effect because you have friendship, and what you actually 

134
00:07:03,418 --> 00:07:06,528
end up drawing is something referred to as a network. If you're really the 

135
00:07:06,528 --> 00:07:08,339
mathematical type, this is really a graph. 

136
00:07:08,339 --> 00:07:10,359
In this case, it's an undirected graph. 

137
00:07:10,360 --> 00:07:15,199
If that kind of talk makes you hot and bothered, like, oh, a graph, 

138
00:07:15,199 --> 00:07:18,449
yeah. Take CS103B, which I'll be teaching next quarter. Graphs are 

139
00:07:18,449 --> 00:07:21,590
just the coolest, most wonderful thing. But that's a thought that's not 

140
00:07:21,589 --> 00:07:23,118
important right now. 

141
00:07:23,119 --> 00:07:26,039
What is important right now is that this is where the name social network 

142
00:07:26,038 --> 00:07:29,408
actually comes from. We create this network that keeps track of social 

143
00:07:29,408 --> 00:07:31,500
relations. So 

144
00:07:31,500 --> 00:07:34,658
if we have that base idea of social networks, 

145
00:07:34,658 --> 00:07:37,938
how do we actually think about writing an application to keep track of 

146
00:07:37,939 --> 00:07:39,599
them. So [inaudible] the computer, 

147
00:07:39,598 --> 00:07:42,418
I'll show you what, at the end of 

148
00:07:42,418 --> 00:07:47,370
a week and a half's effort, you will have your own social network application. So 

149
00:07:47,370 --> 00:07:49,959
we're going to call it Face Pamphlet because it's not really 

150
00:07:49,959 --> 00:07:53,888
big enough to be a book. It's a tiny book, so it's a pamphlet. 

151
00:07:53,889 --> 00:07:57,478
So when it starts up, you can see there's interactors galore all over the 

152
00:07:57,478 --> 00:08:00,379
place. Over on the north side, we got a name. 

153
00:08:00,379 --> 00:08:04,560
We got some buttons over on the west side. We got some status, some pictures, 

154
00:08:04,560 --> 00:08:07,780
some adding friends. What does this all mean? We'll actually go through an example 

155
00:08:07,779 --> 00:08:10,539
and sort of create a little social network. So what I'm going to do is 

156
00:08:10,540 --> 00:08:13,119
create a profile for myself. You're 

157
00:08:13,119 --> 00:08:15,499
like, oh, that's kind of narcissistic. 

158
00:08:15,499 --> 00:08:20,149
That's okay. I didn't want to - oh, we're going to create a profile for you right now. 

159
00:08:20,149 --> 00:08:23,250
So we add the profile on here. Here's what we get in the display. 

160
00:08:23,250 --> 00:08:26,720
There's a bunch of display elements. We have a name up there with some 

161
00:08:26,720 --> 00:08:28,289
big font, and it's blue. 

162
00:08:28,288 --> 00:08:31,308
We don't have an image right now, so we just have a place holder. That's 

163
00:08:31,309 --> 00:08:34,550
basically just a rectangle with some text. It says no image. We don't have a 

164
00:08:34,549 --> 00:08:36,149
current status, but what we've done 

165
00:08:36,149 --> 00:08:40,389
is created an initial profile with the name, Maron Sohami, which is a unique identifier 

166
00:08:40,389 --> 00:08:41,309
in the system. 

167
00:08:41,309 --> 00:08:45,319
So right now, our social network has what we refer to as one [inaudible]. There's 

168
00:08:45,320 --> 00:08:46,530
one profile in there, 

169
00:08:46,529 --> 00:08:48,149
and I don't have a list of friends. 

170
00:08:48,149 --> 00:08:51,740
You might say, okay, that's not so exciting. Let's actually add some stuff. 

171
00:08:51,740 --> 00:08:52,919
So once I actually 

172
00:08:52,919 --> 00:08:56,490
have this active profile, I can say, let me change the status. Right 

173
00:08:56,490 --> 00:08:59,639
now, at this very moment, I happen to be teaching. So when I click change status, 

174
00:08:59,639 --> 00:09:01,939
it says Maron 

175
00:09:01,940 --> 00:09:03,790
Sohami's teaching. Sometimes I could just be, 

176
00:09:03,789 --> 00:09:06,980
no, I just really want to be doing this. 

177
00:09:06,980 --> 00:09:10,120
So I can keep changing the status. That's fine. It just 

178
00:09:10,120 --> 00:09:13,269
updates here whenever I type it into this field and click the button or 

179
00:09:13,269 --> 00:09:14,319
hit the enter key. 

180
00:09:14,320 --> 00:09:16,090
I can also add pictures. 

181
00:09:16,090 --> 00:09:18,060
So I can say, for example, 

182
00:09:18,059 --> 00:09:21,769
MaronS.jpeg is a picture of Maron. 

183
00:09:21,769 --> 00:09:25,460
There's a picture that gets loaded. It gets, 

184
00:09:25,460 --> 00:09:29,759
unfortunately, scaled to always take up the space for the image, which is a 

185
00:09:29,759 --> 00:09:32,919
200 by 200 region space. It's constants that are given to you 

186
00:09:32,919 --> 00:09:33,849
in the handout, 

187
00:09:33,850 --> 00:09:37,220
but for these purposes, it's 200 by 200. So this is kind of the bouncer 

188
00:09:37,220 --> 00:09:38,379
version of Maron 

189
00:09:38,379 --> 00:09:43,000
in the days of yore, when I was clean shaven. There was actually a 

190
00:09:43,000 --> 00:09:46,440
time when I shaved. That doesn't happen very often anymore. If you were ever 

191
00:09:46,440 --> 00:09:47,139
wondering 

192
00:09:47,139 --> 00:09:52,039
what I look like without the beard, not that I care. But 

193
00:09:52,039 --> 00:09:53,990
that's what it was like. 

194
00:09:53,990 --> 00:09:56,120
So we've created a profile. 

195
00:09:56,120 --> 00:09:59,470
Not a big deal. You could say, hey, next quarter, I'm planning on 

196
00:09:59,470 --> 00:10:03,129
taking 106B, and isn't that taught by Julie 

197
00:10:03,129 --> 00:10:06,580
Zolanski? Yes, in fact, it is. So let's add a profile for her. So we type in Julie Zolanski in 

198
00:10:06,580 --> 00:10:08,579
the name field up here 

199
00:10:08,578 --> 00:10:11,829
and click add. We now get a new profile for Julie 

200
00:10:11,830 --> 00:10:12,959
Zolanski. Julie 

201
00:10:12,958 --> 00:10:18,009
is just a fiend. She codes like a fiend, so she's coding like a fiend. 

202
00:10:18,009 --> 00:10:21,620
That's what she's doing. So you can see down here, not only is all this stuff 

203
00:10:21,620 --> 00:10:25,429
getting updated as we typed it in, but down here, there's something we refer to as the 

204
00:10:25,429 --> 00:10:26,339
application message. 

205
00:10:26,340 --> 00:10:30,220
The application message always tells you what was the last thing you did or tried 

206
00:10:30,220 --> 00:10:31,019
to do. 

207
00:10:31,019 --> 00:10:34,980
So your status was updated to coding like a fiend was the last thing you did. 

208
00:10:34,980 --> 00:10:37,970
Let's give Julie a little picture over here. 

209
00:10:37,970 --> 00:10:39,450
JulieZ.jpeg, 

210
00:10:39,450 --> 00:10:43,270
and there's Julie, also scaled to 200 by 200. So she's no 

211
00:10:43,269 --> 00:10:46,970
longer coding like a fiend. She's kind of feeling 

212
00:10:46,970 --> 00:10:49,100
stretched. 

213
00:10:49,100 --> 00:10:52,269
So now we have her picture. We have her profile. That's all good and 

214
00:10:52,269 --> 00:10:54,659
well. Let's add a couple more profiles real quickly. 

215
00:10:54,659 --> 00:10:58,019
So I'll add some of our section leaders. I'll add Sarah K. I'm just going to 

216
00:10:58,019 --> 00:10:59,639
abbreviate. 

217
00:10:59,639 --> 00:11:02,899
Notice these fields over here don't necessarily get reset when I create - they just have 

218
00:11:02,899 --> 00:11:06,250
their old values in them. That's not a big deal. You could add it as an extension if you 

219
00:11:06,250 --> 00:11:09,940
wanted to, but they just leave their old values. 

220
00:11:09,940 --> 00:11:11,620
Sarah 

221
00:11:11,620 --> 00:11:13,659
K. Sarah, is it okay if I use your picture? 

222
00:11:13,659 --> 00:11:15,439
All right. Here we 

223
00:11:15,440 --> 00:11:19,140
go. There she is, and she's actually scaled reasonably well. 

224
00:11:19,139 --> 00:11:22,269
So we'll also add Ben. There's 

225
00:11:22,269 --> 00:11:25,409
Ben. We'll add a picture for him. If you're wondering where all these pictures are coming 

226
00:11:25,409 --> 00:11:29,278
from, in the starter project that you'll get, you'll get a folder of images 

227
00:11:29,278 --> 00:11:32,639
that contains the images of all the section leaders from the class as well as 

228
00:11:32,639 --> 00:11:34,409
Julie and myself. 

229
00:11:34,409 --> 00:11:36,829
I'm scaling until the cows come home. 

230
00:11:36,830 --> 00:11:40,240
If you have your own pictures, you can add them into the 

231
00:11:40,240 --> 00:11:43,139
folder called images, and you, too, can display your image at a 200 

232
00:11:43,139 --> 00:11:46,019
by 200 resolution. Ben, 

233
00:11:46,019 --> 00:11:48,710
where are you? Here's 

234
00:11:48,710 --> 00:11:51,910
Ben. Well, Ben's feeling kind of anonymous. So I gave 

235
00:11:51,909 --> 00:11:56,509
you two anonymous-ish images as well. There was a Stanford logo, 

236
00:11:56,509 --> 00:11:59,559
which is just a super low-res version of our logo. 

237
00:11:59,559 --> 00:12:02,649
Then there's also Stanford Tree. 

238
00:12:02,649 --> 00:12:04,449


239
00:12:04,450 --> 00:12:07,189
So you can change the picture to one of those if you want 

240
00:12:07,188 --> 00:12:09,459
to. Those just come along for the ride. 

241
00:12:09,460 --> 00:12:13,090
If you do the web version, actually, the web version only has these 

242
00:12:13,090 --> 00:12:16,550
two Stanford logo and Stanford tree images. I didn't put everyone else's 

243
00:12:16,549 --> 00:12:18,019
image on the web version because 

244
00:12:18,019 --> 00:12:19,919
for a little bit of privacy. 

245
00:12:19,919 --> 00:12:26,759
Was there a question? 

246
00:12:26,759 --> 00:12:30,289
[Inaudible]. No. If I empty the field, one of the things it says in your handout is anytime the 

247
00:12:30,289 --> 00:12:31,689
field is empty, 

248
00:12:31,690 --> 00:12:34,339
it just gets ignored when I try to do something. So 

249
00:12:34,339 --> 00:12:36,910
any field, whether or not it's name or any other field, just ignore 

250
00:12:36,909 --> 00:12:42,078
it. But I could have something like the nonexistent picture.jpeg, and I try 

251
00:12:42,078 --> 00:12:45,688
to change the picture to that, and it says unable to open image file. So in 

252
00:12:45,688 --> 00:12:49,819
your handout, it actually explains how you can detect if an image exists or not. 

253
00:12:49,820 --> 00:12:52,589
So you can actually check the case where the image doesn't exist. If it 

254
00:12:52,589 --> 00:12:55,760
doesn't exist, we just don't update the image to the 

255
00:12:55,759 --> 00:12:59,370
new image. Really, all we're keeping track of here is the name, which gets created with 

256
00:12:59,370 --> 00:13:00,789
the initial profile 

257
00:13:00,789 --> 00:13:02,068
because it never changes, 

258
00:13:02,068 --> 00:13:03,959
an image that we display, 

259
00:13:03,960 --> 00:13:06,910
whatever the current status is. If currently there is no current status, and 

260
00:13:06,909 --> 00:13:08,139
a list of friends. 

261
00:13:08,139 --> 00:13:11,240
So far, we've add a bunch of profiles. What else can we do? 

262
00:13:11,240 --> 00:13:13,499
Well, there's a lot of things we can do. Let's look up 

263
00:13:13,499 --> 00:13:15,899
Maron again. 

264
00:13:15,899 --> 00:13:16,588


265
00:13:16,589 --> 00:13:20,439
So if I type in a name I can click look up, and if that profile exists with that 

266
00:13:20,438 --> 00:13:23,448
name, it brings it up and says you're displaying 

267
00:13:23,448 --> 00:13:24,899
the profile name down here. 

268
00:13:24,899 --> 00:13:27,549
Then we can add some friends. 

269
00:13:27,549 --> 00:13:29,750
So Sarah is a friend. 

270
00:13:29,750 --> 00:13:31,210


271
00:13:31,210 --> 00:13:36,030
Add friends. So it says Sarah K, added as a friend. Ben is also a friend. 

272
00:13:36,029 --> 00:13:38,639
So I add Ben. 

273
00:13:38,639 --> 00:13:42,330
I can try to add someone who doesn't exist in the system. Like I can try to 

274
00:13:42,330 --> 00:13:43,528
add - 

275
00:13:43,528 --> 00:13:47,549
who should I add? 

276
00:13:47,549 --> 00:13:50,699
Jenny. 867-5309. 

277
00:13:50,700 --> 00:13:53,320
I add Jenny. Jenny does not exist. 

278
00:13:53,320 --> 00:13:55,940
As far as I know in my social network, Jenny's not there. I get 

279
00:13:55,940 --> 00:13:57,310
this message down 

280
00:13:57,309 --> 00:14:00,229
there. Remember, friendships are supposed to be reciprocal, so I have 

281
00:14:00,230 --> 00:14:01,819
Sarah and Ben as friends. 

282
00:14:01,818 --> 00:14:05,988
I never went to directly update profiles, but if I now look up Ben's 

283
00:14:05,989 --> 00:14:07,680
profile - Ben N 

284
00:14:07,679 --> 00:14:09,620
- 

285
00:14:09,620 --> 00:14:11,419
Ben has me as a friend. 

286
00:14:11,419 --> 00:14:16,439
So when I added Ben as my friend, at the same time, I got added to Ben's friend 

287
00:14:16,440 --> 00:14:18,620
list. That's something that you're going to need to manage in the 

288
00:14:18,620 --> 00:14:21,750
application. Friendship should always be reciprocal. So when you add a friend to a 

289
00:14:21,750 --> 00:14:22,839
particular profile, 

290
00:14:22,839 --> 00:14:27,420
you also make sure to go to that friend and add the current profile to that friend. 

291
00:14:27,419 --> 00:14:29,549
Now, another thing we can do, 

292
00:14:29,549 --> 00:14:33,048
besides just creating profiles and done friends, 

293
00:14:33,048 --> 00:14:35,989
we can look up profiles, like when we had Maron's 

294
00:14:35,989 --> 00:14:37,360
profile over here. 

295
00:14:37,360 --> 00:14:40,909
We can look up a profile. If I try to look up a profile that doesn't exist 

296
00:14:40,909 --> 00:14:45,559
like Maron Sohami Bob doesn't exist. It clears what profile's in there. It says 

297
00:14:45,559 --> 00:14:49,489
a profile with the name Maron Sohami Bob does not exist. 

298
00:14:49,490 --> 00:14:53,110
When there is no profile in the current application - all this stuff, by the way, is 

299
00:14:53,110 --> 00:14:55,370
explained in the handout. This is just to kind of show you to 

300
00:14:55,370 --> 00:14:59,240
get a feel for how it works. You don't need to jot this all down in notes. When there is 

301
00:14:59,240 --> 00:15:03,580
no current profile displayed, I cannot change any of the things in the profile. It 

302
00:15:03,580 --> 00:15:06,480
says please select a profile to change status because I can't change the 

303
00:15:06,480 --> 00:15:08,479
status of a non-existent profile 

304
00:15:08,479 --> 00:15:09,780
or change its picture 

305
00:15:09,779 --> 00:15:13,759
or add friend to a non-existent profile. But the way I get a new profile 

306
00:15:13,759 --> 00:15:16,649
displayed in here is I either add a new profile 

307
00:15:16,649 --> 00:15:19,309
or I look up an existing profile. 

308
00:15:19,309 --> 00:15:20,099
Then 

309
00:15:20,100 --> 00:15:24,800
there's a profile there that I can change to whatever I want to. Now, 

310
00:15:24,799 --> 00:15:26,469
let's say I've looked up this profile. 

311
00:15:26,470 --> 00:15:31,040
I say, that's great, and Ben decides he's had enough. 

312
00:15:31,039 --> 00:15:34,309
Get me out of your social network. So I say, oh, I'm sorry to hear that, Ben. Here's Ben. I'm 

313
00:15:34,309 --> 00:15:38,069
going to delete Ben from my social network. Even though I'm displaying my own profile. I 

314
00:15:38,070 --> 00:15:38,660


315
00:15:38,659 --> 00:15:41,309
click Ben up here, and I delete him. 

316
00:15:41,309 --> 00:15:44,259
Whatever profile was there, it doesn't matter if it was Ben's or whoever else, it 

317
00:15:44,259 --> 00:15:46,610
cleared, and it says profile of Ben N deleted. 

318
00:15:46,610 --> 00:15:49,279
Now what happens when a profile gets deleted? 

319
00:15:49,279 --> 00:15:52,389
It gets cleared out of the social network so it's no longer there. If I try 

320
00:15:52,389 --> 00:15:56,350
to look it up, it says a profile with the name Ben N does not exist because, sorry 

321
00:15:56,350 --> 00:15:57,370
Ben, you've been nuked. 

322
00:15:57,370 --> 00:15:59,940
You're out of the social network. But 

323
00:15:59,940 --> 00:16:01,600
Ben was friends with people. 

324
00:16:01,600 --> 00:16:03,680
He was friends with me, 

325
00:16:03,679 --> 00:16:07,059
and now it's a sad day. So I go to look up Maron. I should've 

326
00:16:07,059 --> 00:16:08,989
just used the first name. 

327
00:16:08,990 --> 00:16:11,470
Ben has been removed from my list of friends. 

328
00:16:11,470 --> 00:16:15,769
Sad day, but that's life in the city. You can't be friends with 

329
00:16:15,769 --> 00:16:17,870
non-existent people. So 

330
00:16:17,870 --> 00:16:20,068
when someone gets removed from the network, 

331
00:16:20,068 --> 00:16:23,708
you go through everyone else in the network and say, did they have them as a 

332
00:16:23,708 --> 00:16:27,449
friend. If they did, they get popped out. I guess you're just not a friend 

333
00:16:27,450 --> 00:16:34,410
anymore. That's basically the whole social network. That's the whole idea. So question? [Inaudible] Okay. 

334
00:16:34,409 --> 00:16:37,219
Names are not case sensitive, so I can have a Maron Sohami, and then I can 

335
00:16:37,220 --> 00:16:38,230
have a 

336
00:16:38,230 --> 00:16:40,810
screaming Maron Sohami, 

337
00:16:40,809 --> 00:16:42,419
and he's just different. 

338
00:16:42,419 --> 00:16:43,829
He's angry. 

339
00:16:43,830 --> 00:16:47,690
I don't know if we have an angry image in here. I don't know if any of the section 

340
00:16:47,690 --> 00:16:49,360
leaders were actually looking angry, 

341
00:16:49,360 --> 00:16:53,690
so we'll just make him the Stanford logo. 

342
00:16:53,690 --> 00:16:55,950
This is different than 

343
00:16:55,950 --> 00:16:56,940
Maron Sohami, 

344
00:16:56,940 --> 00:16:59,899
lower case. So you don't need to worry about it like you did in the last assignment. 

345
00:16:59,899 --> 00:17:02,600
You were worrying about case sensitivity. Here, 

346
00:17:02,600 --> 00:17:04,189
you don't need to worry about 

347
00:17:04,189 --> 00:17:06,400
making things insensitive. You can just 

348
00:17:06,400 --> 00:17:09,220
case - everything is case sensitive, so you don't need to worry about 

349
00:17:09,220 --> 00:17:09,879


350
00:17:09,878 --> 00:17:13,799
making strings equal to each other, case sensitive and stuff like that. 

351
00:17:13,799 --> 00:17:16,938
So any questions about this general idea? You got to think about it, 

352
00:17:16,939 --> 00:17:19,850
right? Any more questions? 

353
00:17:19,849 --> 00:17:21,730
If you kind of think about it, 

354
00:17:21,730 --> 00:17:25,319
this is the basics of the social network. You have all the people. You can have as 

355
00:17:25,319 --> 00:17:28,470
many people as you want from the social network. You can maintain friendships. 

356
00:17:28,470 --> 00:17:31,150
You have attributes of the people, which in this case, just happens to be their 

357
00:17:31,150 --> 00:17:34,030
name, their image and their status and their list of friends, 

358
00:17:34,029 --> 00:17:37,420
but you could imagine - you could extend this in a whole variety of ways. 

359
00:17:37,420 --> 00:17:41,039
Really, what this is about is data management. 

360
00:17:41,039 --> 00:17:44,159
There's a display component. In part of the assignment, there's a bunch of 

361
00:17:44,160 --> 00:17:45,580
milestones that are laid out. 

362
00:17:45,579 --> 00:17:49,789
The actual only milestone that deals with this display is the very last milestone, 

363
00:17:49,789 --> 00:17:53,029
which involves a bit of work to get all this stuff displayed at 

364
00:17:53,029 --> 00:17:55,980
the right locations. There's a bunch of constants, which is all the places, you 

365
00:17:55,980 --> 00:17:57,700
put things at the right locations. 

366
00:17:57,700 --> 00:17:59,660
But it's really about managing data. 

367
00:17:59,660 --> 00:18:03,019
How do you manage profiles, managing the friendship relationships, being able to 

368
00:18:03,019 --> 00:18:04,470
remove stuff, add stuff, 

369
00:18:04,470 --> 00:18:07,390
which is what most applications in the world are really about. So you're going 

370
00:18:07,390 --> 00:18:09,899
to get a chance to really exercise 

371
00:18:09,898 --> 00:18:14,319
your data structure skills and your larger-scale application skills in this 

372
00:18:14,319 --> 00:18:15,019
program. 

373
00:18:15,019 --> 00:18:18,740
So any questions about this program? There's also a web demo of it, so 

374
00:18:18,740 --> 00:18:21,240
if you want to go to the web and play around with it, you can play around 

375
00:18:21,240 --> 00:18:24,400
with it. Again, in the web version, there's only these two images, the Stanford logo 

376
00:18:24,400 --> 00:18:27,809
and the Stanford tree. 

377
00:18:27,808 --> 00:18:31,779
[Inaudible]. No. That's the other thing. It's in big font somewhere, like on page 

378
00:18:31,779 --> 00:18:33,819
15 in the assignment. So 

379
00:18:33,819 --> 00:18:36,799
don't be scared by the fact that the assignment handout is 28 pages 

380
00:18:36,799 --> 00:18:38,109
like some people are looking 

381
00:18:38,109 --> 00:18:39,519
at. Oh, my God, this is so big. 

382
00:18:39,519 --> 00:18:42,569
The code is much shorter than the handout, 

383
00:18:42,569 --> 00:18:43,299
first of all. 

384
00:18:43,299 --> 00:18:44,460
Second of all, 

385
00:18:44,460 --> 00:18:47,179
one of the things - all the details are in there, but one of the important things that 

386
00:18:47,179 --> 00:18:50,070
comes up in the handout is you don't need to worry about scaling. So if I 

387
00:18:50,069 --> 00:18:52,918
shrink or increase, yeah. 

388
00:18:52,919 --> 00:18:57,059
No worries about size or resizing. I figured you got enough practice with that with 

389
00:18:57,058 --> 00:18:59,808
name surfer. Either you already got practice with it or you're getting practice 

390
00:18:59,808 --> 00:19:00,908
with it with name surfer. 

391
00:19:00,909 --> 00:19:02,679
So we don't need to make you do it again. 

392
00:19:02,679 --> 00:19:05,450
So you don't need to worry about component listener and resizing and 

393
00:19:05,450 --> 00:19:08,759
everything. You can just lay this stuff out with t respect to the constants 

394
00:19:08,759 --> 00:19:10,210
that are given to you, and you're okay. 

395
00:19:10,210 --> 00:19:13,569
But resizing, you don't need to worry about it. It can be a cool extension if 

396
00:19:13,569 --> 00:19:16,299
you want to add it as an extension. That's perfectly fine. There's a bunch 

397
00:19:16,299 --> 00:19:19,069
of extension ideas that are listed at the end of the assignment. As you can kind 

398
00:19:19,069 --> 00:19:19,928
of imagine, 

399
00:19:19,929 --> 00:19:23,309
if most of you are on a social network, you probably already have thousands of ideas 

400
00:19:23,308 --> 00:19:25,668
for extensions, if you want to add them, 

401
00:19:25,669 --> 00:19:28,850
but you're not required to add anything in particular. 

402
00:19:28,849 --> 00:19:34,559
So any other questions about this? All right. So 

403
00:19:34,559 --> 00:19:38,240
with that said, I just want to give you one last little - before we moved 

404
00:19:38,240 --> 00:19:42,579
into the advanced topic for today, one last little side note about 

405
00:19:42,579 --> 00:19:43,480
social networks. 

406
00:19:43,480 --> 00:19:48,288
Has anyone ever heard of the phenomenon, six degrees of separation? 

407
00:19:48,288 --> 00:19:51,730
A few folks. There was a movie years ago about this phenomenon, and the movie 

408
00:19:51,730 --> 00:19:54,230
actually had nothing to do with the phenomenon. It just happened to have the name, Six Degrees 

409
00:19:54,230 --> 00:19:55,759
of Separation. 

410
00:19:55,759 --> 00:19:58,869
But it's basically this idea that everyone in the world is linked, 

411
00:19:58,869 --> 00:20:00,578
potentially, to everyone else 

412
00:20:00,578 --> 00:20:03,839
by at most, six hops in this graph, 

413
00:20:03,839 --> 00:20:05,250
which is kind of weird to think about. 

414
00:20:05,250 --> 00:20:09,019
I won't go into all the details an mathematics and stuff, but 

415
00:20:09,019 --> 00:20:11,219
there's some very interesting stuff behind it. 

416
00:20:11,219 --> 00:20:13,599
But the biggest idea is that these social networks, 

417
00:20:13,598 --> 00:20:17,128
you can sort of think of little hops between people. You can say Bob is 

418
00:20:17,128 --> 00:20:18,069


419
00:20:18,069 --> 00:20:21,700
one degree separated from Chelsea or two degrees, depending on how you count, 

420
00:20:21,700 --> 00:20:25,420
from Chelsea because you can get to Chelsea by going Bob, Alice Chelsea or Bob, Don, 

421
00:20:25,420 --> 00:20:27,230
Chelsea, whatever the case may be. 

422
00:20:27,230 --> 00:20:31,099
But just in case you're wondering where the six degree of separation idea came from, 

423
00:20:31,099 --> 00:20:34,519
Stanley Milgram - 

424
00:20:34,519 --> 00:20:38,599
anyone ever hear of Milgram's experiments like 

425
00:20:38,599 --> 00:20:42,748
obedience to authority, if you're a psychology kind of person? Same Milgram. 

426
00:20:42,749 --> 00:20:44,620
We won't get into that. 

427
00:20:44,619 --> 00:20:47,759
That's just a whole bunch of other interesting psychological phenomenon that are 

428
00:20:47,759 --> 00:20:49,358
discussed on the other side of the quad. 

429
00:20:49,358 --> 00:20:53,128
But what he did was said - this was back in the '60s, I think. '67, 

430
00:20:53,128 --> 00:20:53,649
actually. 

431
00:20:53,650 --> 00:20:57,019
He sent a whole bunch of packages to various people in Nebraska. So let's 

432
00:20:57,019 --> 00:20:59,609
just say that's 

433
00:20:59,609 --> 00:21:01,000
Nebraska. 

434
00:21:01,000 --> 00:21:05,400
He sent a whole bunch of - yeah, my notion of geography - to random people in 

435
00:21:05,400 --> 00:21:06,759
Nebraska and said, 

436
00:21:06,759 --> 00:21:09,769
these packages need to get to someone who's over here 

437
00:21:09,769 --> 00:21:11,539
in Boston. 

438
00:21:11,539 --> 00:21:12,119


439
00:21:12,119 --> 00:21:16,449
Yeah, I have no idea. It's Boston. That's Massachusetts, and here's 

440
00:21:16,450 --> 00:21:18,340
Boston. These 

441
00:21:18,339 --> 00:21:20,359
packages need to get over here, 

442
00:21:20,359 --> 00:21:24,529
but he didn't give them an address. He just gave them a name of random people 

443
00:21:24,529 --> 00:21:28,220
in Boston the packages need to get to. The only instructions he gave were to 

444
00:21:28,220 --> 00:21:29,419
say 

445
00:21:29,419 --> 00:21:32,890
you can't try to figure out who this person is and send them the package 

446
00:21:32,890 --> 00:21:33,509
directly. 

447
00:21:33,509 --> 00:21:37,158
What you need to do is send this package to someone that you know 

448
00:21:37,159 --> 00:21:41,570
who you think will be more likely to know this person than you are. 

449
00:21:41,569 --> 00:21:43,168
Those were the only instructions. 

450
00:21:43,169 --> 00:21:46,250
Then when the packages was trackable, how many times it 

451
00:21:46,250 --> 00:21:47,058
got mailed. 

452
00:21:47,058 --> 00:21:50,720
He measured how many times the package had to be mailed to various people 

453
00:21:50,720 --> 00:21:52,509
before it actually got to its destination. 

454
00:21:52,509 --> 00:21:57,230
What he found was there was an average of about five to six for 

455
00:21:57,230 --> 00:21:58,110
the packages 

456
00:21:58,109 --> 00:22:02,449
to get from a random person in Nebraska to a random person in Boston. 

457
00:22:02,450 --> 00:22:05,090
That's where the six degrees idea comes from, but 

458
00:22:05,089 --> 00:22:08,069
that's - now when people talk about social networks, they talk about 

459
00:22:08,069 --> 00:22:10,909
things like degrees of separation and what we refer to as small 

460
00:22:10,910 --> 00:22:12,038
world phenomenon. 

461
00:22:12,038 --> 00:22:15,230
If everyone's linked by only six degrees of separation, then it really 

462
00:22:15,230 --> 00:22:19,880
is a small world after all. We can all hold hands and be mechanical animals. 

463
00:22:19,880 --> 00:22:22,740
If you've ever been to Disneyland, that makes sense. If you've never been to 

464
00:22:22,740 --> 00:22:24,120
Disneyland, 

465
00:22:24,119 --> 00:22:26,839
you don't need to go on the small world ride now. 

466
00:22:26,839 --> 00:22:28,730
So 

467
00:22:28,730 --> 00:22:32,220
time for something completely different. Are there any questions about social networks 

468
00:22:32,220 --> 00:22:34,470
before we delve into our next great topic? 

469
00:22:34,470 --> 00:22:37,390
If you're really interested, you're like, Maron, tell me more, 

470
00:22:37,390 --> 00:22:38,809
take 

471
00:22:38,808 --> 00:22:40,769
CS103B. It's a good 

472
00:22:40,769 --> 00:22:44,329


473
00:22:44,329 --> 00:22:47,490
time. The advanced topic that you're going to 

474
00:22:47,490 --> 00:22:48,579
get - and 

475
00:22:48,579 --> 00:22:52,109
I hesitate a little bit to tell you this, but this is something that 

476
00:22:52,109 --> 00:22:54,349
you don't need to know for the final exam. 

477
00:22:54,349 --> 00:22:57,839
As a matter of fact, you don't need to know it for assignment No. 

478
00:22:57,839 --> 00:23:00,929
7. It's just something that's so cool with the way programs are actually done 

479
00:23:00,930 --> 00:23:04,210
today, it's something you should actually know. 

480
00:23:04,210 --> 00:23:06,329
That's a notion called concurrency. 

481
00:23:06,329 --> 00:23:09,449
It's also important for you to know if you want to understand, for example, 

482
00:23:09,450 --> 00:23:13,049
in next class, for example, I'll show you how to take the programs that 

483
00:23:13,049 --> 00:23:14,249
you've written in this class 

484
00:23:14,249 --> 00:23:17,329
and turn them into applets or turn them into executables so you can share 

485
00:23:17,329 --> 00:23:21,009
them with your friends. You'll need to understand this idea. 

486
00:23:21,009 --> 00:23:24,750
So the basic notion of concurrency is that if you think about it, your computer, 

487
00:23:24,750 --> 00:23:27,880
there's actually multiple things happening on your computer at the same 

488
00:23:27,880 --> 00:23:30,890
time. It looks like there are multiple things happening at the same time. 

489
00:23:30,890 --> 00:23:31,359


490
00:23:31,358 --> 00:23:35,168
You're like, there's oftentimes - I got my email 

491
00:23:35,169 --> 00:23:39,320
program open and I'm IMing, and for those of you out in TV land, I'm watching a 

492
00:23:39,319 --> 00:23:41,359
the lecture at the same time. 

493
00:23:41,359 --> 00:23:45,439
Most of the time, I'm not actually watching. I'm just IMing and doing 

494
00:23:45,440 --> 00:23:46,740
email. 

495
00:23:46,740 --> 00:23:49,960
But to you, it looks like all these things are happening simultaneously on 

496
00:23:49,960 --> 00:23:51,470
your computer, right? 

497
00:23:51,470 --> 00:23:52,950
In fact, they're not. 

498
00:23:52,950 --> 00:23:56,110
Your computer only has one - most of you. These days, things are changing a 

499
00:23:56,109 --> 00:23:59,148
little bit, but most of your machines only have one processor in them, 

500
00:23:59,148 --> 00:24:03,399
which means at any given time, really, only one thing is happening. 

501
00:24:03,400 --> 00:24:06,590
How does it look like multiple things are happening at the same time? That's the 

502
00:24:06,589 --> 00:24:09,459
notion of concurrency. What's really happening is the computer or your 

503
00:24:09,460 --> 00:24:10,669
operating system is saying 

504
00:24:10,669 --> 00:24:13,839
there's all these things that want to be happening at the same time. 

505
00:24:13,838 --> 00:24:16,849
What I'm going to do is give each a little piece of time 

506
00:24:16,849 --> 00:24:20,779
to go and execute a little bit, and then I'll do the next one and the next one. 

507
00:24:20,779 --> 00:24:24,619
So email gets a few milliseconds and IM gets a few 

508
00:24:24,619 --> 00:24:27,418
milliseconds. Then the video gets a few milliseconds, but that's enough time to 

509
00:24:27,419 --> 00:24:31,340
update to the next frame of the video. I just keep cycling through these 

510
00:24:31,339 --> 00:24:35,029
super fast. So to you, it just looks like they're all happening at the same time. 

511
00:24:35,029 --> 00:24:37,888
If you think about this, you actually did this already. 

512
00:24:37,888 --> 00:24:42,798
Which assignment did you do this on? Breakout, right? 

513
00:24:42,798 --> 00:24:47,089
Breakout was doing this. You had the ball, and you had the paddle, and you had to 

514
00:24:47,089 --> 00:24:49,720
check for collisions. So what were you doing? 

515
00:24:49,720 --> 00:24:52,549
You were saying, hey, ball, move yourself. 

516
00:24:52,549 --> 00:24:55,009
Wait some time. Hey, paddle, update. 

517
00:24:55,009 --> 00:24:57,558
Maybe wait a little bit of time. Hey, check for collision, 

518
00:24:57,558 --> 00:25:00,668
and I just keep doing these over and over. It was happening so fast that it looked 

519
00:25:00,669 --> 00:25:03,220
like the paddle and the ball are moving at the same time. 

520
00:25:03,220 --> 00:25:06,079
But you knew they weren't moving at the same time. You knew that when the ball was 

521
00:25:06,079 --> 00:25:08,990
moving, the ball was getting the message to move. 

522
00:25:08,990 --> 00:25:12,579
So paddle wasn't actually moving. Paddle got moved later when your execution 

523
00:25:12,579 --> 00:25:15,909
flow got to that place and moved the paddle. 

524
00:25:15,910 --> 00:25:18,409
So you've already seen a notion of this. 

525
00:25:18,409 --> 00:25:21,590
There's a concept around this notion, which actually makes it much more 

526
00:25:21,589 --> 00:25:24,099
concrete, called the thread. 

527
00:25:24,099 --> 00:25:27,298
The idea of the thread or a thread of execution, 

528
00:25:27,298 --> 00:25:31,348
is to say that the way you can think about a program is that rather than a program just 

529
00:25:31,348 --> 00:25:33,470
doing one thing, a program can say, hey, 

530
00:25:33,470 --> 00:25:36,480
I'm going to have some thread over here and some thread over here and 

531
00:25:36,480 --> 00:25:37,909
some thread over here. 

532
00:25:37,909 --> 00:25:40,919
I'm just going to kick these off. I'm going to say, hey, there's some 

533
00:25:40,919 --> 00:25:42,920
piece of a program I want to do here. 

534
00:25:42,920 --> 00:25:46,130
So just start it and start executing. There's some other piece of a program I want 

535
00:25:46,130 --> 00:25:48,039
to do at the same time. 

536
00:25:48,038 --> 00:25:50,838
Just kick it off and start executing. Same thing over here. 

537
00:25:50,838 --> 00:25:54,690
I don't want to have to worry about doing this cycling myself. 

538
00:25:54,690 --> 00:25:58,230
I want someone else to say, oh, you get a piece of time and a little piece of time and a little 

539
00:25:58,230 --> 00:25:59,469
piece of time. It 

540
00:25:59,469 --> 00:26:02,798
just keeps cycling through. This happens so fast, much faster than my 

541
00:26:02,798 --> 00:26:06,250
moving hand. It all looks like it's happening at the same time. 

542
00:26:06,250 --> 00:26:09,250
That's the notion of a thread of execution. If you can think of a program, 

543
00:26:09,250 --> 00:26:11,608
what we refer to as being multithreaded, 

544
00:26:11,608 --> 00:26:14,888
which means it actually has multiple threads of execution that are happening 

545
00:26:14,888 --> 00:26:16,529
at the same time, 

546
00:26:16,529 --> 00:26:19,920
which is a little mind bending. Actually, it turns out to be a fairly 

547
00:26:19,920 --> 00:26:22,200
straight-forward kind of thing. So 

548
00:26:22,200 --> 00:26:25,390
how do we make this a little bit more concrete? How do we think about threads 

549
00:26:25,390 --> 00:26:28,900
in JAVA's world. It turns out, interestingly enough, you've been sort of 

550
00:26:28,900 --> 00:26:31,130
doing this a bit the whole time. 

551
00:26:31,130 --> 00:26:34,820
There's something called the runable interface. 

552
00:26:34,819 --> 00:26:38,819
What the runable interface says is that anytime I have a class that implements 

553
00:26:38,819 --> 00:26:40,529
the runable interface, 

554
00:26:40,529 --> 00:26:42,170
that means that the class 

555
00:26:42,170 --> 00:26:45,750
can be turned into a thread. It can be kicked off as a thread because it has 

556
00:26:45,750 --> 00:26:47,460
some notion of running. 

557
00:26:47,460 --> 00:26:49,980
So I can say, you know how to run. 

558
00:26:49,980 --> 00:26:53,430
Okay. I'm going to create a thread, and you're going to go run in that 

559
00:26:53,430 --> 00:26:56,039
thread. It's like having a little baby and sending them off 

560
00:26:56,039 --> 00:26:58,980
into the world. It's sort of like what your parents did when they sent you to college. 

561
00:26:58,980 --> 00:26:59,309


562
00:26:59,309 --> 00:27:02,849
The whole time you were part of your parent's process. 

563
00:27:02,849 --> 00:27:04,679
They were managing you. They were like, 

564
00:27:04,680 --> 00:27:07,860
eat, sleep, homework. At a certain 

565
00:27:07,859 --> 00:27:09,189
point, you were like, 

566
00:27:09,190 --> 00:27:11,160
okay. I'm done with that cycle. 

567
00:27:11,160 --> 00:27:14,370
When can I go do my own thing. Then you were like, oh, I'm graduating from high 

568
00:27:14,369 --> 00:27:17,519
school. What they did was your parents said, now it's time for you 

569
00:27:17,519 --> 00:27:18,750
to get a thread. 

570
00:27:18,750 --> 00:27:20,808
You were like, 

571
00:27:20,808 --> 00:27:23,339
okay. I'll figure that out when I get to college. 

572
00:27:23,339 --> 00:27:26,419
Really, they said that. Maybe you just weren't in the room at the time. 

573
00:27:26,420 --> 00:27:28,050
Then they sort of 

574
00:27:28,049 --> 00:27:30,928
kicked you off. They said go do your own thing. 

575
00:27:30,929 --> 00:27:33,519
You're going to be doing your own thing at the same time everyone else is 

576
00:27:33,519 --> 00:27:35,889
doing their own thing. I'm not going to manage you anymore. 

577
00:27:35,890 --> 00:27:37,730
You're just going to go do your own thing. 

578
00:27:37,730 --> 00:27:40,789
Hopefully, that thing will turn out well. 

579
00:27:40,789 --> 00:27:43,430
So what is the runable interface? 

580
00:27:43,430 --> 00:27:48,160
Let's just look at a simple example. I have public, class, my class, and this is 

581
00:27:48,160 --> 00:27:52,048
just an interface, so I say implement 

582
00:27:52,048 --> 00:27:55,289
runable. We 

583
00:27:55,289 --> 00:27:58,490
can just make up words when we're computer scientists. 

584
00:27:58,490 --> 00:28:02,980
This class is going to have some constructor in it, so allow public my class. It 

585
00:28:02,980 --> 00:28:06,799
needs not actually have a constructor that's explicit, but let's just say it has 

586
00:28:06,799 --> 00:28:08,129
a constructor. 

587
00:28:08,130 --> 00:28:11,860
Then there's only one method that a runable 

588
00:28:11,859 --> 00:28:15,029
interface - the class the implements the runable interface 

589
00:28:15,029 --> 00:28:16,389
needs to implement. 

590
00:28:16,390 --> 00:28:23,390
That's public void 

591
00:28:24,099 --> 00:28:26,709
run. You should see that at this point and go, oh, 

592
00:28:26,710 --> 00:28:29,120
my God. 

593
00:28:29,119 --> 00:28:32,649
I've been doing threads the whole time in this class. 

594
00:28:32,650 --> 00:28:34,969
That's what you've been doing. Guess what? 

595
00:28:34,969 --> 00:28:36,080
Program 

596
00:28:36,079 --> 00:28:37,638
implements the runable interface. 

597
00:28:37,638 --> 00:28:39,819
So you wrote a method called run, 

598
00:28:39,819 --> 00:28:43,468
and what we did somewhere in the bowels of the ACM library was we said here's 

599
00:28:43,469 --> 00:28:44,930
your program. 

600
00:28:44,930 --> 00:28:46,100
Go 

601
00:28:46,099 --> 00:28:48,519
run. So it started executing 

602
00:28:48,519 --> 00:28:51,930
the run method. That's where all the stuff happened in your program. 

603
00:28:51,930 --> 00:28:55,509
Now, when you wrote programs that had interactors with them or looked at mouse 

604
00:28:55,509 --> 00:28:57,628
clicks or whatever the case may be for events, 

605
00:28:57,628 --> 00:29:02,059
your program - so this is my program over here, for example, that's running. 

606
00:29:02,059 --> 00:29:03,049
There was another 

607
00:29:03,049 --> 00:29:06,619
thing running over here that was called the event thread. The event thread 

608
00:29:06,619 --> 00:29:10,829
was actually the one that was like, mouse click. Yeah, when that 

609
00:29:10,829 --> 00:29:11,808
mouse click happens, 

610
00:29:11,808 --> 00:29:15,069
I know about it because I'm managing the mouse clicks. When that mouse click 

611
00:29:15,069 --> 00:29:15,908
happened, it said, 

612
00:29:15,909 --> 00:29:17,559
hey, I got a mouse click. 

613
00:29:17,558 --> 00:29:21,099
Who's listening for the mouse click out there? You were like, me. I 

614
00:29:21,099 --> 00:29:22,599
added mouse listeners. I did. 

615
00:29:22,599 --> 00:29:25,000
It says, okay, I'll let you know there was a mouse click. 

616
00:29:25,000 --> 00:29:28,038
Then you did something based on that mouse click. 

617
00:29:28,038 --> 00:29:29,460
You stopped, 

618
00:29:29,460 --> 00:29:30,389
and it was like 

619
00:29:30,388 --> 00:29:32,099
this thread kept running. 

620
00:29:32,099 --> 00:29:36,250
You program only got called when some mouse event happened. It sort of 

621
00:29:36,250 --> 00:29:39,289
said, okay. I'll let you know that this mouse event actually happened. 

622
00:29:39,289 --> 00:29:42,329
So when you were dealing with mouse clicks and mouse movements and all this 

623
00:29:42,329 --> 00:29:42,818
stuff, 

624
00:29:42,818 --> 00:29:45,739
there were actually multiple threads running. There was a separate thread that 

625
00:29:45,739 --> 00:29:48,538
was getting events and sort of telling the people who were listening for those 

626
00:29:48,538 --> 00:29:49,210
events 

627
00:29:49,210 --> 00:29:53,200
that they actually happened. So 

628
00:29:53,200 --> 00:29:54,980
with that kind of idea, 

629
00:29:54,980 --> 00:29:58,210
how do we actually create a thread? So I've sort of told you, if you want to 

630
00:29:58,210 --> 00:30:01,679
create a thread, you need to have a class that implements that runable interface. 

631
00:30:01,679 --> 00:30:04,060
How do I actually create the thread itself? 

632
00:30:04,059 --> 00:30:08,500
So here's how we create the thread. 

633
00:30:08,500 --> 00:30:11,898
We create something of the class that is 

634
00:30:11,898 --> 00:30:16,079
runable. So we might say, I have some object, X, that's [inaudible] my class, and my 

635
00:30:16,079 --> 00:30:17,730
class implements the runable interface. 

636
00:30:17,730 --> 00:30:22,360
So this is just going to be some new my class, just like creating objects 

637
00:30:22,359 --> 00:30:25,959
of any class. It's just another class. It just happens to implement the runable interface. So you 

638
00:30:25,960 --> 00:30:26,950
create one. 

639
00:30:26,950 --> 00:30:30,690
Now, once you create one, this is sort of like your birth. 

640
00:30:30,690 --> 00:30:33,090
You're born/myth 

641
00:30:33,089 --> 00:30:35,500


642
00:30:35,500 --> 00:30:38,849
up to age 18 or whatever it was. For some of you it's 

643
00:30:38,849 --> 00:30:41,209


644
00:30:41,210 --> 00:30:43,769
12. There were actually - I heard that there 

645
00:30:43,769 --> 00:30:46,289
was someone very young at Stanford this year, but 

646
00:30:46,289 --> 00:30:47,589
I won't verify that. 

647
00:30:47,589 --> 00:30:50,579
So let's just say your life up to age 19 happened. Then at some point, your 

648
00:30:50,579 --> 00:30:51,889
parents said, hey, 

649
00:30:51,890 --> 00:30:54,850
I'm going to turn you into your own thread. You can just go an execute 

650
00:30:54,849 --> 00:30:55,689
independently. You're 

651
00:30:55,690 --> 00:31:00,240
like, well, what about the tuition checks? They're like, yeah, we'll handle those. We've got the 

652
00:31:00,240 --> 00:31:01,848
tuition check listener going on. 

653
00:31:01,848 --> 00:31:03,950
So it'll actually pick up those events. 

654
00:31:03,950 --> 00:31:07,830
But we want to spawn you off as a thread. Now, it's kind of the words that we use in the 

655
00:31:07,829 --> 00:31:12,339
computer science [inaudible]. Spawn a thread. So what we're going to do is create an 

656
00:31:12,339 --> 00:31:14,459
object of type thread, 

657
00:31:14,460 --> 00:31:18,309
which we'll call C. What we'll say is that's going to be a new thread. 

658
00:31:18,309 --> 00:31:23,009
What you give to thread is the object that you want to execute on a 

659
00:31:23,009 --> 00:31:28,400
separate thread. So we give it X. That object has to be of some type that 

660
00:31:28,400 --> 00:31:30,700
implements the runable interface. 

661
00:31:30,700 --> 00:31:32,769
So that's how it works. You create a thread. 

662
00:31:32,769 --> 00:31:34,339
You say, hey, thread, 

663
00:31:34,339 --> 00:31:38,449
the thing that you're going to execute is this class, X. And the way - what 

664
00:31:38,450 --> 00:31:42,700
time you're going to start it is, you say, T. So you tell the tread 

665
00:31:42,700 --> 00:31:43,960
start. 

666
00:31:43,960 --> 00:31:48,799
When the thread starts, what it does, it says, hey, object. How are you doing? 

667
00:31:48,799 --> 00:31:51,769
I'm going to call your run method, and you're just going to start executing in 

668
00:31:51,769 --> 00:31:54,839
your own thread from your run method. 

669
00:31:54,839 --> 00:31:59,049
So that's kind of the basic set up. It's fairly simple, actually. You create an object that 

670
00:31:59,049 --> 00:31:59,759
implements runable. 

671
00:31:59,759 --> 00:32:03,278
You create a new thread that's passed that object, and then you sort of kick off the 

672
00:32:03,278 --> 00:32:05,460
thread. It starts executing whenever you say start. 

673
00:32:05,460 --> 00:32:11,110
So let's make this a little bit more concrete. Let me show you an example. So 

674
00:32:11,109 --> 00:32:14,490
what we're going to do is create a super simple example that's 

675
00:32:14,490 --> 00:32:18,190
basically just a square. It's a rectangle. It's a G rect 

676
00:32:18,190 --> 00:32:20,350
that's going to slide across the screen. 

677
00:32:20,349 --> 00:32:24,629
So let me show you the code. We have some class slider that extends G rect. So 

678
00:32:24,630 --> 00:32:27,260
our class that we're going to create that's going to be runable 

679
00:32:27,259 --> 00:32:29,369
is just a rectangle. 

680
00:32:29,369 --> 00:32:32,429
It's going to implement the runable interface. It's going to have some 

681
00:32:32,430 --> 00:32:34,679
constructor, and what we're going to say is hey, 

682
00:32:34,679 --> 00:32:37,759
you're going to actually be a square. I'm going to give you some initial size and some 

683
00:32:37,759 --> 00:32:38,690
initial color. 

684
00:32:38,690 --> 00:32:41,320
So the first thing it does, it says, 

685
00:32:41,319 --> 00:32:45,829
I need to call the constructor for my super class. My super class is G rect. 

686
00:32:45,829 --> 00:32:50,628
So I'm actually a G rect that's a size-by-size G rect because I'm a square. 

687
00:32:50,628 --> 00:32:54,658
But to initialize myself as a G rect, I need to call my super class' 

688
00:32:54,659 --> 00:32:55,089
constructor. 

689
00:32:55,088 --> 00:33:00,168
So I say, super size comma size. I set myself to be filled, and I set my color 

690
00:33:00,169 --> 00:33:02,620
to be whatever color was passed 

691
00:33:02,619 --> 00:33:03,569
[inaudible]. Then 

692
00:33:03,569 --> 00:33:08,439
once I'm created, I'm kind of hanging out as an object until I get put into a thread and 

693
00:33:08,440 --> 00:33:08,899
run, 

694
00:33:08,898 --> 00:33:11,278
at which point my run method gets called. 

695
00:33:11,278 --> 00:33:14,648
When my run method gets called, all I'm going to do is go through a sequence 

696
00:33:14,648 --> 00:33:15,689
of steps 

697
00:33:15,690 --> 00:33:19,679
where I'm going to pause for 40 milliseconds and the move myself a small amount in 

698
00:33:19,679 --> 00:33:21,470
the X direction, over and over. 

699
00:33:21,470 --> 00:33:24,220
So I'm basically just going to slide across the screen. 

700
00:33:24,220 --> 00:33:28,039
That's what I'm going to do. My step size is five. That's my whole 

701
00:33:28,039 --> 00:33:29,470
object that I want to run. 

702
00:33:29,470 --> 00:33:34,019
So where's the program that I run? Here's the program that runs it. 

703
00:33:34,019 --> 00:33:37,980
So the program, because it's a graphics program, it is going to 

704
00:33:37,980 --> 00:33:41,750
be a thread that someone else, that you have hither to not seen, 

705
00:33:41,750 --> 00:33:43,558
is going to create and run. 

706
00:33:43,558 --> 00:33:47,019
So its run method says, hey, I'm going to add a button that's 

707
00:33:47,019 --> 00:33:50,190
called slide, to the southern region. I'm going to add an action listener. I'm going to 

708
00:33:50,190 --> 00:33:53,259
wait for mouse buttons, or I'm going to wait for you to click that button. 

709
00:33:53,259 --> 00:33:56,619
If you click that button, so if the command I get is slide, what I'm going to 

710
00:33:56,619 --> 00:33:57,268
do 

711
00:33:57,269 --> 00:34:01,038
is create one of these sliders. I'm going to create an object called slider that's 

712
00:34:01,038 --> 00:34:02,940
of type capital slider. 

713
00:34:02,940 --> 00:34:06,038
Its initial size is going to be some constant size that I set to 20. 

714
00:34:06,038 --> 00:34:09,219
Its initial color is going to be some randomly-generated color. So I have some 

715
00:34:09,219 --> 00:34:11,588
random generator. I'm just going to give it a random color. 

716
00:34:11,588 --> 00:34:14,398
Then what I'm going to do is create a thread 

717
00:34:14,398 --> 00:34:19,009
that's going to have the slider in it, and I'm going to kick off that thread. 

718
00:34:19,009 --> 00:34:22,619
So if I run this program, 

719
00:34:22,619 --> 00:34:25,269
here it is. Nothing's gone on. I click slide. 

720
00:34:25,268 --> 00:34:28,968
The box gets created of a random color, and it's now in a different thread. It 

721
00:34:28,969 --> 00:34:30,369
slides across the screen. 

722
00:34:30,369 --> 00:34:34,068
You're like, huh. Okay, Maron, that was a whole lot of work to create a sliding 

723
00:34:34,068 --> 00:34:35,028
square. 

724
00:34:35,028 --> 00:34:36,840
Now, here's the interesting thing. 

725
00:34:36,840 --> 00:34:40,809
That square is getting added to this canvas. So any squares I create will get added to 

726
00:34:40,809 --> 00:34:42,090
the same canvas. 

727
00:34:42,090 --> 00:34:44,999
As a matter of fact, if I look at the code over here, 

728
00:34:44,998 --> 00:34:46,959
ever time I get a mouse click, 

729
00:34:46,960 --> 00:34:49,309
I'm going to come and execute this code. Let me 

730
00:34:49,309 --> 00:34:50,828
make this little thing go away. 

731
00:34:50,829 --> 00:34:54,480
I'm going to come execute this code, which means I'm going to create a new slider of 

732
00:34:54,480 --> 00:34:55,728
a new random color. 

733
00:34:55,728 --> 00:34:59,518
I'm going to put it in a new thread. So every time I click the button, I'm 

734
00:34:59,518 --> 00:35:02,558
going to get a new thread that's executing and parallel with all my other 

735
00:35:02,559 --> 00:35:03,669
threads. You're like, 

736
00:35:03,668 --> 00:35:05,359
okay. What does that mean? 

737
00:35:05,360 --> 00:35:09,280
That means I click this once, and I get a box. I click it again, and while that one's 

738
00:35:09,280 --> 00:35:12,519
still running, I get another box of another random color. They're all sliding 

739
00:35:12,519 --> 00:35:13,978
across the screen 

740
00:35:13,978 --> 00:35:16,198
at the same time. 

741
00:35:16,199 --> 00:35:18,378


742
00:35:18,378 --> 00:35:19,588


743
00:35:19,588 --> 00:35:22,889
These aren't the droids you were looking for. 

744
00:35:22,889 --> 00:35:26,828
So that's the beauty of it, right? I didn't need to manage. Oh, you go move 

745
00:35:26,829 --> 00:35:29,809
yourself. You go move yourself. No, you wait. You go 

746
00:35:29,809 --> 00:35:32,470
move yourself. I just say, hey, you go run. 

747
00:35:32,469 --> 00:35:35,679
I want another box. Yeah, you go run, and you go run, and you go run. They're 

748
00:35:35,679 --> 00:35:38,399
all running at the same time. 

749
00:35:38,400 --> 00:35:41,880
Now here's something that's even slightly cooler than 

750
00:35:41,880 --> 00:35:44,798
that. What's slightly cooler than that is your threads can 

751
00:35:44,798 --> 00:35:48,068
interact with each other. These threads were all independent. So one thread 

752
00:35:48,068 --> 00:35:51,119
was executing here, which was a little box that was moving. Another thread was executing here. 

753
00:35:51,119 --> 00:35:52,559
There was a little box. 

754
00:35:52,559 --> 00:35:55,609
Never did the two meet. They were just hey, if I run into you or 

755
00:35:55,608 --> 00:36:00,739
whatever, that's all cool because we're just all treads here, and we're all executing. 

756
00:36:00,739 --> 00:36:01,280
Sometimes, 

757
00:36:01,280 --> 00:36:05,220
you care about knowing what's going on with your threads or threads care about 

758
00:36:05,219 --> 00:36:07,748
what's going on in some other thread. So 

759
00:36:07,748 --> 00:36:11,879
there's actually ways that you can think about keeping track of data, 

760
00:36:11,880 --> 00:36:14,068
of having shared 

761
00:36:14,068 --> 00:36:16,210
data between your threads, 

762
00:36:16,210 --> 00:36:19,970
which means all your threads are sort of running along. 

763
00:36:19,969 --> 00:36:23,449
There's some piece of data. So these are all just classes. 

764
00:36:23,449 --> 00:36:27,509
In these classes that are happily running along, in that class, there's actually some 

765
00:36:27,509 --> 00:36:28,059
variable 

766
00:36:28,059 --> 00:36:29,510
that's a reference 

767
00:36:29,510 --> 00:36:31,559
to some object over here. 

768
00:36:31,559 --> 00:36:35,589
Guess what? This guy's also got a reference to that object. This guy's got a 

769
00:36:35,588 --> 00:36:39,208
reference to that object, which means if anyone of these threads updates this 

770
00:36:39,208 --> 00:36:39,919
object, 

771
00:36:39,920 --> 00:36:43,329
the other threads can look at that object and see what its updated value 

772
00:36:43,329 --> 00:36:44,808
is. 

773
00:36:44,809 --> 00:36:48,659
This is, for example, how ATM machines work. There's different ATMs that 

774
00:36:48,659 --> 00:36:50,130
can be updating your bank account, 

775
00:36:50,130 --> 00:36:52,849
but there's only one bank account that they see. They're not looking at 

776
00:36:52,849 --> 00:36:54,959
different bank accounts. It's the same principal. 

777
00:36:54,958 --> 00:36:56,498
So what are we going to do? 

778
00:36:56,498 --> 00:36:58,638
We're going to create a race. 

779
00:36:58,639 --> 00:37:00,949
The way the race is going to work is we're going to create something called 

780
00:37:00,949 --> 00:37:04,679
the racing square. So it's like, yeah, I'm the racing square. I'm ready to go. 

781
00:37:04,679 --> 00:37:08,720
It's also going to extend the G rect and implement runable. What does it do? 

782
00:37:08,719 --> 00:37:12,078
Well, it's pathed at index to let it know which square in the race are you. 

783
00:37:12,079 --> 00:37:15,919
There was a bunch of squares. They're all going to run across the screen at the same time. 

784
00:37:15,918 --> 00:37:19,558
Which index are you? So there's some number of squares. We're just going to index them 

785
00:37:19,559 --> 00:37:22,010
for zero up to the number of squares minus one. 

786
00:37:22,010 --> 00:37:25,480
We're also going to pass you a shared array. When we pass an array, arrays 

787
00:37:25,480 --> 00:37:27,070
are always passed by reference. 

788
00:37:27,070 --> 00:37:31,679
So you don't get a copy of the array. You get where the array lives. So we're 

789
00:37:31,679 --> 00:37:33,900
going to give you this array bullion finished, 

790
00:37:33,900 --> 00:37:36,980
and what that array is going to be is an array for all of the different squares 

791
00:37:36,980 --> 00:37:40,449
that are running. You know what your index is in that array. When you're done, 

792
00:37:40,449 --> 00:37:44,369
you should say, hey, my finished is true. Until you're done, you say my 

793
00:37:44,369 --> 00:37:45,589
finished is false. 

794
00:37:45,590 --> 00:37:49,150
So we'll get to that in just a second. What it's going to do is create a square of size 

795
00:37:49,150 --> 00:37:50,150
by size, 

796
00:37:50,150 --> 00:37:53,150
set itself to be filled, keep track of its index, 

797
00:37:53,150 --> 00:37:57,210
and keep track of the list of finishers. So it needs to have some internal 

798
00:37:57,210 --> 00:38:00,228
variable to refer to this reference finished. 

799
00:38:00,228 --> 00:38:03,908
So those are just variables that are down here, right? I have some private 

800
00:38:03,909 --> 00:38:05,229
integer and some private 

801
00:38:05,228 --> 00:38:09,138
reference to the array, and so when I set finishers equal to finish, what I 

802
00:38:09,139 --> 00:38:11,329
just have is essentially that diagram over there. 

803
00:38:11,329 --> 00:38:13,539
I have some reference to this 

804
00:38:13,539 --> 00:38:15,910
place where the array lives in memory. 

805
00:38:15,909 --> 00:38:19,028
I have a random generator because I care about having random generators, as you'll 

806
00:38:19,028 --> 00:38:20,449
see in just a second. 

807
00:38:20,449 --> 00:38:23,659
So what's this square going to do? That's all it does to get itself set up. When I 

808
00:38:23,659 --> 00:38:25,778
gets run, what it's going to say is 

809
00:38:25,778 --> 00:38:27,869
in the list of finishers, 

810
00:38:27,869 --> 00:38:29,950
my index, because that's me, 

811
00:38:29,949 --> 00:38:32,409
it's going to be false because I haven't finished the race yet. When you 

812
00:38:32,409 --> 00:38:33,949
sort of kick off the thread, I'm 

813
00:38:33,949 --> 00:38:36,248
just starting to run. I haven't finished. 

814
00:38:36,248 --> 00:38:39,958
To run the race, I'm going to move 100 steps, and in each one of those 

815
00:38:39,958 --> 00:38:43,389
steps, what I'm going to do is pause some random amount of time 

816
00:38:43,389 --> 00:38:45,179
and then make some 

817
00:38:45,179 --> 00:38:47,629
step forward. So 

818
00:38:47,630 --> 00:38:51,470
my step size, I have step size that is just some fixed constant. Basically, what I'm going 

819
00:38:51,469 --> 00:38:54,818
to do is take a bunch of steps. 

820
00:38:54,818 --> 00:38:58,268
I'm basically going to take steps of size five. I'm going to take 100 of them. 

821
00:38:58,268 --> 00:38:59,919
So I'm going to move 500, 

822
00:38:59,920 --> 00:39:02,980
but the amount of pause between each one of the steps I take 

823
00:39:02,980 --> 00:39:06,659
varies. So I actually move it potentially different rates over time. That's 

824
00:39:06,659 --> 00:39:09,798
why it's a race. Each one of these guys will be moving at different rates. 

825
00:39:09,798 --> 00:39:10,369
Then 

826
00:39:10,369 --> 00:39:14,109
I need to watch out for photo finishes. So this code is actually buggy, 

827
00:39:14,110 --> 00:39:16,088
and I'll show you why in just a second. 

828
00:39:16,088 --> 00:39:19,518
When I get to the end of the race, so after I've run the race, I've taken my 

829
00:39:19,518 --> 00:39:23,628
100 steps over time, what I do is say this stuff's commented out for right 

830
00:39:23,628 --> 00:39:25,920
now. I say, I'm finished. 

831
00:39:25,920 --> 00:39:29,979
So my - the list of finishers at my index is true. I'm like, I crossed the 

832
00:39:29,978 --> 00:39:31,168
finish line. I finished. 

833
00:39:31,168 --> 00:39:33,778
Did anyone else finish, or did I win? 

834
00:39:33,778 --> 00:39:37,759
So what I do is I want to go through up here and count 

835
00:39:37,759 --> 00:39:39,498
all of the other people that finished. 

836
00:39:39,498 --> 00:39:42,578
So before I set my self to having finished, it's sort of like you're about to cross the 

837
00:39:42,579 --> 00:39:45,059
finish line. You kind of look around. You're like, 

838
00:39:45,059 --> 00:39:45,719
is it me? 

839
00:39:45,719 --> 00:39:49,659
Did someone else already finish? So before I finish, I look around, and I say 

840
00:39:49,659 --> 00:39:51,848
through the entire list of finishers, 

841
00:39:51,849 --> 00:39:55,610
if anyone else is finished, it finished so I is true, 

842
00:39:55,610 --> 00:39:59,079
then I increment the count. So I'm basically just counting how many other people 

843
00:39:59,079 --> 00:40:00,798
finished before I finished. 

844
00:40:00,798 --> 00:40:04,778
If no one else finished before I finished, I make myself red because I'm the 

845
00:40:04,778 --> 00:40:05,789
winner. 

846
00:40:05,789 --> 00:40:08,920
No one else should be red because if I cross the line first, my finishers 

847
00:40:08,920 --> 00:40:09,450


848
00:40:09,449 --> 00:40:12,399
should be true. So when someone else does that count, they should get a count of at 

849
00:40:12,400 --> 00:40:13,160
least one 

850
00:40:13,159 --> 00:40:16,699
so no one else should cross the line at the same time. 

851
00:40:16,699 --> 00:40:19,759
That's the basic idea for this 

852
00:40:19,759 --> 00:40:22,708
racing square. The way we run the racing square 

853
00:40:22,708 --> 00:40:25,598
is we're going to have a bunch of racing squares. So we're going to create an array 

854
00:40:25,599 --> 00:40:29,818
of racers, just of [inaudible] racer size. That's how many racers we're going to have. 

855
00:40:29,818 --> 00:40:32,329
We want to have some array of finished, 

856
00:40:32,329 --> 00:40:35,349
so that's just the same or number of racers, and we're going to 

857
00:40:35,349 --> 00:40:38,528
have each racer - is going to be in a different thread. So we need to have an 

858
00:40:38,528 --> 00:40:41,739
array of threads, one to keep track of each one of our racers. 

859
00:40:41,739 --> 00:40:43,969
We create a finish line in the race, the 

860
00:40:43,969 --> 00:40:46,729
numbers aren't important. We'll just see it draw on the screen, and we have a little start 

861
00:40:46,728 --> 00:40:49,018
button to create all the action. 

862
00:40:49,018 --> 00:40:51,578
So what's going go on when someone clicks the start button? 

863
00:40:51,579 --> 00:40:52,869
What I'm going to do 

864
00:40:52,869 --> 00:40:56,700
when someone clicks the start button is go through all of my racers. 

865
00:40:56,699 --> 00:41:00,349
If I had an existing racer on the screen, I'm going to remove it. 

866
00:41:00,349 --> 00:41:03,159
I don't need to worry about that until after the first race. But if there 

867
00:41:03,159 --> 00:41:06,469
was already an existing racer, I remove it. Otherwise, I don't worry about it. 

868
00:41:06,469 --> 00:41:08,800
I create a new racing square 

869
00:41:08,800 --> 00:41:13,260
at index I because I'm creating all racing squares from index zero 

870
00:41:13,260 --> 00:41:15,519
up the number of racers. 

871
00:41:15,518 --> 00:41:20,038
I'm passing them all the same shared array finished. They're all going to be 

872
00:41:20,039 --> 00:41:23,299
referring to the same shared array, just like the picture over there. 

873
00:41:23,298 --> 00:41:26,918
Then I'm going to add the racer to the canvas at a particular location. 

874
00:41:26,918 --> 00:41:30,828
The math basically just has them all sequentially down the screen. 

875
00:41:30,829 --> 00:41:34,019
Then what I say is, hey, I've created you, I've put you on the screen. 

876
00:41:34,018 --> 00:41:36,608
You're revving to go, so I'm going to kick you off. 

877
00:41:36,608 --> 00:41:40,688
So racer sub I is going to be in a new thread, sub I, and then I'm going to tell 

878
00:41:40,688 --> 00:41:43,578
thread sub I to sort of go start itself. 

879
00:41:43,579 --> 00:41:44,979
So if I run this, 

880
00:41:44,978 --> 00:41:47,878
I'll show you what it looks like. 

881
00:41:47,878 --> 00:41:49,798
So 

882
00:41:49,798 --> 00:41:52,599
if you think about each one of these different threads, you might say, doesn't the 

883
00:41:52,599 --> 00:41:55,880
first racer have a slight advantage because their thread gets kicked off first? 

884
00:41:55,880 --> 00:41:59,700
Yeah, but in turns out all the stuff executes so quickly that the random pauses in there 

885
00:41:59,699 --> 00:42:01,178
actually have a bigger affect. 

886
00:42:01,179 --> 00:42:03,179
So here's the thread's example. 

887
00:42:03,179 --> 00:42:05,358
There's my finish line. 

888
00:42:05,358 --> 00:42:08,239
I'm ready to start. 

889
00:42:08,239 --> 00:42:12,059
Yeah, every once in a while, a little bug in JAVA comes up, and it doesn't start. 

890
00:42:12,059 --> 00:42:15,059
So let me recompile. 

891
00:42:15,059 --> 00:42:18,349
Not a bug in the program. This was kind of an interesting thing that I just 

892
00:42:18,349 --> 00:42:22,949
discovered on the side this morning. There's actually a difference in how 

893
00:42:22,949 --> 00:42:24,499
Windows and the Macintosh 

894
00:42:24,498 --> 00:42:29,449
happen to deal with this. Sometimes a little error comes up. 

895
00:42:29,449 --> 00:42:31,338
Here we go. 

896
00:42:31,338 --> 00:42:34,239
So here are the two racers. They're just running in different speeds because they're in 

897
00:42:34,239 --> 00:42:37,179
separate threads. They're running, they're running, they're running. 

898
00:42:37,179 --> 00:42:38,349
You can see 

899
00:42:38,349 --> 00:42:41,339
it's just the random pauses between each one of their moves. One crossed the 

900
00:42:41,340 --> 00:42:43,980
finish line. He's like, oh, I'm the winner. I'm red. 

901
00:42:43,980 --> 00:42:46,969
You're like, okay, that's kind of cool, 

902
00:42:46,969 --> 00:42:48,639
sort of, but 

903
00:42:48,639 --> 00:42:52,328
how could I potentially extend the program? So instead of two racers, let me 

904
00:42:52,329 --> 00:42:53,889
make there be 

905
00:42:53,889 --> 00:42:55,599
ten racers. 

906
00:42:55,599 --> 00:42:57,599
Instead of ten 

907
00:42:57,599 --> 00:43:00,949
racers - actually, let me have there be ten racers, and what I'm also going to do is 

908
00:43:00,949 --> 00:43:01,509


909
00:43:01,509 --> 00:43:04,599
have them take a little victory dance in the end. 

910
00:43:04,599 --> 00:43:07,769
So when they get to the end of the race, they're going to look around and see 

911
00:43:07,768 --> 00:43:08,788
who else is around them. 

912
00:43:08,789 --> 00:43:12,009
Before they cross the line, they're going to be like, I'm done. I'm done. That 

913
00:43:12,009 --> 00:43:15,119
takes about 50 milliseconds to do that dance. You can just pretend that the 

914
00:43:15,119 --> 00:43:16,239
square is dancing. 

915
00:43:16,239 --> 00:43:17,528
So 

916
00:43:17,528 --> 00:43:20,849
I go ahead and run this program. 

917
00:43:20,849 --> 00:43:22,450


918
00:43:22,449 --> 00:43:26,158
Just to show you ten racers because ten racers is kind of cool. 

919
00:43:26,159 --> 00:43:29,429
You notice I only had to change really one parameter. I just 

920
00:43:29,429 --> 00:43:32,628
changed the constant from two to ten, and I didn't need to update anything else in 

921
00:43:32,628 --> 00:43:35,708
the program. 

922
00:43:35,708 --> 00:43:39,098
Now I got ten racers, and they're all running different. You're like, oh, you can start 

923
00:43:39,099 --> 00:43:42,838
rooting for you racers. We could put G images in there. 

924
00:43:42,838 --> 00:43:45,909
You're like, come on, little guy! 

925
00:43:45,909 --> 00:43:47,170
Oh! 

926
00:43:47,170 --> 00:43:50,769
That's way more exciting for me, evidently. 

927
00:43:50,768 --> 00:43:53,918
So you're like, that's kind of interesting. You just increased the number of 

928
00:43:53,918 --> 00:43:54,679
racers, but 

929
00:43:54,679 --> 00:43:58,519
what else can you do? Now, think about this. What if everyone was created 

930
00:43:58,519 --> 00:44:02,818
equal? So rather than all of them having a random delay between 

931
00:44:02,818 --> 00:44:03,880
50 and 150, what 

932
00:44:03,880 --> 00:44:07,260
if I just said, your pause is always 50. You're going to generate a random 

933
00:44:07,260 --> 00:44:11,259
number between 50 and 50, so it's always going to be 50. So 

934
00:44:11,259 --> 00:44:14,898
that should mean all racers are created equal, right? So if 

935
00:44:14,898 --> 00:44:19,638
all racers are created equal, all of them run at exactly the same speed. So if you 

936
00:44:19,639 --> 00:44:22,838
think about everyone running at exactly the same speed, the 

937
00:44:22,838 --> 00:44:25,588
weirdnesses begin to come up. So 

938
00:44:25,588 --> 00:44:29,808
here, we have a race, and we start. Everyone's just cruising. You're like, oh, 

939
00:44:29,809 --> 00:44:30,519
I can't tell 

940
00:44:30,518 --> 00:44:32,068
any difference. They're all like, 

941
00:44:32,068 --> 00:44:34,920
we're all the winner. 

942
00:44:34,920 --> 00:44:37,730
You look at that, and you get a little disturbed. You're like, 

943
00:44:37,730 --> 00:44:40,099
whoa. My code 

944
00:44:40,099 --> 00:44:43,209
looked when I crossed the finish line who else was crossing. 

945
00:44:43,208 --> 00:44:46,798
I was supposed to - if no one else had crossed before me, I was red. 

946
00:44:46,798 --> 00:44:50,548
If someone else crossed before me, I wasn't supposed to turn red. So how come we're 

947
00:44:50,548 --> 00:44:52,568
all turning red? 

948
00:44:52,568 --> 00:44:56,139
Here's where the real trick with multi-threaded programming comes in. 

949
00:44:56,139 --> 00:44:59,759
What happens is everyone finishes the race at the same time. 

950
00:44:59,759 --> 00:45:03,469
They all do their count at the same time with the shared rate. Some of them may 

951
00:45:03,469 --> 00:45:05,798
do their count slightly earlier, 

952
00:45:05,798 --> 00:45:09,219
but the ones who finish their count slightly earlier, they do a 

953
00:45:09,219 --> 00:45:12,889
victory dance. So everyone's at the finish line dancing, and everyone, when 

954
00:45:12,889 --> 00:45:16,349
they looked around, at the time they looked around, no one else had crossed the 

955
00:45:16,349 --> 00:45:17,160
finish line. 

956
00:45:17,159 --> 00:45:20,730
Then they all say, I finished at the same time, and no one else finished 

957
00:45:20,730 --> 00:45:23,009
before me, so they all turn red. 

958
00:45:23,009 --> 00:45:26,329
So you might say, okay, Maron. That's kind of funky. What happens if the 

959
00:45:26,329 --> 00:45:30,539
differences are just small? So I'll give you one last example, just to show you the 

960
00:45:30,539 --> 00:45:32,789
full funkiness of threads. 

961
00:45:32,789 --> 00:45:35,899
So rather than the difference in each time step being between 50 and 150, 

962
00:45:35,898 --> 00:45:37,130
it's just between 

963
00:45:37,130 --> 00:45:40,068
50 and 65. That means a whole bunch of people are going to finish the 

964
00:45:40,068 --> 00:45:43,038
race at close to the same time. 

965
00:45:43,039 --> 00:45:48,309
So if they finish the race at close to the same time, 

966
00:45:48,309 --> 00:45:50,298
here's what happens. We just 

967
00:45:50,298 --> 00:45:51,949
tickled that bug again. 

968
00:45:51,949 --> 00:45:54,259
Let's do it one more time. 

969
00:45:54,259 --> 00:45:55,778


970
00:45:55,778 --> 00:45:57,389


971
00:45:57,389 --> 00:46:00,489
That's the other problem that you'll see with multi-threaded programming is there's a 

972
00:46:00,489 --> 00:46:03,249
lot more things that can go wrong, which is why you're not required to know it for 

973
00:46:03,248 --> 00:46:04,438
this class. 

974
00:46:04,438 --> 00:46:10,649
Let me just show you the last example. Oh. 

975
00:46:10,650 --> 00:46:16,269
It's just toying with me now. 

976
00:46:16,268 --> 00:46:18,558
Green button. Ah. Most of 

977
00:46:18,559 --> 00:46:22,509
the time, the green button doesn't work, but now it does. 

978
00:46:22,509 --> 00:46:26,478
So now, we start the race, and there's very tiny differences between these racers. 

979
00:46:26,478 --> 00:46:29,958
What happens when there's tiny differences? 

980
00:46:29,958 --> 00:46:36,219
Let's do it again. 

981
00:46:36,219 --> 00:46:37,318
Yeah. 

982
00:46:37,318 --> 00:46:40,808
Some people finish first, and some people don't. 

983
00:46:40,809 --> 00:46:44,339
This is what makes multi-threaded programming hard. It's how to keep track 

984
00:46:44,338 --> 00:46:45,489
of stuff like this, 

985
00:46:45,489 --> 00:46:46,769
but now you know. 

986
00:46:46,768 --> 00:46:47,628
So I'll see you on Friday.