More Drawing (Video Version)

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/

Exploremos más esta cosa de dibujar.

¿Qué podemos hacer además de rectángulos?

Bueno, podemos hacer óvalos utilizando la palabra "ellipse",

que es otro comando que la computadora sabe.

De hecho, tenemos una palabra especial en programación para denominar a estos comandos.

Vamos a llamarlos "funciones".

Usaré la palabra "función" a partir de ahora para referirme a los comandos.

Continuemos y escribamos el nombre de la función ellipse,

y luego dos paréntesis y un punto y coma.

¡No está funcionando!

Tenemos este mensaje de error que habla acerca de parámetro, sean lo que sean.

¿Puede ver lo que nos está faltando,

comparándolo con el código que escribimos para rect() ?

Cuando sólo escribimos ellipse, no le estamos diciendo los números, como hicimos con el rectángulo.

Estos números se llaman "parámetros".

Decimos que "pasamos parámetros a las funciones" y ellos controlan cómo se comporta la función.

Sin los parámetros, el programa no sabe dónde quieres la elipse,

o cuán grande hacerla.

Ahora el mensaje de error tiene más sentido.

Continuemos y pasémosle cuatro parámetros

para controlar cuán lejos a lo ancho, cuán lejos a lo alto, cuán ancha y cuán alta queremos que sea la elipse.

Al igual que antes, podemos divertirnos y mover la elipse.

incluso hacerla crecer y achicarla.

Bueno, ahora que hemos visto los conceptos básicos, probemos dibujar una elipse grande,

justo en el medio del espacio para dibujar.

La primera pregunta que te puede surgir es, ¿Dónde es el medio?

Sólo para repasar, tenemos la esquina superior izquierda, 0 (Cero)

y la derecha es 400, y el borde inferior es 400.

Si quisiéramos averiguar dónde es el medio, pensaríamos la mitad de 400 a lo ancho y la mitad de 400 a lo alto (200,200).

Hagamos eso.

Escribiremos nuestra función ellipse, le pasaremos parámetros y la haremos bastante grande.

¡Allí está!

Sólo por diversión, pongamos un rectángulo allí también.

Diremos rect 200, 200 también y un poquito más chico.

Mmhh, esto es interesante.

¿Qué nos muestra este pequeño experimento?

Bueno, se podría decir que el punto 200,200 es en realidad decirle dónde poner el centro de la elipse.

Para rectángulos, es diferente. El 200,200 dice dónde poner la esquina superior izquierda del rectángulo.

Eso es realmente importante para recordar cuando estemos tratando de posicionar nuestras formas.

Ok, sigamos con líneas simples.

El nombre de esa función va a ser "line" (línea)

Podemos pasarle cuatro parámetros.

pero una línea no tiene necesariamente un tamaño, como un rectángulo, entonces, ¿Qué controlaran estos números?

El primero y el segundo parámetro, al igual que antes, dicen cuán lejos a lo ancho y alto debería comenzar la línea.

Los últimos dos parámetros especifican cuán lejos a lo ancho y cuán lejos a lo alto debería terminar la línea.

Ahora que entendemos cómo funciona eso, miremos algo que parecerá extraño al principio.

¿Qué pasa si hago que el rectángulo comience en la esquina superior izquierda...

... y luego lo hago realmente grande?

Podemos hacerlo así de grande, pero es un poquito muy grande, pienso.

Vemos que está comenzando a hacer desaparecer la elipse gradualmente.

De hecho, podemos hacerla desaparecer completamente.

Ahora bien, estamos pensando adónde se fue.

Bueno, el programa, en realidad, dibuja tus formas en orden.

Primero dibuja tu elipse, luego el rectángulo encima y luego la línea.

Entonces, la elipse todavía está allí. Solo que está, como viste, debajo.

Éste es un punto importante para recordar.

¿Qué pasaría si dibujáramos nuestra línea primero?

No la veríamos para nada, ¿O sí?

Podrías hacer eso en tus programas y preguntarte, hey, ¿Dönde se fue mi línea?

La idea es que la línea está allí, sólo que está oculta ahora mismo.

Tanto por la elipse como por el rectángulo.

Podemos afectar qué formas son dibujadas encima de qué otras formas simplemente, cambiando el orden en el que las escribimos.

Ahora, quiero presentar un par de términos técnicos antes de terminar.

Como quizás hayas aprendido en matemática, podemos usar la letra X para nombrar cuán lejos a lo largo estamos hablando.

y la letra Y para hablar de cuán lejos a lo alto.

Eso podría verse un poco extraño si no estás acosumbrado,

pero es más fácil que decir "cuán lejos a lo ancho" y "cuán lejos a lo alto" cada vez.

Por ejemplo, los primeros dos parámetros a nuestra eilpse están diciendo

que X debería estar en 200 y que Y debería estar en 229

Ahí lo tienes, es lo mismo que decir cuán lejos a lo alto y a lo ancho".

La otra pregunta que te puede surgir es,

¿Qué unidad hemos estado usando todo este tiempo?

¿Estamos diciendo 200 centímetros, 200 pulgadas, 200 millas?

Estamos usando unidades llamadas "píxeles", y un píxel es un pequeño punto en tu pantalla.

Este espacio de dibujo es de 400 píxeles de ancho.

es por eso que decimos siempre que la esquina superior izquierda es 0 (cero) y aquí es 400, porque es 400 píxeles.

De manera similar, cuando decimos 200, en realidad, queremos decir 200 píxeles, y probablemente vayas entendiendo la idea.

Fantástico. Ahora, ya sabes todo acerca de las funciones rect, line y ellipse, y sus parámetros.

Cubrimos bastante, sigue adelante, sigue explorando ¡Y te acostumbrarás en breve!