WEBVTT

00:00:01.250 --> 00:00:03.667
Here's where we left off
with our coin-flipping game.

00:00:03.656 --> 00:00:06.596
We started out by generating
a random number between 0 and 1,

00:00:06.596 --> 00:00:08.876
and then rounding that number
to the nearest integer.

00:00:08.877 --> 00:00:12.213
So this gave us a number
that was either 0 or 1.

00:00:12.214 --> 00:00:15.908
And then we illustrated
our super-realistic coin with this ellipse

00:00:15.909 --> 00:00:18.908
that was either purple or yellow,
depending on what the number was.

00:00:18.909 --> 00:00:20.986
And here's the code where we did that.

00:00:20.987 --> 00:00:24.158
So we said if integer is equal to 0
set the fill code to be purple,

00:00:24.159 --> 00:00:25.818
otherwise, set it to yellow.

00:00:25.819 --> 00:00:27.916
And then we draw the coin down here.

00:00:27.917 --> 00:00:30.924
But now I've decided
that actually my coin has 3 sides.

00:00:30.925 --> 00:00:32.454
Yep, a 3-sided coin.

00:00:32.455 --> 00:00:34.189
So let's add that third side.

00:00:34.190 --> 00:00:37.108
I'm going to start by making
a number between 0 and 2,

00:00:37.109 --> 00:00:41.532
so after we round that, it will give me
an integer that's either 0, 1, or 2.

00:00:41.533 --> 00:00:45.608
But if we look at our drawing code,
we're only accounting for 2 cases here.

00:00:45.609 --> 00:00:48.814
So if integer is 0, make it purple,
otherwise, make it yellow.

00:00:48.815 --> 00:00:51.884
But now, otherwise can mean
either 1 or 2.

00:00:51.885 --> 00:00:54.930
But wait, what if I did the same thing
that we did before,

00:00:54.931 --> 00:00:56.674
but inside this else block?

00:00:56.675 --> 00:01:00.748
So I'm just going to say:
if integer is equal to 1,

00:01:00.749 --> 00:01:04.933
then set the fill color to be yellow,
like it was before,

00:01:05.918 --> 00:01:09.877
else, we will set the fill color 
to be red.

00:01:09.853 --> 00:01:11.402
Red's pretty good.

00:01:11.403 --> 00:01:12.577
So what this means is,

00:01:12.578 --> 00:01:15.477
if integer is equal to 0,
set the color to be purple,

00:01:15.478 --> 00:01:18.983
otherwise, if it's 1,
we will make it yellow;

00:01:18.984 --> 00:01:20.330
otherwise, that is,

00:01:20.331 --> 00:01:24.610
if it wasn't 0, it wasn't 1,
it must be 2, we'll make the color red.

00:01:24.626 --> 00:01:28.585
I press restart a bunch of times.
It works! Woohoo!

00:01:28.566 --> 00:01:30.865
So then if I wanted
to add more sides to my coin,

00:01:30.866 --> 00:01:35.676
I can go up here, make it 0 to 3,
and then go deeper into this else block

00:01:35.677 --> 00:01:37.986
and add more if-else's
and so on and so forth,

00:01:37.987 --> 00:01:40.157
until I have a bazillion nested blocks.

00:01:40.158 --> 00:01:44.703
And only then will I realize this code
is disgusting! I mean gross!

00:01:44.704 --> 00:01:48.760
Code is supposed to be easy to read
and pretty, not as ugly as possible.

00:01:48.761 --> 00:01:50.729
So here's what we're going to do:

00:01:50.730 --> 00:01:52.904
Whenever you have
just a single if statement

00:01:52.905 --> 00:01:55.674
or an if-else statement
inside an else block,

00:01:55.675 --> 00:01:58.752
so that means we're not doing
anything else outside of these blocks,

00:01:58.753 --> 00:02:00.545
we're not setting the stroke color,

00:02:00.546 --> 00:02:04.765
we don't have anymore
if statements, nothing.

00:02:04.766 --> 00:02:08.443
All we have is that one if statement,
and maybe it comes with an else block.

00:02:08.443 --> 00:02:12.755
Then we can actually combine
this condition with the line before

00:02:12.756 --> 00:02:17.072
and say, else if integer is equal to 1,
then set the fill color to yellow.

00:02:17.073 --> 00:02:19.948
And then this last else block
isn't nested anywhere,

00:02:19.949 --> 00:02:22.318
just comes at the very end all by itself.

00:02:22.319 --> 00:02:24.586
Great! So now what this means is

00:02:24.587 --> 00:02:27.326
if integer is equal to 0,
set the color to purple,

00:02:27.327 --> 00:02:30.234
otherwise, if integer is equal to 1,
set it to yellow,

00:02:30.235 --> 00:02:34.483
otherwise, so if both of these were false,
then set it to red.

00:02:34.484 --> 00:02:37.737
I press restart a bunch of times,
you can see it still works.

00:02:37.738 --> 00:02:41.823
Great! And the cool thing about this is
we can have as many else-if's as we want,

00:02:41.824 --> 00:02:44.702
which makes it really easy for me
to add more sides to my coin.

00:02:44.703 --> 00:02:48.008
So let's do that now: I'm going to make
a number between 0 and 3,

00:02:48.000 --> 00:02:51.751
and then just add one more else block

00:02:51.760 --> 00:02:55.914
that says else if integer is equal to 2

00:02:55.915 --> 00:02:59.657
we'll set the fill color to... well,
it's red before so we can keep it red.

00:02:59.658 --> 00:03:03.287
And then this last else block will be
for when an integer is equal to 3,

00:03:03.288 --> 00:03:07.529
it will make it blue. Great!

00:03:08.479 --> 00:03:09.585
All right.

00:03:09.586 --> 00:03:13.115
So in order to do this, you always have
to start with an if statement,

00:03:13.116 --> 00:03:16.909
and then you can have
as many else-if's as you want,

00:03:16.910 --> 00:03:18.697
and then this last guy is optional.

00:03:18.698 --> 00:03:19.927
We can actually do without it,

00:03:19.928 --> 00:03:22.249
and then it's possible
that all of these will be false,

00:03:22.250 --> 00:03:24.161
so none of these blocks gets executed.

00:03:24.162 --> 00:03:27.203
But as long as we have that there,

00:03:27.204 --> 00:03:30.483
then exactly one of these blocks
will be run.

00:03:30.484 --> 00:03:34.016
Cool? Now this is a case
where it doesn't really matter

00:03:34.017 --> 00:03:37.016
if you say if else-if else-if else,

00:03:37.017 --> 00:03:41.928
or just use plain old if statements
like we had in the beginning,

00:03:41.929 --> 00:03:45.538
so if integer is equal to 3.

00:03:45.539 --> 00:03:47.727
And that's because it's never possible

00:03:47.728 --> 00:03:51.197
for integer to equal 0,
and then also 1, 2, or 3.

00:03:51.198 --> 00:03:54.222
Great. So these conditions
are all mutually exclusive.

00:03:54.223 --> 00:03:56.608
Only one of these blocks
will ever get run anyway.

00:03:56.609 --> 00:03:58.277
But that's not always the case.

00:03:58.278 --> 00:04:01.635
What if we try to make a game
like this without rounding to an integer?

00:04:01.636 --> 00:04:04.484
So I'm going to get rid of this part
where we round it,

00:04:04.485 --> 00:04:06.639
and the other part
where we draw it to the screen.

00:04:06.640 --> 00:04:09.283
And let's make up
some new rules to my game.

00:04:09.284 --> 00:04:12.636
So I'm still generating
a number between 0 and 3,

00:04:12.637 --> 00:04:15.315
put some more tick marks
on our number line.

00:04:16.815 --> 00:04:22.778
So let's say that if the number falls
between 0 and 1, we will make it purple.

00:04:23.378 --> 00:04:26.642
Oh, that doesn't look like a 'p' at all.
You get the idea. OK.

00:04:26.643 --> 00:04:30.503
And then if it's between 1 and 2,
we can make it yellow.

00:04:30.504 --> 00:04:35.532
And if it's between 2 and 3,
we will make it red.

00:04:35.533 --> 00:04:39.290
Great. So let's see how we can do that
with if and else-if's.

00:04:39.291 --> 00:04:43.881
So I can start out by saying
if number is less than 1,

00:04:43.882 --> 00:04:46.015
so if it's less than 1,

00:04:46.016 --> 00:04:50.116
and I know it's between 0 and 3,
then it must be in this range,

00:04:50.956 --> 00:04:53.126
then I'll set the fill color to be purple.

00:04:56.066 --> 00:05:00.182
Otherwise, if the number is less than 2,

00:05:00.844 --> 00:05:05.324
I can set the fill color
to be yellow, 255...

00:05:06.702 --> 00:05:12.183
And otherwise,
I'll set the fill to be red.

00:05:13.263 --> 00:05:16.255
Great! And it works just as intended.

00:05:16.256 --> 00:05:19.686
So if the number was less than 1,
then again, it's in this range.

00:05:19.687 --> 00:05:23.602
Otherwise it's greater than or equal to 1,
but it's also less than 2,

00:05:23.603 --> 00:05:26.731
so that puts it in this range,
so we're going to set the color to yellow.

00:05:26.732 --> 00:05:29.859
Otherwise, it must be greater
than or equal to 2,

00:05:29.860 --> 00:05:31.899
so it's going to fall in that range.

00:05:31.900 --> 00:05:33.276
And here's a case

00:05:33.277 --> 00:05:36.276
where we couldn't just say
if number is less than 2,

00:05:36.277 --> 00:05:39.649
and if number is less than 3,

00:05:39.650 --> 00:05:42.931
because if number is less than 1,
then it's definitely is less than 2

00:05:42.932 --> 00:05:44.895
and it's also going to be less than 3.

00:05:44.896 --> 00:05:46.780
So our coin
is always going to end up red.

00:05:46.781 --> 00:05:50.781
And that's why in this case,
it's really helpful to have else-if.