WEBVTT 00:00:01.971 --> 00:00:03.999 Buenos, vamos a hacer un programa. 00:00:03.999 --> 00:00:06.160 Comenzaremos completamente en blanco y al finalizar 00:00:06.160 --> 00:00:08.799 será fabuloso, como un mini programa de dibujo. 00:00:08.799 --> 00:00:10.863 Piensa en esto, como si fuera un... , con las primeras lecciones en Khan Academy. 00:00:10.863 --> 00:00:14.809 Sólo para que tengas una idea de lo que es posible. 00:00:14.809 --> 00:00:18.532 No te preocupes por entender cada pequeño detalle ahora mismo. 00:00:18.809 --> 00:00:21.456 Sólo queremos darte una idea de lo que viene más adelante y del tipo de programas 00:00:21.610 --> 00:00:23.538 que serás capaz de hacer en poco tiempo. 00:00:23.646 --> 00:00:26.174 Entonces... Ahora no hay nada aquí, lo que es un poco aburrido. 00:00:26.328 --> 00:00:29.196 así que dibujemos algo. Quiero dibujar una elipse, 00:00:29.257 --> 00:00:30.994 que es similar a un círculo 00:00:30.994 --> 00:00:33.247 y como aprenderás, así es cómo hago esto... 00:00:33.247 --> 00:00:36.030 ...y allí está. Casi mágico. La razón es que 00:00:36.030 --> 00:00:39.201 hay unas cuantas cosas especiales que el entorno de Khan Academy ya sabe 00:00:39.201 --> 00:00:42.636 y por suerte, la elipse es una de ellas. No te preocupes 00:00:42.636 --> 00:00:44.617 por el significado de todos estos números. 00:00:44.828 --> 00:00:48.579 Ya lo aprenderás en "Intro to drawing". Igualmente, aquí tienes un avance. 00:00:48.579 --> 00:00:53.412 Al cambiar los números, podemos ver que el primero, básicamente significa, cuán lejos a lo largo. 00:00:53.462 --> 00:00:57.160 El segundo, significa cuán lejos a lo alto. 00:00:57.160 --> 00:01:01.106 El tercero, parece significar cuán grande a lo largo. 00:01:01.106 --> 00:01:04.138 Y el último, cuán grande a lo alto. 00:01:04.138 --> 00:01:09.966 De nuevo, no necesitas saber eso ahora mismo, pero puede pausar este video y jugar tú mismo. 00:01:09.966 --> 00:01:13.829 Aprenderás todos los detalles en las siguientes lecciones. Y lo importante por ahora, 00:01:13.829 --> 00:01:16.702 es que controlan cómo se ve la forma. 00:01:16.702 --> 00:01:20.075 Bueno, muy lindo, pero quizás no estés muy impresionado. 00:01:20.075 --> 00:01:23.248 Así que voy a hacer algo que parece un poco más complicado 00:01:23.248 --> 00:01:25.945 y luego poner la elipse que hicimos, adentro. 00:01:26.206 --> 00:01:29.139 Bien, entonces... no cambió nada. 00:01:29.139 --> 00:01:31.543 Y probablemente, sigas sin estar muy impresionado. 00:01:31.543 --> 00:01:35.034 Pero ahora voy a hacer que la salida del programa sea un poco más impresionante. 00:01:35.034 --> 00:01:36.961 Hagamos este programa, animado. 00:01:36.961 --> 00:01:41.064 Y como ahora podés ver hay muchos círculos y en realidad, están siguiendo mi mouse 00:01:41.064 --> 00:01:45.543 mientras lo muevo. Puedes pausar el programa ahora mismo y hacer que siga tu mouse 00:01:46.604 --> 00:01:49.078 Ok. ¿Cómo es que esto está pasando? 00:01:49.078 --> 00:01:51.416 ¿De dónde salen todos esos círculos? 00:01:51.416 --> 00:01:54.263 Bueno, vas a aprender todo esto en "Introduction to a animation" luego. 00:01:54.263 --> 00:01:56.605 Pero si tienes la duda, lo que está pasando, es que 00:01:56.605 --> 00:02:00.084 la computadora le dice a nuestro programa automáticamente, una y otra y otra vez: 00:02:00.084 --> 00:02:02.606 "Dibuja, dibuja, dibuja, dibuja". 00:02:02.606 --> 00:02:06.042 Y quizás piense que nuestro programa podría cansarse pero en lugar de ello, 00:02:06.042 --> 00:02:10.165 ...sigue haciendo lo que está dentro de esta parte mágica llamada "draw". 00:02:10.165 --> 00:02:13.415 Sólo sigue intentando elipse, tras elipse, tras elipse y eso es 00:02:13.415 --> 00:02:17.910 lo que está ocurriendo detrás de escena cuando movemos nuestro mouse. 00:02:17.910 --> 00:02:21.163 ...para hacer tantas elipses, aunque sólo lo hemos escrito una vez. 00:02:21.163 --> 00:02:24.544 ¿Cómo sabe el programa dónde dibujar la elipse? 00:02:24.544 --> 00:02:27.078 Por ejemplo, ¿cómo sabe dibujar siguiendo el mouse? 00:02:27.908 --> 00:02:31.083 Bueno, aprenderás eso en "Mouse interaction" más adelante. 00:02:31.083 --> 00:02:34.835 La idea es que cada vez, la computadora también le dice a nuestro programa dónde esta el mouse 00:02:34.935 --> 00:02:38.379 utilizando estas dos palabras "mouse...". mouseX y MouseY. 00:02:38.379 --> 00:02:42.967 No necesitas saber acerca de ellas por ahora pero mouseX indica cuán lejos está el mouse a lo largo, 00:02:42.967 --> 00:02:45.942 mientras que mouseY es cuán lejos a lo alto. 00:02:45.942 --> 00:02:47.702 Entonces, sólo para recapitular, cuando hacemos esta elipse, 00:02:47.702 --> 00:02:51.276 lo que estamos diciendo es "dibuja la elipse tan lejos a lo largo... 00:02:51.276 --> 00:02:53.250 ... como lejos esté el mouse a lo largo". 00:02:53.250 --> 00:02:55.440 Y la segunda dice "dibuja el mouse tan lejos a lo alto... 00:02:55.440 --> 00:02:57.746 como el mouse esté a lo alto". 00:02:57.746 --> 00:03:00.963 Y lo que termina significando es "dibuja la elipse exactamente en el mismo lugar donde esté el mouse, 00:03:00.963 --> 00:03:04.001 cada vez que decimos "draw". 00:03:04.001 --> 00:03:07.771 Y luego, estos últimos dos, dicen de qué tamaño debería ser la elipse. 00:03:07.771 --> 00:03:10.545 De nuevo, no te preocupes por todos estos detalles, por ahora. 00:03:10.545 --> 00:03:14.000 Luego de que sigas con las próximas lecciones, todo esto tendrá más sentido. 00:03:14.000 --> 00:03:16.695 Y ahora, como verás, esto se está tornando un poco sucio, 00:03:17.066 --> 00:03:22.087 y podemos hacer click... en el botón "restart" para comenzar el programa nuevamente, en blanco. 00:03:22.087 --> 00:03:26.708 Ve y pausa el programa ahora mismo, y juega tú mismo sólo para saber qué está pasando. 00:03:29.953 --> 00:03:33.326 Entonces ahora que tenemos algo lindo pasando, ¿Qué más podemos hacer? 00:03:33.326 --> 00:03:37.999 Bueno, estos círculos son un poco feos... Sólo son blancos... 00:03:37.999 --> 00:03:40.082 ¿Qué tal si pudiéramos hacerlos de color? 00:03:40.082 --> 00:03:42.248 Hay un tutorial completo de "Intro to color" 00:03:42.248 --> 00:03:44.730 en donde aprenderemos todo acerca de colores, pero te voy a arruinar el secreto 00:03:44.730 --> 00:03:47.665 y mostrarte cómo hacerlo ahora mismo. 00:03:47.788 --> 00:03:48.988 ¡Ta-dá! 00:03:48.988 --> 00:03:52.830 Ahora tienes círculos rojos siguiendo el mouse pero no tiene por qué ser sólo rojos, 00:03:52.830 --> 00:03:56.368 porque cuando haces click en el color aquí, puede ver tú mismo, cuando lo haces 00:03:56.368 --> 00:03:59.969 que puede escoger cualquier color que te guste, un arcoiris completo de colores... 00:03:59.969 --> 00:04:03.129 Así que, ¿qué tal un lindo púrpura ahora mismo? 00:04:03.129 --> 00:04:07.296 Puedes aprender por qué cambian los colores cuando haces esto en "intro to coloring"... 00:04:07.296 --> 00:04:12.128 Entonces, cuando clickeamos en "restart" sólo tenemos círculos púrpura... 00:04:12.128 --> 00:04:16.084 Entonces, podríamos pensar "ponemos todo este trabajo... 00:04:16.084 --> 00:04:19.418 ... para dibujar estas lindas formas cuando movemos el mouse" 00:04:19.418 --> 00:04:24.996 pero sería lindo dibujar sólo a veces, como por ejemplo, sólo cuando el mouse esté apretado. 00:04:24.996 --> 00:04:27.535 Y voy a mostrate cómo hacer eso ahora mismo. 00:04:27.535 --> 00:04:31.996 Lógicamente, no es complicado. Lo que digo es "si el mouse está apretado... 00:04:31.996 --> 00:04:35.835 dibuja el círculo. De lo coontrario, no hagas nada". 00:04:35.835 --> 00:04:38.668 Entonces, así es como se ve esto en código. 00:04:38.668 --> 00:04:46.167 Decimos "if" y luego estos paréntesis raros (no necesitas preocuparte por esto). Entonces... 00:04:46.167 --> 00:04:48.778 Si el mouse está apretado, y luego lo que queremos hacer cuando el mouse esté apretado... 00:04:48.855 --> 00:04:51.545 ...bueno, sólo queremos dibujar la elipse. 00:04:51.684 --> 00:04:54.136 y, de otra manera, no quedemos hacer nada. 00:04:54.228 --> 00:04:58.271 Así que dejaremos esta parte aquí en blanco. Así que cuando apretamos "restart" 00:04:58.271 --> 00:05:02.083 podemos decir "muevo el mouse y no pasa nada, pero cuando apreto el mouse... 00:05:02.083 --> 00:05:06.210 ... ¡puedo dibujar! en púrpura". 00:05:06.210 --> 00:05:10.335 ... y escribir cosas y dibujar cosas, y casi hacer lo que quieras... 00:05:10.335 --> 00:05:15.374 Es bastante lindo, porque con un par de líneas de código, hicimos este programa de dibujo. 00:05:15.374 --> 00:05:18.473 Entonces, todo este tutorial de introducción a sentencias, aprenderemos todo 00:05:18.473 --> 00:05:21.775 acerca de lo que hace este código que acabamos de escribir y cómo funciona. 00:05:21.775 --> 00:05:25.441 Pero apuesto a que ya estás entendiendo la idea general. Todo lo que estamos diciendo es... 00:05:25.441 --> 00:05:29.108 "si el mouse está apretado, haz esto, y de lo contrario, si el mouse no está apretado... 00:05:29.108 --> 00:05:34.167 sólo queremos que no haga nada". Cool! Es exactamente la misma lógica que tenemos en mente. 00:05:34.167 --> 00:05:38.249 Sólo que la escribimos en código ahora. Y quizás quieras denotar que 00:05:38.249 --> 00:05:41.129 ¿Qué es ese borde feo en todos los círculos?" 00:05:41.129 --> 00:05:45.416 Bueno, aprenderás a controlar eso en breve. Puede hacerlo más grande, más chico, 00:05:45.416 --> 00:05:47.995 puedes hacerlo de diferentes colores. 00:05:47.995 --> 00:05:50.166 Pero por ahora, honestamente, quiero deshacerme de él. 00:05:50.166 --> 00:05:54.171 Así que, Voy a escribir "noStroke()" arriba porque ese pequeño borde se llama "stroke". 00:05:54.171 --> 00:05:58.502 y ahora, cuando clickeamos "restart"... ¡Ey! El borde se fue. 00:05:58.502 --> 00:06:03.265 ¡Perfecto! Esto parece un programa de dibujo más realista. 00:06:03.265 --> 00:06:05.919 Entonces, volvamos rápidamente un paso atrás. 00:06:05.919 --> 00:06:11.969 Quizás te preguntes: ¿De dónde salen estas habilidades mágicas como el "if" y ellipse() y draw()? 00:06:11.969 --> 00:06:16.898 Estos comandos están dentro de Khan Academy. Nosotros hicimos eso. 00:06:16.898 --> 00:06:20.079 Y la parte divertida viene al aprender cómo combinarlos para hacer programas. 00:06:20.079 --> 00:06:21.833 Si realmente te despierta la curiosidad, 00:06:22.017 --> 00:06:24.387 estamos utilizando un lenguaje llamado "javascript" en Khan Academy. 00:06:24.510 --> 00:06:27.605 Javascript es una de las maneras más populares de escribir programas en el mundo. 00:06:27.605 --> 00:06:30.798 Especialmente en la Internet, así que estarás en buena compañía. 00:06:30.798 --> 00:06:35.607 Entoncecs, hicimos este lindo programa de dibujo, pero no quiere decir que esté terminado. 00:06:35.607 --> 00:06:39.041 Puede pausar este programa y personalizarlo de la manera en la que te guste. 00:06:39.041 --> 00:06:43.107 Puedes cambiar el tamaño del círculo, puede cambiar el color y cuando lo hayas dejado lindo 00:06:43.107 --> 00:06:45.210 puede guardarlo como un "spin-off"... 00:06:45.210 --> 00:06:47.827 ... este botón de aquí abajo... 00:06:47.827 --> 00:06:50.607 y mostrarlo a la gente que conoces. 00:06:50.607 --> 00:06:54.829 Pero, apuesto a que puedes imaginarte cómo mejorar este programa, de maneras en las que todavía no conoces... 00:06:54.829 --> 00:06:58.831 Digamos, más allá de modificar el color y el tamaño. Quizás quiera hacer una linda 00:06:58.831 --> 00:07:03.444 animmación con pingüinos o un juego divertido... O quizás algo entretenido para tus amigos 00:07:03.444 --> 00:07:06.502 y familia. Bueno, estás en el lugar indicado, porque si te quedas con nosotros, 00:07:06.502 --> 00:07:09.998 estás en camino aprender todo eso y más con código. 00:07:09.998 --> 00:07:12.198 Así que espero que te haya parecido entretenido. 00:07:14.828 --> 00:07:18.169 Hacer este lindo programa de dibujo, sólo nos llevó unos cuantos minutos 00:07:18.169 --> 00:07:21.069 pero aprenderemos un poco más acerca de cómo funciona el código. 00:07:21.069 --> 00:07:23.481 Las siguientes lecciones son acerca de incursionar en algo más profundo 00:07:23.512 --> 00:07:25.444 y aprender exactamente lo que hicimos aquí. 00:07:25.597 --> 00:07:27.801 Para que no parezca tan misterioso. 00:07:27.801 --> 00:07:30.831 Comenzaremos desde el principio y a lo largo de los conceptos básicos. 00:07:30.831 --> 00:07:32.771 Y en poco tiempo, lo creas o no, 00:07:32.771 --> 00:07:36.919 no será gran cosa. De hecho, si continúas, pronto seráz capaz de hacer cosas 00:07:36.919 --> 00:07:40.919 bastante avanzadas con respecto a este programa.