1
00:00:00,188 --> 00:00:06,704
Existe três passos que você precisa saber sobre como fazer seus desenhos esplendidamente coloridos.

2
00:00:06,704 --> 00:00:08,559
Vamos começar colorindo a parte do fundo.

3
00:00:08,559 --> 00:00:11,870
Para fazer isso, apenas digite "background" e abra os parêntesis,

4
00:00:11,870 --> 00:00:14,392
e o resto da linha vai se completar automaticamente para você.

5
00:00:14,392 --> 00:00:17,393
Se você prestar atenção, você vai notar que isso é na verdade uma função.

6
00:00:17,393 --> 00:00:20,337
Veja, nós temos o nome da função aqui, que é "background",

7
00:00:20,337 --> 00:00:25,438
então dois parêntesis, e três parâmetros dentro, separados por virgulas.

8
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).

9
00:00:31,892 --> 00:00:35,142
Os números podem ir de qualquer lugar entre 0 e 255,

10
00:00:35,142 --> 00:00:37,393
aonde 0 significa que não existe nada dessa cor,

11
00:00:37,393 --> 00:00:40,037
e 255 significa que agente está deixando essa cor no maximo.

12
00:00:40,037 --> 00:00:43,393
Agora, eu estou deixando vermelho no máximo, e deixando verde e azul inexistentes.

13
00:00:43,393 --> 00:00:45,770
Esse é o motivo pelo qual a cor de fundo é completamente vermelho brilhante.

14
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.

15
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.

16
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),

17
00:00:56,204 --> 00:00:59,892
que vai automaticamente completar os 3 números para mim.

18
00:00:59,892 --> 00:01:02,893
Agora é importante saber o que essa função "background" está fazendo na verdade,

19
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).

20
00:01:06,370 --> 00:01:09,105
Se eu movesse isso para o final do meu programa, desse jeito,

21
00:01:09,105 --> 00:01:12,470
então isso desenharia esse grande quadrado de fundo sobre todos os meus desenhos.

22
00:01:12,470 --> 00:01:14,970
Talvez você está pensando, isso é bobo, por que alguém iria querer isso?

23
00:01:14,970 --> 00:01:17,170
Mas hey, nunca se sabe.

24
00:01:17,170 --> 00:01:19,670
Nos vamos deixar isso na parte de cima agora.

25
00:01:19,670 --> 00:01:21,559
Agora para colorir nossos desenhos!

26
00:01:21,559 --> 00:01:25,304
Pode ser mais fácil pensar no computador, como tendo um assistente de cor,

27
00:01:25,304 --> 00:01:27,370
alguma espécie de mordomo de cores.

28
00:01:27,370 --> 00:01:29,727
Basicamente algum cara que está no comando das cores.

29
00:01:29,727 --> 00:01:34,770
Esse cara das cores pode apenas segurar um marcador colorido na sua mão esquerda,

30
00:01:34,770 --> 00:01:39,559
e um balde de tinta na sua mão direita.

31
00:01:39,559 --> 00:01:43,393
O computador usa o marcador colorido para desenhar todos esses traçados,

32
00:01:43,393 --> 00:01:45,000
e o balde de cores para preencher a parte de dentro das formas.

33
00:01:45,000 --> 00:01:47,809
Agora, o marcador está preto, e o balde de cores está branco

34
00:01:47,809 --> 00:01:51,977
Você pode mudar a cor do marcador, chamando essa função, stroke.

35
00:01:51,977 --> 00:01:56,394
Isso também auto-completa, e então você pode pegar uma cor.

36
00:01:56,394 --> 00:01:58,560
Isso muda o marcador que o carinha das cores está segurando,

37
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.

38
00:02:02,538 --> 00:02:05,670
As vezes você não procura contornos em nossas formas.

39
00:02:05,670 --> 00:02:07,394
Existe uma função para isso também!

40
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.

41
00:02:13,560 --> 00:02:17,439
Nos temos apenas este conjunto vazio de parâmetros e um ponto e vírgula,

42
00:02:17,439 --> 00:02:20,438
e agora você pode ver nossas formas sem nenhum contorno.

43
00:02:20,438 --> 00:02:25,837
Nos podemos mudar o balde de tinta do carinha das cores chamando essa função, 'fill'.

44
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

45
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.

46
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)

47
00:02:42,077 --> 00:02:44,893
Agora vamos seguir em frente e colorir esse carinha.

48
00:02:44,893 --> 00:02:47,227
Nos vamos começar desenhando um triângulo para seu corpo.

49
00:02:47,227 --> 00:02:56,003
Eu vou pegar uma cor de contorno para isso, completamos a

50
00:02:56,003 --> 00:03:05,393
Agora vamos pegar uma cor de preenchimento. Hm, o que seria legal? Talvez um verde claro.

51
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.

52
00:03:13,771 --> 00:03:18,892
Eu vou pegar uma borda castanho-bronzeada.

53
00:03:18,892 --> 00:03:21,836
Agora eu vou pegar uma cor de preenchimento diferente.

54
00:03:21,836 --> 00:03:25,477
Qual seria uma boa cor para a face? Hmm...

55
00:03:25,477 --> 00:03:30,393
Isso é um tipo de cor de face, correto?

56
00:03:30,393 --> 00:03:33,844
Agora, as próximas duas linhas, esses 2 elipses, são suas mãos.

57
00:03:33,844 --> 00:03:36,281
Eu quero suas mãos para serem da mesma cor da sua face.

58
00:03:36,281 --> 00:03:38,893
Então nos não vamos mudar o marcador ou o balde de cores.

59
00:03:38,893 --> 00:03:40,837
Nos vamos apenas deixar o 'stroke' e 'fill' o mesmo,

60
00:03:40,837 --> 00:03:42,810
e mover para a sua boca.

61
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.

62
00:03:51,004 --> 00:03:55,393
mas nos podemos mudar a cor do traço dessa linha.

63
00:03:55,393 --> 00:03:57,636
Yeah, vermelho é uma boa cor bonita para a boca.

64
00:03:57,636 --> 00:03:59,044
Agora, as armações do óculos.

65
00:03:59,044 --> 00:04:00,565
Mais uma vez, nos precisamos apenas ativar o stroke.

66
00:04:00,565 --> 00:04:02,608
Qual seria uma boa cor para seus óculos?

67
00:04:02,608 --> 00:04:04,623
Preto é um pouco clássico.

68
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

69
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 ).

70
00:04:16,906 --> 00:04:20,892
Vamos mudar isso para preto, para combinar com a armação

71
00:04:20,892 --> 00:04:23,227
Aqui está, nosso carinha está colorido!

72
00:04:23,227 --> 00:04:27,000
Awwwwww, yeah!