1 00:00:01,336 --> 00:00:04,608 So now that we learned how to use text, let's get a bit more fancy. 2 00:00:04,608 --> 00:00:06,008 The first fancy thing is that now we're 3 00:00:06,008 --> 00:00:08,278 going to start using the word "string". 4 00:00:08,278 --> 00:00:10,610 You might think, "String? That's what my cat plays with." 5 00:00:10,610 --> 00:00:12,725 But for programmers, string is a special name 6 00:00:12,725 --> 00:00:14,580 we use for bits of text. 7 00:00:14,580 --> 00:00:16,566 You can think of it like a string of characters, if it helps. 8 00:00:16,566 --> 00:00:19,073 Your name is a string, your school's name is a string, 9 00:00:19,073 --> 00:00:22,100 and every text message you've ever sent is also a string. 10 00:00:22,100 --> 00:00:25,498 Basically, just think, string equals text. 11 00:00:25,978 --> 00:00:28,565 So we used drawing and coloring with strings already. 12 00:00:28,565 --> 00:00:30,987 Could we use variables with strings? Of course! 13 00:00:30,987 --> 00:00:33,225 Just like you might normally put a number into a variable, 14 00:00:33,225 --> 00:00:35,233 you could also put a string into a variable. 15 00:00:35,453 --> 00:00:37,391 We just say something like, 16 00:00:37,391 --> 00:00:40,965 "var myName = (whatever your name is)" so "Sophia"; 17 00:00:40,965 --> 00:00:42,599 remembering those quotes. 18 00:00:42,599 --> 00:00:44,484 And then we put the variable myName 19 00:00:44,484 --> 00:00:46,799 into the quoted text instead of writing "Sophia" directly, 20 00:00:46,799 --> 00:00:48,536 like we were doing before. 21 00:00:48,536 --> 00:00:50,528 And this way though it looks the same right now, 22 00:00:50,528 --> 00:00:53,300 we can actually, write this multiple times 23 00:00:53,300 --> 00:00:55,333 you know, one time there, one time there, 24 00:00:55,333 --> 00:00:57,316 you know maybe we can be a little artistical. 25 00:00:57,316 --> 00:00:59,402 And then all you have to do is to change this one variable 26 00:00:59,402 --> 00:01:02,008 to be your name, and then you have 27 00:01:02,008 --> 00:01:04,025 your name written three times. 28 00:01:04,025 --> 00:01:07,233 So, just flipping that back, what if we want to get 29 00:01:07,233 --> 00:01:09,541 kind of crazy, can we start adding together strings? 30 00:01:09,541 --> 00:01:12,819 Like you remember when we maybe started adding together variables? 31 00:01:12,819 --> 00:01:14,581 Well we can actually do that, 32 00:01:14,581 --> 00:01:17,063 the computer will just stick the two strings together. 33 00:01:17,063 --> 00:01:19,547 So for example, you know, we can get rid of this, 34 00:01:19,547 --> 00:01:22,248 to do it only one time and then we can use this other variable 35 00:01:22,248 --> 00:01:27,080 message that's going to be my name, plus say a bunch of exclamation marks. 36 00:01:27,750 --> 00:01:30,305 And if we stick message into text to draw this variable 37 00:01:30,305 --> 00:01:32,830 instead of my name, we can see that 38 00:01:32,830 --> 00:01:34,641 all it did is just stuck those exclamation marks 39 00:01:34,641 --> 00:01:37,312 that we had onto the back of my name. 40 00:01:38,062 --> 00:01:40,172 And we can even make this a little bit more exciting, 41 00:01:40,172 --> 00:01:42,962 if we wanted to write message, say, twice. 42 00:01:42,962 --> 00:01:46,068 So this looks pretty reasonable, you know adding strings means 43 00:01:46,068 --> 00:01:49,034 you stick one string onto the back of the other string. 44 00:01:49,034 --> 00:01:51,627 But you might be thinking, can we get really crazy? 45 00:01:51,627 --> 00:01:54,550 And start multiplying or dividing or subtracting strings? 46 00:01:54,550 --> 00:01:57,348 Could we do that? Well no we can't, 47 00:01:57,348 --> 00:01:59,326 with strings we can only add them. 48 00:01:59,326 --> 00:02:01,754 You're right that we could divide and subtract with number variables, 49 00:02:01,754 --> 00:02:04,662 but string variables only allow us to add. 50 00:02:04,662 --> 00:02:07,444 But still being curious and asking those sorts of questions, 51 00:02:07,444 --> 00:02:09,526 is the right attitude in programming. 52 00:02:09,526 --> 00:02:11,859 You might think, "What would it mean to divide a string?" 53 00:02:13,134 --> 00:02:16,930 So we can also use animation and mouse interaction with text strings. 54 00:02:17,500 --> 00:02:20,291 For example, we can make the string follow the mouse around. 55 00:02:20,291 --> 00:02:23,186 Just by sticking it in a draw loop like we did with the rectangles. 56 00:02:23,476 --> 00:02:26,425 So if you think about how to do this, we would say var draw, 57 00:02:26,795 --> 00:02:29,664 and then we'll stick all of this, right in here. 58 00:02:29,664 --> 00:02:32,905 This probably looks really familiar, from "intro to animation." 59 00:02:32,905 --> 00:02:36,332 And you might think, alright, well to make it follow the mouse around, 60 00:02:36,332 --> 00:02:39,459 we certainly need to use mouseX, and mouseY 61 00:02:39,459 --> 00:02:43,188 and there you have it we're actually painting with our name. 62 00:02:43,188 --> 00:02:46,823 And of course if we wanted, we could easily set a background, 63 00:02:46,823 --> 00:02:50,828 say to, you know, a nice light blue. 64 00:02:50,828 --> 00:02:55,082 And now we have that the text is just following the mouse around, 65 00:02:55,082 --> 00:02:56,796 just like we saw with the rectangles. 66 00:02:57,186 --> 00:03:00,133 And now as a last fun trick, let's use animation, 67 00:03:00,133 --> 00:03:02,640 and make the text size grow and grow and grow. 68 00:03:02,640 --> 00:03:06,229 So, here we're setting the textSize to 30, as we learned in variables 69 00:03:06,229 --> 00:03:10,794 instead of using 30, we could also say, var howBig equals 30; 70 00:03:10,794 --> 00:03:14,199 and then use this variable instead of doing 30 directly. 71 00:03:14,649 --> 00:03:16,417 Well that's the exact same thing, 72 00:03:16,417 --> 00:03:18,646 and we need to obviously be changing something 73 00:03:18,646 --> 00:03:20,485 in order to get an animation. 74 00:03:20,485 --> 00:03:25,424 So we can do that by saying, how big equals how big plus one 75 00:03:25,424 --> 00:03:28,314 which actually means, if you remember howBig gets, 76 00:03:28,314 --> 00:03:32,214 you know how big it was before, plus one to make it a little bit larger 77 00:03:32,214 --> 00:03:34,754 and now we just need to restart the program, 78 00:03:34,754 --> 00:03:37,495 and here we have that as we're moving the mouse around, 79 00:03:37,495 --> 00:03:39,856 the text size is growing and growing and growing and growing 80 00:03:39,856 --> 00:03:41,939 because of this line right here. 81 00:03:43,262 --> 00:03:44,716 And you know, just on your own, 82 00:03:44,716 --> 00:03:47,590 you might think, okay how can we make it grow faster? 83 00:03:48,086 --> 00:03:51,653 So now, not only do you know how to manipulate shapes with code, 84 00:03:51,653 --> 00:03:54,771 but you can also use text with code as well.