0:00:01.971,0:00:03.999
Buenos, vamos a hacer un programa.

0:00:03.999,0:00:06.160
Comenzaremos completamente en blanco y al finalizar

0:00:06.160,0:00:08.799
será fabuloso,[br]como un mini programa de dibujo.

0:00:08.799,0:00:10.863
Piensa en esto, como si fuera un... ,[br]con las primeras lecciones en Khan Academy.

0:00:10.863,0:00:14.809
Sólo para que tengas una idea de lo que es posible.

0:00:14.809,0:00:18.532
No te preocupes por entender cada pequeño detalle ahora mismo.

0:00:18.809,0:00:21.456
Sólo queremos darte una idea de lo que viene más adelante y del tipo de programas

0:00:21.610,0:00:23.538
que serás capaz de hacer en poco tiempo.

0:00:23.646,0:00:26.174
Entonces... Ahora no hay nada aquí, lo que es un poco aburrido.

0:00:26.328,0:00:29.196
así que dibujemos algo.[br]Quiero dibujar una elipse,

0:00:29.257,0:00:30.994
que es similar a un círculo

0:00:30.994,0:00:33.247
y como aprenderás,[br]así es cómo hago esto...

0:00:33.247,0:00:36.030
...y allí está. Casi mágico.[br]La razón es que

0:00:36.030,0:00:39.201
hay unas cuantas cosas especiales[br]que el entorno de Khan Academy ya sabe

0:00:39.201,0:00:42.636
y por suerte, la elipse es una de ellas.[br]No te preocupes

0:00:42.636,0:00:44.617
por el significado de todos estos números.

0:00:44.828,0:00:48.579
Ya lo aprenderás en "Intro to drawing".[br]Igualmente, aquí tienes un avance.

0:00:48.579,0:00:53.412
Al cambiar los números, podemos ver que el primero, básicamente significa, cuán lejos a lo largo.

0:00:53.462,0:00:57.160
El segundo, significa cuán lejos a lo alto.

0:00:57.160,0:01:01.106
El tercero, parece significar cuán grande a lo largo.

0:01:01.106,0:01:04.138
Y el último, cuán grande a lo alto.

0:01:04.138,0:01:09.966
De nuevo, no necesitas saber eso ahora mismo, pero puede pausar este video y jugar tú mismo.

0:01:09.966,0:01:13.829
Aprenderás todos los detalles en las siguientes lecciones. Y lo importante por ahora,

0:01:13.829,0:01:16.702
es que controlan cómo se ve la forma.

0:01:16.702,0:01:20.075
Bueno, muy lindo, pero quizás no estés muy impresionado.

0:01:20.075,0:01:23.248
Así que voy a hacer algo que parece un poco más complicado

0:01:23.248,0:01:25.945
y luego poner la elipse que hicimos, adentro.

0:01:26.206,0:01:29.139
Bien, entonces... no cambió nada.

0:01:29.139,0:01:31.543
Y probablemente, sigas sin estar muy impresionado.

0:01:31.543,0:01:35.034
Pero ahora voy a hacer que la salida del programa sea un poco más impresionante.

0:01:35.034,0:01:36.961
Hagamos este programa, animado.

0:01:36.961,0:01:41.064
Y como ahora podés ver hay muchos círculos y en realidad, están siguiendo mi mouse

0:01:41.064,0:01:45.543
mientras lo muevo. Puedes pausar el programa ahora mismo y hacer que siga tu mouse

0:01:46.604,0:01:49.078
Ok. ¿Cómo es que esto está pasando?

0:01:49.078,0:01:51.416
¿De dónde salen todos esos círculos?

0:01:51.416,0:01:54.263
Bueno, vas a aprender todo esto en "Introduction to a animation" luego.

0:01:54.263,0:01:56.605
Pero si tienes la duda, lo que está pasando, es que

0:01:56.605,0:02:00.084
la computadora le dice a nuestro programa automáticamente, una y otra y otra vez:

0:02:00.084,0:02:02.606
"Dibuja, dibuja, dibuja, dibuja".

0:02:02.606,0:02:06.042
Y quizás piense que nuestro programa podría cansarse pero en lugar de ello,

0:02:06.042,0:02:10.164
...sigue haciendo lo que está dentro de esta parte mágica llamada "draw".

0:02:10.164,0:02:13.415
Sólo sigue intentando elipse, tras elipse, tras elipse y eso es

0:02:13.415,0:02:17.910
lo que está ocurriendo detrás de escena cuando movemos nuestro mouse.

0:02:17.910,0:02:21.163
...para hacer tantas elipses, aunque sólo lo hemos escrito una vez.

0:02:21.163,0:02:24.544
¿Cómo sabe el programa dónde dibujar la elipse?

0:02:24.544,0:02:27.078
Por ejemplo, ¿cómo sabe dibujar siguiendo el mouse?

0:02:27.908,0:02:31.083
Bueno, aprenderás eso en "Mouse interaction" más adelante.

0:02:31.083,0:02:34.835
La idea es que cada vez, la computadora también le dice a nuestro programa dónde esta el mouse

0:02:34.935,0:02:38.379
utilizando estas dos palabras "mouse...".[br]mouseX y MouseY.

0:02:38.379,0:02:42.967
No necesitas saber acerca de ellas por ahora pero mouseX indica cuán lejos está el mouse a lo largo,

0:02:42.967,0:02:45.942
mientras que mouseY es cuán lejos a lo alto.

0:02:45.942,0:02:47.702
Entonces, sólo para recapitular, cuando hacemos esta elipse,

0:02:47.702,0:02:51.276
lo que estamos diciendo es "dibuja la elipse tan lejos a lo largo...

0:02:51.276,0:02:53.250
... como lejos esté el mouse a lo largo".

0:02:53.250,0:02:55.440
Y la segunda dice "dibuja el mouse tan lejos a lo alto...

0:02:55.440,0:02:57.746
como el mouse esté a lo alto".

0:02:57.746,0:03:00.963
Y lo que termina significando es "dibuja la elipse exactamente en el mismo lugar donde esté el mouse,

0:03:00.963,0:03:04.001
cada vez que decimos "draw".

0:03:04.001,0:03:07.771
Y luego, estos últimos dos, dicen de qué tamaño debería ser la elipse.

0:03:07.771,0:03:10.545
De nuevo, no te preocupes por todos estos detalles, por ahora.

0:03:10.545,0:03:14.000
Luego de que sigas con las próximas lecciones, todo esto tendrá más sentido.

0:03:14.000,0:03:16.695
Y ahora, como verás, esto se está tornando un poco sucio,

0:03:17.066,0:03:22.087
y podemos hacer click... en el botón "restart"[br]para comenzar el programa nuevamente, en blanco.

0:03:22.087,0:03:26.708
Ve y pausa el programa ahora mismo, y juega tú mismo sólo para saber qué está pasando.

0:03:29.953,0:03:33.326
Entonces ahora que tenemos algo lindo pasando, ¿Qué más podemos hacer?

0:03:33.326,0:03:37.999
Bueno, estos círculos son un poco feos...[br]Sólo son blancos...

0:03:37.999,0:03:40.082
¿Qué tal si pudiéramos hacerlos de color?

0:03:40.082,0:03:42.248
Hay un tutorial completo de "Intro to color"

0:03:42.248,0:03:44.730
en donde aprenderemos todo acerca de colores, pero te voy a arruinar el secreto

0:03:44.730,0:03:47.665
y mostrarte cómo hacerlo ahora mismo.

0:03:47.788,0:03:48.988
¡Ta-dá!

0:03:48.988,0:03:52.830
Ahora tienes círculos rojos siguiendo el mouse pero no tiene por qué ser sólo rojos,

0:03:52.830,0:03:56.368
porque cuando haces click en el color aquí, puede ver tú mismo, cuando lo haces

0:03:56.368,0:03:59.969
que puede escoger cualquier color que te guste, un arcoiris completo de colores...

0:03:59.969,0:04:03.129
Así que, ¿qué tal un lindo púrpura ahora mismo?

0:04:03.129,0:04:07.296
Puedes aprender por qué cambian los colores cuando haces esto en "intro to coloring"...

0:04:07.296,0:04:12.128
Entonces, cuando clickeamos en "restart" sólo tenemos círculos púrpura...

0:04:12.128,0:04:16.084
Entonces, podríamos pensar "ponemos todo este trabajo...

0:04:16.084,0:04:19.418
... para dibujar estas lindas formas cuando movemos el mouse"

0:04:19.418,0:04:24.996
pero sería lindo dibujar sólo a veces, como por ejemplo, sólo cuando el mouse esté apretado.

0:04:24.996,0:04:27.535
Y voy a mostrate cómo hacer eso ahora mismo.

0:04:27.535,0:04:31.996
Lógicamente, no es complicado. Lo que digo es "si el mouse está apretado...

0:04:31.996,0:04:35.835
dibuja el círculo. De lo coontrario, no hagas nada".

0:04:35.835,0:04:38.668
Entonces, así es como se ve esto en código.

0:04:38.668,0:04:46.167
Decimos "if" y luego estos paréntesis raros (no necesitas preocuparte por esto). Entonces...

0:04:46.167,0:04:48.778
Si el mouse está apretado, y luego lo que queremos hacer cuando el mouse esté apretado...

0:04:48.855,0:04:51.545
...bueno, sólo queremos dibujar la elipse.

0:04:51.684,0:04:54.136
y, de otra manera, no quedemos hacer nada.

0:04:54.228,0:04:58.271
Así que dejaremos esta parte aquí en blanco. Así que cuando apretamos "restart"

0:04:58.271,0:05:02.083
podemos decir "muevo el mouse y no pasa nada, pero cuando apreto el mouse...

0:05:02.083,0:05:06.210
... ¡puedo dibujar! en púrpura".

0:05:06.210,0:05:10.335
... y escribir cosas y dibujar cosas, y casi hacer lo que quieras...

0:05:10.335,0:05:15.374
Es bastante lindo, porque con un par de líneas de código, hicimos este programa de dibujo.

0:05:15.374,0:05:18.473
Entonces, todo este tutorial de introducción a sentencias, aprenderemos todo

0:05:18.473,0:05:21.775
acerca de lo que hace este código que acabamos de escribir y cómo funciona.

0:05:21.775,0:05:25.441
Pero apuesto a que ya estás entendiendo la idea general. Todo lo que estamos diciendo es...

0:05:25.441,0:05:29.108
"si el mouse está apretado, haz esto, y de lo contrario, si el mouse no está apretado...

0:05:29.108,0:05:34.167
sólo queremos que no haga nada". Cool! Es exactamente la misma lógica que tenemos en mente.

0:05:34.167,0:05:38.249
Sólo que la escribimos en código ahora. Y quizás quieras denotar que

0:05:38.249,0:05:41.129
¿Qué es ese borde feo en todos los círculos?"

0:05:41.129,0:05:45.416
Bueno, aprenderás a controlar eso en breve. Puede hacerlo más grande, más chico,

0:05:45.416,0:05:47.995
puedes hacerlo de diferentes colores.

0:05:47.995,0:05:50.166
Pero por ahora, honestamente, quiero deshacerme de él.

0:05:50.166,0:05:54.171
Así que, Voy a escribir "noStroke()" arriba porque ese pequeño borde se llama "stroke".

0:05:54.171,0:05:58.502
y ahora, cuando clickeamos "restart"...[br]¡Ey! El borde se fue.

0:05:58.502,0:06:03.265
¡Perfecto! [br]Esto parece un programa de dibujo más realista.

0:06:03.265,0:06:05.919
Entonces, volvamos rápidamente un paso atrás.

0:06:05.919,0:06:11.969
Quizás te preguntes: ¿De dónde salen estas habilidades mágicas como el "if" y ellipse() y draw()?

0:06:11.969,0:06:16.898
Estos comandos están dentro de Khan Academy. Nosotros hicimos eso.

0:06:16.898,0:06:20.079
Y la parte divertida viene al aprender cómo combinarlos para hacer programas.

0:06:20.079,0:06:21.833
Si realmente te despierta la curiosidad,

0:06:22.017,0:06:24.387
estamos utilizando un lenguaje llamado "javascript" en Khan Academy.

0:06:24.510,0:06:27.605
Javascript es una de las maneras más populares de escribir programas en el mundo.

0:06:27.605,0:06:30.798
Especialmente en la Internet, así que estarás en buena compañía.

0:06:30.798,0:06:35.607
Entoncecs, hicimos este lindo programa de dibujo, pero no quiere decir que esté terminado.

0:06:35.607,0:06:39.041
Puede pausar este programa y personalizarlo de la manera en la que te guste.

0:06:39.041,0:06:43.107
Puedes cambiar el tamaño del círculo, puede cambiar el color y cuando lo hayas dejado lindo

0:06:43.107,0:06:45.210
puede guardarlo como un "spin-off"...

0:06:45.210,0:06:47.827
... este botón de aquí abajo...

0:06:47.827,0:06:50.607
y mostrarlo a la gente que conoces.

0:06:50.607,0:06:54.829
Pero, apuesto a que puedes imaginarte cómo mejorar este programa, de maneras en las que todavía no conoces...

0:06:54.829,0:06:58.831
Digamos, más allá de modificar el color y el tamaño. Quizás quiera hacer una linda

0:06:58.831,0:07:03.444
animmación con pingüinos o un juego divertido... O quizás algo entretenido para tus amigos

0:07:03.444,0:07:06.502
y familia. Bueno, estás en el lugar indicado, porque si te quedas con nosotros,

0:07:06.502,0:07:09.998
estás en camino aprender todo eso y más con código.

0:07:09.998,0:07:12.198
Así que espero que te haya parecido entretenido.

0:07:14.828,0:07:18.169
Hacer este lindo programa de dibujo, sólo nos llevó unos cuantos minutos

0:07:18.169,0:07:21.069
pero aprenderemos un poco más acerca de cómo funciona el código.

0:07:21.069,0:07:23.481
Las siguientes lecciones son acerca de incursionar en algo más profundo

0:07:23.512,0:07:25.444
y aprender exactamente lo que hicimos aquí.

0:07:25.597,0:07:27.801
Para que no parezca tan misterioso.

0:07:27.801,0:07:30.831
Comenzaremos desde el principio y a lo largo de los conceptos básicos.

0:07:30.831,0:07:32.771
Y en poco tiempo, lo creas o no,

0:07:32.771,0:07:36.919
no será gran cosa. De hecho, si continúas, pronto seráz capaz de hacer cosas

0:07:36.919,0:07:40.919
bastante avanzadas con respecto a este programa.