Introducción al dibujo

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/

Empecemos a programar.

Necesitamos comenzar entendiendo formas, los conceptos básicos.

Pero no te preocupes, en breve, tus formas estarán volando por la pantalla y cambiando el color

y haciendo todo tipo de cosas de programación entretenidas.

Sólo ¡quédate con nosotros!

Así que comencemos a dibujar rectángulos.

Escribimos rect() por rectángulo, luego abrimos paréntesis, y luego cuatro números y explicaré qué significan en un rato.

...luego cerramos los paréntesis, y al final ponemos punto y coma.

Mira, asombroso, ¡un rectángulo!

Y eso fue tan simple, así que hagámoslo de nuevo. Podemos probar diferentes números esta vez.

Quizás números más grandes, y luego números más chicos al final, y ¡ey!, mira, otro rectángulo.

De hecho, si intentamos cambiar este primer número para hacerlo más pequeño, se empezará a mover.

Si cambiamos este último número para hacerlo más grande y luego más pequeño,

entonces sólo crecerá y luego se achicará. Interesante.

Entonces, probablemente te preguntarás: ¿Cómo es que está pasando toda esta magia?

Bueno, recuerda que tu computadora es como un perro realmente inteligente y obediente.

A un perro, quizás podamos decirle que se siente, se quede quieto, o incluso ruede sobre sí mismo.

Sólo tendrías que darle comando sit().

Entonces, en código, ¿Cómo le dirías a tu perro de computadora que se siente?

Bueno, la manera en la que podrías hacerlo, sería escribiendo el nombre del comando,

digamos "sit" y dos paréntesis, luego para decirle que haga el comando que acabas de decirle,

y luego un punto y coma al final para decir "sí, este comando termina aquí".

Y luego tu perro de computadora se sentaría.

Bueno, por supuesto, tu computadora en Khan Academy, no es un perro, por ello no sabe cómo sentarse o rodar,

pero sí sabe cómo dibujar rectángulos, cuando llamas a rect() y esos es bastante interesante también, ¿No?

Así que, eso es lo que vamos a hacer en esta línea. Diremos el comando rect(), que es sólo el nombre,

y luego abriremos paréntesis y cerraremos paréntesis para decir "ve y haz eso",

y luego el punto y coma al final.

Así es que tu computadora sabe ir y hacer esta habilidad especial rect.

Ok, entonces, volvamos a nuestro rect.

Tenemos el nombre del comando aquí mismo, tenemos los paréntesis.

¿Y qué hay acerca de todos esos números locos?

Bueno, la idea es que la computadora realmente no sabe lo suficiente si sólo le dices que "rect".

Para entender esto, imagínate si te diera un papel,

y yo quisiera que dibujes un rectángulo exactamente en la manera en la que yo quisiera que sea.

Bueno, a menos que me puedas leer la mente, vas a hacer algunas preguntas de inmediato.

Primero, pensarás "bueno, ok, ¿Dónde quieres que dibuje el rectángulo?"

Y luego, Yo diría "qué tal si acordamos en llamar a este lado izquierdo del papel 0 (cero) "

Y convengamos en que este lado derecho del papel va a ser "400".

Entonces, podría darte un número, como 100, y tú sabrías que eso sería básicamente ahí.

Eso te convencería por un rato, pero luego dirías: "Ok, eso me dice cuán lejos a lo largo, pero qué tal a lo alto?"

Entonces, yo podría darte otro número, como 200, y diría que el borde superior es 0 (cero),

y luego el inferior es 400, y pensarías: "Bueno, 200 va a estar justo en el medio".

Y esto está perfecto, porque ahora piensas: "Ok, voy a dibujar tu rectángulo justo aquí".

...porque es 100 a lo largo y 200 a lo alto.

Excepto que, eso todavía no es suficiente información, porque qué te preguntas ahora...

Piensas, cuán grande quiero el rectángulo.

Yo diría: "¿Qué tal, 150 de ancho?"

Y tú pensarías: "Bueno, esto es 100 y esto es 400,

así que si quisiéramos que sea 150 de ancho, quizás haríamos esto".

Ok, fantástico, eso es más o menos 150 de ancho.

Entonces, tú dirías: "¿Cuán alto lo quieres?"

Y yo diría: "¿Qué tal 50 de alto?"

Tú dirías: "Ok, 50, eso es aproximadamente así de alto".

Luego, dirías: "Fantástico, sé exactamente dónde quieres el rectángulo,

y exactamente cuán grande quieres que sea,

ahora puedo dibujarlo".

Eso es mucho trabajo para un rectángulo, ¿no?

Pero la idea es que con sólo darte esos 4 números, 100 a lo largo, 200 a lo alto,

150 de ancho y 50 de alto, ahora los dos tenemos la misma idea de cómo debería verse este rectángulo.

Así es cómo piensa la computadora también.

Puedes escribir el nombre del comando, como dijimos, paréntesis, los 4 números

(100, 200, 150, 50), cerrar paréntesis y luego un punto y coma.

¡Y dibujará un retángulo exáctamente en donde queremos que esté!

Bueno, si somos honestos, no es allí donde realmente queríamos el rectángulo.

No es allí donde lo dibujamos, ¿verdad?

Nuestros números están un poco desfasados.

Así que vamos y digamos que queremos que concuerde exactamente lo que dibujamos.

Moveremos esto así, está un poco más lejos, un poco menos a lo alto,

un poco más flaco y quizás un poco más bajo.

Ahora logramos que nuestro rectángulo concuerde con lo que dibujamos,

porque entendimos lo que significan estos números y podríamos cambiarlos

para que se vea justo como queremos.

Ahora pensemos en dibujar otro rectángulo

Porque lo lindo de esto es que podemos dibujar rectángulos en donde queramos.

¿Qué tal si dibujamos uno justo en esta esquina superior?

Pensemos en dónde sería eso.

Eso sería 0 (cero) a lo largo, 0 (cero) a lo alto y quizás bastante pequeño,

digamos 50 de ancho y 10 de alto.

Hagámoslo. Escribimos rect, separamos los parámetros con comas,

y digamos que estamos conformes.

Pero oh, tenemos este mensaje de error que dice que nos falta un paréntesis de cierre,

y nos damos cuenta de esto, así que lo agregamos.

Pero uh, ahora tenemos otro error que dice que nos falta un punto y coma.

Si presionamos "show me where" (Múestrame dónde), nos apuntará la línea que acabo de escribir...

... y recordamos que los punto y coma son como puntos al final de las oraciones,

pero para darle fin a las líneas de código, y nos olvidamos de ello.

Podemos agregarlo, no hay problema y todo está bien nuevamente.

Pruébalo, un pequeño rectángulo, exactamente como queríamos.

Al igual que antes, podemos agrandarlo, podemos moverlo y podemos posicionarlo exactamente donde queremos que esté.

Entonces, ahora sabes en detalle cómo funciona "rect".

Cubrimos lo que significan estos números, y el hecho de que siempre necesitas poner el nombre del comando,

los paréntesis, separar los números con comas y poner el punto y coma final.

Parece mucho, pero puedes probarlo tú mismo y empezar a acostumbrarte.

La próxima vez, aprenderemos acerca de hacer más formas,

y luego avanzaremos hacia cosas más asombrosas como usar color

y lograr que vuele por la pantalla.