For Loops (10 mins)

L.I.

En este tópico de esta sección, que es llamado un
for-loop. Y esto va a dar un

gran incremento en lo que podemos hacer con nuestro código.
Así, si miramos en la imagen

original de las flores, aquí, es de 457 pixeles de ancho por 360 pixeles. Entonces, si tu

multiplicas solo para tener el número total de pixeles hay alrededor de 164000

pixeles. Y esta es una pequeña imagen. Así que hay un montón de pixeles. Por la forma en que

estabamos escribiendo código antes, donde tenías una línea como pixel.setRed(255) para

cambiar un pixel a rojo, esto es, esto no es
una manera práctica de hacer una

operación en una imagen completa. Me refiero a, esta es
una imagen pequeña con mas de 100,000

pixeles. Así que necesitamos construir algo donde
podamos escribir unas pocas líneas de código

que capture un cambio que queremos hacer y entonces la computadora se encargue de

manejar las lineas de código y ejecutándolas una y otra vez por cada pixel que hay en la

imagen. Así el para-loop, el tópico de esta sección, hará exactamente esto y esto

va a ser un gran incremento en lo que podemos
hacer con, con el código. Entonces, dejenme hablar

sobre la, la estructura de esto. Solo
identificaré las partes y entonces

daré un ejemplo. Entonces, aquí en la caja azul tengo una figura con un for-loop

y solo hablaré de las partes que son.
Esto comienza. Y usaré mi

pluma. Esto, esto empieza el for-loop así que comienza con la palabra for y entonces en paréntesis

dice pixel punto y coma imagen y entonces hay un corchete que inicia para colocar la

siguiente línea y así lo que esto significa. Y todos los
sintaxis requieren los paréntesis

y el corchete y todo. Usualmente en mis
ejemplos o en los ejercicios

bueno, es solo, que es lo mismo cada vez.. Así que usualmente proveeremos esto y entonces

solo le pedimos que escriba el código en la siguiente línea.
Así que lo que esto significa es, por

cada pixel en esta imagen, por favor has lo siguiente
y lo siguiente está definido

como lo que esta en los corchetes resaltados
aquí. Entonce, estas líneas

dentro de esto. Es decir, lo que llamamos el cuerpo de el
for-loop. Y esto es

solo unas pocas líneas de código que pueden hacer, cualquier cosa que querramos. Así, el modo en que

el for-loop trabaja, y digamos que estamos, tu sabes,
trabajando en la imagen de las flores aquí.

Es. Aquí tenemos tres líneas. Así por lo que tomaremos, digamos, el pixel número uno de

toda la imagen, el pixel superior izquiero. Y así
esto, esto aisla el pixel número uno. Y entonces

el for-loop ejecuta estas, estas tres líneas. Así esto dice, pixel punto colocar rojo a cero

Pixel punto colocar verde en cero, Pixel punto colocar azul en cero. Por lo que todo esto es lo que le

está pasando al pixel #uno. Y entonces esto, realmente, lo que hace es cambiarlo a

negro, ¿Correcto?, esto coloca rojo, verde y azul
a cero. Así que cuando el for-loop llega hasta

abajo una cosa graciosa sucede y tengo una flecha negra. Se regresa

a la parte superior de las tres líneas, y ahora este
va a aislar el pixel número dos,

así el segundo píxel, y entonces esto ejecuta estas
tres líneas nuevamente. Y esto hace para

el pixel dos y entonces vuelve a la parte superior y
ejecuta las tres líneas de nuevo a partir

del pixel tres, etcétera, Esto solo ejecuta las líneas
una y otra y otra vez.

por cada pixel en la imagen. Así. La, oh! otra
cosa debo señalar aquí

es que te darás cuenta de que, las tres líneas en el cuerpo
son identadas (tabuladas) y esto no es

requerido pero esto es un, esto es una convención
común para mostrar que las líneas en el

cuerpo son un poco diferentes a las otras líneas de
código. Donde esta imagen es igual a una nueva

simpleImage, bueno, esto solo pasa una vez e
imprime la imagen.

Pero las líneas dentro del ciclo son un poco especiales
en que ellas tienen la calidad que

ellas están siendo ejecutadas una y otra vez. Así que tratemos. Solo ejecutaremos, el ejemplo

exacto. Así aquí tengo ese código ejecutable así el,que carga la imagen. Entonces

tengo el, el for-loop salido del cuerpo. Aquí
están las tres líneas del

cuerpo. Y entonces esto, es algo pequeño aquí pero hay una, una llave de cierre

una especie de equilibro entre la llave de apertura
que aquí cierra el cuerpo. Así que vamos solo a

ejecutar esto. A ver que tenemos. Así puedes ver,
que tenemos es este rectángulo negro

puro, y es, esto no es muy útil pero esto, esto
muestra lo que el for-loop hace

Así que lo que ha pasado es, tenemos la imagen
original de las flores con todos los tipos de

rojo y verde y amarillo y lo demas. Y
lo que este código ha hecho, esto ha

visitado cada píxel en la imagen y corrido estas tres líneas. Y lo que hacen es

que toman y ponen el rojo, verde y azul en ceros, asi que en realidad solo

cambian el pixel para que sean completamente negros. Entonces, si puedes imaginar que

esto esta pasando sobre toda la imagen de la flor, destruyendo toda la información, esto es

lo que nos deja, un rectángulo completamente negro. Ok. Dejenme intentar otro

ejemplo más interesante. Aqui voy a decir que por cada pixel, poner rojo, verde umm rojo

y verde en 255 y azul en cero. Entonces, quiero pensar, ¿cual es el codigo para

hacer eso?. Muchas veces, para estos problemas, tenemos el patrón que en Ingles,

nos dice, ok, tenemos, ya saben, para hacer este efecto, poner rojo en 255 o lo que sea. Y

finalmente, en el ejercicio, sera tu trabajo el traducir eso a

código. Asi que aquí esta el ejemplo de ese patrón. Entonces, el codigo para poner en

el cuerpo para cambiar rojo y verde a 255 y azul a cero es primero decir, las

primeras dos lineas dirán, pixel.setRed(255) y pixel.setGreen(255) y entonces, la

tercer linea seria pixel.setBlue(0). Asi que si corro eso. Lo que vemos es este

rectángulo amarillo brillante asi que esto es similar al ejemplo anterior. Hemos

cambiado el verde y el azul en cada pixel en esta imagen

en este caso para obtener este amarillo vibrante. Asi que estos dos ejemplos no son

nada realisticos verdad? Acabo de, acabamos de destruir toda la información e hicimos

este rectángulo de un solo color. Asi que ahora quiero intentar uno que es algo más

realistico, donde, en lugar de destruir toda la información de la imagen de

las flores, trabajamos con ella. Asi que aquí tenemos la, la imagen original de las flores. I como sabemos

amarillo es igual a rojo más amarillo asi que podriamos esperar que aqui donde tengo las flores

amarillas el rojo y el verde son altos. Así que lo que quiero hacer para

este ejemplo es poner el rojo en cero para toda la imagen. Piensa sobre que es lo que eso

va a hacer. Así que la primera pregunta es, bueno, cual es el código para hacer eso? Y

en este caso lo que ves es, solo tengo la linea pixel.setRed(0) como el

cuerpo. Ahora, en los ultimos ejempos el cuerpo fue de tres lineas de código. Podria ser,

podria ser cualquier cosa. Asi que puede ser tres o seis lineas. En este caso solamente va a

ser una linea. Y lo que esto dice, ya sabes, lo que diria en ingles para

este for-loop es, para cada pixel en la imagen, pon el rojo en cero. Asi que vamos a ver

como se ve. Si corro esto, lo que ves es algo como...

las flores han cambiado para ahora verse como flores verdes radioactivas.

Y esto tiene sentido si ves que es lo que hacian a las flores verse amarillas

antes eran amarillas porque tenian una combinación de luz roja y verde.

Lo que este codigo hace, solo pone en cero toda la luz roja. Es como si

apagaramos la lamprara a cero en toda la imagen. Asi que lo que tenemos al final es solo

la luz verde que estaba en la imagen. Otra cosa que hay que ver, viendo

aqui, a las hojas verdes en la parte de abajo en la derecha. No se ven

muy diferente asi que probablemente esto solo era luz verde para empezar. La luz

roja tenia, probablemente un valor de ocho o veinte, o algo asi. Así que cuando

cambiamos eso a cero en realidad no hizo mucha diferencia. Vamos

a intentar otro ejemplo. Para este voy a empezar con la imagen de

las flores y voy a decir que verde y azul sean cero y dejar rojo como esta. Entonces cual

es el código para eso? Bueno, voy a tener un cuerpo de dos lineas. Voy a decir

pixel.setGreen(0) y pixel.setBlue(0), y yo solo no voy a cambiar

el rojo, asi que se quede en lo que sea que esta. Asi que corramos eso. Y lo que ves

es que ahora tenemos estas flores rojas. Y lo que paso aquí es que, esto en realidad es

el canal rojo de la imagen. Y lo que paso es que, normalmente, la imagen es

esta combinación de luz roja, luz verde, y luz azul. Lo que hemos hecho es que cambiamos

las luces verde y azul a cero. Así que bajando esos para que sean

nada. Y lo que nos queda es un mapa de, en donde habia luz roja en

esta imagen? Donde había rojo brillante y donde había rojo obscuro? y lo que vemos es, pues

aquí en la izquierda, donde estaba obscuro, no hay mucha luz roja. Y tambien,

aqui, en las hojas verdes. No hay mucho rojo. Y asi que en realidad solamente en

las flores amarillas, habia una area prominente de luz roja. Asi que eso es, es

una forma de ver la imagen. Tambien hay un canal azul y

un canal verde que no haria ver donde están esas luces

alternadas. Ok. Para el for-loop, dije que es una

herramienta muy poderosa que nos ayuda a escribir unas pocas lineas de código y deja que la computadora las

corra sobre un set grande de información. Pero, estamos

con las imagenes. Deberia de mencionar que el lenguaje de JavaScrips que están usando en realidad

no tiene un for-loop tan compacto como este. Es una omisión en el

lenguaje. Asi que para esta clase yo lo agrege para que trabajara aquí. Así que si tu estas

haciendo algún otro problema de JavaScript me temo que no tendras esto. Pero muchos

lenguajes si tienen el for-loop que se ve igual que este. Es algo raro

que JavaScrips lo omita. Asi que este es el patrón para escribir en código, ya

sabes, solo en el sentido de que este pequeño pedazo de código captura lo que queremos y yo

diría que esto refleja el tema de la idea de que las computadoras son poderosas y

tambien algo estupidas. Asi que si tu quieres escribir código que es más interesante, como

cambiar el verde de esta forma o de aquella o lo que sea. Y entonces insertandolo en

el for-loop tenemos este trabajo en equipo con la computadora donde la computadora tomara

cargo de lo dificil, como correr algo cien mil o

millones de veces. La computadora hace eso pero tambien, la computadora esta

en realidad haciendo algo muy mecanico. Asi que yo creo que

esto si muestra el tema general de como son las computadoras. Que las

computadoras manejan la parte mecanica rapidamente pero la persona tiene que añadir la

creatividad para controlar lo que en realidad va a suceder. Asi que en la proxima sección

-y hay unos ejercicios que se ven algo asi- y despues en la proxima sección necesito

añadir una cosa mas que nos permitirá hacer ejemplos de como procesar

la imagen asi que son mucho mas interesantes.