Terrific Text Part 1

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

So we've been doing
a lot of drawing so far.

But we haven't talked about
something as simple as say,

writing your name;
that's what this lesson is about, text.

So why might you want to use text?

Well maybe we want to show
the score in a game

or have characters talk,
or just to make our name grow

and shrink and change colors.

So let's go ahead and try and say "hello."

Say "text(hello)" and we have
this weird error message that pops up,

saying that "hello is not defined,"
what does that mean?

Well, the problem is that the program

thinks that "hello" is a variable,

and it kind of makes sense
from the program's perspective

because maybe "hello" could be a variable,
how would it know?

So how do we tell our program
that it's actually text?

So that's easy, we just have to remember

to put these quotations marks around it.

And that says
that no, this is not a variable,

and in fact this is text

or we want you to display it as text,

and you can remember this
by thinking of a book,

where all the characters talk,

and there are quotes
around what they are saying.

And similarly, when you want
the program to say something,

that text has to have
these qutoes around it.

And this is actually really important
and easy to mess up.

So i'm just going to say it again,
anytime you want to use text

in your program you always have to use

these quotation marks around it.

Otherwise you're going to get
some really weird error messages.

And remember, if you do see
those weird error messages,

just be sure to double check
that you are remembering to use quotes.

Great! so now we're using quotation marks,

and we don't get an error anymore.

But you might have noticed
that nothing is happening,

and it's still blank,

but what is kind of strange is
if we set a "background,"

something, say just a red,
then we see that it is actually there.

It's just in white, so the problem is
if we think about it,

that we were writing white text,
onto a white background,

and that's why we couldn't see it.

So that seems a little bit silly,
why were you writing

white text onto white background?

Well, we could just change it,
because we learned how to set

the fill of something.

And just like we can set the fill
of a rectangle or a line,

we can set the fill of text to anything

just like before, and then there it is!

It shows up without
needing the background,

so let's look a little bit more
to how this text thing is working.

The first part, is obvious enough,

it's just whatever text we want to write.

The next part, if we change it,

we can see that it's basically
just how far over,

and the next one
is just how far up and down.

That probably looks really familiar
from when we were just

drawing rectangles.

One thing that's a little bit tricky

is that text has these two coordinates

specify the lower left part,
so this corner of the text.

While with rectangles
it's the upper left, this corner.

And that can seem like it was
just designed to confuse you,

but it's just something
you kind of have to remember.

And we can even experiment
and see it for ourselves,

by we can set this to say, "height,"
and we can see that,

yeah, it is setting the height
to be this lower left coordinate.

Or we can set it to zero,

and you think what should we expect then?

And we don't see it at all,
but if we slowly start increasing this,

we can see that, yeah it is kind of
just like peeking out there.

Because again, that lower left coordinate
is what we're specifying,

not the upper left.

Okay, so enough of analyzing
this text thing,

let's go ahead and make it better.

For example,
let's start to make it bigger,

we can do that with "textSize"
which just tells the program

how big to draw the text.

And we can make it "30,"
which is pretty big,

we can make it even bigger,

or we can make it really,
really, really, really small.

Whatever we want, so let's go ahead
and draw your name

and maybe a little message
about yourself underneath.

Since I don't know your name,
I'm just going to draw my name.

You can switch it to yours in a moment.

So using what we just learned,
we can say "text("Sophia")"

and there my name is.

And then maybe want to put
a little message underneath,

like, "I like puppies
and guitars and coding."

So that's great,
except that we obviously need

to change the positions
so they don't overlap.

And oh no, no,
that's kind of a long string of text,

so let's change it
to be a smaller text size.

And there we go, that's pretty good.

Except, I don't know,
it's kind of boring having

them both be blue,
so let's just change the "fill,"

and let's make it maybe a nice,
hmm I don't know,

maybe a nice, like, purple.

Alright, and there you go,
that's all there is

to drawing text and changing
colors and changing size.