WEBVTT

00:00:00.236 --> 00:00:02.719
So we've been doing
a lot of drawing so far.

00:00:02.719 --> 00:00:05.193
But we haven't talked about
something as simple as say,

00:00:05.193 --> 00:00:07.595
writing your name;
that's what this lesson is about, text.

00:00:07.595 --> 00:00:10.049
So why might you want to use text?

00:00:10.049 --> 00:00:12.303
Well maybe we want to show 
the score in a game

00:00:12.303 --> 00:00:14.739
or have characters talk, 
or just to make our name grow

00:00:14.739 --> 00:00:16.305
and shrink and change colors.

00:00:16.305 --> 00:00:18.654
So let's go ahead and try and say "hello."


00:00:18.654 --> 00:00:24.353
Say "text(hello)" and we have
this weird error message that pops up,

00:00:24.353 --> 00:00:27.424
saying that "hello is not defined,"
what does that mean?

00:00:27.424 --> 00:00:29.431
Well, the problem is that the program

00:00:29.431 --> 00:00:31.058
thinks that "hello" is a variable,

00:00:31.058 --> 00:00:33.715
and it kind of makes sense 
from the program's perspective

00:00:33.715 --> 00:00:36.222
because maybe "hello" could be a variable, 
how would it know?

00:00:36.222 --> 00:00:38.991
So how do we tell our program
that it's actually text?

00:00:38.991 --> 00:00:41.350
So that's easy, we just have to remember

00:00:41.350 --> 00:00:43.159
to put these quotations marks around it.

00:00:43.159 --> 00:00:45.083
And that says 
that no, this is not a variable,

00:00:45.083 --> 00:00:46.457
and in fact this is text

00:00:46.457 --> 00:00:48.153
or we want you to display it as text,

00:00:48.153 --> 00:00:50.226
and you can remember this
by thinking of a book,

00:00:50.226 --> 00:00:51.739
where all the characters talk,

00:00:51.739 --> 00:00:53.694
and there are quotes
around what they are saying.

00:00:53.694 --> 00:00:56.162
And similarly, when you want 
the program to say something,

00:00:56.162 --> 00:00:58.400
that text has to have 
these qutoes around it.

00:00:58.400 --> 00:01:00.899
And this is actually really important
and easy to mess up.

00:01:00.899 --> 00:01:03.891
So i'm just going to say it again,
anytime you want to use text

00:01:03.891 --> 00:01:05.753
in your program you always have to use

00:01:05.753 --> 00:01:07.526
these quotation marks around it.

00:01:07.526 --> 00:01:10.112
Otherwise you're going to get
some really weird error messages.

00:01:10.112 --> 00:01:12.606
And remember, if you do see
those weird error messages,

00:01:12.606 --> 00:01:15.359
just be sure to double check
that you are remembering to use quotes.

00:01:15.359 --> 00:01:17.232
Great! so now we're using quotation marks,

00:01:17.232 --> 00:01:18.755
and we don't get an error anymore.

00:01:18.755 --> 00:01:20.928
But you might have noticed
that nothing is happening,

00:01:20.928 --> 00:01:22.217
and it's still blank,

00:01:22.217 --> 00:01:24.890
but what is kind of strange is
if we set a "background,"

00:01:24.890 --> 00:01:29.114
something, say just a red, 
then we see that it is actually there.

00:01:29.114 --> 00:01:33.120
It's just in white, so the problem is 
if we think about it,

00:01:33.120 --> 00:01:36.106
that we were writing white text, 
onto a white background,

00:01:36.106 --> 00:01:37.952
and that's why we couldn't see it.

00:01:37.952 --> 00:01:40.451
So that seems a little bit silly, 
why were you writing

00:01:40.451 --> 00:01:42.940
white text onto white background?

00:01:42.940 --> 00:01:45.893
Well, we could just change it, 
because we learned how to set

00:01:45.893 --> 00:01:47.006
the fill of something.

00:01:47.006 --> 00:01:49.891
And just like we can set the fill 
of a rectangle or a line,

00:01:49.891 --> 00:01:51.796
we can set the fill of text to anything

00:01:51.796 --> 00:01:54.231
just like before, and then there it is!

00:01:54.231 --> 00:01:56.410
It shows up without 
needing the background,

00:01:56.410 --> 00:02:00.609
so let's look a little bit more
to how this text thing is working.

00:02:00.609 --> 00:02:02.324
The first part, is obvious enough,

00:02:02.324 --> 00:02:04.419
it's just whatever text we want to write.

00:02:04.419 --> 00:02:06.584
The next part, if we change it,

00:02:06.584 --> 00:02:08.949
we can see that it's basically
just how far over,

00:02:08.949 --> 00:02:11.776
and the next one
is just how far up and down.

00:02:11.776 --> 00:02:14.822
That probably looks really familiar
from when we were just

00:02:14.822 --> 00:02:15.868
drawing rectangles.

00:02:15.868 --> 00:02:17.620
One thing that's a little bit tricky

00:02:17.620 --> 00:02:19.542
is that text has these two coordinates

00:02:19.542 --> 00:02:24.256
specify the lower left part, 
so this corner of the text.

00:02:24.256 --> 00:02:27.222
While with rectangles
it's the upper left, this corner.

00:02:27.222 --> 00:02:30.280
And that can seem like it was
just designed to confuse you,

00:02:30.280 --> 00:02:32.761
but it's just something
you kind of have to remember.

00:02:32.761 --> 00:02:34.913
And we can even experiment 
and see it for ourselves,

00:02:34.955 --> 00:02:39.219
by we can set this to say, "height,"
and we can see that,

00:02:39.219 --> 00:02:42.448
yeah, it is setting the height
to be this lower left coordinate.

00:02:44.358 --> 00:02:46.225
Or we can set it to zero,

00:02:46.225 --> 00:02:50.002
and you think what should we expect then?

00:02:50.002 --> 00:02:53.391
And we don't see it at all, 
but if we slowly start increasing this,

00:02:53.391 --> 00:02:56.326
we can see that, yeah it is kind of
just like peeking out there.

00:02:56.326 --> 00:02:59.782
Because again, that lower left coordinate
is what we're specifying,

00:02:59.782 --> 00:03:01.754
not the upper left.

00:03:01.754 --> 00:03:05.611
Okay, so enough of analyzing
this text thing,

00:03:05.611 --> 00:03:07.278
let's go ahead and make it better.

00:03:07.278 --> 00:03:09.514
For example, 
let's start to make it bigger,

00:03:09.514 --> 00:03:12.435
we can do that with "textSize" 
which just tells the program

00:03:12.435 --> 00:03:13.886
how big to draw the text.

00:03:13.886 --> 00:03:16.099
And we can make it "30,"
which is pretty big,

00:03:16.099 --> 00:03:17.688
we can make it even bigger,

00:03:17.688 --> 00:03:20.457
or we can make it really, 
really, really, really small.

00:03:20.457 --> 00:03:23.034
Whatever we want, so let's go ahead
and draw your name

00:03:23.034 --> 00:03:25.641
and maybe a little message
about yourself underneath.

00:03:25.641 --> 00:03:28.646
Since I don't know your name,
I'm just going to draw my name.

00:03:28.646 --> 00:03:30.871
You can switch it to yours in a moment.

00:03:30.871 --> 00:03:34.264
So using what we just learned, 
we can say "text("Sophia")"

00:03:34.264 --> 00:03:35.887
and there my name is.

00:03:35.887 --> 00:03:38.135
And then maybe want to put 
a little message underneath,

00:03:38.135 --> 00:03:43.493
like, "I like puppies
and guitars and coding."

00:03:43.493 --> 00:03:46.709
So that's great, 
except that we obviously need

00:03:46.709 --> 00:03:48.945
to change the positions 
so they don't overlap.

00:03:48.945 --> 00:03:51.647
And oh no, no, 
that's kind of a long string of text,

00:03:51.647 --> 00:03:55.449
so let's change it
to be a smaller text size.

00:03:56.499 --> 00:03:58.633
And there we go, that's pretty good.

00:03:58.633 --> 00:04:00.964
Except, I don't know,
it's kind of boring having

00:04:00.964 --> 00:04:04.393
them both be blue,
so let's just change the "fill,"

00:04:04.393 --> 00:04:06.932
and let's make it maybe a nice, 
hmm I don't know,

00:04:06.932 --> 00:04:09.804
maybe a nice, like, purple.

00:04:09.804 --> 00:04:13.126
Alright, and there you go, 
that's all there is

00:04:13.126 --> 00:04:16.099
to drawing text and changing 
colors and changing size.