Programación con Ciclos

Objetivo

Producto a Entregar

Forma de Trabajo

Tiempo estimado

Forma de Entrega

Recomendaciones

• Sigue las instrucciones de la actividad y ejercita la lectura crítica.
• Recuerda que para realizar la misma acción varias veces puedes utilizar ciclos

Paso 1:

Descarga el esqueleto de la aplicación que vamos a utilizar en esta sesión y abre el proyecto en NetBeans. Ahora compila y corre la aplicación. Aparecerá una pantalla gris con tres divisiones (que tienen controles aunque no están pintados). Al terminar la aplicación tendremos una interfaz gráfica similar a la siguiente:

En esta aplicación vamos a utilizar Graphics y lo que hemos aprendido de ciclos para crear estas tres figuras. Primero empecemos con el tablero de ajedrez. Como podemos ver el tablero de ajedrez es una figura muy sencilla compuesta de 64 cuadros ordenados en una cuadrícula de 8 x 8.

Vamos a analizar un poco más a fondo cómo vamos a hacer esto:

Nuestro tablero está formado por cuadros de 25 pixeles cada uno. Eso significa que la esquina superior izquierda (el origen) de el quinto cuadro de la primera fila sería (4 x 25, 0) es decir (100, 0), el sexto cuadro estaría en (5 x 25, 0) o (125, 0). Aqui podemos ver un patrón que es muy improtante porque es la base con la que vamos a crear nuestro ciclo. Veamos qué sucede para el quinto cuadro de la sexta fila (4 x 25, 5 x 25) o (100, 125). Como podemos ver todas las posiciones están en base a ((columna - 1) x 25, (fila - 1) x 25). Para evitar estar restando a las columnas y las filas podemos utilizar un índice que empiece de cero en lugar de uno.

Lo siguiente que debemos determinar es cuáles son los límites de nuestro ciclo. Podríamos hacer un ciclo que cuente hasta el 64 y que utilice una división y su módulo para obtener el número de fila y columna respectivamente. Podemos verlo con el siguiente código:

NOTA: Es muy importante que no olvides agregar el incremento hasta el final (square++). En caso de que lo hagas, tu programa se va a congelar y va a comenzar a utilizar muchísimos recursos para pintar. Peor aún, podría ser que NetBeans intentara dibujar el componente y se quedaría atorado por siempre en el ciclo, por lo que tendrías que cerrar la aplicación y perderías tu trabajo.

En caso de que corras un programa que tenga un ciclo sin fin puedes utilizar la ventana de runtime como se ve en la imagen (la ventana runtime está junto a la ventana de Projects y en caso de que no se vea puedes utilizar Window -> Runtime o Ctrl+5 para que aparezca):

Fíjate en el if. Lo que estamos haciendo es ver qué color había en la celda anterior y pintar la nueva celda con un color diferente. Esto nos sirve para hacer los cuadros blancos y negros alternados. Ahora compila y corre el programa y verás la siguiente imagen

Esto sucede porque los cuadros no siempre deben cambiar de color (como lo estamos haciendo en nuestro programa) sino que al cambiar de fila utilizan el mismo color que antes (si el último de la fila anterior era negro el primero de la fila actual también es negro). Podemos revisar con un if si estamos cambiando de fila (cuando col es igual a cero, significa que estamos en una fila nueva). El if puede ser como el siguiente:

Vuelve a probar tu programa y ahora deberá dibujar el tablero de manera correcta (en realidad casi correcta, el tablero tiene un cuadrado negro en la esquina inferior derecha y debería ser blanco, puedes cambiar el color con el que empezamos a pintar para corregir esto). Como puedes ver, puedes utilizar el módulo y la división como operaciones complementarias al utilizar ciclos, aunque este enfoque no es muy utilizado. Más adelante veremos una manera un poco más sencilla de lograr esto mismo. Una vez que hayas probado tu programa continúa con el ejercicio del gusano

Aqui hay varias cosas importantes que tomar en cuenta. Primero que nada, las partes del cuerpo van a estar alternando su posición vertical entre 0 y 5. Puedes observar que todas las partes del cuerpo nones van a estar arriba, mientras que las pares van a estar abajo, podemos utilizar un if que revise si la parte del cuerpo es non o par y la ponga en la posición en y que le corresponde. También podemos ver que la cabeza es diferente de las demás partes del cuerpo, por lo que debemos pintarla por separado y fuera de un ciclo. Por último debemos definir cómo va a ser el ciclo que utilicemos para pintar todas las partes del cuerpo.

La primera parte después de la cabeza (primera parte del cuerpo) va a estar en la posición 1 x 10, la segunda parte va a estar en la posición 2 x 10, la tercera parte va a estar en la posición 3 x 10. Ahí está el patrón que necesitamos para empezar a pintar. Tomando esto en cuenta podemos utilizar un ciclo que empiece desde 1 (fíjate que la primera parte tiene un 1, a diferencia del problema anterior porque aquí la cabeza es diferente).

Tomando en cuenta estas consideraciones podemos programar el siguiente código:

NOTA: Recuerda que es muy importante aumentar el acumulador con la línea pieces++.

Fíjate en cómo vamos a dibujar 40 piezas empezando el contador (pieces) en 1 y repitiendo el ciclo mientras que pieces sea menor o igual a cuarenta. También fíjate que utilizamos una variable y que representa la posición en y en que vamos a dibujar y el if se va a encargar de cambiarla de 0 a 5 y viceversa según sea necesario.

Compila y corre tu código asegurandote de que se dibuje el gusano correctamente. Por último vamos a dibujar el camión.

En teoría es muy similar al gusano, sólo que ahora en lugar de tener un número fijo de piezas del cuerpo tenemos un número variable que se encuentra guardado en la variable boxes. Otro detalle importante es que las cajas van separadas unas de otras, por lo que tendremos que poner un poco de separación.

Como podemos ver el método es practicamente igual que el anterior, pero cambiamos un poco la manera de dibujar los controles. Compila tu aplicación y correla para probar que funcione adecuadamente. Cambia el número de cajas que tiene el camión utilizando la caja de texto (introduce el número y presiona enter).

Comprime tu carpeta de trabajo y mándala por Blackboard.