0:00:00.188,0:00:06.704
Existe três passos que você precisa saber sobre como fazer seus desenhos esplendidamente coloridos.

0:00:06.704,0:00:08.559
Vamos começar colorindo a parte do fundo.

0:00:08.559,0:00:11.870
Para fazer isso, apenas digite background e abra os parêntesis,

0:00:11.870,0:00:14.392
e o resto da linha vai se completar automaticamente para você.

0:00:14.392,0:00:17.393
Se você olhar perto, você vai notar que isso é na verdade uma função sendo chamada.

0:00:17.393,0:00:20.337
Veja, nos temos o nome da função aqui, que é background,

0:00:20.337,0:00:25.438
então dois parêntesis, e três parâmetros dentro, separados por virgulas.

0:00:25.438,0:00:31.892
Esses três números representam a quantidade de vermelho, verde e azul na cor do fundo.

0:00:31.892,0:00:35.142
Os números podem ir de qualquer lugar entre 0 e 255,

0:00:35.142,0:00:37.393
aonde 0 significa que não existe nada dessa cor,

0:00:37.393,0:00:40.037
e 255 significa que agente está deixando essa cor no maximo.

0:00:40.037,0:00:43.393
Agora, eu estou deixando vermelho no máximo, e deixando verde e azul inexistentes.

0:00:43.393,0:00:45.770
Esse é o motivo pelo qual a cor de fundo é completamente vermelha.

0:00:45.770,0:00:50.037
Se eu fazer o primeiro número menor, então vai ficar com menos vermelho, então isso vai parecer vermelho-escuro.

0:00:50.037,0:00:53.204
Eu posso continuar brincando com esses números e ver quais tipos de cores eu posso criar.

0:00:53.204,0:00:56.204
Ou, eu posso usar nosso "handy dandy color picker",

0:00:56.204,0:00:59.892
que vai automaticamente completar os 3 números para mim.

0:00:59.892,0:01:02.893
Agora é importante saber o que essa função "background" está fazendo na verdade,

0:01:02.893,0:01:06.370
ela está apenas desenhando um grande quadrado colorido sobre a superfície inteira do canvas.

0:01:06.370,0:01:09.105
Se eu movesse isso para o final do meu programa, desse jeito,

0:01:09.105,0:01:12.470
então isso desenharia esse grande quadrado de fundo sobre todos os meus desenhos.

0:01:12.470,0:01:14.970
Talvez você está pensando, isso é bobo, por que alguém iria querer isso?

0:01:14.970,0:01:17.170
Mas hey, nunca se sabe.

0:01:17.170,0:01:19.670
Nos vamos deixar isso na parte de cima agora.

0:01:19.670,0:01:21.559
Agora para colorir nossos desenhos!

0:01:21.559,0:01:25.304
Pode ser mais fácil pensar no computador, como tendo um assistente de cor,

0:01:25.304,0:01:27.370
alguma espécie de mordomo de cores.

0:01:27.370,0:01:29.727
Basicamente algum cara que está no comando das cores.

0:01:29.727,0:01:34.770
Esse cara das cores pode apenas segurar um marcador colorido na sua mão esquerda,

0:01:34.770,0:01:39.559
e um balde de tinta na sua mão direita.

0:01:39.559,0:01:43.393
O computador usa o marcador colorido para desenhar todos esses traçados,

0:01:43.393,0:01:45.000
e o balde de cores para preencher a parte de dentro das formas.

0:01:45.000,0:01:47.809
Agora, o marcador está preto, e o balde de cores está branco

0:01:47.809,0:01:51.977
Você pode mudar a cor do marcador, chamando essa função, stroke.

0:01:51.977,0:01:56.394
Isso também auto-completa, e então você pode pegar uma cor.

0:01:56.394,0:01:58.560
Isso muda o marcador que o carinha das cores está segurando,

0:01:58.560,0:02:02.538
então, todos as curvas desenhadas depois dessa linha vão ser desenhadas com um marcador rosa.

0:02:02.538,0:02:05.670
As vezes você não procura contornos em nossas formas.

0:02:05.670,0:02:07.394
Existe uma função para isso também!

0:02:07.394,0:02:13.560
Ela é chamada noStroke, e pela primeira vez, nos vemos uma função que não pega nenhum parâmetro.

0:02:13.560,0:02:17.439
Nos temos apenas este conjunto vazio de parâmetros e um ponto e vírgula,

0:02:17.439,0:02:20.438
e agora você pode ver nossas formas sem nenhum contorno.

0:02:20.438,0:02:25.837
Nos podemos mudar o balde de tinta do carinha das cores chamando essa função, 'fill'.

0:02:25.837,0:02:30.438
Agora, a partir dessa linha de código para frente, nos vamos completar todas as formas com essa forte cor vermelha

0:02:30.438,0: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.

0:02:38.429,0:02:42.077
Isso faz com que todas as nossas formas fiquem transparentes - não existe nada pintado por dentro.(fill significa preencher)

0:02:42.077,0:02:44.893
Agora vamos seguir em frente e colorir esse carinha.

0:02:44.893,0:02:47.227
Nos vamos começar desenhando um triângulo para seu corpo.

0:02:47.227,0:02:56.003
Eu vou pegar uma cor de contorno para isso, completamos a

0:02:56.003,0:03:05.393
Agora vamos pegar uma cor de preenchimento. Hm, o que seria legal? Talvez um verde claro.

0:03:05.393,0: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.

0:03:13.771,0:03:18.892
Eu vou pegar uma borda castanho-bronzeada.

0:03:18.892,0:03:21.836
Agora eu vou pegar uma cor de preenchimento diferente.

0:03:21.836,0:03:25.477
Qual seria uma boa cor para a face? Hmm...

0:03:25.477,0:03:30.393
Isso é um tipo de cor de face, correto?

0:03:30.393,0:03:33.844
Agora, as próximas duas linhas, esses 2 elipses, são suas mãos.

0:03:33.844,0:03:36.281
Eu quero suas mãos para serem da mesma cor da sua face.

0:03:36.281,0:03:38.893
Então nos não vamos mudar o marcador ou o balde de cores.

0:03:38.893,0:03:40.837
Nos vamos apenas deixar o 'stroke' e 'fill' o mesmo,

0:03:40.837,0:03:42.810
e mover para a sua boca.

0:03:42.810,0:03:51.004
Sua boca é apenas essa linha e linhas não tem cores de preenchimento por que não tem nada para preencher.

0:03:51.004,0:03:55.393
mas nos podemos mudar a cor do traço dessa linha.

0:03:55.393,0:03:57.636
Yeah, vermelho é uma boa cor bonita para a boca.

0:03:57.636,0:03:59.044
Agora, as armações do óculos.

0:03:59.044,0:04:00.565
Mais uma vez, nos precisamos apenas ativar o stroke.

0:04:00.565,0:04:02.608
Qual seria uma boa cor para seus óculos?

0:04:02.608,0:04:04.623
Preto é um pouco clássico.

0:04:04.623,0:04:11.727
Para a lente dos seus óculos, eu quero que os retângulos tenham a mesma borda que sua moldura

0:04:11.727,0:04:16.906
Eu não vou mudar o 'stroke', mas eu vou dar isso uma cor de preenchimento ( fill color ).

0:04:16.906,0:04:20.892
Vamos mudar isso para preto, para combinar com a armação

0:04:20.892,0:04:23.227
Aqui está, nosso carinha está colorido!

0:04:23.227,0:04:27.000
Awwwwww, yeah!