Este tópico desta seção, que é chamado de loop. E isso vai dar um grande aumento no que fazemos com o nosso código. Então, se olharmos para a imagem flores originais, aqui é 457 pixels de largura por 360 pixels. Portanto, se seu multiplicar apenas para obter o número total de pixels, existem cerca de 164.000 pixels. E esta é uma pequena imagem. Portanto, há um monte de pixels. A propósito estava escrevendo código antes de onde você teve uma linha como pixel.setRed (255) para a alteração de um pixel vermelho, ie, este não é uma forma prática para fazer uma operação em um quadro completo. Quero dizer, este é uma pequena imagem com mais de 100.000 pixels. Portanto, precisamos construir algo que podemos escrever algumas linhas de código pegar uma mudança que queremos fazer e, em seguida, o computador é responsável por gerenciamento e execução de linhas de código e outra vez para cada pixel que está no imagem. Assim, o loop for, o tema desta seção, vai fazer exatamente isso e isso será um grande aumento no que nós fazer com, com o código. Então deixe-me falar sobre a estrutura deste. Único irá identificar as partes e, em seguida, dar um exemplo. Então, aqui na caixa azul tenho uma figura com um loop for- e discutir apenas as peças que são. Isso inicia. E eu vou usar o meu caneta. Este, este inicia o loop for por isso começa com a palavra e, em seguida, entre parênteses diz pixel da imagem ponto e vírgula e, em seguida, há uma faixa que começa a colocar o linha seguinte e assim que isso significa. E tudo sintaxe necessária pelos parênteses eo suporte e de todos. Normalmente em minha exemplos ou exercícios bem, é justo, é a mesma coisa de cada vez .. Então geralmente oferecem isso e, em seguida, apenas pedimos que você escrever o código na linha seguinte. Então o que isto significa é, cada pixel na imagem, faça o seguinte eo seguinte é definido como o que está entre parênteses em destaque aqui. Foi então que estas linhas dentro deste. Isso é o que chamamos de corpo do loop. Isto é apenas algumas linhas de código que pode fazer qualquer coisa que quisermos. Assim, a maneira pela qual as obras para o laço, e dizer que estamos, você sabe, trabalhando a imagem das flores aqui. Es Aqui temos três linhas. Então, por isso vamos tomar, digamos, o número de um pixel imagem inteira, o izquiero superior pixel. E assim isso, este isola o número um pixel. E, em seguida o para-loop executa estes, estas três linhas. Portanto, este diz, colocar ponto zero vermelho pixels Pixel verde posição do ponto zero, redução de um ponto azul Pixel para zero. Então é isso que vai pixels # um. E então ele realmente não é alterá-lo para preta, certo?, isso coloca vermelho, verde e azul a zero. Assim, quando o loop for atinge uma coisa engraçada acontece para baixo e eu tenho uma seta preta. Voltamos para o início das três linhas, e agora esta vai isolar o número de pixels dois, eo segundo pixel e, em seguida, ele executa estas três linhas de novo. E isso contribui para dois pixel e, em seguida, retorna para o topo e as três linhas de execução de volta pixel de três, etc Isso só executar as linhas mais e mais e mais uma vez. para cada pixel na imagem. Assim. O, oh! outro coisa que eu devo apontar aqui é que você vai notar que as três linhas no corpo são recuadas (ponderada) e isso não é mas esta é necessária, esta é uma convenção comum para mostrar que as linhas do corpo é um pouco diferente das outras linhas código. Onde a imagem é igual a um novo SimpleImage, bem, isso só acontece uma vez e imprime a imagem. Mas as linhas dentro da série são um pouco especial em que eles têm a qualidade eles estão sendo executados repetidamente. Por isso, vamos tentar. Basta executar o exemplo preciso. Então aqui eu tenho que e o código executável, que carrega a imagem. Então I têm a, para o laço-para fora do corpo. Aqui são as três linhas de corpo. E então isso é algo pequeno, mas aqui há uma chave de fechamento uma espécie de equilíbrio entre a abertura de chave aqui fecha o corpo. Portanto, vamos apenas implementar isso. Para ver o que temos. Assim você pode ver, temos é o retângulo preto puro, e é, isso não é muito útil, mas isso, este mostra o que faz com que o loop for- Então o que aconteceu é que temos a imagem flores originais com todos os tipos de vermelho e verde e amarelo eo resto. E de modo que este código tem sido feito, isto tem visitou cada pixel da imagem e executar estas três linhas. E o que eles fazem é eles tomam e colocar o vermelho, verde e azul para zero, assim, na realidade, apenas alterar o pixel a ser completamente preto. Então, se você pode imaginar isso está acontecendo em toda a imagem da flor, destruindo toda a informação que é deixando-nos com um retângulo completamente preto. Ok. Deixe-me tentar outra exemplo mais interessante. Aqui vou dizer que para cada pixel, ao vermelho, verde, vermelho umm verde e azul 255 e zero. Então, eu acho, o que é o código para fazer isso?. Muitas vezes, para esses problemas, temos o padrão em Inglês, nos diz: ok, nós, você sabe, para o efeito, colocar vermelho em 255 ou qualquer outra coisa. E finalmente, no ano, será o seu trabalho de traduzir isso para código. Então aqui está o exemplo de que o padrão. Em seguida, o código para colocar em o corpo para alterar a 255 vermelho e verde e azul para zero é a primeira a dizer, primeiras duas linhas dizer, pixel.setRed (255), pixel.setGreen (255), então o terceira linha iria pixel.setBlue (0). Então, se eu executar isso. O que vemos é esse rectângulo amarelo brilhante de modo que este é semelhante ao do exemplo anterior. Nós mudou o verde e azul, em cada pixel na imagem neste caso, para obter o vibrante amarelo. Assim, estes dois exemplos não são Direito nada realista? Eu apenas, apenas destruir toda a informação e fez este retângulo de uma cor. Então, agora eu quero tentar um que é mais realista, onde, em vez de destruir toda a informação da imagem flores, trabalhar com ele. Então aqui estamos nós, a imagem original de flores. Eu gosto de saber o amarelo é igual vermelho mais amarelo assim que nós poderíamos esperar que aqui onde eu tenho as flores vermelho, amarelo e verde são elevados. Então, o que posso fazer para Neste exemplo é colocar o zero vermelho para toda a imagem. Pense sobre o que vai fazer. Assim, a primeira pergunta é, bem, o que é o código para fazer isso? E neste caso o que você vê é, eu tenho apenas uma linha pixel.setRed (0) como o corpo. Agora, nos últimos ejempos o corpo tinha três linhas de código. Pode ser, Poderia ser qualquer coisa. Então você pode ser de três ou seis linhas. Neste caso, apenas irá ser uma linha. E o que este diz, você sabe, que eu diria em Inglês a Este loop-se, para cada pixel da imagem, coloque o zero vermelho. Então vamos ver imediata. Se eu executar isso, o que você vê é algo como ... as flores já mudou a aparência radioativos flores verdes. E isso faz sentido se você ver que é o que eles fizeram com as flores sendo amarela antes eram amarelos porque eles tinham uma combinação de vermelho e verde. O que este código faz, apenas limpa toda a luz vermelha. É como se que desligou o lamprara a zero em toda a imagem. Então o que temos no final é só luz verde estava na foto. Outra coisa a fazer, vendo Aqui, as folhas verdes na parte inferior do lado direito. Não visto muito diferente, então provavelmente esta foi apenas a luz verde para começar. Luz Vermelho tinha, provavelmente vale oito ou vinte, ou algo assim. Assim, quando alterá-la a zero, na verdade não faz muita diferença. Nós tentar um outro exemplo. Para isso vou começar com a imagem de flores e eu vou dizer que o verde e azul são zero e deixar vermelho como este. Então, o que é o código para isso? Bem, eu vou ter um corpo de duas linhas. Direi pixel.setGreen (0) e pixel.setBlue (0), e eu não vou mudar vermelho, para ficar no que quer que isso. Por isso, vamos executá-lo. E o que você vê agora temos estas flores vermelhas. E o que aconteceu aqui é que este é realmente o canal de vermelho da imagem. E o que aconteceu é que, normalmente, a imagem é essa combinação de vermelho, verde e azul. O que fizemos é que mudamos luzes verdes e azuis para zero. Assim, baixando aqueles a ser nada. E o que resta é um mapa, onde a luz vermelha tinha essa foto? Onde havia vermelho vermelho escuro e brilhante, onde lá? eo que vemos é, portanto, aqui do lado esquerdo, onde estava escuro, há pouca luz vermelha. E também, aqui em folhas verdes. Existe uma grande quantidade de vermelho. E assim, na realidade, apenas flores amarelas, tinha uma área de luz proeminente vermelho. Assim é, é uma maneira de visualizar a imagem. Existe também um canal de azul canal verde não faria ver onde as luzes alternativo. Ok. Para o loop for, eu disse que é um ferramenta muito poderosa que nos ajuda a escrever algumas linhas de código e deixar o computador executado em um grande conjunto de informações. Mas nós com as imagens. Deve notar-se que a língua que estão usando JavaScrips realmente não tem um loop for tão compacto como este. É uma omissão no idioma. Assim, para esta classe I agrege para trabalhar aqui. Então se você está fazendo algum outro problema que eu tenho medo de JavaScript não vai ter isso. Mas muitos línguas se eles têm o loop for parecido com este. É raro JavaScrips ignorá-lo. Portanto, este é o padrão para escrever o código, e sabe, apenas no sentido de que este pequeno pedaço de código capta o que queremos e eu Eu diria que isso reflete o tema da idéia de que computadores são poderosos e também algo estúpido. Então, se você quiser escrever código que é mais interessante, como mudar o verde dessa forma ou que ou o que quer. E, em seguida, inseri-lo na o loop for, temos este trabalho em equipe com o computador onde o computador vai demorar por quão difícil como a execução de algumas centenas de milhares ou milhão de vezes. O computador faz isso, mas também, o computador é realmente fazendo alguma coisa muito mecânica. Então eu acho que ele mostra o tema geral, tais como computadores. Que computadores lidar com a mecânica rapidamente, mas a pessoa tem que adicionar o criatividade para controlar o que vai realmente acontecer. Então, na próxima seção -E há alguns exercícios que são algo como isso e, em seguida, na próxima seção precisa acrescentar mais uma coisa que vai nos permitir exemplos de como processar a imagem que eles são muito mais interessantes.