Tiempo actual: 0:00Duración total:6:51
0 puntos de energía
Transcripción del video
Vamos a descubrir cómo programar más figuras. Vamos a empezar con las que ya conocemos elipses. Tengo este programa que dibuja la cara de mi buen amigo Winston. Usa 4 funciones de elipse para dibujar esta cara. Si quisiera cambiar algo de esta cara, aunque es perfecta así como está, tendría que encontrar la elipse correcta, y luego el parámetro correcto en la elipse. Así que digamos que su boca... queremos que esté realmente emocionado. Ésta es la última elipse, y la anchura es el tercer número, así que puedo incrementarlo, y ¡wow! ¡aquí va Winston! Está bien, eso fue gracioso. Pero ¿qué podemos hacer además de elipses? Bueno, podemos hacer rectángulos usando la función "rect()", otro comando que nuestro programa sabe cómo obedecer. ¡Tan tan, un rectángulo! Así como "ellipse()" el comando "rect()" requiere 4 parámetros, y en realidad, son muy similares a los 4 parámetros que la función "ellipse()" necesita. Vamos a usar este rectángulo para dibujar un cuello de tortuga para Winston. Vamos a llevar el cuello de tortuga debajo al cuello de Winston, entonces, lo llevamos abajo, abajo, abajo, aquí vamos. Luego vamos a hacerlo más ancho, porque Winston tiene un cuello ancho. Ahora, creo que deberíamos moverlo un poco más. Finalmente, lo vamos a hacer más alto hasta que se pase de la parte baja de la pantalla. ¡Hermoso! Ahora puedes ver que la función "rect()" necesita 4 parámetros. Los primeros dos controlan la posición, el "x" y el "y" y los otros dos controlan el tamaño, la anchura y la altura. Parece exactamente lo mismo que con la función "ellipse()", ¿cierto? Casi, pero no del todo. Te mostraré a qué me refiero dibujando una nueva elipse con los mismos números que este rectángulo. Arrastremos eso. Luego este es 128. Luego este debería ser, vamos a llevarlo hasta 346. Luego este es 139 y 68. Ahora, estos dos están en la posición 128 y 346. Esto significa 128 pixeles desde el lado izquierdo, y 346 pixeles abajo desde la parte superior. Por cierto, un pixel es el tamaño de un punto en la pantalla de tu computadora. Recuerda que nuestro lienzo de dibujo es de 400 pixeles de ancho por 400 pixeles de alto, así que nuestros números deben estar entre 0 y 400. Nuestra elipse también está en la posición 128 y 346 pero en realidad no están en el mismo lugar. La elipse empieza antes que el rectángulo, y termina a la mitad de él. ¿Cómo puede ser eso, si especificamos la misma posición para los dos? Esto es porque los rectángulos y las elipses interpretan los parámetros de posición de manera diferente. Un rectángulo usa los parámetros de posicion para definir la esquina superior izquierda, y una elipse usa los parámetros de posición para definir el punto central, aquí. Puedes ver que en realidad el punto central de la elipse es exactamente la esquina superior del rectángulo. Y ese punto, justo aquí, está a 128 pixeles desde la izquierda y 346 pixeles hacia abajo. Si queremos la elipse justo arriba del rectángulo, necesitamos agregar más pixeles a su posición. Para traerla justo aquí, y luego bajarla hasta aquí. ¡Y ahora está en el mismo lugar! Podrías estresarte por todos estos números y las sumas y restas que estoy haciendo, pero no te preocupes, no tienes que poner los números correctos en tu primer intento. Prueba con algunos números, para que veas cómo cambian las figuras, y continua probando números hasta que te guste lo que ves. Si tienes papel cuadriculado, primero puedes tratar de dibujar tus figuras con lápiz y papel. A mí eso me ayuda mucho. Ahora que he mostrado esto, voy a borrar esta elipse, porque él no necesita una elipse en su cuello de tortuga. Déjame mostrarte otra figura, una línea, que usaré para dibujar una uniceja sobre los ojos de Winston, justo aquí. Arrastramos "line()" y vemos una vez más que hay 4 parámetros que podemos cambiar. Vamos a empezar cambiando la posición, o lo que pensamos que es la posición. Queremos que quede sobre los ojos, así que incrementamos "x", y luego la bajamos un poco, ok. Ahora empieza sobre el ojo, pero termina hasta acá. ¿Por qué? Bueno, estos dos parámetros (50, 50) no son anchura y altura, porque las líneas no tienen ancho y alto. En lugar de eso, las líneas tienen punto de inicio y un punto final. Estos 2 parámetros deben ser el punto final de la línea. Voy a seguir adelante y voy a mover el punto final para que quede sobre este ojo, y voy a cambiar "y" para que sea como la "y" del otro lado, porque eso formará una línea recta. ¡Lindo! Winston se ve bien. Ahora, déjenme mostrarles una cosa más sobre el dibujo de formas. ¿Ves cómo se ordenan nuestras llamadas a funciones en el área de edición? Tenemos "ellipse()", "ellipse()", "ellipse()", y luego "rect()" y luego "line()". Ese orden es realmente muy importante, porque es el orden en que nuestro programa va a correr el código, de arriba a abajo. La primera figura dibujada es la elipse, y 3 elipses más, luego el rectángulo y luego la línea. ¿Por qué eso es importante? Observa qué pasa si arrastro "line()", para que el comando quede arriba de la primera "ellipse()" ¡Ajá! Casi desaparece, solo se asoma un poco por aquí. Esto es porque el programa primero dibuja una línea, y luego dibuja todo lo demás sobre ella, hasta que casi no podemos ver la línea. Recuerda esto cuando hagas tus dibujos porque probablemente quieras dibujar figuras en un orden particular, en la parte superior de otra. Si no encuentras una figura que has dibujado, tal vez esté oculta detrás de otra figura. Y como probablemente no tienes visión de rayos x para verla solo arrastra tu código por todas partes para ver qué pasa. Abarcamos mucho en esta lección, pero úsalo y sigue explorando, y pronto lo vas a dominar.