WEBVTT 00:00:00.188 --> 00:00:06.704 Existe três passos que você precisa saber sobre como fazer seus desenhos esplendidamente coloridos. 00:00:06.704 --> 00:00:08.559 Vamos começar colorindo a parte do fundo. 00:00:08.559 --> 00:00:11.870 Para fazer isso, apenas digite "background" e abra os parêntesis, 00:00:11.870 --> 00:00:14.392 e o resto da linha vai se completar automaticamente para você. 00:00:14.392 --> 00:00:17.393 Se você prestar atenção, você vai notar que isso é na verdade uma função. 00:00:17.393 --> 00:00:20.337 Veja, nós temos o nome da função aqui, que é "background", 00:00:20.337 --> 00:00:25.438 então dois parêntesis, e três parâmetros dentro, separados por virgulas. 00:00:25.438 --> 00:00:31.892 Esses três números representam a quantidade de vermelho, verde e azul na cor de fundo (inglês - background color). 00:00:31.892 --> 00:00:35.142 Os números podem ir de qualquer lugar entre 0 e 255, 00:00:35.142 --> 00:00:37.393 aonde 0 significa que não existe nada dessa cor, 00:00:37.393 --> 00:00:40.037 e 255 significa que agente está deixando essa cor no maximo. 00:00:40.037 --> 00:00:43.393 Agora, eu estou deixando vermelho no máximo, e deixando verde e azul inexistentes. 00:00:43.393 --> 00:00:45.770 Esse é o motivo pelo qual a cor de fundo é completamente vermelho brilhante. 00:00:45.770 --> 00:00:50.037 Se eu fazer o primeiro número menor, então haverá menos menos vermelho, e então isso vai parecer vermelho-escuro. 00:00:50.037 --> 00:00:53.204 Eu posso continuar brincando com esses números e ver quais tipos de cores eu posso criar. 00:00:53.204 --> 00:00:56.204 Ou, eu posso usar nosso "handy dandy color picker"(que significa buscador de cor rápido e elegante), 00:00:56.204 --> 00:00:59.892 que vai automaticamente completar os 3 números para mim. 00:00:59.892 --> 00:01:02.893 Agora é importante saber o que essa função "background" está fazendo na verdade, 00:01:02.893 --> 00:01:06.370 ela está apenas desenhando um grande quadrado colorido sobre a superfície inteira do canvas ( essa parte à direita que agente vê o resultado do programa). 00:01:06.370 --> 00:01:09.105 Se eu movesse isso para o final do meu programa, desse jeito, 00:01:09.105 --> 00:01:12.470 então isso desenharia esse grande quadrado de fundo sobre todos os meus desenhos. 00:01:12.470 --> 00:01:14.970 Talvez você está pensando, isso é bobo, por que alguém iria querer isso? 00:01:14.970 --> 00:01:17.170 Mas hey, nunca se sabe. 00:01:17.170 --> 00:01:19.670 Nos vamos deixar isso na parte de cima agora. 00:01:19.670 --> 00:01:21.559 Agora para colorir nossos desenhos! 00:01:21.559 --> 00:01:25.304 Pode ser mais fácil pensar no computador, como tendo um assistente de cor, 00:01:25.304 --> 00:01:27.370 alguma espécie de mordomo de cores. 00:01:27.370 --> 00:01:29.727 Basicamente algum cara que está no comando das cores. 00:01:29.727 --> 00:01:34.770 Esse cara das cores pode apenas segurar um marcador colorido na sua mão esquerda, 00:01:34.770 --> 00:01:39.559 e um balde de tinta na sua mão direita. 00:01:39.559 --> 00:01:43.393 O computador usa o marcador colorido para desenhar todos esses traçados, 00:01:43.393 --> 00:01:45.000 e o balde de cores para preencher a parte de dentro das formas. 00:01:45.000 --> 00:01:47.809 Agora, o marcador está preto, e o balde de cores está branco 00:01:47.809 --> 00:01:51.977 Você pode mudar a cor do marcador, chamando essa função, stroke. 00:01:51.977 --> 00:01:56.394 Isso também auto-completa, e então você pode pegar uma cor. 00:01:56.394 --> 00:01:58.560 Isso muda o marcador que o carinha das cores está segurando, 00:01:58.560 --> 00:02:02.538 então, todos as curvas desenhadas depois dessa linha vão ser desenhadas com um marcador rosa. 00:02:02.538 --> 00:02:05.670 As vezes você não procura contornos em nossas formas. 00:02:05.670 --> 00:02:07.394 Existe uma função para isso também! 00:02:07.394 --> 00:02:13.560 Ela é chamada noStroke, e pela primeira vez, nos vemos uma função que não pega nenhum parâmetro. 00:02:13.560 --> 00:02:17.439 Nos temos apenas este conjunto vazio de parâmetros e um ponto e vírgula, 00:02:17.439 --> 00:02:20.438 e agora você pode ver nossas formas sem nenhum contorno. 00:02:20.438 --> 00:02:25.837 Nos podemos mudar o balde de tinta do carinha das cores chamando essa função, 'fill'. 00:02:25.837 --> 00:02:30.438 Agora, a partir dessa linha de código para frente, nos vamos completar todas as formas com essa forte cor vermelha 00:02:30.438 --> 00:02:38.369 Como se nos tivéssemos uma função noStroke, nos também temos uma função noFill, que também não pega nenhum parâmetro. 00:02:38.429 --> 00:02:42.077 Isso faz com que todas as nossas formas fiquem transparentes - não existe nada pintado por dentro.(fill significa preencher) 00:02:42.077 --> 00:02:44.893 Agora vamos seguir em frente e colorir esse carinha. 00:02:44.893 --> 00:02:47.227 Nos vamos começar desenhando um triângulo para seu corpo. 00:02:47.227 --> 00:02:56.003 Eu vou pegar uma cor de contorno para isso, completamos a 00:02:56.003 --> 00:03:05.393 Agora vamos pegar uma cor de preenchimento. Hm, o que seria legal? Talvez um verde claro. 00:03:05.393 --> 00:03:13.771 Para seu rosto, nos não queremos que isso teja uma borda verde, então eu vou mudar a cor da borda para sua face. 00:03:13.771 --> 00:03:18.892 Eu vou pegar uma borda castanho-bronzeada. 00:03:18.892 --> 00:03:21.836 Agora eu vou pegar uma cor de preenchimento diferente. 00:03:21.836 --> 00:03:25.477 Qual seria uma boa cor para a face? Hmm... 00:03:25.477 --> 00:03:30.393 Isso é um tipo de cor de face, correto? 00:03:30.393 --> 00:03:33.844 Agora, as próximas duas linhas, esses 2 elipses, são suas mãos. 00:03:33.844 --> 00:03:36.281 Eu quero suas mãos para serem da mesma cor da sua face. 00:03:36.281 --> 00:03:38.893 Então nos não vamos mudar o marcador ou o balde de cores. 00:03:38.893 --> 00:03:40.837 Nos vamos apenas deixar o 'stroke' e 'fill' o mesmo, 00:03:40.837 --> 00:03:42.810 e mover para a sua boca. 00:03:42.810 --> 00:03:51.004 Sua boca é apenas essa linha e linhas não tem cores de preenchimento por que não tem nada para preencher. 00:03:51.004 --> 00:03:55.393 mas nos podemos mudar a cor do traço dessa linha. 00:03:55.393 --> 00:03:57.636 Yeah, vermelho é uma boa cor bonita para a boca. 00:03:57.636 --> 00:03:59.044 Agora, as armações do óculos. 00:03:59.044 --> 00:04:00.565 Mais uma vez, nos precisamos apenas ativar o stroke. 00:04:00.565 --> 00:04:02.608 Qual seria uma boa cor para seus óculos? 00:04:02.608 --> 00:04:04.623 Preto é um pouco clássico. 00:04:04.623 --> 00:04:11.727 Para a lente dos seus óculos, eu quero que os retângulos tenham a mesma borda que sua moldura 00:04:11.727 --> 00:04:16.906 Eu não vou mudar o 'stroke', mas eu vou dar isso uma cor de preenchimento ( fill color ). 00:04:16.906 --> 00:04:20.892 Vamos mudar isso para preto, para combinar com a armação 00:04:20.892 --> 00:04:23.227 Aqui está, nosso carinha está colorido! 00:04:23.227 --> 00:04:27.000 Awwwwww, yeah!