1
00:00:02,751 --> 00:00:03,876
Whoo hoo! Another animation.

2
00:00:03,877 --> 00:00:06,377
This time we've got a ball
moving across the screen,

3
00:00:06,378 --> 00:00:09,500
and you guys know how this is done.

4
00:00:09,501 --> 00:00:11,127
We've got a variable, "x,"
that tells us the position of the ball,

5
00:00:11,128 --> 00:00:14,124
a variable "speed" that tells us
how far the ball moves every time,

6
00:00:14,125 --> 00:00:15,125
and a familiar draw loop

7
00:00:15,126 --> 00:00:17,417
where we're redrawing
the background every time

8
00:00:17,417 --> 00:00:23,208
setting fill colors and drawing
the ellipse at position x,

9
00:00:23,209 --> 00:00:24,209
and every single time,

10
00:00:24,210 --> 00:00:26,178
we're going to change "x"
to be the old value "x,"

11
00:00:26,178 --> 00:00:29,533
plus the variable "speed."

12
00:00:29,542 --> 00:00:33,876
So if I make "speed" smaller,
you can see it moves slower.

13
00:00:33,876 --> 00:00:39,041
I can make it negative,
so we move backwords,

14
00:00:39,042 --> 00:00:39,049
or I can make it zero,
and the ball would stop moving.

15
00:00:39,050 --> 00:00:40,459
But as long as speed is not zero,

16
00:00:40,501 --> 00:00:43,833
eventually the ball
is going to go off the screen.

17
00:00:43,834 --> 00:00:46,204
And I can always press
the restart button to bring it back,

18
00:00:46,204 --> 00:00:48,168
but you know, after awhile,
that gets old.

19
00:00:48,365 --> 00:00:52,696
You restart, and restart...

20
00:00:52,709 --> 00:00:55,751
So, how about this? When the ball reaches
the right edge of the screen,

21
00:00:55,751 --> 00:00:58,785
instead of going off the edge
of the screen like it's doing now,

22
00:00:58,785 --> 00:01:00,495
I want it to turn around.

23
00:01:00,495 --> 00:01:04,525
And, I know how to turn the ball around,
I can just say, "speed" gets negative 5.

24
00:01:04,525 --> 00:01:10,335
If I make the speed negative,
then the ball would go backwards.

25
00:01:10,448 --> 00:01:12,857
But here is the problem.

26
00:01:12,876 --> 00:01:18,249
I only want to change the speed
if the ball has reached the right edge.

27
00:01:18,250 --> 00:01:20,751
Hmmm... so I think I already said it.

28
00:01:20,751 --> 00:01:25,918
I only want to change the speed,
if the ball has reached the right edge.

29
00:01:25,919 --> 00:01:29,625
I think this calls for an "if" statement.

30
00:01:29,626 --> 00:01:31,208
Up until now, we've only been giving

31
00:01:31,209 --> 00:01:32,976
the computer commands
to run no matter what.

32
00:01:32,976 --> 00:01:34,585
If statements are a way to say,

33
00:01:34,586 --> 00:01:37,085
"Hey dude, I want you to run this code,

34
00:01:37,086 --> 00:01:39,542
but only under these
specific circumstances."

35
00:01:39,542 --> 00:01:42,542
"So only change the speed
if the ball has reached the right edge."

36
00:01:42,543 --> 00:01:45,857
And here's how it looks in code.

37
00:01:45,876 --> 00:01:47,210
All you do is type "IF"

38
00:01:47,211 --> 00:01:50,960
and then a pair of parentheses,
and then a pair of brackets.

39
00:01:50,961 --> 00:01:54,334
Inside the parentheses
we're going to put the condition.

40
00:01:54,335 --> 00:01:57,085
Inside the brackets
we're going to put the code to run.

41
00:01:57,086 --> 00:02:00,082
So the way it works is,
"If this condition is true,

42
00:02:00,083 --> 00:02:03,001
then run this code;
otherwise, don't bother."

43
00:02:03,002 --> 00:02:06,542
So in our case, the condition
is the ball reaching the right edge.

44
00:02:06,543 --> 00:02:10,374
How do we know if the ball
has reached the right edge?

45
00:02:10,375 --> 00:02:16,417
We've got this variable "x"
that tells us where the ball is,

46
00:02:16,417 --> 00:02:22,958
and I know that the edge of the canvas
x position 400, so let's see.

47
00:02:22,959 --> 00:02:25,082
When "x" is greater than 400,

48
00:02:25,083 --> 00:02:30,458
then we know that the ball has gone
past the right edge a little bit.

49
00:02:30,459 --> 00:02:33,036
So let's see how that works.

50
00:02:33,042 --> 00:02:38,985
And the code to run, we already said
before, we're just going to change speed.

51
00:02:38,986 --> 00:02:45,291
Speed gets negative five. We're going
to press restart and see what happens.

52
00:02:45,292 --> 00:02:48,144
So this time, when the ball reaches
the right edge, it bounces! Yaaaay!

53
00:02:48,163 --> 00:02:50,541
And then it keeps going off the screen.

54
00:02:50,542 --> 00:02:51,625
But that's OK, because we can keep doing
the same thing on the other side.

55
00:02:51,667 --> 00:02:52,667
So this time, we want to check
if the ball has reached the left edge.

56
00:02:52,668 --> 00:02:57,959
And that's when x is less than zero,
and what we want to do

57
00:02:57,959 --> 00:03:03,041
is make speed positive again,
so speed gets 5.

58
00:03:03,042 --> 00:03:08,084
Alright, and then we're going
to press restart, and this time...

59
00:03:08,125 --> 00:03:11,708
boing...

60
00:03:11,709 --> 00:03:14,418
boing... boing...

61
00:03:14,499 --> 00:03:16,666
yay! It works.

62
00:03:16,667 --> 00:03:18,917
And I know we're checking to see
if the ball has gone past the edges

63
00:03:18,959 --> 00:03:21,418
but it feels like it's going
a little too far past the edges.

64
00:03:21,626 --> 00:03:23,668
And if you remember,
these two parameters control

65
00:03:23,669 --> 00:03:25,335
where the center of the ellipse is drawn.

66
00:03:25,542 --> 00:03:31,500
So right now, by the time
the center reaches the edge,

67
00:03:31,501 --> 00:03:36,917
half the ellipse has already gone
past the edge.

68
00:03:36,918 --> 00:03:42,082
So if we want to fix that,
we just stop the ellipse a little sooner.

69
00:03:42,083 --> 00:03:47,333
So if our edge is here, at 400 and we want
to stop our ellipse when it gets here,

70
00:03:47,334 --> 00:03:53,124
and we can see from the function
call that the ellipse has width 50,

71
00:03:53,125 --> 00:03:58,626
so that means from the center
to the edge, that's going to be 25.

72
00:03:58,626 --> 00:04:04,625
So we want to stop it
when the center reaches 375,

73
00:04:04,626 --> 00:04:06,875
that's 400 minus 25.

74
00:04:06,876 --> 00:04:08,997
So instead of checking
for x greater than 400,

75
00:04:08,998 --> 00:04:10,969
we're going to check for
x greater than 375.

76
00:04:10,970 --> 00:04:13,293
Instead of checking for x less than 0.

77
00:04:13,294 --> 00:04:15,542
I'll check for x less than 25.

78
00:04:15,584 --> 00:04:19,584
And now it's perfect! Yay!
Look at at that ball bounce.