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.