1
00:00:01,343 --> 00:00:04,535
Let's talk about more complex conditions
you can check with your programs.

2
00:00:04,835 --> 00:00:06,632
To demonstrate, I've set up my canvas

3
00:00:06,632 --> 00:00:09,387
to look kind like an old game
I used to play: Foursquare.

4
00:00:09,387 --> 00:00:11,826
There is four squares
- it's got a good name-,

5
00:00:11,826 --> 00:00:14,827
and you stand in one and bounce
your ball to the other squares.

6
00:00:14,827 --> 00:00:17,283
So right now, I'll draw an ellipse
wherever my mouse is,

7
00:00:17,283 --> 00:00:19,003
so that's like our ball.

8
00:00:19,003 --> 00:00:21,767
What I wanna do is highlight
the square that the ball is in,

9
00:00:21,767 --> 00:00:24,202
by drawing a white rectangle on top of it.

10
00:00:24,202 --> 00:00:26,106
I know I need an <i>if</i> statement to do that,

11
00:00:26,106 --> 00:00:28,234
because I only want
to do it to one at a time,

12
00:00:28,234 --> 00:00:30,400
only when I am over that rectangle.

13
00:00:30,400 --> 00:00:34,002
Okay, so let's start
by drawing that rectangle.

14
00:00:35,036 --> 00:00:40,437
So I'll just copy the <i>rect</i> from there,
but give it a different fill, a white one.

15
00:00:41,368 --> 00:00:44,495
Good. Now let's wrap it with an <i>if</i>.

16
00:00:45,633 --> 00:00:49,956
You see it auto-completes the curly braces
for me, so I got to move it inside.

17
00:00:50,601 --> 00:00:53,764
OK. So when do I want
to show that rectangle?

18
00:00:54,236 --> 00:01:00,985
Well, I know I wanna do it when mouse
<i>mouseX < 200</i>.

19
00:01:02,968 --> 00:01:07,465
So that works, but then if I go
down here, it is still showing.

20
00:01:07,465 --> 00:01:09,904
So I also need to check <i>mouseY</i>.

21
00:01:09,904 --> 00:01:12,719
Well, how do I check <i>both</i> of those things?

22
00:01:12,719 --> 00:01:14,829
That’s why we have the "and" operator.

23
00:01:14,829 --> 00:01:18,070
So the <i>and</i> operator we use
when we want to check multiple conditions.

24
00:01:18,070 --> 00:01:23,350
So we just write <i>&&</i> 
and then we write our next condition,

25
00:01:23,350 --> 00:01:26,324
so <i>mouseY < 200</i>.

26
00:01:26,778 --> 00:01:30,807
So it doesn't light over here
anymore, and it does here! Yay.

27
00:01:30,807 --> 00:01:35,807
Let's do the next square,
just to prove this works.

28
00:01:35,807 --> 00:01:38,936
Alright, so we just have
to change some stuff.

29
00:01:38,936 --> 00:01:40,768
Well take this rectangle instead,

30
00:01:40,768 --> 00:01:44,432
and we obviously need
to change the conditions

31
00:01:44,432 --> 00:01:45,819
so it's not so lighting up.

32
00:01:45,819 --> 00:01:50,700
So this time, mouseX needs 
to be greater than 200,

33
00:01:50,700 --> 00:01:53,563
and mouseY still less than 200.

34
00:01:53,563 --> 00:01:55,069
Beautiful, look at that!

35
00:01:55,069 --> 00:01:59,696
Alright, now, in foursquare,
whenever the ball hits the edges,

36
00:01:59,696 --> 00:02:02,505
you know, these lines
in the middle and corners,

37
00:02:02,505 --> 00:02:04,501
we always yell "EdgeBall".

38
00:02:04,501 --> 00:02:10,205
So I wanna do that here too.
Let's start by writing it <i>EDGE BALLL!!!!</i>.

39
00:02:10,205 --> 00:02:15,958
And let's write in the middle 
and make it red, 'cuz is really important.

40
00:02:15,958 --> 00:02:19,367
So I only want it to happen
if I'm on the edges.

41
00:02:20,128 --> 00:02:22,572
So we are gonna add our <i>if</i>,

42
00:02:22,572 --> 00:02:24,528
and move this code inside of it.

43
00:02:25,608 --> 00:02:28,759
When I want it to happen?

44
00:02:28,759 --> 00:02:30,197
Well, there is edges in the middle,

45
00:02:30,197 --> 00:02:36,040
so the middle is when <i>mouseX equals 200</i>.

46
00:02:37,327 --> 00:02:40,904
Alright let's see. Do I get Edge Ball?

47
00:02:40,904 --> 00:02:44,636
There we go! <i>EDGE BALL!!!</i>

48
00:02:44,636 --> 00:02:49,422
OK. Hmm... So that works
in this middle line here,

49
00:02:49,422 --> 00:02:52,295
but I also want it
to work on this line here.

50
00:02:52,295 --> 00:02:58,024
In that case, I want <i>mouseY equals 200</i>,

51
00:02:58,527 --> 00:03:01,527
because that’s what that middle line is.

52
00:03:02,257 --> 00:03:07,760
Let's see, so that's not working.
Nothing is working.

53
00:03:08,323 --> 00:03:10,731
Oh, one thing works, just the very center.

54
00:03:10,731 --> 00:03:12,435
Well, that’s because I used an <i>and</i>,

55
00:03:12,435 --> 00:03:16,269
so its only gonna do it
if <i>both</i> of these are true,

56
00:03:16,269 --> 00:03:18,389
and it will only happen in the center.

57
00:03:18,389 --> 00:03:22,031
So what I actually wanna say is,
<i>either</i> one of these are true.

58
00:03:22,031 --> 00:03:24,701
So we use the <i>or</i> operator.

59
00:03:24,701 --> 00:03:27,323
So the <i>or</i> operator looks like this: <i>||</i>

60
00:03:27,323 --> 00:03:31,529
We call those pipe symbols,
and you probably never used them before.

61
00:03:31,529 --> 00:03:35,764
You have to look it on your keyboard,
it is usually on your top-right.

62
00:03:35,764 --> 00:03:39,467
Hopefully, you actually
have it on your keyboard.

63
00:03:39,467 --> 00:03:42,269
Alright? Cool, so now
let's see if it works.

64
00:03:42,269 --> 00:03:46,033
Alright, so works there, works there,
and then works there. Beautiful.

65
00:03:46,033 --> 00:03:49,120
We can keep adding more conditions here,

66
00:03:49,120 --> 00:03:52,704
so with both <i>and</i> and <i>or</i>
you can have as many of these as you want

67
00:03:52,704 --> 00:03:54,598
If you need to check
60 different conditions

68
00:03:54,598 --> 00:03:56,361
you can totally do that, right?

69
00:03:56,361 --> 00:03:58,331
Because we haven’t take
care of our edges yet,

70
00:03:58,331 --> 00:04:04,436
so let's say if mouseX is less than 3,

71
00:04:05,233 --> 00:04:07,965
so that should be--
there we go, that little edge there.

72
00:04:07,965 --> 00:04:09,296
Very good.

73
00:04:09,296 --> 00:04:14,532
Or <i>(mouseX>397)</i>

74
00:04:15,133 --> 00:04:17,596
There we go! Beautiful!

75
00:04:17,596 --> 00:04:20,534
So we keep doing it for all the edges.

76
00:04:20,534 --> 00:04:24,539
So.. yeah! There is <i>and</i> (&&) and <i>or</i> (||)
and now you can see

77
00:04:24,539 --> 00:04:27,566
how you can build up much more
complex conditions in your programs.

78
00:04:27,566 --> 00:04:30,469
And that's good,
because the world is a complex place.