WEBVTT 00:00:01.565 --> 00:00:04.608 Ahora que aprendimos cómo usar texto, hagamos algo más vistoso. 00:00:04.608 --> 00:00:07.739 La primera cosa vistosa es que ahora empezaremos a usar la palabra "cadena". 00:00:07.739 --> 00:00:10.610 Pudieras pensar: "¿Cadena? Es con lo que juega mi gato". 00:00:10.610 --> 00:00:14.141 Pero para programadores, cadena es un nombre especial que usamos para partes de texto. 00:00:14.141 --> 00:00:16.566 Puedes pensar en esto como una cadena de caracteres, si ayuda. 00:00:16.566 --> 00:00:21.691 Tu nombre es una cadena, el nombre de tu escuela es una cadena y cada mensaje de texto que hayas enviado también lo es. 00:00:21.691 --> 00:00:25.498 Básicamente, sólo piensa que cadena es igual a texto. 00:00:25.498 --> 00:00:28.565 Ya hemos dibujado y coloreado cadenas. 00:00:28.565 --> 00:00:30.987 ¿Podemos usar variables con cadenas? ¡Claro! 00:00:30.987 --> 00:00:34.990 Igual que como normalmente pondrías un número en una variable, también podrías asignarle una cadena a una variable. 00:00:34.990 --> 00:00:42.323 Decimos algo como: "var myName = (tu nombre aquí)" pongo "Sophia"; hay que recordar las comillas. 00:00:42.323 --> 00:00:47.537 Luego ponemos la variable "myName" en el texto entre comillas en lugar de escribir directamente "Sophia", 00:00:47.537 --> 00:00:48.906 como hicimos antes. 00:00:48.906 --> 00:00:53.377 De esta forma se ve igual ahora, pero podemos escribir esto varias veces. 00:00:53.377 --> 00:00:56.652 Ya sabes, una vez aquí, otra aquí, tal vez podamos ser un poco artísticos. 00:00:56.652 --> 00:01:01.701 Lo único que tienes que hacer después, es cambiar esta variable para que sea tu nombre y entonces tienes 00:01:01.701 --> 00:01:03.765 tu nombre escrito tres veces. 00:01:03.765 --> 00:01:10.070 Sólo para variar, ¿qué tal si queremos alocarnos? ¿podemos empezar a sumar cadenas entre sí? 00:01:10.070 --> 00:01:12.429 Como ¿tal vez recuerdas cuando empezamos a sumar variables entre sí? 00:01:12.429 --> 00:01:16.606 Bueno, de hecho, podemos hacerlo. La computadora sólo unirá las dos cadenas. 00:01:16.606 --> 00:01:20.362 Por ejemplo: bueno, deshagámonos de esto, para hacerlo sólo una vez, 00:01:20.362 --> 00:01:27.590 después podemos usar esta otra variable, "message" que será "myName" más, digamos, un montón de signos de exclamación. 00:01:27.590 --> 00:01:31.313 Y si ponemos "message" en el texto para dibujar esta variable en vez de "myName" 00:01:31.313 --> 00:01:37.117 podemos ver que lo que hizo fue pegar, después de mi nombre, esos signos de exclamación. 00:01:37.117 --> 00:01:42.345 Podemos hacer esto un poco más emocionante si quisiéramos escribir "message", digamos, dos veces. 00:01:42.345 --> 00:01:48.904 Esto parece muy razonable, añadir cadenas significa que pegas una cadena después de la otra. 00:01:48.904 --> 00:01:54.500 Pudieras estar pensando: ¿podemos alocarnos de verdad y empezar a multiplicar, dividir o restar cadenas? 00:01:54.500 --> 00:01:59.163 ¿Podríamos? Bueno, no podemos. Con las cadenas sólo podemos sumarlas. 00:01:59.163 --> 00:02:04.136 Tienes razón en cuanto a que podemos sumar y dividir con variables numéricas, pero variables de cadenas sólo se pueden sumar. 00:02:04.136 --> 00:02:09.220 Pero, ser curioso y hacer este tipo de preguntas es la actitud correcta al programar. 00:02:09.220 --> 00:02:12.519 Podrías pensar: "¿qué significaría dividir una cadena?" 00:02:12.519 --> 00:02:16.930 También podemos usar animación e interacción del ratón con cadenas de texto. 00:02:16.930 --> 00:02:20.291 Por ejemplo, podemos hacer que la cadena siga al ratón. 00:02:20.291 --> 00:02:23.186 Sólo con pegarlo en un ciclo de dibujo como hicimos con los rectángulos. 00:02:23.186 --> 00:02:29.634 Entonces, si piensas acerca de cómo hacer esto, podríamos decir "var draw", luego pegamos todo esto justo aquí. 00:02:29.634 --> 00:02:32.905 Probablemente se ve muy familiar a "Introducción a la animación". 00:02:32.905 --> 00:02:39.161 Y pudieras pensar: bueno, para hacer que siga al ratón ciertamente necesitamos usar "mouseX" y "mouseY". 00:02:39.161 --> 00:02:43.188 Y ahí lo tienes, realmente estamos pintando con nuestro nombre. 00:02:43.188 --> 00:02:49.965 Claro que, si queremos, podríamos cambiar de fondo fácilmente, digamos a un buen azul claro. 00:02:49.965 --> 00:02:57.395 Y ahora tenemos que el texto sólo sigue al ratón, justo como vimos con los rectángulos. 00:02:57.395 --> 00:03:02.232 Ahora, como último y divertido truco, usemos la animación y hagamos que el tamaño del texto crezca y crezca y crezca. 00:03:02.232 --> 00:03:06.229 Vamos a configurar aquí textSize a 30. Como aprendimos en variables 00:03:06.229 --> 00:03:13.723 en lugar de usar 30, también podemos decir: "var howBig = 30;" y usar esta variable en lugar del 30 directamente. 00:03:13.723 --> 00:03:19.925 Bueno, eso es lo mismo y necesitamos, obviamente, estar cambiando algo para obtener una animación. 00:03:19.925 --> 00:03:25.254 Podemos hacerlo diciendo "howBig = howBig + 1". 00:03:25.254 --> 00:03:31.585 Lo que significa, si recuerdas, "howBig" contiene lo que era "howBig" más uno para hacerlo un poco más grande. 00:03:31.585 --> 00:03:35.694 Ahora sólo necesitamos reiniciar el programa y tenemos que 00:03:35.694 --> 00:03:39.974 cuando movemos el ratón, "textSize" está creciendo y creciendo y creciendo y creciendo 00:03:39.974 --> 00:03:41.939 por esta línea de aquí. 00:03:43.262 --> 00:03:46.962 También podrías pensar: bueno, ¿cómo podemos hacerlo crecer más rápido? 00:03:47.823 --> 00:03:53.003 Ahora no sólo sabes cómo manipular figuras con código, sino que también puedes usar texto con código.