1
00:00:00,635 --> 00:00:04,231
Remember all those cool exciting projects we saw earlier in the first video?

2
00:00:04,231 --> 00:00:07,641
They were all animated and exploding and colors changing and moving,

3
00:00:07,641 --> 00:00:08,925
all sorts of stuff happening.

4
00:00:08,925 --> 00:00:14,274
Everything that we've done in this set of tutorials up until now is static drawings

5
00:00:14,274 --> 00:00:15,955
that don't move, that don't change.

6
00:00:15,955 --> 00:00:19,935
But what we're going to do now is look at how we can animate things.

7
00:00:19,935 --> 00:00:22,036
How can we make things change?

8
00:00:22,036 --> 00:00:25,790
Well first of all, we should realize, like, what does it mean for a program to animate?

9
00:00:25,790 --> 00:00:31,086
What we had before was stroke, fill, rectangle, stroke, fill, ellipse.

10
00:00:31,086 --> 00:00:33,604
We execute all those lines of code and we get to the end and voila,

11
00:00:33,604 --> 00:00:35,199
we have our perfect drawing.

12
00:00:35,199 --> 00:00:36,547
Now we want to do something different.

13
00:00:36,547 --> 00:00:40,274
A program that animates runs continuously over time.

14
00:00:40,274 --> 00:00:44,632
It starts, it runs, and it reruns and it reruns and it reruns.

15
00:00:44,632 --> 00:00:48,103
It has to continuously draw the circle, draw the circle, draw the circle.

16
00:00:48,103 --> 00:00:52,493
So we need a framework, we need a structure, we need some way of doing this besides

17
00:00:52,493 --> 00:00:55,493
just having our linear list of instructions.

18
00:00:55,493 --> 00:01:00,903
The way we're gonna do that is by having two sections of code, two blocks of code.

19
00:01:00,903 --> 00:01:02,745
One, we're going to call "setup."

20
00:01:04,902 --> 00:01:11,627
Setup is all the code that happens once at the start.

21
00:01:13,056 --> 00:01:16,395
All the code that goes in setup happens once at the start.

22
00:01:16,748 --> 00:01:21,932
Then we're going to have another block, another section of code that's going to be called "draw."

23
00:01:21,932 --> 00:01:27,608
The code that goes in draw loops continuously over and over again.

24
00:01:28,135 --> 00:01:31,577
So we might, the program is going to run forever and ever.

25
00:01:31,577 --> 00:01:33,733
It's going to do some things once, then it's going to run forever and ever.

26
00:01:33,733 --> 00:01:35,354
You can think about programming a game.

27
00:01:35,354 --> 00:01:37,917
If you were making a game, you might have some things at the beginning,

28
00:01:37,917 --> 00:01:40,984
we would set the scoreboard to 0, we would set the player's name,

29
00:01:40,984 --> 00:01:44,136
we would set the player's location to the beginning spot, and then,

30
00:01:44,136 --> 00:01:48,083
after that beginning setup, after that initialization,

31
00:01:48,083 --> 00:01:52,847
then the things move and they change and they check and the ball hit the puck

32
00:01:52,847 --> 00:01:56,886
or whatever the game might be, they draw all the elements of the game continuously.

33
00:01:56,886 --> 00:01:58,951
This is the structure we're going to use.

34
00:01:58,951 --> 00:02:03,248
The question of course then is, how do we type this into our code?

35
00:02:03,248 --> 00:02:05,510
Do we just type "setup" and put a line underneath it?

36
00:02:05,510 --> 00:02:11,279
No, there's new syntax, new strange symbols that we have to write very precisely.

37
00:02:11,279 --> 00:02:12,392
And it looks like this.

38
00:02:13,397 --> 00:02:22,551
Void setup with parentheses with curly bracket open, end curly bracket.

39
00:02:22,931 --> 00:02:24,970
By the way, the curly brackets might actually be a character you've

40
00:02:24,970 --> 00:02:26,642
never had a chance to use before.

41
00:02:26,642 --> 00:02:29,911
This is a time. It's shift something on your keyboard, so if you can't find it,

42
00:02:29,911 --> 00:02:31,662
pause this video and find those curly brackets.

43
00:02:32,123 --> 00:02:36,478
And the curly brackets are crucial because they mark the beginning and end of setup,

44
00:02:36,478 --> 00:02:41,582
meaning any code that goes inside here is the code that's going to happen

45
00:02:41,582 --> 00:02:42,961
in the beginning of the program.

46
00:02:43,583 --> 00:02:47,397
Now, to write draw, we follow exactly this syntax again.

47
00:02:47,801 --> 00:02:57,193
We say void, draw, () another start curly bracket and another close curly bracket.

48
00:02:57,193 --> 00:02:59,754
So we're now writing two blocks of code.

49
00:02:59,754 --> 00:03:02,199
We put code in setup that happens once at the beginning,

50
00:03:02,199 --> 00:03:04,138
code in draw that loops over and over again.

51
00:03:04,138 --> 00:03:06,676
You might also be asking yourself the question like,

52
00:03:06,676 --> 00:03:09,499
"yeah, I kind of get why the curly bracket is there, the parentheses,

53
00:03:09,499 --> 00:03:13,654
maybe I'm willing to understand that I have to have parentheses, but what is this 'void?'"

54
00:03:13,654 --> 00:03:14,941
What does void mean?

55
00:03:14,941 --> 00:03:17,829
At this point, I really just have to say that void is something you should just memorize,

56
00:03:17,829 --> 00:03:20,731
it's part of the definition of setup and draw.

57
00:03:20,731 --> 00:03:23,264
You have to say void draw, void setup.

58
00:03:23,264 --> 00:03:26,216
The more important thing that we should be looking at together is,

59
00:03:26,216 --> 00:03:30,645
we wrote all this code, stroke, fill, background, rect, ellipse, all these things.

60
00:03:30,645 --> 00:03:32,993
Where do they go? Do they go in setup do they go in draw?

61
00:03:32,993 --> 00:03:34,872
Well, here's the thing.

62
00:03:34,872 --> 00:03:36,220
What goes in setup?

63
00:03:36,220 --> 00:03:40,104
What is something that you might do at the beginning of your program?

64
00:03:40,104 --> 00:03:42,860
There's a function that we haven't actually taught you yet.

65
00:03:42,860 --> 00:03:45,961
It's a function that's secretly been happening but we didn't put it in yet.

66
00:03:45,961 --> 00:03:47,784
Now it's time to actually put it in.

67
00:03:47,784 --> 00:03:51,505
That function is called "size," and it's something that makes sense to go in setup.

68
00:03:51,505 --> 00:03:58,693
Size (); takes two arguments, a width and a height.

69
00:03:59,195 --> 00:04:01,478
500, 400.

70
00:04:01,818 --> 00:04:02,849
This makes sense.

71
00:04:02,849 --> 00:04:05,892
This is defining the size, in pixels, of your canvas.

72
00:04:05,892 --> 00:04:10,581
The thing that you're drawing to is 500 pixels wide and 400 pixels high.

73
00:04:10,581 --> 00:04:11,804
Now this makes sense.

74
00:04:11,804 --> 00:04:15,835
When your program first starts, this is something that you would do at the beginning.

75
00:04:15,835 --> 00:04:17,900
You would set up the size of your canvas.

76
00:04:18,527 --> 00:04:19,750
We can look at what would we put in draw?

77
00:04:19,750 --> 00:04:21,943
Well in draw, we might put all of our drawing code.

78
00:04:21,943 --> 00:04:24,220
We would say, "hey, I want to draw the background.

79
00:04:24,220 --> 00:04:28,319
And I'm gonna have a black background. And then I'm going to set a fill.

80
00:04:28,319 --> 00:04:32,159
And then I'm going to set a stroke. And then I'm gonna draw a shape,

81
00:04:32,159 --> 00:04:34,271
like ellipse, blah blah blah."

82
00:04:34,271 --> 00:04:37,396
Now I'm making this messy here because this is anything your heart imagines.

83
00:04:37,396 --> 00:04:38,465
Anything you want to draw.

84
00:04:38,465 --> 00:04:41,009
Any colors, any shapes, all of your drawing code.

85
00:04:41,009 --> 00:04:45,184
So what we're actually going to do right now is switch back over to the code editor,

86
00:04:45,184 --> 00:04:48,476
and in the code editor, I'm gonna add void setup and void draw.

87
00:04:48,476 --> 00:04:53,353
See how those are two separate functions now? Two separate blocks of code?

88
00:04:53,353 --> 00:04:56,447
Now we're gonna put size in setup, there it is.

89
00:04:56,447 --> 00:04:58,072
Notice how it's indented slightly.

90
00:04:58,072 --> 00:05:02,399
This is the convention to have code inside a block of code have a slight indentation.

91
00:05:02,399 --> 00:05:05,516
Now we're gonna put code in draw. I'm gonna put a background and

92
00:05:05,516 --> 00:05:07,305
I'm gonna put a couple different shapes.

93
00:05:07,305 --> 00:05:08,589
Ready?

94
00:05:08,843 --> 00:05:12,483
It's a program, remember, that runs once at the beginning and loops over and over again.

95
00:05:12,483 --> 00:05:14,901
So when we run it, something really exciting should happen, right?

96
00:05:14,901 --> 00:05:16,629
OK, here we go, we're gonna run that code.

97
00:05:16,942 --> 00:05:17,811
There it is.

98
00:05:18,939 --> 00:05:20,561
Alright, yeah, I don't know how you feel,

99
00:05:20,561 --> 00:05:22,811
I'm not even looking at it because there's no window, really,

100
00:05:22,811 --> 00:05:26,004
I'm just in a video, but I know what it's doing, and it's static.

101
00:05:26,781 --> 00:05:27,877
It's not changing.

102
00:05:27,877 --> 00:05:29,504
So this might feel a little bit disappointing,

103
00:05:29,504 --> 00:05:33,772
we spent all this time to add setup and draw, but our program isn't animating.

104
00:05:33,772 --> 00:05:35,224
Why isn't it animating?

105
00:05:35,224 --> 00:05:39,444
The reason why it's not animating is, well, inside of draw,

106
00:05:39,444 --> 00:05:42,263
we're drawing the same shapes over and over again, so if we're always saying,

107
00:05:42,263 --> 00:05:45,390
"Put a rectangle here, draw the background, put a rectangle here,

108
00:05:45,390 --> 00:05:47,110
draw the background, put a rectangle over here,"

109
00:05:47,110 --> 00:05:48,862
that rectangle's never going to move.

110
00:05:48,862 --> 00:05:51,463
So now, we need a new concept.

111
00:05:51,463 --> 00:05:57,687
We need to figure out, how can we vary the way the shapes are drawn each time

112
00:05:57,687 --> 00:05:59,748
through this draw loop?

113
00:05:59,748 --> 00:06:01,658
We might be drawing an ellipse.

114
00:06:01,658 --> 00:06:07,627
And that ellipse might be at some x, some y, with some width and some height.

115
00:06:07,627 --> 00:06:11,310
The values that we've been using are numbers like 250, 200.

116
00:06:11,310 --> 00:06:15,256
And if the values are 250, 200, the ellipse is always at that location.

117
00:06:15,256 --> 00:06:16,756
Always and forever.

118
00:06:18,571 --> 00:06:20,849
Remember this thing, you know this thing that you've got on your computer,

119
00:06:20,849 --> 00:06:22,761
it's called a mouse and you can move things around?

120
00:06:22,761 --> 00:06:25,012
And you usually see, I'm gonna do a terrible job of drawing this,

121
00:06:25,012 --> 00:06:27,157
this little mouse pointer on your screen?

122
00:06:27,157 --> 00:06:31,793
Well, the mouse exists at some x and some y, right?

123
00:06:31,793 --> 00:06:33,683
This is an x, y location where the mouse is.

124
00:06:33,683 --> 00:06:39,701
What if I could say, draw the ellipse not at 250, but at the x location of the mouse,

125
00:06:39,701 --> 00:06:43,708
wherever it might be, and the y location of the mouse, wherever it might be.

126
00:06:44,646 --> 00:06:49,288
The fact is, we can do that! The way we do that is by writing a word.

127
00:06:49,288 --> 00:06:56,256
The word is "mouse x mouse y."

128
00:06:56,256 --> 00:06:59,039
Now this isn't magic. It's not just magic that this happens.

129
00:06:59,039 --> 00:07:01,912
Processing knows, this computer programming environment

130
00:07:01,912 --> 00:07:04,019
knows that when you write the word "mouse x,"

131
00:07:04,019 --> 00:07:09,918
you mean, it stands in for the number that is currently the x value of the mouse.

132
00:07:10,238 --> 00:07:15,469
We have now learned a really important fundamental thing in computer programming.

133
00:07:15,469 --> 00:07:17,918
A fundamental concept. A variable.

134
00:07:17,918 --> 00:07:20,227
Words that stand in for numbers.

135
00:07:20,227 --> 00:07:22,807
A word that holds a value, this is a variable.

136
00:07:22,807 --> 00:07:26,758
There's lots more to variables than this, but we've got to start here.

137
00:07:26,758 --> 00:07:29,920
We now know that we can use the variables "mouse x" and "mouse y."

138
00:07:29,920 --> 00:07:32,267
So I'm gonna bring the code editor back up,

139
00:07:32,267 --> 00:07:37,103
and you're gonna see that there's an ellipse being drawn just at 250, 200.

140
00:07:37,103 --> 00:07:39,539
There it is. It's looping, but it never changes.

141
00:07:39,539 --> 00:07:43,624
Now I'm gonna replace that line of code with the ellipse at mouse x, mouse y,

142
00:07:43,624 --> 00:07:45,292
and I'm gonna run it again.

143
00:07:45,292 --> 00:07:48,893
OK? Take your mouse, move it over there, are you moving that circle?

144
00:07:48,893 --> 00:07:51,986
We're drawing the circle over and over again, but every time we draw the circle,

145
00:07:51,986 --> 00:07:55,048
we're drawing it at an updated location, wherever that mouse is.

146
00:07:55,048 --> 00:08:00,048
This is the power of looping an animation loop with variation inside that loop.

147
00:08:00,048 --> 00:08:03,079
If we can draw a circle at a different location,

148
00:08:03,079 --> 00:08:06,367
if we can draw a circle with a different size, with a different color,

149
00:08:06,367 --> 00:08:09,054
things can change, things can animate.

150
00:08:09,054 --> 00:08:12,524
Just as an exercise, try swapping mouse x and mouse y,

151
00:08:12,524 --> 00:08:16,380
so type mouse y where mouse x was, and mouse x where mouse y was.

152
00:08:17,410 --> 00:08:20,694
Run the code yourself and see what happens.

153
00:08:21,085 --> 00:08:22,024
Interesting, right?

154
00:08:22,024 --> 00:08:23,867
This is a very important point.

155
00:08:23,867 --> 00:08:26,557
One of the things that you can do is, these are just numbers.

156
00:08:26,557 --> 00:08:30,838
Even though it makes sense intuitively to have mouse x for the x value of something,

157
00:08:30,838 --> 00:08:34,369
you can also use mouse x for the value, the red value of a color.

158
00:08:34,369 --> 00:08:37,340
You can use mouse y for the blue value of a color.

159
00:08:37,340 --> 00:08:40,691
You could also say something, like you can do little mathematical operations.

160
00:08:40,691 --> 00:08:46,200
Something you can always say are things like "mouse x plus 50"

161
00:08:46,200 --> 00:08:50,357
which would draw your shape 50 pixels over from where the mouse was.

162
00:08:50,357 --> 00:08:54,960
You could also do things like say "mouse x divided by 3,"

163
00:08:54,960 --> 00:08:59,318
which would then take the value of mouse x, divide it by 3, and use that number.

164
00:08:59,318 --> 00:09:01,894
So this is something you can really play with,

165
00:09:01,894 --> 00:09:05,024
and in our example that I'm going to put below for you,

166
00:09:05,024 --> 00:09:07,748
you'll see some examples of using the mouse values in

167
00:09:07,748 --> 00:09:11,391
slightly more complicated mathematical operations.

168
00:09:11,391 --> 00:09:13,966
OK, so we're done with this part of the tutorial,

169
00:09:13,966 --> 00:09:17,385
but there's one little last piece I think that would be important to show you,

170
00:09:17,385 --> 00:09:20,523
and it's something that's gonna go into the example that I'm gonna leave you with.

171
00:09:20,523 --> 00:09:23,998
If you've noticed, right, we only ever had size in setup.

172
00:09:23,998 --> 00:09:26,503
All of our drawing stuff goes in draw. That makes sense.

173
00:09:26,503 --> 00:09:31,019
Look below, that example that's there right now, size is in setup, everything else is in draw.

174
00:09:31,019 --> 00:09:35,580
Let's just try, just as an experiment, what happens if we take the line of code

175
00:09:35,580 --> 00:09:38,687
called "background," and move it from draw to setup?

176
00:09:38,687 --> 00:09:40,316
We're gonna move it there.

177
00:09:40,316 --> 00:09:44,077
That means background is gonna be here, in setup.

178
00:09:45,088 --> 00:09:50,731
That means background is only being drawn once at the beginning.

179
00:09:50,731 --> 00:09:52,349
Never ever again.

180
00:09:52,349 --> 00:09:55,206
What do you think's gonna happen when we run this code?

181
00:09:55,206 --> 00:09:56,019
Try to guess.

182
00:09:56,344 --> 00:09:57,321
And now we're gonna run it.

183
00:09:57,321 --> 00:09:58,981
Move your mouse over.

184
00:09:58,981 --> 00:10:01,487
Notice that the circle is leaving a trail.

185
00:10:01,487 --> 00:10:04,520
It's because we've never erased the background.

186
00:10:04,520 --> 00:10:08,291
So we're seeing every circle that's being drawn, and we're seeing every circle

187
00:10:08,291 --> 00:10:12,465
that's being drawn in draw over and over and over and over again.

188
00:10:12,465 --> 00:10:15,028
This is something that you can use, you can make this decision,

189
00:10:15,028 --> 00:10:17,090
"do I want to draw the background always?

190
00:10:17,090 --> 00:10:20,750
Or do I want to put the background just once in setup to create a painting program?"

191
00:10:20,750 --> 00:10:24,633
So go forth, make your program animate, make things move,

192
00:10:24,633 --> 00:10:28,893
make things change color if you can, and we're gonna add one more piece,

193
00:10:28,893 --> 00:10:30,554
we're almost to the end of this tutorial series,

194
00:10:30,554 --> 00:10:32,904
but we've got one more step we're gonna do in

195
00:10:32,904 --> 00:10:35,497
learning the basics of programming in this tutorial.

196
00:10:35,497 --> 00:10:38,750
OK, have fun, see you in a bit.