1
00:00:00,780 --> 00:00:05,280
En este tópico de esta sección, que es llamado un 
for-loop. Y esto va a dar un

2
00:00:05,280 --> 00:00:09,722
gran incremento en lo que podemos hacer con nuestro código.
Así, si miramos en la imagen

3
00:00:09,910 --> 00:00:14,672
original de las flores, aquí, es de 457 pixeles de ancho por 360 pixeles. Entonces, si tu

4
00:00:14,672 --> 00:00:19,684
multiplicas solo para tener el número total de pixeles hay alrededor de 164000

5
00:00:19,684 --> 00:00:24,697
pixeles. Y esta es una pequeña imagen. Así que hay un montón de pixeles. Por la forma en que

6
00:00:24,697 --> 00:00:29,835
estabamos escribiendo código antes, donde tenías una línea como pixel.setRed(255) para

7
00:00:29,835 --> 00:00:34,346
cambiar un pixel a rojo, esto es, esto no es 
una manera práctica de hacer una

8
00:00:34,346 --> 00:00:39,171
operación en una imagen completa. Me refiero a, esta es
una imagen pequeña con mas de 100,000

9
00:00:39,171 --> 00:00:43,965
pixeles. Así que necesitamos construir algo donde
podamos escribir unas pocas líneas de código

10
00:00:43,965 --> 00:00:49,191
que capture un cambio que queremos hacer y entonces la computadora se encargue de

11
00:00:49,191 --> 00:00:54,541
manejar las lineas de código y ejecutándolas una y otra vez por cada pixel que hay en la

12
00:00:54,541 --> 00:00:59,581
imagen. Así el para-loop, el tópico de esta sección, hará exactamente esto y esto

13
00:00:59,581 --> 00:01:04,610
va a ser un gran incremento en lo que podemos 
hacer con, con el código. Entonces, dejenme hablar

14
00:01:04,610 --> 00:01:09,003
sobre la, la estructura de esto. Solo 
identificaré las partes y entonces

15
00:01:09,003 --> 00:01:13,693
daré un ejemplo. Entonces, aquí en la caja azul tengo una figura con un for-loop

16
00:01:13,693 --> 00:01:20,751
y solo hablaré de las partes que son. 
Esto comienza. Y usaré mi

17
00:01:20,751 --> 00:01:27,484
pluma. Esto, esto empieza el for-loop así que comienza con la palabra for y entonces en paréntesis

18
00:01:27,484 --> 00:01:33,423
dice pixel punto y coma imagen y entonces hay un corchete que inicia para colocar la

19
00:01:33,423 --> 00:01:38,565
siguiente línea y así lo que esto significa. Y todos los 
sintaxis requieren los paréntesis

20
00:01:38,565 --> 00:01:43,046
y el corchete y todo. Usualmente en mis 
ejemplos o en los ejercicios

21
00:01:43,046 --> 00:01:47,583
bueno, es solo, que es lo mismo cada vez.. Así que usualmente proveeremos esto y entonces

22
00:01:47,583 --> 00:01:52,120
solo le pedimos que escriba el código en la siguiente línea.
Así que lo que esto significa es, por

23
00:01:52,120 --> 00:01:56,490
cada pixel en esta imagen, por favor has lo siguiente 
y lo siguiente está definido

24
00:01:56,490 --> 00:02:03,720
como lo que esta en los corchetes resaltados 
aquí. Entonce, estas líneas

25
00:02:03,720 --> 00:02:09,243
dentro de esto. Es decir, lo que llamamos el cuerpo de el
for-loop. Y esto es

26
00:02:09,243 --> 00:02:14,627
solo unas pocas líneas de código que pueden hacer, cualquier cosa que querramos. Así, el modo en que

27
00:02:14,627 --> 00:02:20,010
el for-loop trabaja, y digamos que estamos, tu sabes, 
trabajando en la imagen de las flores aquí.

28
00:02:20,220 --> 00:02:25,240
Es. Aquí tenemos tres líneas. Así por lo que tomaremos, digamos, el pixel número uno de

29
00:02:25,240 --> 00:02:29,617
toda la imagen, el pixel superior izquiero. Y así
esto, esto aisla el pixel número uno. Y entonces

30
00:02:29,617 --> 00:02:33,365
el for-loop ejecuta estas, estas tres líneas. Así esto dice, pixel punto colocar rojo a cero

31
00:02:33,365 --> 00:02:37,165
Pixel punto colocar verde en cero, Pixel punto colocar azul en cero. Por lo que todo esto es lo que le

32
00:02:37,165 --> 00:02:41,066
está pasando al pixel #uno. Y entonces esto, realmente, lo que hace es cambiarlo a

33
00:02:41,066 --> 00:02:45,348
negro, ¿Correcto?, esto coloca rojo, verde y azul 
a cero. Así que cuando el for-loop llega hasta

34
00:02:45,348 --> 00:02:49,917
abajo una cosa graciosa sucede y tengo una flecha negra. Se regresa

35
00:02:49,917 --> 00:02:54,720
a la parte superior de las tres líneas, y ahora este 
va a aislar el pixel número dos,

36
00:02:54,720 --> 00:02:59,230
así el segundo píxel, y entonces esto ejecuta estas
tres líneas nuevamente. Y esto hace para

37
00:02:59,230 --> 00:03:04,268
el pixel dos y entonces vuelve a la parte superior y
ejecuta las tres líneas de nuevo a partir

38
00:03:04,268 --> 00:03:08,837
del pixel tres, etcétera, Esto solo ejecuta las líneas 
una y otra y otra vez.

39
00:03:08,837 --> 00:03:15,044
por cada pixel en la imagen. Así. La, oh! otra 
cosa debo señalar aquí

40
00:03:15,044 --> 00:03:19,220
es que te darás cuenta de que, las tres líneas en el cuerpo
son identadas (tabuladas) y esto no es

41
00:03:19,220 --> 00:03:23,044
requerido pero esto es un, esto es una convención
común para mostrar que las líneas en el

42
00:03:23,044 --> 00:03:27,271
cuerpo son un poco diferentes a las otras líneas de
código. Donde esta imagen es igual a una nueva

43
00:03:27,271 --> 00:03:31,346
simpleImage, bueno, esto solo pasa una vez e 
imprime la imagen.

44
00:03:31,346 --> 00:03:35,623
Pero las líneas dentro del ciclo son un poco especiales
en que ellas tienen la calidad que

45
00:03:35,623 --> 00:03:40,084
ellas están siendo ejecutadas una y otra vez. Así que tratemos. Solo ejecutaremos, el ejemplo

46
00:03:40,084 --> 00:03:44,658
exacto. Así aquí tengo ese código ejecutable así el,que carga la imagen. Entonces

47
00:03:44,658 --> 00:03:49,290
tengo el, el for-loop salido del cuerpo. Aquí 
están las tres líneas del

48
00:03:49,290 --> 00:03:54,095
cuerpo. Y entonces esto, es algo pequeño aquí pero hay una, una llave de cierre

49
00:03:54,095 --> 00:03:58,958
una especie de equilibro entre la llave de apertura 
que aquí cierra el cuerpo. Así que vamos solo a

50
00:03:58,958 --> 00:04:03,315
ejecutar esto. A ver que tenemos. Así puedes ver,
que tenemos es este rectángulo negro

51
00:04:03,315 --> 00:04:07,660
puro, y es, esto no es muy útil pero esto, esto 
muestra lo que el for-loop hace

52
00:04:07,660 --> 00:04:12,059
Así que lo que ha pasado es, tenemos la imagen
original de las flores con todos los tipos de

53
00:04:12,059 --> 00:04:16,938
rojo y verde y amarillo y lo demas. Y 
lo que este código ha hecho, esto ha

54
00:04:16,938 --> 00:04:21,912
visitado cada píxel en la imagen y corrido estas tres líneas. Y lo que hacen es

55
00:04:21,912 --> 00:04:26,396
que toman y ponen el rojo, verde y azul en ceros, asi que en realidad solo

56
00:04:26,396 --> 00:04:31,002
cambian el pixel para que sean completamente negros. Entonces, si puedes imaginar que

57
00:04:31,002 --> 00:04:35,916
esto esta pasando sobre toda la imagen de la flor, destruyendo toda la información, esto es

58
00:04:35,916 --> 00:04:41,358
lo que nos deja, un rectángulo completamente negro. Ok. Dejenme intentar otro

59
00:04:41,358 --> 00:04:48,129
ejemplo más interesante. Aqui voy a decir que por cada pixel, poner rojo, verde umm rojo

60
00:04:48,129 --> 00:04:53,608
y verde en 255 y azul en cero. Entonces, quiero pensar, ¿cual es el codigo para

61
00:04:53,608 --> 00:04:58,030
hacer eso?. Muchas veces, para estos problemas, tenemos el patrón que en Ingles,

62
00:04:58,030 --> 00:05:02,279
nos dice, ok, tenemos, ya saben, para hacer este efecto, poner rojo en 255 o lo que sea. Y

63
00:05:02,279 --> 00:05:07,044
finalmente, en el ejercicio, sera tu trabajo el traducir eso a

64
00:05:07,044 --> 00:05:11,638
código. Asi que aquí esta el ejemplo de ese patrón. Entonces, el codigo para poner en

65
00:05:11,638 --> 00:05:16,633
el cuerpo para cambiar rojo y verde a 255 y azul a cero es primero decir, las

66
00:05:16,633 --> 00:05:21,399
primeras dos lineas dirán, pixel.setRed(255) y pixel.setGreen(255) y entonces, la

67
00:05:21,399 --> 00:05:25,956
tercer linea seria pixel.setBlue(0). Asi que si corro eso. Lo que vemos es este

68
00:05:25,956 --> 00:05:30,171
rectángulo amarillo brillante asi que esto es similar al ejemplo anterior. Hemos

69
00:05:30,171 --> 00:05:34,545
cambiado el verde y el azul en cada pixel en esta imagen

70
00:05:34,545 --> 00:05:39,863
en este caso para obtener este amarillo vibrante. Asi que estos dos ejemplos no son

71
00:05:39,863 --> 00:05:44,055
nada realisticos verdad? Acabo de, acabamos de destruir toda la información e hicimos

72
00:05:44,055 --> 00:05:48,140
este rectángulo de un solo color. Asi que ahora quiero intentar uno que es algo más

73
00:05:48,140 --> 00:05:51,908
realistico, donde, en lugar de destruir toda la información de la imagen de

74
00:05:51,908 --> 00:05:56,650
las flores, trabajamos con ella. Asi que aquí tenemos la, la imagen original de las flores. I como sabemos

75
00:05:56,857 --> 00:06:02,852
amarillo es igual a rojo más amarillo asi que podriamos esperar que aqui donde tengo las flores

76
00:06:02,852 --> 00:06:08,572
amarillas el rojo y el verde son altos. Así que lo que quiero hacer para

77
00:06:08,572 --> 00:06:14,085
este ejemplo es poner el rojo en cero para toda la imagen. Piensa sobre que es lo que eso

78
00:06:14,085 --> 00:06:19,235
va a hacer. Así que la primera pregunta es, bueno, cual es el código para hacer eso? Y

79
00:06:19,235 --> 00:06:23,753
en este caso lo que ves es, solo tengo la linea pixel.setRed(0) como el

80
00:06:23,753 --> 00:06:28,440
cuerpo. Ahora, en los ultimos ejempos el cuerpo fue de tres lineas de código. Podria ser,

81
00:06:28,440 --> 00:06:33,014
podria ser cualquier cosa. Asi que puede ser tres o seis lineas. En este caso solamente va a

82
00:06:33,014 --> 00:06:37,589
ser una linea. Y lo que esto dice, ya sabes, lo que diria en ingles para

83
00:06:37,589 --> 00:06:41,994
este for-loop es, para cada pixel en la imagen, pon el rojo en cero. Asi que vamos a ver

84
00:06:41,994 --> 00:06:46,621
como se ve. Si corro esto, lo que ves es algo como...

85
00:06:46,621 --> 00:06:51,600
las flores han cambiado para ahora verse como flores verdes radioactivas.

86
00:06:51,600 --> 00:06:55,790
Y esto tiene sentido si ves que es lo que hacian a las flores verse amarillas

87
00:06:55,790 --> 00:07:00,190
antes eran amarillas porque tenian una combinación de luz roja y verde.

88
00:07:00,190 --> 00:07:03,874
Lo que este codigo hace, solo pone en cero toda la luz roja. Es como si

89
00:07:03,874 --> 00:07:07,700
apagaramos la lamprara a cero en toda la imagen. Asi que lo que tenemos al final es solo

90
00:07:07,700 --> 00:07:11,526
la luz verde que estaba en la imagen. Otra cosa que hay que ver, viendo

91
00:07:11,526 --> 00:07:15,305
aqui, a las hojas verdes en la parte de abajo en la derecha. No se ven

92
00:07:15,305 --> 00:07:19,415
muy diferente asi que probablemente esto solo era luz verde para empezar. La luz

93
00:07:19,415 --> 00:07:23,288
roja tenia, probablemente un valor de ocho o veinte, o algo asi. Así que cuando

94
00:07:23,288 --> 00:07:29,698
cambiamos eso a cero en realidad no hizo mucha diferencia. Vamos

95
00:07:29,698 --> 00:07:34,881
a intentar otro ejemplo. Para este voy a empezar con la imagen de

96
00:07:34,881 --> 00:07:40,596
las flores y voy a decir que verde y azul sean cero y dejar rojo como esta. Entonces cual

97
00:07:40,596 --> 00:07:45,978
es el código para eso? Bueno, voy a tener un cuerpo de dos lineas. Voy a decir

98
00:07:45,978 --> 00:07:51,560
pixel.setGreen(0) y pixel.setBlue(0), y yo solo no voy a cambiar

99
00:07:51,560 --> 00:07:57,843
el rojo, asi que se quede en lo que sea que esta. Asi que corramos eso. Y lo que ves

100
00:07:57,843 --> 00:08:04,590
es que ahora tenemos estas flores rojas. Y lo que paso aquí es que, esto en realidad es

101
00:08:04,590 --> 00:08:09,309
el canal rojo de la imagen. Y lo que paso es que, normalmente, la imagen es

102
00:08:09,309 --> 00:08:13,691
esta combinación de luz roja, luz verde, y luz azul. Lo que hemos hecho es que cambiamos

103
00:08:13,691 --> 00:08:17,848
las luces verde y azul a cero. Así que bajando esos para que sean

104
00:08:17,848 --> 00:08:22,342
nada. Y lo que nos queda es un mapa de, en donde habia luz roja en

105
00:08:22,342 --> 00:08:26,723
esta imagen? Donde había rojo brillante y donde había rojo obscuro? y lo que vemos es, pues

106
00:08:26,723 --> 00:08:31,274
aquí en la izquierda, donde estaba obscuro, no hay mucha luz roja. Y tambien,

107
00:08:31,274 --> 00:08:35,132
aqui, en las hojas verdes. No hay mucho rojo. Y asi que en realidad solamente en

108
00:08:35,132 --> 00:08:39,986
las flores amarillas, habia una area prominente de luz roja. Asi que eso es, es

109
00:08:39,986 --> 00:08:44,337
una forma de ver la imagen. Tambien hay un canal azul y

110
00:08:44,337 --> 00:08:48,410
un canal verde que no haria ver donde están esas luces

111
00:08:48,410 --> 00:08:55,053
alternadas. Ok. Para el for-loop, dije que es una

112
00:08:55,053 --> 00:08:59,476
herramienta muy poderosa que nos ayuda a escribir unas pocas lineas de código y deja que la computadora las

113
00:08:59,476 --> 00:09:03,488
corra sobre un set grande de información. Pero, estamos

114
00:09:03,488 --> 00:09:07,912
con las imagenes. Deberia de mencionar que el lenguaje de JavaScrips que están usando en realidad

115
00:09:07,912 --> 00:09:11,975
no tiene un for-loop tan compacto como este. Es una omisión en el

116
00:09:11,975 --> 00:09:15,935
lenguaje. Asi que para esta clase yo lo agrege para que trabajara aquí. Así que si tu estas

117
00:09:15,935 --> 00:09:19,844
haciendo algún otro problema de JavaScript me temo que no tendras esto. Pero muchos

118
00:09:19,844 --> 00:09:24,114
lenguajes si tienen el for-loop que se ve igual que este. Es algo raro

119
00:09:24,114 --> 00:09:29,844
que JavaScrips lo omita. Asi que este es el patrón para escribir en código, ya

120
00:09:29,844 --> 00:09:34,331
sabes, solo en el sentido de que este pequeño pedazo de código captura lo que queremos y yo

121
00:09:34,331 --> 00:09:39,045
diría que esto refleja el tema de la idea de que las computadoras son poderosas y

122
00:09:39,045 --> 00:09:43,532
tambien algo estupidas. Asi que si tu quieres escribir código que es más interesante, como

123
00:09:43,532 --> 00:09:48,190
cambiar el verde de esta forma o de aquella o lo que sea. Y entonces insertandolo en

124
00:09:48,190 --> 00:09:53,018
el for-loop tenemos este trabajo en equipo con la computadora donde la computadora tomara

125
00:09:53,018 --> 00:09:57,009
cargo de lo dificil, como correr algo cien mil o

126
00:09:57,009 --> 00:10:01,621
millones de veces. La computadora hace eso pero tambien, la computadora esta

127
00:10:01,621 --> 00:10:05,419
en realidad haciendo algo muy mecanico. Asi que yo creo que

128
00:10:05,419 --> 00:10:09,867
esto si muestra el tema general de como son las computadoras. Que las

129
00:10:09,867 --> 00:10:14,371
computadoras manejan la parte mecanica rapidamente pero la persona tiene que añadir la

130
00:10:14,371 --> 00:10:18,820
creatividad para controlar lo que en realidad va a suceder. Asi que en la proxima sección

131
00:10:18,990 --> 00:10:23,764
-y hay unos ejercicios que se ven algo asi- y despues en la proxima sección necesito

132
00:10:23,764 --> 00:10:28,481
añadir una cosa mas que nos permitirá hacer ejemplos de como procesar

133
00:10:28,481 --> 00:10:31,380
la imagen asi que son mucho mas interesantes.