For Loops

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.