1.2 p5.js: Color

Esse próximo vídeo - Oi, a propósito ! - é sobre cores.

Então como no vídeo anterior que eu acabei de fazer, eu foquei nas formas.

desenhando formas dentro da tela, usando os primeiros passos com o p5.js

E agora, talvez você já tenha feito algo apenas com as formas,

naturalmente, o próximo passo é fazer essa coisa ter alguma cor.

Então, talvez você tenha uma tela, talvez um retângulo nela,

talvez tenha uma elipse nela,

Talvez algumas linhas nela,

Ou talvez você tenha feito algum design muito mais interessante

do que esse

E agora, temos que fazer a seguinte pergunta:
Como que eu... Tudo era apenas linhas pretas

e interiores brancos...

Então, como que eu posso colorir essas formas?

Ok, para desenhar essas formas, nos apendemos vário comandos.

Mas a palavra que deveríamos estar usando é 'funções'!

Eu lhe mostrei várias funções:
rect(), ellipse(), line().

Essas são três funções,
rect() desenha um retângulo

ellipse() desenha uma elipse

line() desenha uma linha.

Essas são para desenhar.

E para cores, também existem funções...

E eu acho que existem três relevantes, que eu quero

explorar nesse vídeo.

background(),

stroke(),

e fill(),

a função background() vai dar uma cor ao fundo,

do canvas (tela) inteiro ... O que é a cor que está no fundo

da tela? Mesmo sendo o termo fundo um pouco equivocado aqui

eu ire usar para me referir ao fundo da tela.

e a ordem quando você chama essas funções é crucial!

vou mostrar-lhe isso também.

Ah stroke(), é a função que mexe na cor da borda da forma.

Logo, ' que é a cor dos pixels de uma linha? '

' qual é a cor da borda do retângulo? ' ,

e fill(), mexa na cor do interior da forma.

Então, digamos que o código para isso seja:
rect(algo ou outro),

ellipse(algo ou outro),

linha(algo ou outro),

E agora temos que descobrir,
se eu quero definir a borda ou

ou o interior desse retângulo,
onde um escrevo essas funções?

Onde eu executo esses comandos?

Se eu quiser definir a borda ou interior do círculo,

Onde eu escrevo esses comandos?

E agora, a ordem das operações são sempre importantes,
porém particularmente

importante agora. Quando você chama essas funções,

é como definir a cor de uma caneta.

Logo, antes que eu desenho o retângulo,
eu preciso definir a cor da minha caneta

para vermelho ou azul etc.

Então, se eu quero definir o fundo desse retângulo

Eu preciso chamar essas funções
antes que eu execute a função retangle()

E depois a próxima coisa que
eu faço é ellipse()

esse irá ter a mesma borda e o mesmo fundo,

e line() também

não o fundo, porque não tem fundo para uma linha

Logo, se eu quero mudar a cor,
se eu quiser uma cor diferente

para a elipse, logo eu terei que adicionar uma outra chamada.

para stroke(), e fill(),
Depois que eu tiver desenhado o retângulo,

Eu preciso definir a nova 'cor da caneta'
para aquela elipse.

Então essa é a primeira parte.

Parte 1 - É preciso colocar essas coisas
em uma ordem adequada.

Parte 2 - O que eu preciso colocar aqui dentro?

O que eu preciso colocar dentro dessas funções?

stroke(), fill(), backgorund(), etc?

Essa é uma ótima pergunta!

Espero ter tempo para responder essa pergunta,

Eu tenho, eu preciso responde-la.

Ok, vamos apagar tudo isso por um momento,

e vamos pensar sobre cor.

Então, existem várias formas
de descrever cores , no mundo.

Eu poderia pegar um pote que diz 'vermelho' na capa

que significa que tem vermelho nele,

mas nos precisamos de um mecanismo,
uma metodologia,

precisamos de um sistema para definir a cor

no p5.js, e nós vamos usar ... [ininteligível] ...

E um jeito básico que vamos ver é RGB Color.

Significa: que uma cor é uma combinação
de um pouco de vermelho,

um pouco de verde
e um pouco de azul.

Então por exemplo:

se eu digo stroke(255,0,0)

o que isso significa?

bem, stroke() aceita 3 argumentos,

o primeiro é a quantidade de vermelho,

o segundo é a quantidade de verde,

e o terceiro é a quantidade de azul.

Agora você já pode adivinhar,
que claramente

não tem verde e azul porque ,
eu defini seus valores como 0.

porém tem uma quantidade de vermelho,

255? Isso significa, tipo um pouco de vermelho,
ou muito vermelho?

Acontece que isso significa
a quantidade máxima de vermelho!

Logo a variação desses argumentos

é entre 0 e 255.

Significa que existem 256 possibilidades.

Ok, eu estou gastando um minuto mencionando isso ...

porque esse modo de contar vai aparecer
o tempo todo na programação.

Digamos que eu disse:
a variação é entre 0 e 9,

quantas possibilidades existem?

10 certo?

Vou tirar um tempo
para provar isso para mim mesmo:

0, 1, 2 , 3, 4,
5, 6, 7, 8, 9.

Woah!

Ok, contei 10!

0, 1, 2 , 3, 4,
5, 6, 7, 8, 9.

Cara, eu realmente
me tornei uma pessoa doida,

contando nos dedos,
sozinho em uma sala,

com câmeras apontado para mim!

Logo, essa é a variação,
e porque exite essa variação?

tem haver com o modo
que a informação é guardada

na memória do computador,
através de bit e números binários,

e tudo isso,
e eu adoraria,

ah não, na verdade eu não adoraria,
mas eu podeira falar mais disso.

Mas você pode achar outro vídeo,
ou talvez eu faça outro vídeo

ou me envie um email or outra coisa,