Terrific Text Part 2
-
0:01 - 0:05So now that we learned how to use text,
let's get a bit more fancy. -
0:05 - 0:06The first fancy thing is that now we're
-
0:06 - 0:08going to start using the word "string".
-
0:08 - 0:11You might think, "String?
That's what my cat plays with." -
0:11 - 0:13But for programmers,
string is a special name -
0:13 - 0:15we use for bits of text.
-
0:15 - 0:17You can think of it like
a string of characters, if it helps. -
0:17 - 0:19Your name is a string,
your school's name is a string, -
0:19 - 0:22and every text message
you've ever sent is also a string. -
0:22 - 0:25Basically, just think, string equals text.
-
0:26 - 0:29So we used drawing
and coloring with strings already. -
0:29 - 0:31Could we use variables
with strings? Of course! -
0:31 - 0:33Just like you might normally
put a number into a variable, -
0:33 - 0:35you could also put a string
into a variable. -
0:35 - 0:37We just say something like,
-
0:37 - 0:41"var myName = (whatever your name is)"
so "Sophia"; -
0:41 - 0:43remembering those quotes.
-
0:43 - 0:44And then we put the variable myName
-
0:44 - 0:47into the quoted text
instead of writing "Sophia" directly, -
0:47 - 0:49like we were doing before.
-
0:49 - 0:51And this way though it
looks the same right now, -
0:51 - 0:53we can actually,
write this multiple times -
0:53 - 0:55you know, one time there, one time there,
-
0:55 - 0:57you know maybe we
can be a little artistical. -
0:57 - 0:59And then all you have to do
is to change this one variable -
0:59 - 1:02to be your name, and then you have
-
1:02 - 1:04your name written three times.
-
1:04 - 1:07So, just flipping that back,
what if we want to get -
1:07 - 1:10kind of crazy, can we
start adding together strings? -
1:10 - 1:13Like you remember when we maybe
started adding together variables? -
1:13 - 1:15Well we can actually do that,
-
1:15 - 1:17the computer will just
stick the two strings together. -
1:17 - 1:20So for example, you know,
we can get rid of this, -
1:20 - 1:22to do it only one time
and then we can use this other variable -
1:22 - 1:27message that's going to be my name,
plus say a bunch of exclamation marks. -
1:28 - 1:30And if we stick message into text
to draw this variable -
1:30 - 1:33instead of my name,
we can see that -
1:33 - 1:35all it did is just stuck those exclamation marks
-
1:35 - 1:37that we had onto the back of my name.
-
1:38 - 1:40And we can even make this
a little bit more exciting, -
1:40 - 1:43if we wanted to write message, say, twice.
-
1:43 - 1:46So this looks pretty reasonable,
you know adding strings means -
1:46 - 1:49you stick one string
onto the back of the other string. -
1:49 - 1:52But you might be thinking,
can we get really crazy? -
1:52 - 1:55And start multiplying or dividing
or subtracting strings? -
1:55 - 1:57Could we do that? Well no we can't,
-
1:57 - 1:59with strings we can only add them.
-
1:59 - 2:02You're right that we could divide
and subtract with number variables, -
2:02 - 2:05but string variables only allow us to add.
-
2:05 - 2:07But still being curious and asking
those sorts of questions, -
2:07 - 2:10is the right attitude in programming.
-
2:10 - 2:12You might think, "What would
it mean to divide a string?" -
2:13 - 2:17So we can also use animation
and mouse interaction with text strings. -
2:18 - 2:20For example, we can make the string
follow the mouse around. -
2:20 - 2:23Just by sticking it in a draw loop
like we did with the rectangles. -
2:23 - 2:26So if you think about how to do this,
we would say var draw, -
2:27 - 2:30and then we'll stick all of this, right in here.
-
2:30 - 2:33This probably looks really familiar,
from "intro to animation." -
2:33 - 2:36And you might think, alright, well to
make it follow the mouse around, -
2:36 - 2:39we certainly need to use
mouseX, and mouseY -
2:39 - 2:43and there you have it we're
actually painting with our name. -
2:43 - 2:47And of course if we wanted,
we could easily set a background, -
2:47 - 2:51say to, you know, a nice light blue.
-
2:51 - 2:55And now we have that the text
is just following the mouse around, -
2:55 - 2:57just like we saw with the rectangles.
-
2:57 - 3:00And now as a last fun trick,
let's use animation, -
3:00 - 3:03and make the text size
grow and grow and grow. -
3:03 - 3:06So, here we're setting the textSize to 30,
as we learned in variables -
3:06 - 3:11instead of using 30, we could also say,
var howBig equals 30; -
3:11 - 3:14and then use this variable
instead of doing 30 directly. -
3:15 - 3:16Well that's the exact same thing,
-
3:16 - 3:19and we need to obviously
be changing something -
3:19 - 3:20in order to get an animation.
-
3:20 - 3:25So we can do that by saying,
how big equals how big plus one -
3:25 - 3:28which actually means,
if you remember howBig gets, -
3:28 - 3:32you know how big it was before,
plus one to make it a little bit larger -
3:32 - 3:35and now we just need to
restart the program, -
3:35 - 3:37and here we have that
as we're moving the mouse around, -
3:37 - 3:40the text size is growing and growing
and growing and growing -
3:40 - 3:42because of this line right here.
-
3:43 - 3:45And you know, just on your own,
-
3:45 - 3:48you might think, okay how
can we make it grow faster? -
3:48 - 3:52So now, not only do you know how
to manipulate shapes with code, -
3:52 - 3:55but you can also use text with code as well.
- Title:
- Terrific Text Part 2
- Description:
-
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/ - Video Language:
- English
- Duration:
- 03:57
Jennifer Fennerl edited English subtitles for Terrific Text Part 2 | ||
Jennifer Fennerl edited English subtitles for Terrific Text Part 2 | ||
Jennifer Fennerl edited English subtitles for Terrific Text Part 2 | ||
Uni Mikkelsen edited English subtitles for Terrific Text Part 2 | ||
Uni Mikkelsen edited English subtitles for Terrific Text Part 2 |