WEBVTT

00:00:01.477 --> 00:00:04.184
Here's a function
you might not know about: random.

00:00:04.184 --> 00:00:07.337
It takes in two parameters:
a lower bound and an upper bound,

00:00:07.337 --> 00:00:10.587
and it gives you back a random number
somewhere between those two bounds.

00:00:10.587 --> 00:00:14.392
So here, this variable number will be
somewhere between zero and one.

00:00:14.392 --> 00:00:18.152
Then we're going to draw that number
to the canvas using this <i>text</i> function.

00:00:18.152 --> 00:00:21.868
Those last two parameters are
for the x and y coordinates of the text

00:00:21.868 --> 00:00:25.558
and we use <i>textSize</i> and <i>fill</i>
to set the fill and the color of the text.

00:00:25.558 --> 00:00:27.995
So if I press <i>Restart</i> a couple of times,

00:00:27.995 --> 00:00:30.245
you can see the random numbers
being generated,

00:00:30.245 --> 00:00:33.632
and you'll see the precision of
these numbers is to three decimal places.

00:00:33.632 --> 00:00:35.105
So here's a question--

00:00:35.105 --> 00:00:38.365
what if I only wanted to generate
a number that's either zero or one?

00:00:38.365 --> 00:00:41.793
Well, we can use
this other function called <i>round</i>,

00:00:41.793 --> 00:00:45.753
and this takes in a number that can
have as many decimals as you want,

00:00:45.753 --> 00:00:47.923
and it rounds it to the nearest integer.

00:00:47.923 --> 00:00:51.828
So I'm just going to go ahead
and make a new variable called <i>integer</i>

00:00:51.828 --> 00:00:53.923
and assign it whatever round gives us.

00:00:53.923 --> 00:00:55.973
We can also draw that integer
to the screen

00:00:55.973 --> 00:00:58.173
with our handy-dandy <i>text</i> function.

00:00:58.173 --> 00:01:00.385
So <i>text(integer</i>

00:01:00.385 --> 00:01:06.235
--we'll put it maybe at 160
and 350. Nice.

00:01:06.235 --> 00:01:12.115
So this shows us that round of 0.2314
rounds down to zero,

00:01:12.115 --> 00:01:18.007
and if I put in something like 4.6,
that would round me up to 5. Neat.

00:01:18.007 --> 00:01:20.586
So if I wanted to randomly generate
a zero or a one,

00:01:20.586 --> 00:01:24.256
I can take this random decimal
that we're generating,

00:01:24.256 --> 00:01:27.366
that falls between zero and one,

00:01:28.006 --> 00:01:30.596
and stick it right into
that <i>round</i> function.

00:01:30.596 --> 00:01:32.991
So just like this:
I'm going to grab this number

00:01:32.991 --> 00:01:35.411
and plop it down here.

00:01:35.411 --> 00:01:37.013
And now you can see

00:01:37.013 --> 00:01:39.543
that whenever we generate
a number that's less than 0.5,

00:01:39.543 --> 00:01:41.353
it gets rounded down to zero,

00:01:41.353 --> 00:01:44.777
and whenever we generate a number
that is greater than or equal to 0.5,

00:01:44.777 --> 00:01:46.747
it gets rounded up to one.

00:01:47.597 --> 00:01:51.318
Maybe you can start to see the beginning
of some sort of coin-flip game here

00:01:51.318 --> 00:01:54.918
where if you flip a zero,
your friend gives you a dollar,

00:01:54.918 --> 00:01:57.588
and if you flip a one,
your friend gives you ten dollars.

00:01:57.588 --> 00:01:58.734
Great game, right?

00:01:58.734 --> 00:02:01.538
In fact, let's go ahead
and illustrate this coin-flipping game

00:02:01.538 --> 00:02:03.328
with some super realistic coins

00:02:03.328 --> 00:02:06.088
that just happen to look
like really boring ellipses.

00:02:06.088 --> 00:02:10.604
Just like this: I'm going to draw
an ellipse in the middle of our canvas

00:02:10.604 --> 00:02:12.294
and that's going to be our coin.

00:02:12.294 --> 00:02:15.284
Ooh! It's covering the text.
Let's scoot that up a bit.

00:02:16.774 --> 00:02:20.709
Great, and I have this idea
where, if I flip a zero,

00:02:20.709 --> 00:02:23.249
I'm going to show
the purple side of the coin,

00:02:23.249 --> 00:02:28.079
so to make the coin purple,
I can just fill it with some purple.

00:02:28.739 --> 00:02:32.948
If I flip a 1,
I'll show the yellow side of the coin

00:02:32.948 --> 00:02:35.308
so it'll be a purple
and yellow-sided coin.

00:02:35.308 --> 00:02:37.778
And luckily, with our impressive
knowledge of if-statements

00:02:37.788 --> 00:02:39.333
this is super easy.

00:02:39.333 --> 00:02:44.571
We can just say if integer equals zero,

00:02:44.571 --> 00:02:48.221
(remember we use
three equals signs to check for equality),

00:02:48.221 --> 00:02:53.111
then we will fill the ellipse purple.

00:02:53.541 --> 00:02:57.642
Then, if integer is equal to one,

00:02:58.872 --> 00:03:01.122
we have a different fill function

00:03:02.282 --> 00:03:04.342
and we'll make that one yellow.

00:03:06.302 --> 00:03:09.428
Great. And it works! Woo hoo!

00:03:09.428 --> 00:03:11.408
But let's think about this for a second--

00:03:11.408 --> 00:03:14.248
<i>integer</i> here will only ever
be zero or one, right?

00:03:14.248 --> 00:03:15.768
We designed it that way

00:03:15.768 --> 00:03:18.932
so that means
that either this statement will be true,

00:03:18.932 --> 00:03:21.200
or this statement will be true

00:03:21.200 --> 00:03:22.294
Always.

00:03:22.294 --> 00:03:24.680
We've covered every possible case here, which means

00:03:24.680 --> 00:03:27.670
we can start thinking about
our decision-making a little differently.

00:03:27.670 --> 00:03:32.368
That is, if integer is equal to zero,
we will fill it purple,

00:03:33.018 --> 00:03:35.298
otherwise, we'll fill yellow.

00:03:35.928 --> 00:03:38.239
So, do you see
how we don't have to say anything

00:03:38.239 --> 00:03:40.589
about integer being one
in that second case?

00:03:40.589 --> 00:03:41.805
All we have to say is,

00:03:41.805 --> 00:03:44.875
"If integer is zero, do this;
otherwise, do that",

00:03:44.875 --> 00:03:47.983
and, in programming,
the way we say "otherwise" is "else."

00:03:47.983 --> 00:03:49.241
So watch this:

00:03:49.241 --> 00:03:53.101
I'm just going to replace this second
if-condition with the word "else"

00:03:53.101 --> 00:03:54.622
and what this means is,

00:03:54.622 --> 00:03:57.532
if the stuff inside these parentheses
is true,

00:03:57.532 --> 00:03:59.652
then run the code in these brackets.

00:03:59.652 --> 00:04:02.427
Otherwise, run the code in <i>these</i> brackets.

00:04:02.797 --> 00:04:06.260
Sometimes we'll even put the "else"
on the same line as that closing bracket

00:04:06.260 --> 00:04:07.720
just to remind ourselves

00:04:07.720 --> 00:04:10.310
that these two blocks of code
are very, very connected.

00:04:10.310 --> 00:04:13.801
You can't have an <i>else</i> block
unless you've just had an <i>if</i> block.

00:04:13.801 --> 00:04:14.951
Got it?

00:04:15.411 --> 00:04:18.131
This will also help you remember

00:04:18.131 --> 00:04:23.141
to not put something in between
the two blocks, like <i>var y equals zero</i>,

00:04:23.141 --> 00:04:26.291
and that would just break everything!
So don't do that.

00:04:27.031 --> 00:04:29.900
Great. So now we know about if/else
which is really good

00:04:29.900 --> 00:04:32.660
when we are deciding
between two possible things to do.

00:04:32.660 --> 00:04:34.458
But what if we have more?

00:04:34.458 --> 00:04:36.878
What if I generated
an integer between zero and two

00:04:36.878 --> 00:04:40.408
and then I had three possibilities:
zero, one, or two? What then?

00:04:40.408 --> 00:04:42.978
Duh duh duh! To be continued!