1
00:00:01,372 --> 00:00:02,835
In our last talk-through,

2
00:00:02,835 --> 00:00:05,308
we showed how you can animate
a ball bouncing off the walls

3
00:00:05,308 --> 00:00:07,805
using the draw function and if statements.

4
00:00:07,805 --> 00:00:09,033
Let's review.

5
00:00:09,033 --> 00:00:12,436
First, we set up some initial variables
for position and speed of a ball.

6
00:00:12,436 --> 00:00:15,064
Then, in the draw function,
which is that special function

7
00:00:15,064 --> 00:00:17,567
that gets called over and over
when your program is running,

8
00:00:17,567 --> 00:00:20,731
we repaint the background
and draw an ellipse on the canvas

9
00:00:20,731 --> 00:00:24,126
and we position that ellipse
based on the position variable

10
00:00:24,126 --> 00:00:27,468
and the speed
and how they affect each other.

11
00:00:27,468 --> 00:00:28,905
Now, without if statements,

12
00:00:28,905 --> 00:00:31,116
our ball just kept on going
forever and ever,

13
00:00:31,116 --> 00:00:33,061
or until we pressed restart.

14
00:00:33,061 --> 00:00:36,823
So we added two if statements down here
to check and see

15
00:00:36,823 --> 00:00:39,844
if the ball was near
the right side of the screen

16
00:00:39,844 --> 00:00:41,299
or the left side of the screen,

17
00:00:41,679 --> 00:00:44,093
and if so, we change the speed
to be positive or negative

18
00:00:44,093 --> 00:00:46,172
so that the ball
basically would bounce back.

19
00:00:46,172 --> 00:00:49,806
So now we just have this ball,
bouncing back and forth forever.

20
00:00:50,135 --> 00:00:51,355
So that was pretty cool,

21
00:00:51,355 --> 00:00:53,368
and there's a lot
of really cool animations

22
00:00:53,368 --> 00:00:55,005
that we can make with that.

23
00:00:55,005 --> 00:00:57,697
But now, I want to add user interaction
to this program.

24
00:00:57,697 --> 00:01:00,026
See, right now,
this program's like a TV show.

25
00:01:00,026 --> 00:01:01,614
if you gave it to a friend,

26
00:01:01,614 --> 00:01:03,866
and your friend didn't know
how to program,

27
00:01:04,182 --> 00:01:05,577
they couldn't really interact with it.

28
00:01:05,577 --> 00:01:07,835
All they could do is watch it,
which is cool,

29
00:01:07,835 --> 00:01:10,533
but it's a lot more cool
if they could actually do something.

30
00:01:10,533 --> 00:01:13,574
So, let's give the user
some ways to control it.

31
00:01:13,574 --> 00:01:15,335
Remember earlier, we learned

32
00:01:15,335 --> 00:01:20,032
about two special global variables
called mouseX and mouseY.

33
00:01:21,231 --> 00:01:22,708
Those variables return numbers

34
00:01:22,708 --> 00:01:26,100
that tell us about the current position
of the user's mouse

35
00:01:26,100 --> 00:01:28,597
and they're a great way
to make a program more interactive.

36
00:01:28,597 --> 00:01:31,201
So, let's see. How can we use them?

37
00:01:31,201 --> 00:01:34,571
Well, we should use them
inside the draw function somewhere.

38
00:01:34,571 --> 00:01:36,763
Because that's the only code

39
00:01:36,763 --> 00:01:39,482
that's called over and over
as the program runs.

40
00:01:39,902 --> 00:01:43,027
Everything outside of draw
is only called once,

41
00:01:43,027 --> 00:01:44,572
when the program first starts.

42
00:01:45,173 --> 00:01:48,104
So, it doesn't make sense
to use mouseX and mouseY there.

43
00:01:48,104 --> 00:01:50,632
The user hasn't had a chance
to interact with it.

44
00:01:50,632 --> 00:01:56,969
In draw, we're drawing the ball
200 pixels down the screen right now.

45
00:01:56,969 --> 00:02:00,574
How about we just replace
that with mouseY?

46
00:02:00,574 --> 00:02:02,533
Because that is the y position, right?

47
00:02:02,980 --> 00:02:07,832
This way it will just add the y position
dependent on where the user's y is.

48
00:02:07,832 --> 00:02:10,101
Right? So check this out.

49
00:02:10,101 --> 00:02:11,661
By just moving my cursor up and down,

50
00:02:11,661 --> 00:02:14,535
I can change the line
that the ball moves along.

51
00:02:14,936 --> 00:02:16,200
That's pretty cool.

52
00:02:16,200 --> 00:02:19,906
But I want to use mouseX, too.
So, how should I use that?

53
00:02:19,906 --> 00:02:22,068
Well, why don't we just make another ball

54
00:02:22,068 --> 00:02:26,268
and have that ball going
in the opposite direction: up and down.

55
00:02:26,268 --> 00:02:30,535
And there we'll just have
the user control the x position of that.

56
00:02:30,535 --> 00:02:38,270
So we kind of just do the reverse.
We'll say ellipse mouseX position 50 50.

57
00:02:39,967 --> 00:02:41,970
Alright? Check this out!

58
00:02:41,970 --> 00:02:46,934
I've got these two balls that I control,
and going in perpendicular directions.

59
00:02:48,731 --> 00:02:53,429
But, I'm still not happy.
I want to give the user even more control.

60
00:02:53,429 --> 00:02:57,865
I want to give the user the power
to start up the second ball.

61
00:02:57,865 --> 00:03:02,100
To actually bring it into existence,
just by pressing their mouse.

62
00:03:02,100 --> 00:03:04,201
Well, then I need to figure out

63
00:03:04,201 --> 00:03:07,769
how to tell that the user
is pressing their mouse.

64
00:03:08,170 --> 00:03:12,874
Thankfully, we have a super special
Boolean variable for just that.

65
00:03:12,874 --> 00:03:18,336
It's called mouseIsPressed
and we can use it inside an if statement.

66
00:03:18,336 --> 00:03:22,137
So, let's see. This is our second ball.

67
00:03:22,137 --> 00:03:26,920
So we can say if mouseIsPressed,

68
00:03:26,920 --> 00:03:31,545
and then we'll move
the ellipse colon to there.

69
00:03:32,138 --> 00:03:34,440
So, what this is doing here,

70
00:03:34,440 --> 00:03:39,301
is telling the program
that we only want to draw this ellipse

71
00:03:39,301 --> 00:03:44,093
if this is true and mouseIsPressed
will only be true

72
00:03:44,093 --> 00:03:46,526
if the user is pressing their mouse.

73
00:03:47,003 --> 00:03:50,002
So, let's try it. Ta da!

74
00:03:50,002 --> 00:03:53,367
So now I can make the ball appear
whenever I press.

75
00:03:53,367 --> 00:03:55,830
So it's zooming in
from this parallel universe.

76
00:03:55,830 --> 00:03:58,963
In! In! In! It's awesome!

77
00:04:00,096 --> 00:04:04,730
So, the interesting thing
about this variable mouseIsPressed

78
00:04:04,730 --> 00:04:07,634
is that it changes based on
what the user does

79
00:04:07,634 --> 00:04:09,934
not based on what our program does.

80
00:04:10,333 --> 00:04:13,362
and since the draw function
gets called repeatedly over and over,

81
00:04:13,362 --> 00:04:16,264
the output of our program
will change over time

82
00:04:16,264 --> 00:04:18,564
just with a little bit of user input.

83
00:04:18,975 --> 00:04:22,264
With the combined power
of if statements and mouseIsPressed,

84
00:04:22,264 --> 00:04:23,861
you have everything you need

85
00:04:23,861 --> 00:04:27,067
to make awesome things like buttons,
and drawing programs.

86
00:04:27,067 --> 00:04:28,136
Woo hoo!