El Encendido Cinematográfico
¡Los efectos especiales de Hollywood no ocurren de golpe! Para crear un efecto de encendido suave y gradual, necesitamos controlar cada píxel de la pantalla uno por uno. En esta misión, aprenderás a usar el poderoso bucle "for", una herramienta diseñada específicamente para contar y repetir acciones un número exacto de veces. ¡Prepárate para darle a tu interruptor un toque cinematográfico!
Nivel Intermedio
¿Qué haremos?
¿Eres un profesor?
Cursos
- Grados 6-12
Materiales
- Celular, tableta o computador
- Conexión a Internet
- Cartón, tijeras y un par de elásticos para sujetar el celular al cartón
Descripción
Esta actividad introduce el bucle "for" como una herramienta fundamental para la iteración contada. Los estudiantes reemplazan un encendido/apagado instantáneo con una animación de barrido. Esto requiere el uso de bucles "for" anidados para recorrer una cuadrícula 2D, proporcionando un caso de uso práctico y visualmente gratificante para este nuevo concepto.
Objetivos Educativos
- Comprender la estructura y el propósito de un bucle "for" (variable contadora, inicio, fin, paso).
- Utilizar bucles "for" anidados para iterar sobre una estructura de datos de dos dimensiones (una cuadrícula).
- Crear una animación secuencial controlando elementos individuales (píxeles).
- Diferenciar entre un bucle de repetición infinita y un bucle de repetición contada.
Inicio (10 minutos) - La Necesidad de Contar
- Da la bienvenida a la clase: "Normalmente una luz se enciende toda a la vez. Hoy le daremos un efecto especial. ¿Cómo podríamos hacer que se encienda como una ola de luz que recorre la pantalla?"
- Plantea el problema: "Para lograrlo, necesitaríamos decirle al programa: 'enciende el primer píxel, espera; enciende el segundo, espera...' y así sucesivamente. ¡Repetir eso 49 veces a mano sería una locura!"
- Introduce la solución: "Hoy aprenderemos una nueva y poderosa herramienta, el bucle 'for' o 'contar con', que está diseñado exactamente para este tipo de tareas de conteo. Nos permite ejecutar un bloque de código un número preciso de veces."
Cuando Necesitamos Contar: El Bucle 'For'
Hemos visto bucles que se repiten para siempre (repetir para siempre). Pero a veces, necesitamos que un bucle se ejecute un número exacto de veces. El bucle "for" (en Protobject, "contar con") es la herramienta perfecta para esto. Es como darle al programa una orden muy precisa: "Quiero que ejecutes este código, empezando a contar desde 1, terminando en 7, y avanzando de 1 en 1".
Los Componentes de un Bucle 'For'
Un bucle "for" tiene cuatro partes clave que definen su misión:
- Variable Contadora: Una variable temporal que el bucle usa para llevar la cuenta (por ejemplo,
i,fila,columna). - Valor Inicial: El número donde la variable contadora empieza a contar (por ejemplo,
1). - Valor Final: El número donde el bucle se detendrá (por ejemplo,
7). - Paso: Cuánto suma (o resta) la variable contadora en cada repetición (por ejemplo,
1).
Bucles Anidados para Cuadrículas 2D
Nuestra pantalla de LEDs es una cuadrícula bidimensional (2D), tiene filas y columnas. Para recorrer cada píxel, un solo bucle no es suficiente. La solución es usar bucles 'for' anidados: ponemos un bucle dentro de otro.
- El bucle exterior recorre las filas (de 1 a 7): elige un renglón de la cuadrícula.
- Por cada fila, el bucle interior recorre las columnas y va encendiendo el píxel
x = columnas, y = filas. La variable de adentro es la que cambia más rápido: da sus 7 vueltas completas por cada valor de la de afuera — por eso el bloquedibujase ejecuta 7 × 7 = 49 veces, una por cada LED.
Desarrollo (20-30 minutos) - Programando el Barrido de Luz
- Ahora que los estudiantes entienden el propósito del bucle "for", es hora de implementarlo.
- Guíalos a construir el encendido con los bucles 'for' anidados en lugar de un simple bloque de encendido/apagado, como se detalla a continuación. Es crucial que entiendan por qué se necesitan dos bucles (uno para filas y otro para columnas).
Cierre (5-10 minutos) - Dominando la Cuadrícula
- Una vez que todos tengan su efecto de encendido cinematográfico, reflexiona sobre la herramienta que lo hizo posible.
- Inicia la discusión: "Miren sus nuevos bucles. ¿Qué hace la variable 'filas'? ¿Y la variable 'columnas'? ¿Cuál de las dos cambia más rápido? ¿Por qué necesitamos dos bucles, uno dentro del otro, para cubrir toda la pantalla?" Explora cómo cambiar el orden o los parámetros de los bucles afecta la animación.
Reflexiona
¿Para qué tipo de tareas es ideal un bucle "for" en comparación con un bucle "repetir para siempre"?
Explica por qué necesitamos dos bucles "for" anidados para encender toda la pantalla y no solo uno.
El barrido recorre la cuadrícula renglón por renglón. ¿Qué cambiarías para que la recorriera columna por columna? (Pista: piensa cuál de los dos bucles va afuera y cuál adentro, sin tocar el bloque dibuja).
Cuando Necesitamos Contar: El Bucle 'For'
Hemos visto bucles que se repiten para siempre (repetir para siempre). Pero a veces, necesitamos que un bucle se ejecute un número exacto de veces. El bucle "for" (en Protobject, "contar con") es la herramienta perfecta para esto. Es como darle al programa una orden muy precisa: "Quiero que ejecutes este código, empezando a contar desde 1, terminando en 7, y avanzando de 1 en 1".
Los Componentes de un Bucle 'For'
Un bucle "for" tiene cuatro partes clave que definen su misión:
- Variable Contadora: Una variable temporal que el bucle usa para llevar la cuenta (por ejemplo,
i,fila,columna). - Valor Inicial: El número donde la variable contadora empieza a contar (por ejemplo,
1). - Valor Final: El número donde el bucle se detendrá (por ejemplo,
7). - Paso: Cuánto suma (o resta) la variable contadora en cada repetición (por ejemplo,
1).
Bucles Anidados para Cuadrículas 2D
Nuestra pantalla de LEDs es una cuadrícula bidimensional (2D), tiene filas y columnas. Para recorrer cada píxel, un solo bucle no es suficiente. La solución es usar bucles 'for' anidados: ponemos un bucle dentro de otro.
- El bucle exterior recorre las filas (de 1 a 7): elige un renglón de la cuadrícula.
- Por cada fila, el bucle interior recorre las columnas y va encendiendo el píxel
x = columnas, y = filas. La variable de adentro es la que cambia más rápido: da sus 7 vueltas completas por cada valor de la de afuera — por eso el bloquedibujase ejecuta 7 × 7 = 49 veces, una por cada LED.
Crear
¡Creando el efecto cinematográfico!
Construye el modelo de cartón— también necesitas un par de elásticos para sujetar el teléfono al cartón
- Necesitarás 2 componentes: NivelRuido y DibujoLED.
- Asegúrate de tenerlos listos en tu espacio de trabajo.
¡Estamos listos para añadir los efectos especiales!
Composición del Código
El evento de ruido cambia la variable estado de verdadero a falso y viceversa. La gran diferencia está dentro del si... sino.... Cuando el estado es verdadero, dos bucles contar con anidados recorren la cuadrícula: filas afuera y, dentro de cada fila, columnas, encendiendo cada píxel (dibuja en x columnas y filas) con una pausa de 10 milisegundos. En la parte del sino, hacemos lo mismo, pero pintamos los píxeles de negro para crear el efecto de apagado gradual.
Reflexiona
¿Para qué tipo de tareas es ideal un bucle "for" en comparación con un bucle "repetir para siempre"?
Explica por qué necesitamos dos bucles "for" anidados para encender toda la pantalla y no solo uno.
El barrido recorre la cuadrícula renglón por renglón. ¿Qué cambiarías para que la recorriera columna por columna? (Pista: piensa cuál de los dos bucles va afuera y cuál adentro, sin tocar el bloque dibuja).