Introdução às cores

Isso é apenas uma aula da nosso curso de codificação interativo, preparado para fazer legendas e traduções facilmente. Seria melhor assistir nossos talk-throughs (programação interativa com o video) aqui:
https://www.khanacademy.org/cs/programming/

Existe três passos que você precisa saber sobre como fazer seus desenhos esplendidamente coloridos.

Vamos começar colorindo a parte do fundo.

Para fazer isso, apenas digite "background" e abra os parêntesis,

e o resto da linha vai se completar automaticamente para você.

Se você prestar atenção, você vai notar que isso é na verdade uma função.

Veja, nós temos o nome da função aqui, que é "background",

então dois parêntesis, e três parâmetros dentro, separados por virgulas.

Esses três números representam a quantidade de vermelho, verde e azul na cor de fundo (inglês - background color).

Os números podem ir de qualquer lugar entre 0 e 255,

aonde 0 significa que não existe nada dessa cor,

e 255 significa que agente está deixando essa cor no maximo.

Agora, eu estou deixando vermelho no máximo, e deixando verde e azul inexistentes.

Esse é o motivo pelo qual a cor de fundo é completamente vermelho brilhante.

Se eu fazer o primeiro número menor, então haverá menos menos vermelho, e então isso vai parecer vermelho-escuro.

Eu posso continuar brincando com esses números e ver quais tipos de cores eu posso criar.

Ou, eu posso usar nosso "handy dandy color picker"(que significa buscador de cor rápido e elegante),

que vai automaticamente completar os 3 números para mim.

Agora é importante saber o que essa função "background" está fazendo na verdade,

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

Se eu movesse isso para o final do meu programa, desse jeito,

então isso desenharia esse grande quadrado de fundo sobre todos os meus desenhos.

Talvez você está pensando, isso é bobo, por que alguém iria querer isso?

Mas hey, nunca se sabe.

Nos vamos deixar isso na parte de cima agora.

Agora para colorir nossos desenhos!

Pode ser mais fácil pensar no computador, como tendo um assistente de cor,

alguma espécie de mordomo de cores.

Basicamente algum cara que está no comando das cores.

Esse cara das cores pode apenas segurar um marcador colorido na sua mão esquerda,

e um balde de tinta na sua mão direita.

O computador usa o marcador colorido para desenhar todos esses traçados,

e o balde de cores para preencher a parte de dentro das formas.

Agora, o marcador está preto, e o balde de cores está branco

Você pode mudar a cor do marcador, chamando essa função, stroke.

Isso também auto-completa, e então você pode pegar uma cor.

Isso muda o marcador que o carinha das cores está segurando,

então, todos as curvas desenhadas depois dessa linha vão ser desenhadas com um marcador rosa.

As vezes você não procura contornos em nossas formas.

Existe uma função para isso também!

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

Nos temos apenas este conjunto vazio de parâmetros e um ponto e vírgula,

e agora você pode ver nossas formas sem nenhum contorno.

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

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

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.

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

Agora vamos seguir em frente e colorir esse carinha.

Nos vamos começar desenhando um triângulo para seu corpo.

Eu vou pegar uma cor de contorno para isso, completamos a

Agora vamos pegar uma cor de preenchimento. Hm, o que seria legal? Talvez um verde claro.

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.

Eu vou pegar uma borda castanho-bronzeada.

Agora eu vou pegar uma cor de preenchimento diferente.

Qual seria uma boa cor para a face? Hmm...

Isso é um tipo de cor de face, correto?

Agora, as próximas duas linhas, esses 2 elipses, são suas mãos.

Eu quero suas mãos para serem da mesma cor da sua face.

Então nos não vamos mudar o marcador ou o balde de cores.

Nos vamos apenas deixar o 'stroke' e 'fill' o mesmo,

e mover para a sua boca.

Sua boca é apenas essa linha e linhas não tem cores de preenchimento por que não tem nada para preencher.

mas nos podemos mudar a cor do traço dessa linha.

Yeah, vermelho é uma boa cor bonita para a boca.

Agora, as armações do óculos.

Mais uma vez, nos precisamos apenas ativar o stroke.

Qual seria uma boa cor para seus óculos?

Preto é um pouco clássico.

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

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

Vamos mudar isso para preto, para combinar com a armação

Aqui está, nosso carinha está colorido!

Awwwwww, yeah!