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.