-
Bienvenidos al Hora del Código de Bootstrap!
¡En esta exploración, aprenderá cómo crear imágenes usando un código basado en texto, usar funciones para combinar imágenes y aprender diferentes formas de combinar imágenes para crear lo que sea que imagine!
¡Empecemos!
-
1. ¿Dónde vamos a codificar?
En Bootstrap, usamos uno herramienta llamada WeScheme para escribir programas. Puedes ver el editor de WeScheme a la derecha, o puedes abrir WeScheme en una nueva ventana.
El editor se divide en dos panatelas:
- El área de "Definiciones" a la izquierda, y
- el área de "Interacción" está a la derecha.
Puede cambiar el tamaño de las ventanas a su gusto haciendo clic y arrastrando la línea vertical gris en el centro.
Cambie el tamaño del área de Definiciones por arrastrando el divisor vertical gris.
El botón 'Run' en la esquina superior izquierda borra el área de Interacciones y ejecuta cualquier código en el área de definición.
Localiza el botón Run y presionalo.
Ejecutar el código provisto le dice a la computadora que diga "Hola Mundo" en el área de Interacciones.
También puede escribir directamente en el área de Interacciones y presionar Enter.
- Intente escribir una palabra o frase en el área de Interacciones y presione Enter.
- Intente escribir el número 5 en el área de Interacciones y presione Enter.
Tenga en cuenta que al escribir una palabra o frase, usamos comillas (" "), ¡pero no al escribir números!
-
2. Usando Funciones
Aprender a codificar significa que estamos aprendiendo un idioma que la computadora entiende. Podemos usar este lenguaje de computadora para pedirle a la computadora que completar ciertas tareas.
Mira el código provisto y haz uno predicción. ¡Presiona el botón Run para ver lo que hace este código!
Escribimos un programa simple que le pidió a la computadora que agregara 4 y 2, y así fue. WeScheme puede manajar la adición de cualquier número que se pueda imaginar. También sabe resta(-), multiplicación (*), y división (/).
Observe que el signo más (+) se adelantó a los números. En este lenguaje, ¡la función siempre va en el frente! Verás esto de nuevo más tarde con algunas funciones de imagen.
Tómese unos minutos para familiarizarse con el uso de las funciones en WeScheme.
Use el área de Interacciones (a la derecha) y presione
Enter después de cada línea de código para ver el resultado.
- Escriba el código para $10 - 3$ y presione Enter.
- Escriba el código para $5 * 103$ y presione Enter.
- Escriba el código para $3 \div 4$ y presione Enter.
Observe que puede hacer clic en los resultados.
-
3. Creando Imágenes de Código
En el editor, puede ver un programa simple en el área de Definiciones:
(star 50 "solid" "blue")
En español, (estrella 50 "sólido" "azul").
¿Qué crees que hará?
Haga una predicción de lo que hará el código y luego haga clic en el botón
Run.
- ¿Dónde apareció el resultado?
- Trate de cambiar el número y haga clic en el botón Run. ¿Qué pasa?
- Intente cambiar "solid" ("sólido") a "outline" ("contorno"). ¿Que pasa?
- Copie y pegue este programa en el área de Interacciones, a la derecha, luego presione Enter. ¿Que pasa?
- Intente hacer otras estrellas en el área de Interacciones y luego presione Enter.
¿Puedes adivinar qué representan estas partes de los programas?
-
4. Leyendo Códigos
El programa (star 50 "solid" "blue") es un ejemplo de una aplicación de función. Cada función tiene un contrato: que nos dice el nombre de la función, cuántos y qué tipo de entradas requiere y qué la función producirá.
El contrato para esta función es
star : Number String String -> Image!
La función "star" requiere un número y dos cadenas (palabras en comillas) para producir una imagen.
Las entradas pueden ser muchas cosas diferentes, pero nos centraremos en tres en este momento:
- Números, como 3, 10.82, -105, 0, etc.
- Cadenas son palabras en comillas como "solid", "red", "Hola", and so on
- Imágenes, como
- La función star requiere tres entradas.
- El Número 50 representa el radio de la estrella.
- La Cadena "solid" representa el estilo de la estrella.
- La Cadena "blue" representa el color de la estrella.
Los paréntesis le dicen a la computadora que queremos aplicar la función a estas entradas.
Intente omitir una de estas entradas y presione Run. ¿Que pasa?
-
5. Depuración
Has visto que la star es una función que toma tres entradas: un número para el radio de la estrella, una cadena para el estilo y una cadena para el color. ¿Qué sucede si un programador olvida uno de estos o utiliza el tipo de datos incorrecto?
Cuando algo como esto sucede, las computadoras usan Mensajes de Error para dar consejos útiles sobre lo que está mal.
¿Puedes ver el problema en el área de Definiciones, la ventana a la izquierda?
- Haz clic en Run para ver qué tipo de mensaje le da la computadora.
- Lea el mensaje de error cuidadosamente.
- Haz clic en las partes coloreadas del error y vea parpadear el código correspondiente.
- ¿Puedes arreglar el problema?
-
6. Explorando Imágenes
Hay muchas otras funciones que producirán una imagen ... ¿pero cómo las usas?
Hay otras funciones de forma que tienen el mismo contrato que una star, tomar un Número y dos Cadenas y producir una Imagen.
circle es una de estas funciones. Intenta hacer un círculo azul sólido!
Todas las formas siguientes toman un número y dos cadenas y producen una imagen. ¡Toma el tiempo para probarlos!
¡Intenalo!
- circle - ¿Puedes hacer un círculo sólido, verde, y con un radio de 35?
- triangle - ¿Puedes hacer un triangolo delineado, rojo de cualquier tamaño?
- square - ¿Puedes hacer un cuadrado morado con cada lado midiendo 104?
-
7. ¡Mas Imágenes!
Como ya habrá descubierto, hay algunas funciones que producen formas que requieren diferentes entradas para funcionar. Hemos incluido una de esas funciones aquí: rectangle.
¿Qué notas es diferente en el código de un rectángulo?
La función de rectangle tiene un contrato diferente al de star.
Con la función de star solo teníamos que darle un número, para el radio. Pero los rectángulos tienen dos dimensiones: largo y ancho.
Nuestro contrato para el rectangle es:
rectangle: Number Number String String -> Image
(Número Número Cadena Cadena -> Imagen)
Aquí hay algunas otras funciones que puedes experimentar con:
- right-triangle requiere un Número para la base, un Número para la altura y dos Cadenas para el estilo y el color
- isosceles-triangle requiere un Número para la altura, un Número para la base y dos Cadenas para el estilo y el color
- text requiere una Cadena para el mensaje, un Número para el tamaño y una Cadena para el color
- radial-star requiere cinco entradas:
- Un Número para el número de puntos
- Un Número para el radio exterior
- Un Número para el radio interior
- Una Cadena para el estilo
- Una Cadena para el color
¡Toma unos minutos para intentar estos!
- right-triangle - ¿Lo puedes hacer un triángulo rectángulo rosado?
- isosceles-triangle - ¿Lo puedes hacer un triángulo isósceles negro?
- text - ¿Puedes escribir tu nombre en grandes letras rojas?
- radial-star - ¿Puedes hacer una estrella radial?
-
8. Definiendo valores
Ya has aprendido muchas formas de crear imágenes en WeScheme. ¡Ahora aprenderemos una manera de definirlos como un valor para que podamos hacer que aparezcan sin volver a escribir todo el código! Es como dar nombres a partes de nuestro código para que sean más fáciles de usar.
En el código previsto, hemos definido CodigoEs para hacer (text "Divertido" 50 "red").
Haz clic al botón Run y escribe CodigoEs en la ventana de Interacciones a la derecha.
Vistes la imagen que apareció? Si no, asegurarse que escribistes exactamente como está escrito incluyendo mayúsculas.
Use la nueva palabra clave
define para nombrar algunas imágenes, números o cadenas.
¡Ten cuidado con su paréntesis!
- Escribe el código (define CirculoRojo (circle 40 "solid" "red")) en la área de Definiciones y presione Run.
-
Escribe CirculoRojo en the ventana de Interacciones par que aparezca!
- Definir Lucy para ser una imagen de una estrella amarilla.
- Crea una imagen de tu nombre y llámala MiNombre.
- Definir el número 42 para ser LaRespuesta.
-
9. Combinando Imágenes
¡Crear imágenes es divertido, pero las cosas realmente comienzan a ponerse interesantes cuando aprendemos cómo combinarlas!
Mira el código provisto. ¿Que notaste?
¡Haz clic al botón Run y nota lo que pasa!
¡La función beside nos permite tomar dos imágenes y crear una nueva imagen con las dos imágenes una al lado de la otra!
Observe que aún puede escribir letra1 o letra2 en el área de Interacciones y presionar Enter para ver las imágenes individuales. No cambiamos las imágenes originales, creamos una nueva!
Define dos rectángulos y combinalos para hacer una nueva imagen.
- RectRojo debe ser un rectangle rojo, sólido con un largo de 20 y una altura de 40.
- RectAzul debe ser un rectangle azul, sólido con un largo de 20 y una altura de 40.
- Usa beside para poner RectRojo al lado del RectAzul.
- Usa define para nombrar la nueva forma CuadradoDividido.
- Sólo por diversión, ¡giremos esa cuadrado! Usa el código (rotate 45 CuadradoDividido) para girar el cuadrado 45 grados.
Además de beside, existe una función similar llamada above.
¿Que esperar que haga esta función? Usa
above para combinar dos formas para crear esta imagen:
-
10. Capas de Imágenes
Además de colocar imágenes una al lado de la otra o una encima de la otra, podemos colocar imágenes en capas.
Mira el código provisto y haz una predicción. Presiona el botón Run para ver lo que hace este código!
Esta nueva función de superposición overlay toma dos imágenes como entrada y las coloca una encima de otra, alineadas en los centros.
Cree dos imágenes propias y utilic overlay to combine them into one image. para combinarlas en una sola imagen. Recuerde, la imagen superior debe ser más pequeña que la imagen inferior.
-
11. Acodar múltiples imágenes
¿Y si queremos estratificar más de dos imágenes? Tal vez nos gustaría agregar otra estrella a nuestra imagen de estrellas y cuadrados de antes.
¿Qué pasa si tratamos de combinar tres imágenes utilizando overlay?
El contrato para overlay es:
overlay : Image Image -> Image
... así que si le damos tres imágenes, recibimos un Mensaje de Error.
En el código provisto, le hemos dado un nuevo nombre a la imagen de estrella y cuadrado combinada EstrellaCuadrado.
Combinamos dos imágenes en una, ¡ahora combinaremos esa imagen con otra imagen!
Crea una nueva imagen de una estrella blanca sólida de radio 75 llamada
EstrellaBlanca.
Usa
overlay ara superponer la estrella blanca que creó sobre
EstrellaCuadrado.
¡Combinamos dos imágenes en una, luego combinamos esa imagen con otra!
Desafío: hay otra forma de 'superponer una superposición' con solo una línea de código. ¿Puedes averiguarlo?
-
12. Colocando Imágenes Usando Coordenadas
Quizás desee colocar una imagen en una posición específica sobre otra imagen. put-image te permite hacer eso!
Las cuatro entradas que necesita put-image son: Image Number Number Image.
Intenta ejecutar el código provisto. ¿Que notaste?
- Los dos números en el contrato representan los coordenados x e y de la primera imagen. ¿Cuáles son las coordenadas de la estrella blanca en este momento?
- Cambia las coordenadas de la estrella blanca 50 pixeles ase arriba.
- Cambia las coordenadas de la estrella para que aparezca en la mano izquierda superior del rectángulo morado.
- Cambia una de las coordenadas de la estrella a un número negativo. ¿Que pasa? ¿Por qué?
-
13. Crear!
Vamos a crear una bandera!
Sí te quieres, haz clic aquí para abrir WeScheme en una ventana nueva.
Vea si puede hacer una bandera para un país que siempre ha querido visitar, o dónde tiene familia. O diseña tu propia bandera personal! Puedes encontrar más información leyendo la Lección de banderas (Inglés).
Formas
- circle: Number String String -> Image
- rectangle: Number Number String String -> Image>
- triangle: Number String String -> Image
- star: Number String String -> Image
- text: String Number String -> Image
Cambiar o Combinar Imágenes
- rotate: Number Image -> Image
- beside: Image Image -> Image
- above: Image Image -> Image
- overlay: Image Image -> Image
- put-image: Image Number Number Image -> Image
-
14. Un Rompecabezas Invernal
¡Aquí le proporcionamos un rompecabezas de put-image para que pueda construir una escena nevada!
Haz clic aquí para abrir en una ventana nueva.
Cambia las coordenadas y presione Run para mover los diferentes elementos.
Usa lo que aprendiste sobre creando imágenes para añadir su propio elementos a la escena.
¡Una Hora del Código es una manera grandiosa para empezar el aprendizaje de la programación, y esperamos que lo disfruto! ¡ Hay muchas cosas más que explorar cuando viene a la programacion de computadora! Si le gustaría hacer más cosas de esta tipo de programación - especialmente en classe de matemática - échale un vistazo a Bootstrap para aprender cómo hacer videojuegos usando programación en su clase de matemática.