[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.78,0:00:05.28,Default,,0000,0000,0000,,Este tópico desta seção, que é chamado de\Nloop. E isso vai dar um
Dialogue: 0,0:00:05.28,0:00:09.72,Default,,0000,0000,0000,,grande aumento no que fazemos com o nosso código.\NEntão, se olharmos para a imagem
Dialogue: 0,0:00:09.91,0:00:14.67,Default,,0000,0000,0000,,flores originais, aqui é 457 pixels de largura por 360 pixels. Portanto, se seu
Dialogue: 0,0:00:14.67,0:00:19.68,Default,,0000,0000,0000,,multiplicar apenas para obter o número total de pixels, existem cerca de 164.000
Dialogue: 0,0:00:19.68,0:00:24.70,Default,,0000,0000,0000,,pixels. E esta é uma pequena imagem. Portanto, há um monte de pixels. A propósito
Dialogue: 0,0:00:24.70,0:00:29.84,Default,,0000,0000,0000,,estava escrevendo código antes de onde você teve uma linha como pixel.setRed (255) para
Dialogue: 0,0:00:29.84,0:00:34.34,Default,,0000,0000,0000,,a alteração de um pixel vermelho, ie, este não é\Numa forma prática para fazer uma
Dialogue: 0,0:00:34.34,0:00:39.17,Default,,0000,0000,0000,,operação em um quadro completo. Quero dizer, este é\Numa pequena imagem com mais de 100.000
Dialogue: 0,0:00:39.17,0:00:43.96,Default,,0000,0000,0000,,pixels. Portanto, precisamos construir algo que\Npodemos escrever algumas linhas de código
Dialogue: 0,0:00:43.96,0:00:49.19,Default,,0000,0000,0000,,pegar uma mudança que queremos fazer e, em seguida, o computador é responsável por
Dialogue: 0,0:00:49.19,0:00:54.54,Default,,0000,0000,0000,,gerenciamento e execução de linhas de código e outra vez para cada pixel que está no
Dialogue: 0,0:00:54.54,0:00:59.58,Default,,0000,0000,0000,,imagem. Assim, o loop for, o tema desta seção, vai fazer exatamente isso e isso
Dialogue: 0,0:00:59.58,0:01:04.61,Default,,0000,0000,0000,,será um grande aumento no que nós\Nfazer com, com o código. Então deixe-me falar
Dialogue: 0,0:01:04.61,0:01:09.00,Default,,0000,0000,0000,,sobre a estrutura deste. Único\Nirá identificar as partes e, em seguida,
Dialogue: 0,0:01:09.00,0:01:13.69,Default,,0000,0000,0000,,dar um exemplo. Então, aqui na caixa azul tenho uma figura com um loop for-
Dialogue: 0,0:01:13.69,0:01:20.75,Default,,0000,0000,0000,,e discutir apenas as peças que são.\NIsso inicia. E eu vou usar o meu
Dialogue: 0,0:01:20.75,0:01:27.48,Default,,0000,0000,0000,,caneta. Este, este inicia o loop for por isso começa com a palavra e, em seguida, entre parênteses
Dialogue: 0,0:01:27.48,0:01:33.42,Default,,0000,0000,0000,,diz pixel da imagem ponto e vírgula e, em seguida, há uma faixa que começa a colocar o
Dialogue: 0,0:01:33.42,0:01:38.56,Default,,0000,0000,0000,,linha seguinte e assim que isso significa. E tudo\Nsintaxe necessária pelos parênteses
Dialogue: 0,0:01:38.56,0:01:43.05,Default,,0000,0000,0000,,eo suporte e de todos. Normalmente em minha\Nexemplos ou exercícios
Dialogue: 0,0:01:43.05,0:01:47.58,Default,,0000,0000,0000,,bem, é justo, é a mesma coisa de cada vez .. Então geralmente oferecem isso e, em seguida,
Dialogue: 0,0:01:47.58,0:01:52.12,Default,,0000,0000,0000,,apenas pedimos que você escrever o código na linha seguinte.\NEntão o que isto significa é,
Dialogue: 0,0:01:52.12,0:01:56.49,Default,,0000,0000,0000,,cada pixel na imagem, faça o seguinte\Neo seguinte é definido
Dialogue: 0,0:01:56.49,0:02:03.72,Default,,0000,0000,0000,,como o que está entre parênteses em destaque\Naqui. Foi então que estas linhas
Dialogue: 0,0:02:03.72,0:02:09.24,Default,,0000,0000,0000,,dentro deste. Isso é o que chamamos de corpo do\Nloop. Isto é
Dialogue: 0,0:02:09.24,0:02:14.63,Default,,0000,0000,0000,,apenas algumas linhas de código que pode fazer qualquer coisa que quisermos. Assim, a maneira pela qual
Dialogue: 0,0:02:14.63,0:02:20.01,Default,,0000,0000,0000,,as obras para o laço, e dizer que estamos, você sabe,\Ntrabalhando a imagem das flores aqui.
Dialogue: 0,0:02:20.22,0:02:25.24,Default,,0000,0000,0000,,Es Aqui temos três linhas. Então, por isso vamos tomar, digamos, o número de um pixel
Dialogue: 0,0:02:25.24,0:02:29.62,Default,,0000,0000,0000,,imagem inteira, o izquiero superior pixel. E assim\Nisso, este isola o número um pixel. E, em seguida
Dialogue: 0,0:02:29.62,0:02:33.36,Default,,0000,0000,0000,,o para-loop executa estes, estas três linhas. Portanto, este diz, colocar ponto zero vermelho pixels
Dialogue: 0,0:02:33.36,0:02:37.16,Default,,0000,0000,0000,,Pixel verde posição do ponto zero, redução de um ponto azul Pixel para zero. Então é isso que
Dialogue: 0,0:02:37.16,0:02:41.07,Default,,0000,0000,0000,,vai pixels # um. E então ele realmente não é alterá-lo para
Dialogue: 0,0:02:41.07,0:02:45.35,Default,,0000,0000,0000,,preta, certo?, isso coloca vermelho, verde e azul\Na zero. Assim, quando o loop for atinge
Dialogue: 0,0:02:45.35,0:02:49.92,Default,,0000,0000,0000,,uma coisa engraçada acontece para baixo e eu tenho uma seta preta. Voltamos
Dialogue: 0,0:02:49.92,0:02:54.72,Default,,0000,0000,0000,,para o início das três linhas, e agora esta\Nvai isolar o número de pixels dois,
Dialogue: 0,0:02:54.72,0:02:59.23,Default,,0000,0000,0000,,eo segundo pixel e, em seguida, ele executa estas\Ntrês linhas de novo. E isso contribui para
Dialogue: 0,0:02:59.23,0:03:04.27,Default,,0000,0000,0000,,dois pixel e, em seguida, retorna para o topo e\Nas três linhas de execução de volta
Dialogue: 0,0:03:04.27,0:03:08.84,Default,,0000,0000,0000,,pixel de três, etc Isso só executar as linhas\Nmais e mais e mais uma vez.
Dialogue: 0,0:03:08.84,0:03:15.04,Default,,0000,0000,0000,,para cada pixel na imagem. Assim. O, oh! outro\Ncoisa que eu devo apontar aqui
Dialogue: 0,0:03:15.04,0:03:19.22,Default,,0000,0000,0000,,é que você vai notar que as três linhas no corpo\Nsão recuadas (ponderada) e isso não é
Dialogue: 0,0:03:19.22,0:03:23.04,Default,,0000,0000,0000,,mas esta é necessária, esta é uma convenção\Ncomum para mostrar que as linhas do
Dialogue: 0,0:03:23.04,0:03:27.27,Default,,0000,0000,0000,,corpo é um pouco diferente das outras linhas\Ncódigo. Onde a imagem é igual a um novo
Dialogue: 0,0:03:27.27,0:03:31.35,Default,,0000,0000,0000,,SimpleImage, bem, isso só acontece uma vez e\Nimprime a imagem.
Dialogue: 0,0:03:31.35,0:03:35.62,Default,,0000,0000,0000,,Mas as linhas dentro da série são um pouco especial\Nem que eles têm a qualidade
Dialogue: 0,0:03:35.62,0:03:40.08,Default,,0000,0000,0000,,eles estão sendo executados repetidamente. Por isso, vamos tentar. Basta executar o exemplo
Dialogue: 0,0:03:40.08,0:03:44.66,Default,,0000,0000,0000,,preciso. Então aqui eu tenho que e o código executável, que carrega a imagem. Então
Dialogue: 0,0:03:44.66,0:03:49.29,Default,,0000,0000,0000,,I têm a, para o laço-para fora do corpo. Aqui\Nsão as três linhas de
Dialogue: 0,0:03:49.29,0:03:54.09,Default,,0000,0000,0000,,corpo. E então isso é algo pequeno, mas aqui há uma chave de fechamento
Dialogue: 0,0:03:54.09,0:03:58.96,Default,,0000,0000,0000,,uma espécie de equilíbrio entre a abertura de chave\Naqui fecha o corpo. Portanto, vamos apenas
Dialogue: 0,0:03:58.96,0:04:03.31,Default,,0000,0000,0000,,implementar isso. Para ver o que temos. Assim você pode ver,\Ntemos é o retângulo preto
Dialogue: 0,0:04:03.31,0:04:07.66,Default,,0000,0000,0000,,puro, e é, isso não é muito útil, mas isso, este\Nmostra o que faz com que o loop for-
Dialogue: 0,0:04:07.66,0:04:12.06,Default,,0000,0000,0000,,Então o que aconteceu é que temos a imagem\Nflores originais com todos os tipos de
Dialogue: 0,0:04:12.06,0:04:16.94,Default,,0000,0000,0000,,vermelho e verde e amarelo eo resto. E\Nde modo que este código tem sido feito, isto tem
Dialogue: 0,0:04:16.94,0:04:21.91,Default,,0000,0000,0000,,visitou cada pixel da imagem e executar estas três linhas. E o que eles fazem é
Dialogue: 0,0:04:21.91,0:04:26.40,Default,,0000,0000,0000,,eles tomam e colocar o vermelho, verde e azul para zero, assim, na realidade, apenas
Dialogue: 0,0:04:26.40,0:04:31.00,Default,,0000,0000,0000,,alterar o pixel a ser completamente preto. Então, se você pode imaginar
Dialogue: 0,0:04:31.00,0:04:35.92,Default,,0000,0000,0000,,isso está acontecendo em toda a imagem da flor, destruindo toda a informação que é
Dialogue: 0,0:04:35.92,0:04:41.36,Default,,0000,0000,0000,,deixando-nos com um retângulo completamente preto. Ok. Deixe-me tentar outra
Dialogue: 0,0:04:41.36,0:04:48.13,Default,,0000,0000,0000,,exemplo mais interessante. Aqui vou dizer que para cada pixel, ao vermelho, verde, vermelho umm
Dialogue: 0,0:04:48.13,0:04:53.61,Default,,0000,0000,0000,,verde e azul 255 e zero. Então, eu acho, o que é o código para
Dialogue: 0,0:04:53.61,0:04:58.03,Default,,0000,0000,0000,,fazer isso?. Muitas vezes, para esses problemas, temos o padrão em Inglês,
Dialogue: 0,0:04:58.03,0:05:02.28,Default,,0000,0000,0000,,nos diz: ok, nós, você sabe, para o efeito, colocar vermelho em 255 ou qualquer outra coisa. E
Dialogue: 0,0:05:02.28,0:05:07.04,Default,,0000,0000,0000,,finalmente, no ano, será o seu trabalho de traduzir isso para
Dialogue: 0,0:05:07.04,0:05:11.64,Default,,0000,0000,0000,,código. Então aqui está o exemplo de que o padrão. Em seguida, o código para colocar em
Dialogue: 0,0:05:11.64,0:05:16.63,Default,,0000,0000,0000,,o corpo para alterar a 255 vermelho e verde e azul para zero é a primeira a dizer,
Dialogue: 0,0:05:16.63,0:05:21.40,Default,,0000,0000,0000,,primeiras duas linhas dizer, pixel.setRed (255), pixel.setGreen (255), então o
Dialogue: 0,0:05:21.40,0:05:25.96,Default,,0000,0000,0000,,terceira linha iria pixel.setBlue (0). Então, se eu executar isso. O que vemos é esse
Dialogue: 0,0:05:25.96,0:05:30.17,Default,,0000,0000,0000,,rectângulo amarelo brilhante de modo que este é semelhante ao do exemplo anterior. Nós
Dialogue: 0,0:05:30.17,0:05:34.54,Default,,0000,0000,0000,,mudou o verde e azul, em cada pixel na imagem
Dialogue: 0,0:05:34.54,0:05:39.86,Default,,0000,0000,0000,,neste caso, para obter o vibrante amarelo. Assim, estes dois exemplos não são
Dialogue: 0,0:05:39.86,0:05:44.06,Default,,0000,0000,0000,,Direito nada realista? Eu apenas, apenas destruir toda a informação e fez
Dialogue: 0,0:05:44.06,0:05:48.14,Default,,0000,0000,0000,,este retângulo de uma cor. Então, agora eu quero tentar um que é mais
Dialogue: 0,0:05:48.14,0:05:51.91,Default,,0000,0000,0000,,realista, onde, em vez de destruir toda a informação da imagem
Dialogue: 0,0:05:51.91,0:05:56.65,Default,,0000,0000,0000,,flores, trabalhar com ele. Então aqui estamos nós, a imagem original de flores. Eu gosto de saber
Dialogue: 0,0:05:56.86,0:06:02.85,Default,,0000,0000,0000,,o amarelo é igual vermelho mais amarelo assim que nós poderíamos esperar que aqui onde eu tenho as flores
Dialogue: 0,0:06:02.85,0:06:08.57,Default,,0000,0000,0000,,vermelho, amarelo e verde são elevados. Então, o que posso fazer para
Dialogue: 0,0:06:08.57,0:06:14.08,Default,,0000,0000,0000,,Neste exemplo é colocar o zero vermelho para toda a imagem. Pense sobre o que
Dialogue: 0,0:06:14.08,0:06:19.24,Default,,0000,0000,0000,,vai fazer. Assim, a primeira pergunta é, bem, o que é o código para fazer isso? E
Dialogue: 0,0:06:19.24,0:06:23.75,Default,,0000,0000,0000,,neste caso o que você vê é, eu tenho apenas uma linha pixel.setRed (0) como o
Dialogue: 0,0:06:23.75,0:06:28.44,Default,,0000,0000,0000,,corpo. Agora, nos últimos ejempos o corpo tinha três linhas de código. Pode ser,
Dialogue: 0,0:06:28.44,0:06:33.01,Default,,0000,0000,0000,,Poderia ser qualquer coisa. Então você pode ser de três ou seis linhas. Neste caso, apenas irá
Dialogue: 0,0:06:33.01,0:06:37.59,Default,,0000,0000,0000,,ser uma linha. E o que este diz, você sabe, que eu diria em Inglês a
Dialogue: 0,0:06:37.59,0:06:41.99,Default,,0000,0000,0000,,Este loop-se, para cada pixel da imagem, coloque o zero vermelho. Então vamos ver
Dialogue: 0,0:06:41.99,0:06:46.62,Default,,0000,0000,0000,,imediata. Se eu executar isso, o que você vê é algo como ...
Dialogue: 0,0:06:46.62,0:06:51.60,Default,,0000,0000,0000,,as flores já mudou a aparência radioativos flores verdes.
Dialogue: 0,0:06:51.60,0:06:55.79,Default,,0000,0000,0000,,E isso faz sentido se você ver que é o que eles fizeram com as flores sendo amarela
Dialogue: 0,0:06:55.79,0:07:00.19,Default,,0000,0000,0000,,antes eram amarelos porque eles tinham uma combinação de vermelho e verde.
Dialogue: 0,0:07:00.19,0:07:03.87,Default,,0000,0000,0000,,O que este código faz, apenas limpa toda a luz vermelha. É como se
Dialogue: 0,0:07:03.87,0:07:07.70,Default,,0000,0000,0000,,que desligou o lamprara a zero em toda a imagem. Então o que temos no final é só
Dialogue: 0,0:07:07.70,0:07:11.53,Default,,0000,0000,0000,,luz verde estava na foto. Outra coisa a fazer, vendo
Dialogue: 0,0:07:11.53,0:07:15.30,Default,,0000,0000,0000,,Aqui, as folhas verdes na parte inferior do lado direito. Não visto
Dialogue: 0,0:07:15.30,0:07:19.42,Default,,0000,0000,0000,,muito diferente, então provavelmente esta foi apenas a luz verde para começar. Luz
Dialogue: 0,0:07:19.42,0:07:23.29,Default,,0000,0000,0000,,Vermelho tinha, provavelmente vale oito ou vinte, ou algo assim. Assim, quando
Dialogue: 0,0:07:23.29,0:07:29.70,Default,,0000,0000,0000,,alterá-la a zero, na verdade não faz muita diferença. Nós
Dialogue: 0,0:07:29.70,0:07:34.88,Default,,0000,0000,0000,,tentar um outro exemplo. Para isso vou começar com a imagem de
Dialogue: 0,0:07:34.88,0:07:40.60,Default,,0000,0000,0000,,flores e eu vou dizer que o verde e azul são zero e deixar vermelho como este. Então, o que
Dialogue: 0,0:07:40.60,0:07:45.98,Default,,0000,0000,0000,,é o código para isso? Bem, eu vou ter um corpo de duas linhas. Direi
Dialogue: 0,0:07:45.98,0:07:51.56,Default,,0000,0000,0000,,pixel.setGreen (0) e pixel.setBlue (0), e eu não vou mudar
Dialogue: 0,0:07:51.56,0:07:57.84,Default,,0000,0000,0000,,vermelho, para ficar no que quer que isso. Por isso, vamos executá-lo. E o que você vê
Dialogue: 0,0:07:57.84,0:08:04.59,Default,,0000,0000,0000,,agora temos estas flores vermelhas. E o que aconteceu aqui é que este é realmente
Dialogue: 0,0:08:04.59,0:08:09.31,Default,,0000,0000,0000,,o canal de vermelho da imagem. E o que aconteceu é que, normalmente, a imagem é
Dialogue: 0,0:08:09.31,0:08:13.69,Default,,0000,0000,0000,,essa combinação de vermelho, verde e azul. O que fizemos é que mudamos
Dialogue: 0,0:08:13.69,0:08:17.85,Default,,0000,0000,0000,,luzes verdes e azuis para zero. Assim, baixando aqueles a ser
Dialogue: 0,0:08:17.85,0:08:22.34,Default,,0000,0000,0000,,nada. E o que resta é um mapa, onde a luz vermelha tinha
Dialogue: 0,0:08:22.34,0:08:26.72,Default,,0000,0000,0000,,essa foto? Onde havia vermelho vermelho escuro e brilhante, onde lá? eo que vemos é, portanto,
Dialogue: 0,0:08:26.72,0:08:31.27,Default,,0000,0000,0000,,aqui do lado esquerdo, onde estava escuro, há pouca luz vermelha. E também,
Dialogue: 0,0:08:31.27,0:08:35.13,Default,,0000,0000,0000,,aqui em folhas verdes. Existe uma grande quantidade de vermelho. E assim, na realidade, apenas
Dialogue: 0,0:08:35.13,0:08:39.98,Default,,0000,0000,0000,,flores amarelas, tinha uma área de luz proeminente vermelho. Assim é, é
Dialogue: 0,0:08:39.98,0:08:44.34,Default,,0000,0000,0000,,uma maneira de visualizar a imagem. Existe também um canal de azul
Dialogue: 0,0:08:44.34,0:08:48.41,Default,,0000,0000,0000,,canal verde não faria ver onde as luzes
Dialogue: 0,0:08:48.41,0:08:55.05,Default,,0000,0000,0000,,alternativo. Ok. Para o loop for, eu disse que é um
Dialogue: 0,0:08:55.05,0:08:59.48,Default,,0000,0000,0000,,ferramenta muito poderosa que nos ajuda a escrever algumas linhas de código e deixar o computador
Dialogue: 0,0:08:59.48,0:09:03.49,Default,,0000,0000,0000,,executado em um grande conjunto de informações. Mas nós
Dialogue: 0,0:09:03.49,0:09:07.91,Default,,0000,0000,0000,,com as imagens. Deve notar-se que a língua que estão usando JavaScrips realmente
Dialogue: 0,0:09:07.91,0:09:11.98,Default,,0000,0000,0000,,não tem um loop for tão compacto como este. É uma omissão no
Dialogue: 0,0:09:11.98,0:09:15.93,Default,,0000,0000,0000,,idioma. Assim, para esta classe I agrege para trabalhar aqui. Então se você está
Dialogue: 0,0:09:15.93,0:09:19.84,Default,,0000,0000,0000,,fazendo algum outro problema que eu tenho medo de JavaScript não vai ter isso. Mas muitos
Dialogue: 0,0:09:19.84,0:09:24.11,Default,,0000,0000,0000,,línguas se eles têm o loop for parecido com este. É raro
Dialogue: 0,0:09:24.11,0:09:29.84,Default,,0000,0000,0000,,JavaScrips ignorá-lo. Portanto, este é o padrão para escrever o código, e
Dialogue: 0,0:09:29.84,0:09:34.33,Default,,0000,0000,0000,,sabe, apenas no sentido de que este pequeno pedaço de código capta o que queremos e eu
Dialogue: 0,0:09:34.33,0:09:39.04,Default,,0000,0000,0000,,Eu diria que isso reflete o tema da idéia de que computadores são poderosos e
Dialogue: 0,0:09:39.04,0:09:43.53,Default,,0000,0000,0000,,também algo estúpido. Então, se você quiser escrever código que é mais interessante, como
Dialogue: 0,0:09:43.53,0:09:48.19,Default,,0000,0000,0000,,mudar o verde dessa forma ou que ou o que quer. E, em seguida, inseri-lo na
Dialogue: 0,0:09:48.19,0:09:53.02,Default,,0000,0000,0000,,o loop for, temos este trabalho em equipe com o computador onde o computador vai demorar
Dialogue: 0,0:09:53.02,0:09:57.01,Default,,0000,0000,0000,,por quão difícil como a execução de algumas centenas de milhares ou
Dialogue: 0,0:09:57.01,0:10:01.62,Default,,0000,0000,0000,,milhão de vezes. O computador faz isso, mas também, o computador é
Dialogue: 0,0:10:01.62,0:10:05.42,Default,,0000,0000,0000,,realmente fazendo alguma coisa muito mecânica. Então eu acho que
Dialogue: 0,0:10:05.42,0:10:09.87,Default,,0000,0000,0000,,ele mostra o tema geral, tais como computadores. Que
Dialogue: 0,0:10:09.87,0:10:14.37,Default,,0000,0000,0000,,computadores lidar com a mecânica rapidamente, mas a pessoa tem que adicionar o
Dialogue: 0,0:10:14.37,0:10:18.82,Default,,0000,0000,0000,,criatividade para controlar o que vai realmente acontecer. Então, na próxima seção
Dialogue: 0,0:10:18.99,0:10:23.76,Default,,0000,0000,0000,,-E há alguns exercícios que são algo como isso e, em seguida, na próxima seção precisa
Dialogue: 0,0:10:23.76,0:10:28.48,Default,,0000,0000,0000,,acrescentar mais uma coisa que vai nos permitir exemplos de como processar
Dialogue: 0,0:10:28.48,0:10:31.38,Default,,0000,0000,0000,,a imagem que eles são muito mais interessantes.