1
00:00:00,236 --> 00:00:02,719
So we've been doing
a lot of drawing so far.

2
00:00:02,719 --> 00:00:05,193
But we haven't talked about
something as simple as say,

3
00:00:05,193 --> 00:00:07,595
writing your name;
that's what this lesson is about, text.

4
00:00:07,595 --> 00:00:10,049
So why might you want to use text?

5
00:00:10,049 --> 00:00:12,303
Well maybe we want to show 
the score in a game

6
00:00:12,303 --> 00:00:14,739
or have characters talk, 
or just to make our name grow

7
00:00:14,739 --> 00:00:16,305
and shrink and change colors.

8
00:00:16,305 --> 00:00:18,654
So let's go ahead and try and say "hello."


9
00:00:18,654 --> 00:00:24,353
Say "text(hello)" and we have
this weird error message that pops up,

10
00:00:24,353 --> 00:00:27,424
saying that "hello is not defined,"
what does that mean?

11
00:00:27,424 --> 00:00:29,431
Well, the problem is that the program

12
00:00:29,431 --> 00:00:31,058
thinks that "hello" is a variable,

13
00:00:31,058 --> 00:00:33,715
and it kind of makes sense 
from the program's perspective

14
00:00:33,715 --> 00:00:36,222
because maybe "hello" could be a variable, 
how would it know?

15
00:00:36,222 --> 00:00:38,991
So how do we tell our program
that it's actually text?

16
00:00:38,991 --> 00:00:41,350
So that's easy, we just have to remember

17
00:00:41,350 --> 00:00:43,159
to put these quotations marks around it.

18
00:00:43,159 --> 00:00:45,083
And that says 
that no, this is not a variable,

19
00:00:45,083 --> 00:00:46,457
and in fact this is text

20
00:00:46,457 --> 00:00:48,153
or we want you to display it as text,

21
00:00:48,153 --> 00:00:50,226
and you can remember this
by thinking of a book,

22
00:00:50,226 --> 00:00:51,739
where all the characters talk,

23
00:00:51,739 --> 00:00:53,694
and there are quotes
around what they are saying.

24
00:00:53,694 --> 00:00:56,162
And similarly, when you want 
the program to say something,

25
00:00:56,162 --> 00:00:58,400
that text has to have 
these qutoes around it.

26
00:00:58,400 --> 00:01:00,899
And this is actually really important
and easy to mess up.

27
00:01:00,899 --> 00:01:03,891
So i'm just going to say it again,
anytime you want to use text

28
00:01:03,891 --> 00:01:05,753
in your program you always have to use

29
00:01:05,753 --> 00:01:07,526
these quotation marks around it.

30
00:01:07,526 --> 00:01:10,112
Otherwise you're going to get
some really weird error messages.

31
00:01:10,112 --> 00:01:12,606
And remember, if you do see
those weird error messages,

32
00:01:12,606 --> 00:01:15,359
just be sure to double check
that you are remembering to use quotes.

33
00:01:15,359 --> 00:01:17,232
Great! so now we're using quotation marks,

34
00:01:17,232 --> 00:01:18,755
and we don't get an error anymore.

35
00:01:18,755 --> 00:01:20,928
But you might have noticed
that nothing is happening,

36
00:01:20,928 --> 00:01:22,217
and it's still blank,

37
00:01:22,217 --> 00:01:24,890
but what is kind of strange is
if we set a "background,"

38
00:01:24,890 --> 00:01:29,114
something, say just a red, 
then we see that it is actually there.

39
00:01:29,114 --> 00:01:33,120
It's just in white, so the problem is 
if we think about it,

40
00:01:33,120 --> 00:01:36,106
that we were writing white text, 
onto a white background,

41
00:01:36,106 --> 00:01:37,952
and that's why we couldn't see it.

42
00:01:37,952 --> 00:01:40,451
So that seems a little bit silly, 
why were you writing

43
00:01:40,451 --> 00:01:42,940
white text onto white background?

44
00:01:42,940 --> 00:01:45,893
Well, we could just change it, 
because we learned how to set

45
00:01:45,893 --> 00:01:47,006
the fill of something.

46
00:01:47,006 --> 00:01:49,891
And just like we can set the fill 
of a rectangle or a line,

47
00:01:49,891 --> 00:01:51,796
we can set the fill of text to anything

48
00:01:51,796 --> 00:01:54,231
just like before, and then there it is!

49
00:01:54,231 --> 00:01:56,410
It shows up without 
needing the background,

50
00:01:56,410 --> 00:02:00,609
so let's look a little bit more
to how this text thing is working.

51
00:02:00,609 --> 00:02:02,324
The first part, is obvious enough,

52
00:02:02,324 --> 00:02:04,419
it's just whatever text we want to write.

53
00:02:04,419 --> 00:02:06,584
The next part, if we change it,

54
00:02:06,584 --> 00:02:08,949
we can see that it's basically
just how far over,

55
00:02:08,949 --> 00:02:11,776
and the next one
is just how far up and down.

56
00:02:11,776 --> 00:02:14,822
That probably looks really familiar
from when we were just

57
00:02:14,822 --> 00:02:15,868
drawing rectangles.

58
00:02:15,868 --> 00:02:17,620
One thing that's a little bit tricky

59
00:02:17,620 --> 00:02:19,542
is that text has these two coordinates

60
00:02:19,542 --> 00:02:24,256
specify the lower left part, 
so this corner of the text.

61
00:02:24,256 --> 00:02:27,222
While with rectangles
it's the upper left, this corner.

62
00:02:27,222 --> 00:02:30,280
And that can seem like it was
just designed to confuse you,

63
00:02:30,280 --> 00:02:32,761
but it's just something
you kind of have to remember.

64
00:02:32,761 --> 00:02:34,913
And we can even experiment 
and see it for ourselves,

65
00:02:34,955 --> 00:02:39,219
by we can set this to say, "height,"
and we can see that,

66
00:02:39,219 --> 00:02:42,448
yeah, it is setting the height
to be this lower left coordinate.

67
00:02:44,358 --> 00:02:46,225
Or we can set it to zero,

68
00:02:46,225 --> 00:02:50,002
and you think what should we expect then?

69
00:02:50,002 --> 00:02:53,391
And we don't see it at all, 
but if we slowly start increasing this,

70
00:02:53,391 --> 00:02:56,326
we can see that, yeah it is kind of
just like peeking out there.

71
00:02:56,326 --> 00:02:59,782
Because again, that lower left coordinate
is what we're specifying,

72
00:02:59,782 --> 00:03:01,754
not the upper left.

73
00:03:01,754 --> 00:03:05,611
Okay, so enough of analyzing
this text thing,

74
00:03:05,611 --> 00:03:07,278
let's go ahead and make it better.

75
00:03:07,278 --> 00:03:09,514
For example, 
let's start to make it bigger,

76
00:03:09,514 --> 00:03:12,435
we can do that with "textSize" 
which just tells the program

77
00:03:12,435 --> 00:03:13,886
how big to draw the text.

78
00:03:13,886 --> 00:03:16,099
And we can make it "30,"
which is pretty big,

79
00:03:16,099 --> 00:03:17,688
we can make it even bigger,

80
00:03:17,688 --> 00:03:20,457
or we can make it really, 
really, really, really small.

81
00:03:20,457 --> 00:03:23,034
Whatever we want, so let's go ahead
and draw your name

82
00:03:23,034 --> 00:03:25,641
and maybe a little message
about yourself underneath.

83
00:03:25,641 --> 00:03:28,646
Since I don't know your name,
I'm just going to draw my name.

84
00:03:28,646 --> 00:03:30,871
You can switch it to yours in a moment.

85
00:03:30,871 --> 00:03:34,264
So using what we just learned, 
we can say "text("Sophia")"

86
00:03:34,264 --> 00:03:35,887
and there my name is.

87
00:03:35,887 --> 00:03:38,135
And then maybe want to put 
a little message underneath,

88
00:03:38,135 --> 00:03:43,493
like, "I like puppies
and guitars and coding."

89
00:03:43,493 --> 00:03:46,709
So that's great, 
except that we obviously need

90
00:03:46,709 --> 00:03:48,945
to change the positions 
so they don't overlap.

91
00:03:48,945 --> 00:03:51,647
And oh no, no, 
that's kind of a long string of text,

92
00:03:51,647 --> 00:03:55,449
so let's change it
to be a smaller text size.

93
00:03:56,499 --> 00:03:58,633
And there we go, that's pretty good.

94
00:03:58,633 --> 00:04:00,964
Except, I don't know,
it's kind of boring having

95
00:04:00,964 --> 00:04:04,393
them both be blue,
so let's just change the "fill,"

96
00:04:04,393 --> 00:04:06,932
and let's make it maybe a nice, 
hmm I don't know,

97
00:04:06,932 --> 00:04:09,804
maybe a nice, like, purple.

98
00:04:09,804 --> 00:04:13,126
Alright, and there you go, 
that's all there is

99
00:04:13,126 --> 00:04:16,099
to drawing text and changing 
colors and changing size.