Code Art: Aprenda a Codificação criativa para gerar visuais com JavaScript

1. Apresentação: Ei, bem-vindo ao curso de produto, codificação criativa, arte gerada ou o que quer que você chame, o que são? Bem, é provavelmente o território mais inexplorado desta época. Por quê? Porque quando você aprende a criar arte com codificação, na verdade não há limite. Você pode fazer isso. Isso e até mesmo isso. Você não tem os limites dos programas de efeitos visuais. É a combinação do lado técnico e do design. A melhor parte, tudo o que precisamos saber é noções básicas de JavaScript e HTML, linguagem e formas de criação. Usaremos algoritmos de JavaScript neste curso. Porque hoje em dia, o JavaScript está em toda parte. Você terá a chance de tornar seu projeto interativo com outras tecnologias ao usar JavaScript, daí? Assim. Este foi um clipe da faculdade. Criaremos partículas para que você ouça música e se comporte de maneira diferente. Depois de aprender esse tipo, você pode usar a entrada de áudio em qualquer efeito que desejar. Você ficará chocado ao ver como é fácil fazer essas animações. Se você já conhece uma linguagem de programação, isso é uma grande vantagem. Tudo bem? Tudo bem, essas são animações muito boas. O que eu realmente posso usá-los? Depende de você. Você pode criar sua própria coleção de NFT, fazer o upload para o seu site, colocá-la em seu portfólio ou apenas criá-la para se divertir. As grandes agências já usam o poder do frio e do escuro, e poucas pessoas sabem como usá-lo. Junte-se a nós e aprenda a desenhar com código antes que seja tarde demais. 2. Antes do início: Ei pessoal, antes de tudo, eu queria falar sobre as ferramentas que vamos usar neste curso. Você pode baixá-los para seguir essas instruções. Não esteja ciente de que eles não são necessários. Porque hoje em dia existem muitas maneiras de fazer a mesma coisa, certo? Por exemplo, usarei o VS Code como ID, mas você pode, naturalmente, usar outros IDEs, como Atom ou Sublime Text ou qualquer ideia que desejar. Mas para aqueles que querem progredir exatamente da mesma maneira comigo, você pode baixar o código VS aqui. Portanto, tenha certeza de que você instala a versão correta. Por exemplo, estou usando a versão insiders do VS Code porque estou usando um chip, você pode baixar a versão correta do site oficial deles. Mas também estou usando o sistema operacional macOS que usarei o total agora para criar pastas, arquivos. Assim, você também pode fazer as mesmas etapas manualmente. Porque no final estamos apenas criando pastas e arquivos, deixando especial do terminal. Então você poderia fazer isso manualmente. Mas acredito que eles podem usar a linha de comando será uma escolha melhor para mim. Então sugiro que você os use durante o curso. Tudo bem, para macOS, usuários, basta clicar em Command Space para abrir a pesquisa do Spotlight. E digite terminal. Aqui. Clique em Enter. Então seu terminal está todo bombeado e você está pronto para ir. Certo? Para usuários do Windows, você pode usar a linha de comando, basta cobrar pelo CMD. Abra sua linha de comando. Você poderia usar isso para ambos os sistemas operacionais. Posso sugerir hipertônico. Você fez o híbrido que IS e baixou para o seu sistema. É a mesma coisa no final, mas a hipertensão sozinha tem mais personalizações e UI de letras. Quero declarar mais uma coisa para usuários do Windows. Ou seja, alguns comandos não são os mesmos entre esses sistemas operacionais. Usaremos principalmente para criar pastas e tocar para criar arquivos. Certo. Acredito que o néctar é para sistemas operacionais de robôs, por isso também é utilizável em meados de março. toque pode não ser, portanto, isso não é reconhecido no Windows. Então, sempre que eu digito o comando touch, você pode usar o eco. Então, por exemplo, eu digo, digamos que eu entre na área de trabalho. Você também pode usar o comando cd. Movendo-se pelas pastas. Quando digo cd dot, ponto volta e digo CD porque eles são, então vamos criar um novo arquivo na área de trabalho chamado js. Podemos fazer isso de forma inversa usando comentário de penhor, período, este arquivo. Mas se você não pode fazer isso no Windows, você pode apenas dizer testes de laboratório ecológico. Este é o formato de patch equivalente. Já que estou usando o macOS neste curso. Se algum comando não estiver funcionando no Windows, você poderá verificar no Google a versão equivalente. Se não conseguir encontrar. Não hesite em me perguntar se você está pronto. Vamos começar no próximo vídeo. 3. Primeiros passos (partículas): Sem linha de comentários. Vá para a área de trabalho. Ou onde você quiser criar sua pasta. Criarei um novo projeto de pasta e entrarei na pasta de projetos. E aqui eu quero criar dois novos arquivos. Um para HTML, e vou chamá-lo de index.html. Enquanto eu sou para JavaScript, index.js. Ok, então agora deixe-me trazer minha pasta aqui. Criamos dois arquivos. Vamos abri-lo com nós tão frios em um segundo. Certo? Portanto, esses são os novos arquivos que criamos. Então abra index.HTML e indexe js também. No index.HTML, quero digitar HTML, e quero escolher este, HTML5, porque queremos que ele complete automaticamente os modelos HTML5. Então, quando clico em Enter, você pode ver que ele cria o corpo da cabeça. E então queremos criar uma nova coluna asteca no corpo. Porque usaremos isso para nossos visuais. Quero dar uma identificação para isso, Carlos. Carlos. E também todos vamos criar um script digitado porque usaremos JavaScript. E vamos nos dar o índice de força js para que ele possa entender que estamos chamando funções JavaScript desse arquivo. Então salve. No índice js. Queremos obter esse objeto de tela. E então teremos seu contexto e escreveremos tudo usando esse objeto de contexto. Para fazer isso, usaremos o ID das cores. Então, criarei uma nova variável chamada comas. E podemos usar documentar esse elemento por função ID. E se você passar o ID da minha tela aqui, isso irá controlá-la. É o mesmo. Isso pode nos trazer a Cola do HTML5. E então podemos obter contextos. E eu quero chamá-lo de CTX. Por simplicidade, escreveremos CTX muitas vezes. É por isso que vou usar um atalho aqui. Assim, podemos obter colas, ainda não contextos. Os contextos funcionam assim. Queremos obter o contexto 2D para que possamos atribuí-lo ao CTX para usar o objeto de contexto. Então, deixe-me bloquear TTX no console para que possamos entender melhor. Ok, agora, vou salvar isso e também devemos abrir o índice HTML em um navegador. Faça isso. Você pode fazer isso abrindo esse índice HTML com o Google Chrome. Certo? Agora abri isso. Esta é uma guia do Chrome e farei isso para ver o código e o resultado ao mesmo tempo. E no Chrome, clique com o botão direito do mouse e diga Inspecionar para abrir as ferramentas do desenvolvedor. Aqui, quero abrir o console. Então, agora, acabamos de registrar o CTX e vamos verificar o que é. Então este é um objeto de Carlos. Assim, podemos ver algumas propriedades do ctx. Por exemplo, estilo de preenchimento, que está definido como preto agora. Ou fonte, que é dez pixels, sans serif ou largura da linha, que é uma. Por padrão. Não podemos ver funções aqui porque elas estão vindo do recurso de herança do JavaScript. Então, se eu abrir o protótipo, você pode ver algumas funções que podemos usar. Por exemplo, arco, usaremos para desenhar circuitos. Deixe-me apenas destruído. Usaremos ou agiremos para desenhar retângulos. Certo? Bristol, vamos usá-lo para restaurar nosso comércio ou girar a tela. Tudo bem, então este é um objeto CTX e, a partir de agora, usaremos principalmente ctx para cada ação em JavaScript. Ok, então vamos em frente e desenhe um retângulo básico. Primeiro de tudo, queremos começar com textos C, o gamepad. Isso é apenas dizer ao navegador que estou começando a desenhar algo. Você pode ver essa função aqui. E então eu quero desenhar um retângulo. E este retângulo, você pode ver as propriedades exponenciais, coisa certa. Precisamos de x, y, largura e altura. Bem, vou dar 100 para cada um deles para este exemplo. Finalmente, precisamos especificar se queremos preencher esse retângulo. Queremos traçar esse retângulo apenas para destacar as bordas. Deixe-me apenas comentar esta linha por enquanto. Estamos preenchendo. Então, quando digo isso apenas para arquivo, nada acontece porque este não é um servidor ativo. Precisamos atualizar. E eu estou fazendo isso pressionando Command R. Você precisa atualizar o navegador. Atualizar. Podemos ver nosso retângulo. E se escolhermos me refrescar, novamente, ficará assim. Você deve perguntar aqui, onde está a linha de fundo? Certo? Não temos a parte inferior do retângulo. Então deixe-me explicar por que isso aconteceu. Primeiro de tudo, acabamos de criar uma tela, mas não sabíamos o tamanho da tela. Na verdade. Deixe-me apenas fazer o plano de fundo da ameaça das vacas ordenado. Podemos ver nosso Canvas, atualizar a página. Então, esperamos que a vaca tenha que estar em tela cheia. Mas o inverso está aqui. Por padrão, não é tela cheia. Então, devemos aqui especificar que a coluna estava com e a altura do comércio. Então vou dizer peso ao Carlos, e vou apenas atribuir a rota interna do Windows. De qualquer forma, ele está dentro do navegador, então a área branca. Certo? Então, é apenas deste lado para este lado. Certo? E para a altura, também podemos usar quando não há altura interna. E você pode pensar em sua cabeça como ele também. Então, às vezes, você pode ter aqui o URL e a barra de navegação superior. Portanto, a altura interna não contém essa parte. É apenas a área branca. Quando salvo isso e atualizo a página, você pode ver que a Commonwealth está agora com o mesmo tamanho de nossa largura e altura internas. Mas há um pequeno problema. Mais uma vez. Essas são as regiões de bytes na parte superior, esquerda e inferior. Então, vamos também removê-los. Portanto, devemos usar CSS apenas para redimensionar o inverso. Não quero escrever tudo na linha, então criarei um novo arquivo CSS apenas para isso. Então, deixe-me excluir isso. E também podemos adicionar um link na tag head. Então, vamos fazer um CSS de índice e salvar esse arquivo. Portanto, devemos aqui criar um novo arquivo que é CSS de índice. Devemos chamá-los de minha coluna era tag assim. Então, agora, se eu atualizar a página, você verá que não há CSS. Certo. Porque acabamos de excluir a cor de fundo. Então deixe-me torná-lo azul novamente para que possamos entender se nosso código está funcionando. Certo? Sim, está funcionando. Então, o que eu quero fazer aqui é primeiro, primeiro lugar, eu quero definir a posição como absoluta. Certo. Então, porque não temos nada aqui, nenhum pai e filho ou qualquer componente para renderizá-lo. É por isso que só há comércio. Assim, podemos definir sua posição como absoluta e podemos apenas forçar os valores superior e esquerdo para 0. Certo? Além disso, vamos definir a largura e a altura também. Então, temos 100 de certeza de que nossa tela está totalmente ligada ao nosso navegador. Certo. Isso é ótimo. Mais uma coisa que eu quero falar sobre sua rápida mudança. Vamos apenas excluir a cor de fundo aqui. Você só quer testar. Então, mais uma coisa, quero falar sobre isso quando faço alguma diferença. Quando eu mudo algo sempre, devo entrar no navegador e atualizar a página. Então eu estou fazendo isso pressionando Command R. Se você for um usuário do Windows, você pode usar o Control R. Mas essa não é uma maneira eficiente. Em cada alteração, você não deve pressionar os botões Atualizar. É por isso que quero falar sobre uma extensão no código VS. Então, se você estiver usando o Sublime Text ou em casa, existem algumas extensões semelhantes como esta. Então você deve procurar pelo Live Server. Isso é muito comum. Na primeira linha, você pode ver um show ou extensão ao vivo ou seja, que foi baixado por aproximadamente 20 milhões de vezes. Então vá em frente e instale isso. Certo, já instalei. E, em seu arquivo HTML, clique em algum lugar, clique com o botão direito do mouse E digamos que abra com o Live Server. Certo, Ryan, você faz isso. É apenas chuveiro iniciado na porta 55 zeros, zeros. Então, este é um servidor ativo agora, o que significa que fazemos mudanças. Ele apenas atualiza automaticamente. Ok, quando salvei o arquivo, isso já foi alterado. Não precisamos mais atualizar todas as vezes. 4. 2EventListeners: Tudo bem pessoal, vamos fazer alguma coisa. Então eu quero falar sobre ouvintes de eventos, que é uma ferramenta realmente útil ou arte interativa em JavaScript. Então, vamos rastrear o evento de clique e desenhar um retângulo no carvão foi por que somos clicados? Ok, então vamos primeiro neve para o comércio. Há uma função incorporada durante o verão. E aqui você pode digitar, você pode digitar o tipo do evento. Estamos à procura de um evento de cliques. Então, direi clique. E para o segundo parâmetro, esta é uma função de retorno de chamada. Você deve usar uma função que o que você quer fazer executou a Commonwealth é coletar. Tudo bem? Então, vamos escrever algumas declarações nessas linhas. E essas linhas serão executadas ao clicar. Então, primeiro, vamos bloquear o evento em si. Então, podemos fazer e como um parâmetro aqui, e você pode usar essa função. Então, primeiro, basta bloquear o e para ver o que é. Vou apenas salvar isso. E também vamos excluir essa linha. Ok, então nosso console está claro. E quando clico em algum lugar, há um bloqueio e é o tipo de evento de ponteiro. Então, vamos abri-lo. Há muitas propriedades aqui. Mas se você descer, você pode ver a propriedade x e y. Então, se eu disser console, registre-o x ponto y e salve-o. Então, quando clico em solucionador, você pode ver que podemos obter a posição x e y desse local. Certo? O que é uma ótima ferramenta porque podemos usar para que possamos usar esse ponto para desenhar um retângulo. Em vez de registrar isso, vou usar. Então, podemos simplesmente mover essas linhas, a propósito, segurando a opção Alt e usando as teclas de seta, você pode mover linhas assim. E se aqui, em vez de durante 100, podemos dizer e ponto x ponto y. Então vamos fazer isso menor, talvez dez. E apenas faça com que se sinta. Certo. Então, quando eu digo ou quando clico em Carlos, você pode ver que simplesmente desenhamos um retângulo. Onde quer que cliquemos. Certo, isso é ótimo. Vamos mais longe e mudar seu aluguel pelo centro. Em vez de clicar, quero usar a lua de Mar. Certo? E salve isso. Então, desta vez, quando você clica em algum lugar, ele também rastreará o evento do mouse para que possamos fazer com o mouse. Portanto, essa função é chamada muitas, muitas vezes. Deixe-me apenas, vamos apenas registrar os valores x e y. Então, salve isso. Então você pode ver que ele está registrado muitas, muitas vezes porque estamos movendo o mouse e o ouvinte de eventos rastreia marshmallow. Então, toda vez que eu movo meu mouse, basta criar um novo retângulo. E ele só bloqueia o x e y. real é, isso é algo como isso é algo como pincel, certo? Assim, podemos desenhar o que quisermos. 5. 3Arc: Tudo bem, pessoal, podemos desenhar retângulos agora. Vamos ver como podemos desenhar círculos. Para desenhar círculos, usaremos os métodos de arco CTX. E eu quero falar sobre como isso funciona em detalhes. Considere esses parâmetros. Na seção de parâmetros, você pode ver x, y, que é o raio normal, que será o raio do círculo, ângulo inicial, ângulo Vou explicar o que são agora e um parâmetro opcional de boleon no final Você não precisa fornecer parâmetros opcionais. É só decidir se você quer começar a desenhar o círculo no sentido horário ou no sentido oposto. OK. Você vai entender melhor agora. Considere um plano cartesiano, e temos um ponto zero aqui Você pode pensar em trigonometria. Quando chamamos a função de arco, ela começa do zero e começa a desenhar um círculo assim. Se você der um ângulo final de 90, basta desenhar um arco, não um círculo completo. Você também pode definir o ângulo inicial e o ângulo final. Porque essa função nem sempre serve para desenhar círculos. Você também pode desenhar um arco. Então, no código, vamos tentar desenhar um círculo. Então, vou apenas comentar essas linhas e salvá-las para que tenhamos vírgulas claras Agora, se dermos 100 e cem para os valores de x e y, 50 para o raio, zero para o ângulo inicial e, digamos, um ângulo de 360 graus para desenhar um círculo completo Vou salvar essa atualização. Portanto, também devemos dizer que comece no campo CTX. Salve isso e você poderá ver o círculo. Vamos mudar para um 80. Você pode ver um círculo completo novamente. Vamos mudar o ângulo para 90. Por que isso está acontecendo porque esses parâmetros não esperam graus. Em vez disso, espera brilho. É por isso que aqui devemos usar esse Pi vezes dois para um círculo completo ou aquele Pi para um semicírculo. Você também pode usar alguns conversores de graus para radiância Ou você pode escrever seu próprio conversor. Vamos escrever o grau da função em radiância. Isso pode ser uma função de seta. Me desculpe, assim. A fórmula para isso é grau I dividido por um 80 vezes Pi. Vamos salvar isso e também mover nossa função acima. Então agora podemos usar graus. Chame aquela função que acabamos de escrever e digamos, uma 80 e salve-a. Isso é o mesmo novamente. Vamos tentar 270. Você pode ver ou 90. Esteja ciente de que isso não está preenchendo a área dessa peça. Isso se destina a desenhar um arco. Digamos que derrame, e agora é mais significativo, eu acredito. Quando eu digo um 80, é um semicírculo ou algo assim. Tudo bem. Também poderíamos dizer 360 para um círculo completo. OK. 6. 4Átomos: Agora que também sabemos como desenhar um círculo, assista a este vídeo, onde começaremos a desenhar coisas interessantes. Então, vamos começar. Em primeiro lugar, neste vídeo, criaremos mais de um item. Então, vamos criar círculos, e eu quero usar uma classe neste momento porque usaremos essa classe para gerar muitos átomos Eu quero começar a declarar com a classe atom. Ele precisa de um construtor, que vai gerar átomos e eles são basicamente pequenos círculos É por isso que precisamos dos valores x e y no construtor. Então, x é igual a x e y é igual a y. Para raio, quero tornar o raio aleatório de 10 a 0, mas não quero que seja zero porque não será visível zero Vamos adicionar dois ou também podemos fazer esse oito. É 2-10. declararemos a velocidade na direção x Ela também pode ser aleatória, mas isso é demais. Vamos fazer com que sejam quatro. Se declararmos uma velocidade como essa, 0-4, eles sempre irão para Para que um círculo vá para a esquerda, ele precisa de uma velocidade negativa porque é o valor de x, então diminua ao ir para a esquerda. É por isso que vou dizer menos dois. O resultado será entre menos dois e mais dois e faça a mesma coisa para y também Terminamos com o construtor. Também vamos criar um método de atualização. Portanto, esse método de atualização será chamado em cada quadro e deve atualizar o valor x dos átomos, e deve atualizar o valor x usando a variável velocidade x, e também fazer a mesma coisa para y. Mas estamos apenas definindo algumas variáveis, a velocidade do círculo , seu raio x e y, mas ainda não desenhamos nada Para fazer isso, precisamos desenhar uma função. Assim, o átomo pode desenhar a si mesmo. Lembre-se de como desenhamos. Dizemos que CTX começa PT, primeiro de tudo, e depois podemos dizer CT x r aqui podemos dar o valor x. Podemos fornecer o valor y e também podemos fornecer o raio do construtor O ângulo inicial deve ser zero, como sempre. Posso dar esse Pi vezes dois para o ângulo final porque sempre queremos um círculo completo. Eu também uso a função aqui. Vamos salvar isso. Ainda não há nada nas brasas porque não criamos nenhum átomo Acabamos de declarar isso, para que o computador mantenha a classe atom na memória, mas ela não é usada no momento Vamos seguir em frente e usar a classe atom. Além de tudo, quero criar uma matriz de átomos, que será uma matriz vazia para começar Em seguida, vamos adicionar um ouvinte de eventos, para que, quando clicarmos em algum lugar, os átomos possam ser gerados nesse Então, vou ligar como ouvinte do evento. O ouvinte do evento ouvirá o evento, clique no evento. E para a função de retorno de chamada, vou passar o evento Para que possamos acessar os valores x e y do ponto clicado Dentro do ouvinte de eventos, quero usar um loop for aqui Vou usar o atalho. Em quatro voltas. Vamos mudar o índice com, para que fique mais legível, eu acredito Eu quero criar 20 átomos. Vamos especificar o limite e, em seguida, excluir essas linhas O que queremos fazer aqui é inserir átomos, um novo átomo , certo? Então, vamos também declarar seus valores x e y com o evento que acabamos de usar. Ok. Eu vou guardar isso. Quando eu clico em algum lugar, ainda não acontece nada. Mas só para verificar. Se essas linhas estiverem funcionando, podemos adicionar um registro aqui. Vamos dizer olá. Quando eu clico em algum lugar, você vê que ele registra olá 20 vezes. Quando eu clico novamente, mais 20, e assim por diante. Essas linhas estão funcionando. Ainda não vemos nada porque não usamos a função. Se usarmos a função draw aqui, ela também poderá desenhar. Mas o que eu quero fazer aqui é mostrar uma função de animação. Assim, podemos criar uma nova função de animação como essa. Aqui, usaremos o quadro de animação de solicitação. Essa função é muito fácil de entender. Essa função apenas chamará uma função que foi passada. Se passarmos aqui animate, para que ele se chame novamente, criaríamos um loop, e esse é um loop infinito, e é exatamente isso que queremos Porque o que quer que escrevamos no meio, eles serão chamados infinitamente Porque nessa linha, ele chamará animate novamente e vai do início e executa os códigos e depois volta novamente e assim por diante O que queremos adicionar aqui é desenhar os átomos. Então, usarei átomos e usarei para cada um, que iterará sobre cada item na matriz de átomos Assim, podemos passar um parâmetro, que será o objeto de iteração Átomo. Aqui, o átomo iterará sobre a matriz de átomos para que possamos usar a função draw Com essas linhas, nós apenas desenhamos cada átomo nos átomos. Depois do sorteio, quero também chamar função de atualização porque aumentaremos a velocidade. Aumentaremos o x com velocidade ou diminuiremos os valores de x e y. A função de animação será chamada várias vezes e sempre atualizaremos o x e o y, e desenharemos novamente para que possamos ver a animação agora mesmo. Eu digo isso. Quando clico, ainda não há nada nas vírgulas Devemos acrescentar mais uma coisa. Acabamos de criar a função animada, mas nunca a chamamos Vamos ligar para isso. Agora, quando clicamos, finalmente, você pode ver o resultado. Onde quer que você clique, 20 átomos são gerados e eles se espalham aleatoriamente A velocidade e o raio são aleatórios. E podemos ver uma animação porque usamos o quadro de animação de solicitação. Então, deixe-me atualizar a página e ver novamente. Esse já é um ótimo projeto para começar, pois criaremos imagens melhores no futuro. 7. 5DestroyAndBlur: Atualmente, os átomos não estão sendo destruídos em algum momento Essa não é uma boa abordagem para problemas de desempenho. Eles estão se movendo infinitamente, mas não serão destruídos em algum momento Além disso, acredito que se você tornar os átomos menores em cada quadro, e eles podem ser se puderem ser destruídos em algum ponto , eles podem ficar cada vez menores em cada quadro Será um efeito visual melhor. Vamos tentar implementar essa lógica. Primeiro, tentarei alterar a função de atualização da classe atom. Esta atualização apenas mudará a velocidade para que também possamos atualizar o tamanho do átomo. Poderíamos usar o mesmo método. Aqui, eu também poderia atualizar o raio, mas quero apenas criar um novo método de atualização e chamarei isso de velocidade de atualização em termos de flexibilidade Você sabe, no futuro, talvez possamos apenas querer atualizar a velocidade duas vezes e não queremos atualizar o tamanho E, portanto, é apenas para flexibilidade. Vou criar um novo método de tamanho de atualização. Nesse método, diminuirei o raio. Vamos tentar 0,1. Em cada quadro, diminuiremos o raio, quando chamarmos o método de tamanho de atualização Vamos testar o tamanho da atualização e também alterá-lo para a velocidade da atualização. Guarde isso. Vamos ver o que temos. Agora, isso é só deixar eu abrir o console. Temos um problema: falha na execução do arco, o raio fornecido é negativo Estamos apenas diminuindo o raio e, em algum momento, ele será negativo e como não podemos ter um raio negativo, o console apenas avisa Então, o que podemos fazer aqui é excluir os átomos que têm um valor de raio negativo Se fizermos isso, também resolveremos o problema de desempenho porque, uma vez que excluímos um átomo, não precisamos mais pensar nisso. Então, em cada quatro em que iteramos sobre átomos, podemos verificar o raio dos átomos e, se for menor que 0,3, devemos Os átomos são apenas armazenados na matriz de átomos Se pudermos excluir da matriz de átomos, estamos Não criamos novas variáveis nem nenhum tipo de armazenamento de dados. Estamos apenas mantendo-os em átomos. Existe uma maneira de. várias maneiras de excluir átomos para excluir um elemento da matriz Usaremos o método de emenda aqui. Eu direi que os átomos dessa emenda precisam de um número aqui, que será o índice do elemento que queremos excluir Para conseguir isso, na verdade, devemos primeiro alterar as quatro de cada função aqui. Vou adicionar um novo índice de parâmetros aqui, e quatro de cada um já estão prontos para nos fornecer o valor do índice do loop. Você pode ver aqui, você pode fornecer um parâmetro de valor e também de índice e também podemos dar ao primeiro o que não precisamos no momento. Se digitarmos aqui index, podemos simplesmente usar index aqui também. E devemos fornecer uma contagem de exclusões. Então, queremos apenas excluir um elemento. Então, está tudo bem. Acredito que agora estamos apenas excluindo átomos com um raio abaixo de Vamos dizer e tentar. Agora, não temos nenhum erro. Torna-se uma boa animação de estrelas. Então você pode ver o efeito: os círculos estão apenas diminuindo, ficando menores e, em algum momento, quando têm um raio abaixo de 0,3, eles se destroem, então ficamos bem Não temos nada na memória após a animação. OK. Então, isso é muito eficiente. Tudo bem. Mas vamos tornar esse efeito mais legal. Então, vamos mudar esse clique para Mamu e ver o que acontece Talvez isso seja demais. Estamos apenas criando itens, e nosso coma está cheio porque não os estamos excluindo da cena O que podemos fazer sobre isso? Eu quero falar sobre um conceito agora. Salvamento de contexto e restauração de contexto. Então, esses blocos são apenas, você sabe, autoexplicativos Eles estão apenas salvando o contexto, todas as configurações do contexto, por exemplo, estilo de preenchimento ou, você sabe, linha com todo o resto, é apenas um ponto de salvamento aqui. E quando mudamos algo entre eles, podemos mudar o estilo de preenchimento, podemos mudar o estilo de preenchimento para vermelho. Então, quando mudamos entre essas duas linhas, por exemplo, nesta linha, estilo de preenchimento era preto. Quando dizemos restaurar, ela simplesmente volta. Então, é preto novamente na 27ª linha. Tudo bem. Assim, podemos fazer qualquer alteração, o que queremos fazer, e então podemos simplesmente restaurá-la, fazendo com que toda a configuração volte para essa linha até esse ponto. Então, eu quero adicionar os blocos aqui e eu quero mudar o estilo de preenchimento. Vamos experimentar o vermelho, ok. E eu quero desenhar um retângulo. Vou usar preenchimento para todo o caso. Em cada loop de animação, desenharemos um retângulo em todo o coas. Para fazer isso, devemos fornecer valores de conva e Digamos isso. Estamos apenas desenhando o retângulo vermelho em cada quadro para que não possamos ver nada OK. Então, não adianta fazer isso, obviamente. Mas se mudarmos esse vermelho para algum valor RGB. Então, nosso fundo era branco. Então, digamos 2505, 2505, 2505, e isso é para definir uma Então, isso é semelhante a escrever apenas em branco. Mas desta vez, eu quero adicionar Alpha também, que é a opacidade Este A significa Alpha. Aqui, eu quero adicionar um Alpha a 0,2. ângulo direto terá uma opacidade de 0,2, o que nos dará um bom efeito Quando eu digo isso, quando eu movo o, você pode ver, deixe-me fechar o console também. Então você pode ver aquele belo efeito azul, certo? E nossas partículas estão apenas se movendo com um belo efeito de trailer, e elas estão sendo destruídas em algum momento quando ficam muito pequenas. 8. 6SkyAndStars: Criamos um bom efeito visual que ouve o movimento de massa. E se quisermos, o código gera os átomos por padrão. E se não quisermos ouvir o evento do mouse? Mas, em vez disso, queríamos criar átomos conhecidos automaticamente. Então, vou comentar essas linhas aqui. E no botão, quero criar uma nova função. Certo? Então, vamos chamar essa função gerar átomos. E usarei a função de seta novamente. Certo? Então, para você, por exemplo, criar átomos, podemos usar a mesma lógica aqui. Basta empurrar átomos para a matriz, certo? Então, porque temos uma função de animação, ela desenhará, atualizará a velocidade, atualiza o tamanho e faz tudo. Então, devemos primeiro empurrar para os átomos. Então vou dizer átomos que arbustos. Queremos valores aleatórios. Então essa expressão aqui, como você sabe, cria um valor aleatório entre, se eu digitar seu décimo, entre 010, certo? Mas eu não quero nenhum valor estático aqui. Em vez disso, podemos usar como sweet. Assim, os átomos podem ser gerados em qualquer lugar do Commerce. E faça a mesma coisa por Y também. Desta vez comas altura. Certo? E então podemos apenas dizer o quadro de animação de solicitação e chamar a mesma função aqui porque queríamos ser um loop. Certo? Agora, se eu chamar gerar átomos e salvar esse arquivo. Então, sinto muito, não o fizemos. Acabamos de dar valores x e y. Em seguida, chamamos a classe. Então, adicionarei o átomo Mu no início e o parêntese no final. Eu salvo de novo. Então você pode ver agora que geramos átomos de assuntos aleatórios em qualquer lugar da tela. Ok, então isso parece bom, mas vamos melhorar. Acredito que se fizermos o fundo preto e tornarmos átomos menores e brancos, parecerá céu. Certo, então que tal tentar isso? Devemos mudar essa linha. Vou apenas comentar porque não quero perder isso. Mas desta vez queremos que seja preto. Então, darei 0 para valores RGB. Deixe-me salvá-lo. Nossa tela está preta agora. Não podemos ver os átomos corretamente porque devemos mudar o FillStyle para branco. Onde realmente desenhamos átomos. Pouco antes de desenhar. Podemos dizer TTX, TTX estilo para branco. Então, agora, parece muito melhor. E também são grandes demais. Eu quero que eles sejam menores. Então talvez possamos mudar o raio aqui. Então, vamos tentar algo também. Em vez de, em vez de oito. Agora, há menores e eles se parecem com estrelas no céu. É assim que você pode criar um céu ou um efeito de espaço com JavaScript. 9. 7ParabolicMovement: É muito fácil criar átomos aleatórios. Mas e se quisermos criar átomos em locais específicos? E também queremos movê-los de uma forma que queremos especificar. Certo? Então, para fazer isso, vou criar um novo ponto de objeto JavaScript. Ele deve ter dois valores básicos, x e y. Então aqui, em vez de valores aleatórios, eu só quero usar o ponto X, ponto Y. Então deixe-me salvar isso. Então, se eu dei 500 aqui, você pode ver lá no ponto específico, ok. Ou se você quiser algo específico em algo que no meio, é claro, poderíamos dizer que a largura Carlos dividida por dois. Altura dividida por dois. Então, está exatamente no centro. Certo? Então, vamos seguir em frente e mover isso em colunas. Então, o que queremos fazer aqui é mudar o ponto x. se eu mudar o ponto x, se eu aumentá-lo com um em cada quadro de animação, ele vai para a direita. Deixe-me salvá-lo. Então você pode ver que vai para a direita. Se também mudarmos o y, agora reformular, ele irá abaixo e escreverá. Em algum momento, ele sairá da tela. Ok, então como fazemos isso saltar entre alguns pontos que podemos usar para colocá-los aqui. Porque a função cos x está entre um e menos um, enquanto os graus estão aumentando. Certo? Então, se você usar cosseno para aumentar o ponto x, ele vai para a direita. E então, em algum momento, ele voltará e começará a ir e para a esquerda. Ok, vamos usar isso em nosso código. Na verdade, vamos começar x e y a partir de 0. Talvez possamos usar cosseno aqui. Devemos fazer radianos, novamente, não graus, mas eu quero apenas converter de graus para radianos. E também atribuirei uma nova variável. Começará a partir de 0 e aumentará em cada quadro para que nosso cosseno simplesmente volte e volte. Então, vamos usar essa variável aqui, grau. E lembre-se da fórmula para converter em radianos. Divida-o por 180 vezes Pi. Certo? Então, quero gerar átomos a partir do centro das colunas. É por isso que vou apenas adicionar a largura do Carlos. Divida por dois mais, e também aqui cos altura dividida por dois mais. Mais uma vez, agora, se eu disser, você pode vê-lo de repente, só vai no verão. Agora vejo que é porque acabamos de fazer um erro de digitação aqui. Deveria ser assim. Quando o salvamos. Você pode ver que são gerados no centro da tela, mas estamos aumentando o ponto x ou diminuindo em cada quadro. Mas nada mudou. Isso está acontecendo porque intervalo do ponto x está entre 011, portanto, não afeta muito. É por isso que eu quero multiplicar esse valor aqui. Digamos que centenas. E também por quê? Digamos 200 novamente. Agora você pode ver que ele está apenas girando entre esses roteadores. Então, 1 x é um. Ele estará à direita. Se for menos um, é gaze à esquerda aqui. Então, o que podemos fazer também, podemos tornar esse movimento parabólico também. Então, neste momento, não fazemos muito por y se dissermos sempre um. Então, estamos apenas mudando. Então isso não muda. Mas lembre-se da fórmula de parábola. Então deixe-me abrir. Esta é apenas a parábola básica, y é igual a x quadrado. Então, vamos implementar isso em nosso código, que é y igual a 2 x vezes x. o que você acha que vai acontecer? Nossa forma, vamos começar a desenhar uma parábola. Deixe-me salvá-lo. Você pode ver o resultado e usar essa lógica. E para a vovó, você pode desenhar tudo. Você quer. Um círculo oito, um símbolo do infinito, erro. 10. Primeiros passos (efeito Pixel): Nesta seção, vamos criar um bom efeito de pixel usando JavaScript Vanilla. Portanto, no final desta seção, você poderá usar esse efeito de pixel em imagens PNG com erro. Então, se você estiver pronto, abra sua linha de comando e podemos começar. Nas seções anteriores. Lembre-se de que criamos uma nova pasta de projetos na área de trabalho. Então, vou para a pasta de projetos. Criarei uma nova pasta aqui em relação a este projeto. E vou chamá-lo de efeito de pixel e entrar nessa pasta. Então aqui, o que precisamos é, na verdade, três telefones. Então, como sempre, indexe HTML. Então, direi que toque em index.HTML para criá-lo. E também toque em index.js e também para CSS, style.css. Ok, agora criamos nossos arquivos. Vamos abrir. 11. Configurando o projeto: Podemos abrir o projeto com código VS usando o terminal também. Então, na sua linha de comando, se você disser pontos espaçados capturados, se o shell de comando já estiver instalado, os comandos, isso abrirá o código VS usando seu diretório aqui. Então, se está dizendo algo como o comando não encontrado, deixe-me na tela, você pode simplesmente entrar no VS Code e pressionar Command V ou Control V no Windows. E aqui digite o comando shell. Então, já que estou usando a versão insiders do VS Code, porque estou usando uma versão de seis a quatro braços para o silício Apple. Ele diz chamado insiders, mas, normalmente, você pode ver aqui ele diz instalado chamado comando em pet. Então, se você estiver usando insiders, você deve instalar este. Se você estiver usando a versão normal, apenas o VS Code. Então você pode verificá-lo aqui. Você deve ver aqui instalar, instalar frio. E depois de fazer isso, uma vez, depois de clicar nisso, ele instalará esse comando. E então você pode ouvir, use esse comando. Como estou usando dentro desta versão para mim, ela é chamada de insiders. Certo? E abrirá o projeto no VS Code para mim. Tudo bem, então vamos começar com o índice HTML. Como sempre, usaremos o modelo HTML5. Aqui. Podemos dizer efeito de pixel para o título. E então, como sempre, devemos criar nossas colunas. Vou dar que meu código era como id de sem-teto. Também devemos criar uma tag de script dada a fonte do index js. Finalmente, vamos também vincular nosso arquivo CSS com um link. Certo? Então, tudo está pronto em HTML. Vamos entrar, para o CSS. Então aqui eu quero escolher tudo. É por isso que usarei asterix e definirei a margem 0, preenchimento, 0, tamanho da caixa, border-box. Isso permitirá alguns ajustes. Você pode pesquisar para isso. É um tópico CSS que não discutirei agora. Vamos deixar o fundo preto. E então podemos chamar nosso Cosmos usando a Ivy Tech. E vamos definir alguma fronteira. Um px branco sólido. E também defina sua posição como absoluta porque não temos mais nada. Não temos algo relativo para que possamos consertá-lo no centro da tela fazendo valores superiores e esquerdos. Existem muitas, muitas alternativas. Fazer isso em todos os sentidos funcionará. Então, finalmente, queremos traduzir as cores, meu menos 50%. Então, essas linhas farão com que as cores apenas trarão o Congresso no Centro em todas as resoluções. Ok, vou apenas salvar CSS e terminamos com HTML e CSS. Agora podemos abrir o arquivo JavaScript. Então, é como sempre, devemos primeiro criar os carros usando elemento por ID. Passe o ID do meu carro era. E também criaremos nosso CTX nesse contexto. Goody. Tudo bem. Agora, o que eu quero fazer é mover algumas imagens PNG para essa pasta e usar essa imagem também. Eu fornecerei a você que esta imagem é da seção de recursos. Então você pode baixá-los e usar exatamente as mesmas imagens comigo. Ou você pode escolher suas próprias imagens PNG em seu próprio projeto. Então deixe-me trazer minhas fotos. Ok, então temos três imagens PNG. Agora mesmo. Agora que fizemos no sistema de arquivos local, agora podemos acessá-lo. Eu criarei uma nova variável, que será qual, e será um objeto de classe de imagem para que agora possamos mudar sua fonte para dizer. Vamos começar com Kerry. Ok, então este é o nome do arquivo na mesma pasta. É por isso que não precisamos barras e pontos, qualquer outra coisa. Podemos apenas passar o nome porque eles estão na mesma hierarquia, certo? Também. Então, agora que temos a fonte da imagem, podemos chamá-la. Então podemos dizer muito Imagem. Então, isso será chamado quando a imagem já estiver registrada. Então podemos dizer, podemos dizer função aqui. E tudo o que vamos escrever. Essas linhas serão chamadas depois que a imagem for carregada. Certo? Se você não disse, se você não usou não são propriedade da imagem. Poderíamos começar a codificar antes do processo de carregamento. Então isso causará alguns erros. Ok, então esta é a maneira mais segura usar a imagem com JavaScript. Tudo bem? Então, quando ele é carregado, o que queremos fazer é definir a largura do Carlos para essa largura de imagem e também a altura do Carlos para essa imagem. Agora, podemos desenhar a imagem usando a função de imagem CTX. Então, para o primeiro parâmetro, você deve fornecer a imagem em si. Então vou dizer Imagem e estou iniciando x e começando y deve ser 0. Finalmente, podemos fazer comércio com a altura do Carlos ou os endpoints. Então, quando eu salvo isso, vamos também entrar no arquivo HTML. Clique com o botão direito sobre ele e abra com o Live Server. E se você não assistiu a essa seção em que instalamos o servidor ativo, é muito fácil. Você deve simplesmente entrar nas extensões aqui. Podemos digitar Live Server e você pode simplesmente instalar este. São cerca de 20 Melianos. Ele tem cerca de 20 minutos de download. Portanto, é seguro usar. Depois de instalá-lo, você pode clicar com o botão direito do mouse no arquivo HTML e dizer Abrir com o Live Server. 12. 3getImageData: A entrada será aberta em seu navegador padrão. Vou fazer, usarei o Chrome. Então, deixe-me empilhar dessa forma como código para que possamos ver ambos simultaneamente. Tudo bem, estamos prontos para ir. Então agora podemos desenhar a imagem no carro foi, o que significa que também podemos usar a função ImageData para nossa imagem. Então deixe-me ver o dx. Deixe-me explicar obter a função ImageData. Portanto, devemos dar x, y, largura e altura. Aprecie. Como desenhar um retângulo. E o que essa função faz é realmente obter os dados da imagem. O objeto de retorno será um erro. Então, na verdade, deixe-me apenas ImageData. Ok, vamos apenas registrados para dizer isso e entender facilmente. Então, vou abrir a imagem do console que você pode ver. Temos um objeto de dados. Ok, então vamos realmente registrar, registrar os dados em si. Portanto, é uma matriz. Ele tem muitos itens. 2 bilhões, talvez 2 milhões. Eu me visto. E se você abrir para dentro, você pode ver É apenas um tipo fixado de uma matriz. Portanto, na verdade, é um único array. Não é um colchão. Não há. Então parece que há três itens dentro de uma matriz, mas é apenas, você sabe, isso é apenas Ferramentas do Desenvolvedor, muito fora de encurtar as coisas. Mas normalmente, é uma matriz 1D, então eles estão próximos um do outro para cada número. E você pode verificar isso. Começa a partir de 0. E se você abrir a segunda seção escondida 400, o índice está aumentando continuamente. Tudo bem? Então, quais são esses zeros? Significado? Funciona assim. Você sabe, valores RGB, certo? R significa vermelho. G significa verde, B significa azul e um significa alfa. Assim, podemos identificar que cada pixel na vaca estava usando essa cor. Bem. Então, teremos um número entre 0 e dois, 55 para cada um deles. E isso mostrará o quão poderosa dessa cor nessa imagem. Então, como neste exemplo, deixe-me expandir essa guia. Ok, então neste exemplo, digamos que nosso primeiro pixel esteja bem aqui. E o valor vermelho desse pixel é 0, porque não há aluguel aqui. É tudo preto, certo? O azul também é 0. O verde também é 0. Sinto muito, verde. Azul também é 0 e alfa também é 0 porque não é transparente, certo? Não há um pastoso. Não há brilho nesse pixel. Mas deixe-me encontrar algo no meio. Só estou escolhendo aleatoriamente. Tão raro e espero encontrar alguém que não seja preto. Não deveria ser tão difícil. Então, devemos procurar. Ok, nós o encontramos neste pixel. Não sei onde está agora. Mas sabemos que o valor vermelho é 217, valor verde é 10928, valor azul é 166 e o alfa é 25. Certo? Então agora você pode entender que nós temos. Valores Rgba para todos os pixels nas colunas. O que é ótimo porque podemos usar esses valores para fazer tudo o que quisermos. Assim, podemos desenhar a imagem no lado oposto. Podemos obter suas cores e usá-las de maneiras diferentes. Ou podemos criar um efeito de chuva de pixels, o que faremos. Certo? Então, se estiver claro o suficiente, espero não ter explicado as coisas. Podemos continuar agora. Então, agora que temos ImageData, podemos separar os valores vermelho, verde e azul, certo? Podemos mantê-los em diferentes estruturas de dados. Certo? Podemos calcular algum brilho com o uso dessas receitas. Então você pode entender melhor quando eu digito. Então, vamos começar com um loop for. Vou mudar o índice para i. Então devemos fazer loop para dados de imagem, dados que faltaram, certo? Então, deixe-me abrir o console novamente. Acho que não deveria fechá-lo. Certo, então temos dois milhões. Dois milhões. Sim, temos cerca de 2 milhões de elementos e devemos percorrer eles. Então, neste loop for, quero identificar valores de vermelho, verde e azul. Vermelho será ImageData. Os dados. E vamos lembrar que os vermelhos são, o primeiro é vermelho e depois verde, azul, alfa. E o quarto, na verdade, o quinto é novamente vermelho. E então este está vermelho novamente. Este é vermelho novamente. Então podemos dizer que eu vezes quatro, podemos obter todo o valor vermelho direto. Primeiro. Na primeira iteração , será 0. A segunda iteração será quatro. Assim, podemos obter todos os valores vermelhos. Então eu farei a mesma coisa para o verde também, mas desta vez você pode apenas mais um parêntese aqui. E podemos dizer mais um, porque desta vez teremos 159 e assim por diante. Então, vamos em frente e faça isso para o azul também. Deve ser mais dois. E com valores de vermelho, verde e azul, podemos simplesmente criar uma nova variável de brilho. Então, é só que será útil para esse efeito. Certo? Então, só queremos usar uma média de variáveis vermelhas, verdes e azuis. Então eu vou, vou apenas obter a soma dos três valores e dividir por três para obter a média. Assim, podemos atribuí-lo a brilhos. Certo? E então vamos criar uma nova matriz. No topo de tudo. Vou chamá-lo de array brilhos, uma matriz vazia. E vamos apenas empurrar o valor de brilho para essa matriz. Tudo bem, então qual será o comprimento da matriz de brilho? Será o mesmo com os pixels em nossas colunas, certo? Então, apenas obtemos valores vermelho, verde e azul de cada um dos pixels. E obtemos a média deles. E chamamos esse valor ao brilho, e vamos empurrá-lo para o brilho, Eric. Certo? Então, se você se lembrar, nosso resultado não será colorido. Mais tarde. Podemos fazer isso com cores também, mas no primeiro passo, só queremos valor de brilho e vamos usá-lo. Tudo bem, vamos continuar. Vamos gerar partículas de Tarzan ou esse efeito. Vou usar um novo for-loop para isso. Mais uma vez, vou usar eu novamente. E digamos que desta vez eu darei estática 10 mil para o limite do loop for. Agora, esse loop irá iterar 10 mil vezes e devemos apenas empurrar. Na verdade, devemos primeiro criar uma matriz de partículas. Então, agora o que queremos fazer é empurrar partículas ou uma partícula 10 mil vezes nova, certo? Então, mas não temos nenhuma partícula agora. Não criamos nenhuma classe. Então, vamos primeiro fazer isso. Vamos deixar um comentário aqui. Então, devemos ser capazes de dizer aqui nova partícula. Certo? E então vamos descomentá-lo assim que tivermos essa partícula, classe de partículas, sinto muito. 13. 4CreateParticleClass.: Tudo bem pessoal, é hora de criar classe de partículas para o nosso efeito de partícula. No topo. Talvez aqui possamos dizer partícula de classe. E estamos acostumados com essa sintaxe, certo? Nós já usamos isso antes. Então, vou chamar o construtor. E não precisamos fornecer nenhum parâmetro na verdade, porque podemos torná-lo padrão. Então, como sempre, temos o valor X, que pode ser aleatório. E o alcance será entre 0 e Carl mosfet, certo? Então, um, alguns de vocês talvez percam a seção Math.Random no início do curso. Portanto, esse valor retornará um valor aleatório entre 0 e colunas com, ok, então se dissermos aqui, isso retornará um valor aleatório entre 010. Então podemos dizer comércio com aqui. Ele retornará algum valor x entre. Vamos fechar o console agora. Algum valor x aleatório entre o campus dentro do cosmos. E vamos fazer a mesma coisa por Y também. Mas queremos, queremos que nossas partículas comecem no topo das colunas. Desta vez, não queremos aleatoriedade. É por isso que direi 0 para cada partícula. Então, ele começará aleatoriamente na direção x, mas começará no topo todas as vezes. Também sou chamado de brilho, porque usaremos brilho. Lembre-se aqui, nós apenas calculamos isso. Vou apenas torná-lo 0 por padrão, mas vamos mudá-lo mais tarde. Certo? Eles também devem ter uma velocidade porque eles vão cair com uma velocidade aleatória. Então, algo como três funciona. E também eles serão círculos. É por isso que eles precisam de um raio. E eu quero que cada partícula esteja em tamanhos diferentes. É por isso que vamos fazer seus valores de raio entre eles. Então, eu não quero que ele comece a partir de 0. Então, vou adicionar um aqui. Portanto, esse valor estará entre 1,52. Certo? Então, seguimos a parte do construtor. É hora de carimbos vinculados à função de atualização. Na função de atualização, você já sabe qual função de atualização é quatro. Ele será chamado em todos os quadros, à direita, com nossa função de animação. E escreveremos a função de animação mais tarde. Mas a função de atualização será chamada em todos os quadros. Então, seja lá o que reescrevermos entre a função de atualização, essas linhas serão chamadas continuamente em todos os quadros. Então, o que queremos fazer corre continuamente para aumentar os valores y das partículas para que elas possam cair. Então, queremos aumentá-los usando a velocidade das partículas, o que também será aleatório. Então, na verdade, vamos adicionar aqui. Eu não quero que isso seja 0 porque será 0. Eles não cairão, eles ficarão presos a esse pixel. Então, vou adicionar 0,1 só para ter certeza de que eles estão caindo. Tudo bem, podemos ir em frente. E assim as partículas simplesmente cairão continuamente. E em algum momento eles chegarão ao lado inferior das colunas, certo? Então, quando o fizerem, devemos apenas, na verdade, há duas maneiras de destruí-los ou podemos mudar seu valor y para 0 novamente, que eles comecem desde o início. Vou usar o segundo caminho neste projeto. Então eu direi se esse ponto y for maior. Do que ou igual a eu era altura, o que significa que eles estão prestes a sair da tela. Vamos fazer y 0 novamente para que ele comece desde o início. E também quero mudar o x deles que eles sejam posicionados aleatoriamente, novamente. Lama, aleatória. E nosso limite é conversar com qualquer coisa. Então isso faz sentido, certo? É apenas lógica pura. Certo? Vou apenas dizer isso. Vamos continuar com nossa função de desenho. Na verdade, antes de desenhar a função, quero falar sobre o brilho porque é aqui que usamos o brilho. Na função de atualização. Alteraremos o brilho da partícula em cada quadro com o valor que obtemos da imagem real. Então lembre-se dessa matriz de brilho, apenas uma enorme matriz, mas é 1D. Então, é só que talvez tenha mais de 2 milhões de elementos. E podemos obter o ponto exato para nossa prática. Então, como você faz isso? Vou dizer esse brilho de ponto. E podemos chamar de brilho. Aqui. Devemos usar o valor x e y da partícula. Devemos usar de forma muito inteligente para que eles correspondam à sua posição no erro de brilho. Certo, então pense nisso. Como podemos usar os valores x e y de nossa partícula? Que combinará com o iluminar o centro. E isso também vem dos dados da imagem. Mas há uma pequena diferença entre eles. Aqui temos valores x e y das colunas. Então é um colchão, que é terça, certo? Mas aqui temos apenas um, o array. Então, de alguma forma, precisamos mapear esses valores x e y para esse brilho. Vou explicar essa parte usando uma apresentação de slides. 14. 5Mapping2d1d: Estas são nossas colunas. Temos os valores x na horizontal, temos os valores y na vertical. E esta é a matriz de brilho que usamos. Então eles compraram seus presentes a mesma coisa. Os pixels no cosmos. Mas há uma pequena diferença. Um deles está em 2D, enquanto o outro é 1D. Portanto, com o uso de valores x e y, podemos representar um pixel em duas dimensões. Porque usamos valores x e y. Mas na matriz de brilho, é linear. Nós só temos uma dimensão. Então aqui você pode ver o reflexo da matriz de brilhos em coordenadas x e y. Portanto, esses valores representam que o índice está fora do questionário iluminado no Canvas. Podemos usar a fórmula para acessar o índice da pesquisa brilhante usando valores x e y dos pixels. Então, digamos que queremos acessar o décimo elemento e o pixel. Então, mas não sabemos qual pixel ele está na matriz de brilho. Só sabemos que x é dois e y é dois. Então, vamos usar a fórmula. Isso nos dará dez. E isso funciona porque estamos apenas multiplicando valor y com a contagem de linhas. Faz sentido, certo? Então nós apenas adicionamos x. ok? Então, vamos ver outro exemplo. Se quisermos acessar o vírus X4 seis pixels, a fórmula nos dará 44. Então, usaremos essa fórmula em nosso código. Vai ficar assim. A propósito, apenas usamos Math.floor no código porque os valores x e y são apenas valores flutuantes gerados aleatoriamente. Então, como eles são fluidos, eles não são inteiros. Mas vamos, precisamos de números inteiros. É por isso que usaremos Math.Floor no tribunal. 15. 6UseTheFormula: Vamos usar essa fórmula em nosso código. Então vou dizer Math.Floor, este ponto y menos uma vez vírgulas. Mas, por enquanto, posso expandir esta janela mais mod floor novamente, que x. ok? Então, ainda não vemos animações porque não criamos nossa função de animação. Mas seja paciente. Estamos prestes a fazer isso. 16. 7DrawFunction: Vamos também criar o método de desenho, o que é muito fácil, e fizemos isso antes. Então, aqui eu digo desenhar. Realmente deve começar a desenhar, começará as almofadas. E podemos dizer FillStyle, branco. A propósito, você pode alterar essa linha com a cor que quiser. Ou, no futuro, podemos querer alterar essa linha com a cor da imagem para que os pixels também sejam coloridos. Então, queremos desenhar um círculo usando x, y, raio 0 e o círculo completo. É por isso que usarei math.pi vezes dois. Então, já explicamos quais são esses parâmetros e como desenhar um círculo nas seções anteriores. E, finalmente, devemos dizer CTX, medo. Tudo bem, deixe-me salvar isso, mas não estamos ligando para funcionar. É por isso que não vemos animações. 17. 8ConcluídoTheEffect: Vamos até o fim. Aqui podemos criar uma função animada. Então eu quero torná-lo uma função de seta. E a primeira coisa na função de animação, queremos mudar a opacidade das comuns. Podemos fazer isso usando a propriedade alfa global do CTX. E vamos defini-lo para 0,05. Altere também o FillStyle para preto. Certo? E queremos desenhar um retângulo, reformular com essa opacidade e cor preta. É por isso que darei a altura do comércio e do comércio. Então esse retângulo cobre toda a área. Certo? Então você pode ver o que estamos fazendo aqui, certo? Estamos apenas desenhando um azulado e saída como retângulo alfa 005, o que nos dará um bom efeito de desfoque das partículas. E estamos desenhando um retângulo que cobre todas as câmeras para que não precisemos nos preocupar com todas as partículas individualmente, mas estamos apenas desenhando um grande retângulo. Tudo bem? E, claro, queremos desenhar partículas de atualização na função animate. Então, para isso, usarei para cada entidade. Então, vamos chamar a matriz de partículas. Para cada um. Vamos iterar sobre partículas. Para cada partícula que eu quero atualizar. E eu quero. E entre eles. Vamos também mudar o alfa global novamente. Então, perderemos o brilho das partículas aqui. Então, parte da matriz de brilho, nós apenas o atribuímos às partículas para que cada partícula tenha um brilho diferente de acordo com o pixel desse local. Certo? Então, vamos usar esse brilho entre atualizar e desenhar. Vamos mudar as partículas alfa globais, certo? No final da animação. Também chamarei o quadro de animação de solicitação como de costume. Tudo bem, então vamos chamar a função animate e salvar esse arquivo. Não vemos nenhuma partícula. Isso porque não empurramos partículas para a matriz de partículas. Neste loop for-loop. Não geramos porque isso é apenas comentários. Então, a matriz de partículas que devemos dizer empurrar uma nova partícula e isso deve estar bem. Quando eu digo Espere, não vemos nada de novo. Certo, isso é estranho. Oh, há um, eu vejo apenas uma partícula. Então, talvez nosso café da manhã seja demais para desenhar. Vamos multiplicar esse valor com um pequeno número. Ok, agora temos nossas partículas. Eles estão respondendo à imagem, o que é ótimo. Mas eu só quero aumentar isso um pouco. Isso não é ruim. Talvez ainda devêssemos diminuir. Sim, isso é muito melhor. Então, agora o que fizemos aqui é mudar o alfa global com o brilho que acabamos de calcular. Tomando a média dos valores vermelho, verde e azul desse pixel na imagem original. E esses valores davam era o brilho ou aquele pixel. E usamos esse brilho em nosso efeito de pixel. Espero que você tenha gostado desse efeito. E o que é emocionante aqui é que podemos usar esse efeito a partir de agora em qualquer imagem que quisermos. Certo? Então eu também forneço a parede ou o arquivo PNG na Udemy. Portanto, basta mudar aqui também para aplicar esse efeito nessa imagem. 18. 9addRGBColors: Acredito que isso já é um grande efeito. Mas se você quiser usar as cores originais em vez de preto e branco, podemos fazer isso facilmente. Então, vamos abrir nosso código. Um arco. Quero criar um novo array RGB. Tudo bem? Então, usaremos o array RGB como o array brightnesses. Em cada iteração deste loop for, queremos enviar também valores vermelho, verde e azul para uma matriz. E usaremos isso mais tarde. Então, aqui também vou enviar o array RGB. Então, usarei literais de string JavaScript. Acredito que esse seja o nome da técnica aqui. Então, basta colocar um back-to-back aqui. E agora podemos combinar textos, texto com objetos JavaScript como este. E ele retornará como ***** no final. Então, assim, direi cifrão com os pais. Esta é Carla paranthesis. Agora você pode digitar vermelho aqui, e então você pode continuar digitando fedor. Então, queremos dizer que RGB, vermelho e vermelho vem daqui. Valor vermelho, seja lá o que for. Então, queremos importar verde também. Finalmente sou azul e fecho o parêntese. Então, isso parece bom. Também poderíamos fazer isso assim. É a mesma coisa. Parênteses Rgb mais vermelho, mais vírgula, mais espaço, mais verde e assim por diante. Então eu acho que isso é muito legível. É por isso que usei dessa forma. Certo? Então, neste momento, temos uma matriz RGB de cada pixel. E dentro dessa matriz terá cadeias de caracteres, que estão representando valores RGB. E se você for abaixo, dizemos CTX FillStyle preto e não este. Ttx FillStyle branco. Em vez de cultivar partículas brancas. Podemos fazer com os valores RGB que acabamos de parar. Aqui. Devemos usar a mesma lógica com a matriz de brilho, porque esta é novamente uma matriz 1D que contém todos os valores RGB das câmeras. Então, digamos que matriz RGB. Então, vou usar a mesma coisa. Na verdade, vamos apenas copiá-lo. Feche esta seção. Vamos apenas copiar isso e colar aqui. Certo, vamos dizer isso. Vamos ver o resultado aqui. Na verdade, funciona. Então deixe-me abrir a imagem original. Está certo. É por isso que nossas partículas são geradas. Certo? Vamos tentar curry. Curry tem mais cores, certo? Vamos tentar curry. Tudo bem, ótimo. Agora nossas partículas estão na cor exata desse pixel. Isso também é ótimo. Então, vamos mudar um Morton e nós terminaremos. No começo. Quando salvo essa atualização, você vê a imagem do código, certo? Então, vamos apenas excluí-lo porque nossas partículas serão desenhadas. Então, vimos porque aqui nós apenas desenhamos a imagem. Então, para obter o ImageData, devemos desenhar a imagem. Não podemos excluir a escória, mas o que podemos fazer, depois de obter os dados da imagem, não precisamos manter a imagem. Em contraste. Podemos apenas dizer rect claro, partir de 00 todo o caminho para nos acalmar o quê? Nossos sinais. Então, quando eu salvo isso, não vemos nada no começo e as partículas começarão a desenhá-lo. Ok, apenas atualize novamente. Não vemos nada aqui, mas as partículas são desenhadas, ok, então isso é ótimo. Acredito que seja o estado final desse efeito. Espero que você tenha gostado. Acredito que isso será um efeito útil para o seu resfriado. Nossa jornada. 19. 1NodeAndNPM: Se você ainda não instalou o Node JS, vá em frente e faça o download do. Portanto, você pode baixar cadeiras não a partir deste URL. E você deve escolher a versão que acordo com seu sistema operacional. Para usuários de CPU L1, tenha certeza de que você está baixando os braços seis a quatro versões. Ou se você estiver usando o Windows, você pode simplesmente instalá-lo aqui. Em seguida, você deve concluir o processo de configuração. Depois de instalar, talvez você queira verificar se o nó está instalado completamente usando o comando. Então, para fazer isso, abrirei um terminal de linha de comando no Mac. Você pode usar as janelas do PowerShell. Tudo bem? Veja se o nó está instalado, podemos usar o comando naught dash V. Ou isso é semelhante à versão naught dash dash. Então, ele nos mostra a versão do node.js. Ou você também pode verificar se o npm está instalado porque usaremos o npm, que é um gerenciador de pacotes para o NodeJS, e vamos baixar Bibliotecas usando o MPM. Tudo bem? Tenha certeza de que o Node e o NPM instalados e você pode ver as versões deles para que estejamos bons. 20. 2InstallCanvasSketch: Agora que instalamos e o PM, agora podemos instalar a biblioteca Karma Sketch que usaremos no Google. Vamos começar por comum com o Sketch e entrar nessa página de detalhes. Então este é o criador do esboço de comércio. Você pode ver a biblioteca aqui. Usaremos esta biblioteca para que você possa verificar a documentação e os exemplos aqui embaixo. Se você for abaixo, você pode ver um guia de instalação para esboço de comércio. Então, já baixamos o MPN. Podemos usar esse comando. Copie este comentário aqui e volte para o terminal ou PowerShell, quer estejamos usando o macOS ou o Windows, liste dash g no final o torna global. Portanto, não o baixamos localmente em uma pasta, mas estamos baixando globalmente. Então pressione Enter e aguarde o processo de download. Então, se você tiver problemas como eu, erros no terminal, é apenas o sapato de permissão. Tudo bem? Então você pode apenas dizer sudo no início e colar o comando é que ele é, ele resolverá esse problema. Ok, basta digitar sudo no início e , em seguida, pressione Enter. Tudo bem, então agora baixamos a biblioteca do Sketch também. Neste momento, quero falar sobre os comentários do terminal um pouco. Eu só quero que você saiba os comandos que você deve saber seguir. Tudo bem, então antes de tudo, você pode entrar em um diretório usando o comentário do cd. Digamos cd Desktop. E agora estamos na área de trabalho. Você pode criar uma nova pasta usando vetores. Então vou chamá-lo de esboço. Acabamos de criar uma pasta de esboços na área de trabalho e depois entramos nessa pasta de esboços. A propósito, você pode ver que, se eu digitar SK e pressionar Tab, basta concluir automaticamente, certo? Porque há apenas uma pasta que começa com s k, minha área de trabalho. E é assim que eu entraria nesse diretório. Se você quiser voltar, você pode apenas dizer ponto de ponto de cd. Então, estamos na área de trabalho. Mais uma vez. Vamos esboçar em Scouts, podemos obter uma lista de pastas e arquivos apenas digitando ls. Então, atualmente, não temos nada na pasta Sketch. É por isso que não recebemos nada. Então, vamos criar uma nova pilha de teste. Então, o comando touch cria um arquivo. Tudo bem. Agora, se você digitar ls, você pode ver o JS de teste que acabamos de criar. Se você tiver criado para jazz e digitar ls, você também pode ver isso. Então Alice deveria, você deve ver a lista dos arquivos. Ele mostra todos os arquivos em uma pasta. Ok, esses são os comandos básicos, linha de comando que usaremos. Então, criamos nossa pasta. Vamos criar nosso primeiro projeto de esboço. A propósito, apenas para visualizá-lo facilmente, quero trazer minha pasta nessa tela para que você possa vê-la simultaneamente. Os arquivos nessa pasta. Na verdade, não precisamos deles. Vou apenas excluí-los. Agora podemos criar nosso projeto de esboço de karma. Então, vamos verificar. Volte para novamente, o topo. Temos o comando para criar seu projeto. Também abrindo-o no navegador. Atualize o traço aberto. Então, vamos colá-lo. Vamos copiar e colar aqui. E pressione Enter. Você verá que o arquivo que acabei de criar. E também abrimos o projeto no navegador. Portanto, este é um servidor ativo, o que significa que você pode ver no terminal, o servidor em execução neste URL. Se você copiar esse URL para algum navegador, poderá ver o esboço. 21. 3CanvasSketch: Agora podemos ver nossos visuais no navegador. Mas antes disso, vamos entrar na pasta novamente. Você pode ver que ele cria três arquivos. Sob a pasta. Vamos escrever o código no sketch js. Então, vamos abri-lo. Vou apenas mover o arquivo na tela. Então deixe-me explicar essas linhas. A primeira linha, este não é apenas um termo importante. Portanto, esta linha é apenas necessária, exigindo a biblioteca vírgula Sketch que acabamos de baixar. E mantém o resultado da biblioteca na variável de esboço de tela. Tudo bem, para que possamos usar o esboço de cores da biblioteca. E abaixo disso, há configurações. Configurações é apenas um objeto JavaScript que será passado como um parâmetro da função Commerce get aqui. Então essa biblioteca sabe como se comportar com as configurações que acabamos de ajustar. Então, digamos que eu queira mudar a dimensão. Eu posso fazer isso aqui. Então, digamos, por enquanto, queremos a Commonwealth em uma forma de A4. Você vê que está em uma forma de quatro. Ou também podemos alterar a orientação das cores. Como paisagem. Por exemplo. Você faz isso, você vê, você apenas gira as cores. Certo? Portanto, o objeto de configurações é para configurações gerais que você pode ajustar. Para obter mais detalhes. Você sempre pode verificar a página do GitHub. Tudo bem, aqui na documentação, você verá mais exemplos também. Vamos prosseguir e falar sobre essa função. Portanto, esta é uma função de seta que retorna outra função. Neste contexto, usaremos toda vez que quisermos desenhar algo. E podemos obter o peso, também a altura da tela também usando esses parâmetros. Também poderíamos adicionar alguns parâmetros aqui, mas isso é suficiente por enquanto. Tudo bem. Então, ok, o suficiente para a parte teórica. Vamos entrar em ação e desenhar um retângulo básico. Então, escreveremos a maior parte do nosso código aqui. Certo, primeiro de tudo, devemos mudar o FillStyle para misturar porque era branco antes. Você quer desenhar alguma coisa. Devemos primeiro dizer o caminho inicial. Para que o JavaScript saiba que estamos começando a desenhar. Certo? E então podemos chamar contextos que função rect para desenhar um retângulo. Então você deve fazer x, y, largura e altura. E eu darei que todos eles são centenas. Finalmente estou aqui. Se eu disser contextos que preenchem, sentimos a área do retângulo. Ou poderíamos apenas dizer traço para apenas destacar as bordas do retângulo. Então, vamos ver a diferença. Agora. Deixe-me digitar o campo primeiro. Então, vou salvá-lo. E quando um segundo, sim, você pode ver que ele atualiza automaticamente o navegador também porque é um servidor ativo. Portanto, não precisamos mais atualizar. Tudo bem, essa é uma boa característica do esboço de karma. Vou usar a tela assim ordenada. Podemos escrever o código simultaneamente e ver o resultado. Então, digitamos pílula aqui. Você vê que a área está preenchida. E se você apenas fizer isso acariciar, você pode ver que é um retângulo vazio agora. Tudo bem. Então, um dos benefícios do esboço de comércio é que você pode tirar uma captura de tela do visual. Você o cria. Podemos fazer isso apenas pressionando Command S no macOS e controlamos como no Windows. Então isso é divertido. Digamos que só queremos dizer nossa prática. E eu vou apenas pressionar Command S. E novamente, se você estiver usando o Windows, pressione Control S. E depois de fazer isso, basta tirar uma captura de tela das colunas. E o resultado só entra na pasta de downloads no seu computador. Então esse é o resultado. É apenas um PNG do, mas nós apenas chamamos isso. Também poderíamos, é claro, tirar uma captura de tela como esta da imagem que você sabe, é só que esta não é a melhor prática, é mais rápida e fácil. É por isso que eu gosto desse recurso do esboço comunista. 22. 4PracticeRetângulos: Neste vídeo, temos um novo desafio. Vamos tentar desenhar essa imagem usando o esboço Como. Portanto, existem 12 retângulos um ao lado do outro com 100 pixels. Sim. Vamos começar a tentar desenhar essa visão com esboço de coma. Então, antes de tudo, precisamos criar um retângulo, certo? Usaremos uma função de preenchimento. Certo? E também, queremos alterar as dimensões do retângulo para que ele seja mais longo. Vamos tentar mudar a altura. Não queremos um retângulo horizontal, então talvez devêssemos diminuir a largura. Certo? Mas essa não é uma boa abordagem. Acabamos de dar rolos estáticos à largura e à altura. Este não é um bom tipo de pincel porque se você alterar o tamanho da tela, retângulo não responderá. Tudo bem? Então, e se mudássemos as dimensões? Então, vamos mudar a dimensão dos comas. A quantidade de pixels nas câmeras é muito mais. Então meu retângulo se torna muito menor. Portanto, os objetos não podem ser dinâmicos dessa maneira. Tudo bem? Mas o que podemos fazer é declarar uma nova variável. Isso será, este pode ser o tempo por cento dos comuns. Certo. Vamos copiar essa linha. E também para a altura, vou chamá-lo de altura destruída, atender o tempo por cento dos cardiomiócitos. Mas talvez devesse ser, eu não sei. Vamos tentar 0 também. Vamos usar vetores e função de altura vetorial. Certo? Então, agora ele é responsivo. Tudo bem. Essa é uma abordagem melhor. Mas nosso retângulo ainda está tomado, vamos em frente e tornar o retângulo mais fino. Talvez 01. Isso é demais. Vamos tentar 05. Nada mal. Que tal 0? Certo, isso é ótimo. Criamos um retângulo, mas o que precisamos é 12. Muitas vezes. Em vez de criar 12 retângulos manualmente, podemos usar o loop for. Aqui. Corremos para criar objetos Ralph. Então, vamos especificar o limite do loop for 12º e aumentar escrito com um em cada iteração. Então devemos mover essas linhas dessa forma, certo? Portanto, devemos começar o bloco em cada iteração e você deve desenhar um retângulo em cada iteração. E também devemos preenchê-los também. Então, deixe-me salvar este arquivo. Neste momento, temos dois retângulos, mas todos eles estão em cima um do outro. Tudo bem, é por isso que vemos apenas um retângulo. Então deixe-me separá-los. Então, devemos mudar o valor x, certo? Em cada iteração. Então, vamos tentar alterar o valor x. Portanto, devemos, podemos fazer multiplicação com IA. Portanto, a IA aumenta em cada iteração, e isso dará uma lacuna de 100. Agora podemos ver muitos retângulos, mas precisamos de carnívoros maiores. Então isso é ótimo. Se você não pode morrer deve ter 12 retângulos. 12345678910. Difícil. Tudo bem? E também há um intervalo de 100 pixels entre cada um dos retângulos, certo? Porque aumentamos o valor I em cada iteração. E multiplicamos isso com mão. Há uma lacuna de 100. 23. 5CanvasTranslate: Antes da próxima forma, quero falar sobre algumas funções. Primeiro, vamos falar sobre o Carlos translate. Então este é o nosso Canvas. No começo. Temos um ponto de origem, que é 00. Então, nesse estado, se escrevermos o código à esquerda, os pads do jogo e o retângulo básico, que começa em 0054, altura escrita. Ele desenhará uma forma como essa. Então vamos ver Charles atrasado. As vacas usando a função de tradução de cores. Os parâmetros são manipulados para x e para y. Funcionará assim. Então mu comb era o ponto de origem é 100100. Tudo bem, estamos apenas traduzindo no curso. Portanto, nossa nova origem se torna os pontos de tradução. Então você não o vê no navegador. Mas sob o capô, funciona assim. Portanto, esse estado depois de inúmeros traduzir seu campo, digamos milhões de bloco e desenhe um novo retângulo em 0. Ele desenhará esse retângulo na nova origem. Tudo bem? Mas, novamente, não o vemos no navegador. Acabamos de ver esses dois retângulos. Se o código for como à esquerda. Tudo bem. Então, no final, estamos apenas traduzindo que a vaca estava apenas mudando e começando a origem em um novo ponto de tradução. Tudo bem, então vamos vê-lo no código. Vamos tentar. Então, antes de tudo, eu só quero mudar o estilo de preenchimento. Deve ser preto. Então, digamos que se tornou pad. Vamos desenhar o primeiro retângulo do 0,0054 com 54 bytes. Preenchimento de contextos. Você verá que temos um retângulo, a origem. Então queremos traduzir ao ponto em Hollywood. Então, neste ponto, se dissermos deixar mudar, tudo bem, porque nós apenas traduzimos 12 chumbo tin. Então, novamente, copie e cole essas linhas e salve-as. Agora você pode ver, mesmo que digamos desenhar da origem, ele começa aqui. Certo? Este é o resultado. 24. 6CanvasRotate: No último vídeo, vemos como podemos traduzir as cores. Então, vamos ver como podemos girar a perda de carvão neste exemplo. Então, estamos nesse estado e fora para traduzir. E se nós também o girarmos para Columbus? Então, na função rotate, usamos math.pi dividido por um AD porque ele expande radianos, não graus. Para converter de graus para radianos, usamos essa fórmula. Então eu tenho que traduzir. Se girarmos, o carro foi girado assim. Então, nosso novo retângulo deve ser algo assim. Porque giramos a tela e desenhamos o retângulo após essa rotação. Tudo bem, vamos tentar isso em nosso exemplo. Volte para o editor. Então, aqui, após a tradução, eu só quero girar o contexto também. Então eu quero girá-lo para graus. Mas lembre-se disso, espero radianos não graus. Então, devemos convertê-lo. E a função é que usaremos Pi dividido por 180. Existem algumas funções de bibliotecas como o coma sketch que faz esse termo, essa conversão automaticamente. Usaremos isso mais tarde. Mas, por enquanto, apenas tenha certeza que você está convertendo de graus para radianos. Tudo bem? Então, quando eu salvo, você verá que o segundo retângulo gira. 25. 7Restauração: Mas tudo o que criou após essa rotação afetou. Portanto, há um problema. Porque nós apenas giramos as cores. Talvez eu não queira girar todo o resto depois dessa linha, certo? Deve haver uma maneira de restaurar as cores, certo? E há. Assim, você pode usar o bloco de salvamento e restauração. Então, toda vez que você quer apenas ter um ponto de verificação, um ponto de salvamento, você pode dizer contexto, eu diria. Então. Vamos apenas adicionar aqui antes de traduzir e antes de girar. Queremos dizer, porque só queremos ir para a fase inicial, digamos. Então, depois de dizermos contextos, Dr. restore, podemos simplesmente criar um novo retângulo. Desta vez. Vamos fazê-lo lá. Vamos levar 70. E você verá que ele diz, ele é criado na origem inicial das cores. Então, voltamos ao primeiro estado. Certo? Então, vamos tentar, vamos tentar dizer o ponto após a tradução. Desta vez, voltaremos à fase que após a tradução, mas antes da rotação. Portanto, não teremos nenhuma rotação. Mas começamos de centenas e centenas. Deixe-me salvá-lo. Então você vê que agora, na verdade, deixe-me mudar o estilo de preenchimento. Tourette classificada que podemos ver facilmente. Então isso simplesmente não gira, mas começa a partir de um 100100 porque apenas dizemos o ponto aqui. E enquanto nós o restauramos, ele simplesmente volta. Nessa fase. 26. 8Randomness: Quero falar sobre randoms por um tempo. Codificação criativa. Números aleatórios são bastante úteis. Nós os usamos para gerar padrões aleatórios, objetos e também animações. Então, em JavaScript, há um método interno para gerar números aleatórios. Por enquanto. Eles não são esse número aleatório. Por enquanto. Vamos apenas registrá-lo no colossal. Salve isso. E no navegador, se você clicar com o botão direito do mouse e disser que ele foi embalado. Aqui, vá para o console. Você pode ver o resultado. Então, ele só dá um número aleatório entre 01. Então, toda vez que eu digo esse arquivo JavaScript, o número aleatório mudará. E podemos ver que estará por aí, será entre 01, certo? Então, se você quiser algo entre 010, podemos multiplicar esse valor com dez, então a saída será expandida para dez, certo? Então é assim que podemos gerar números aleatórios. Vamos usar um número aleatório em um exemplo. Então, vamos criar retângulos aleatórios. Então, como sempre, começarei com o caminho iniciado e descendo. Na verdade, primeiro, vamos mudar o estilo de preenchimento para me chantagear. E também quero alterar a largura da linha 20 pixels. Então, agora podemos usar para criar retângulos como este. Deixe-me apenas, sim, agora, eu só quero fazer com que o valor x e y seja aleatório. Então direi que não os ameace aqui. E podemos multiplicá-lo com nervos de arquivo de alcatrão. Então, pode ser entre 0500 e também para y. Então vamos ver, toda vez que eu digo que a posição dos retângulos muda e é aleatório absoluto, não temos ideia de onde ele vai se regenerar. Tudo bem? Também poderíamos usá-los em números para largura e altura do retângulo. Então é, é um retângulo completamente aleatório usando o ventilador de matemática. Então, vamos seguir em frente e criar apenas um único retângulo, mas ele não tem deles. Então, para fazer isso, criarei um novo for-loop, os retângulos de Townsend. Vou apenas mover este aqui. Então, talvez não nos sinta sobre derrame. E também vou apenas, vou apenas fazer o tamanho do Carlos para os valores x e y, mas diminuir os valores de largura e altura. Então, vamos salvar e ver o resultado. Neste ponto, toda vez que você salvar o arquivo, a imagem mudará. Porque usamos números aleatórios. Se você quiser um resultado mais rápido, pode apenas comentar a linha com o resultado. Ou você também pode tornar a largura da linha aleatória também. Talvez seja entre 05. 27. 9AnimationBounce: Menor ou igual a 0, também optou pela velocidade. Então isso significa que este é o 0,4 y, y começa aqui, começa aqui. Então, para y, se for igual a 0, nesse ponto, eles devem apenas fazer a velocidade na direção oposta. Então, vou salvar isso. E vamos fazer a velocidade cinco para vê-la rapidamente. Certo? Sim, funciona. Então isso vai, este é um loop infinito porque nossa função de retorno está sendo chamada infinitamente. E a bola saltará entre esses dois lados. 28. 10CircleClass: Neste vídeo, vamos criar um projeto real usando esboço colorido. Então, no final, o projeto final ficará assim. Então você verá um vídeo que discutiremos sobre a animação usando esboço colorido. Tudo bem, se tudo estiver pronto, vá em frente e abra sua linha de comando. E começaremos a criar um novo projeto de esboço. Vou chamá-lo de Projeto quente. Js, traço, traço, traço, traço aberto. Então, ele simplesmente abre em um navegador. E deixe-me apenas abrir a pasta também. Então, em esboços, temos projeto um ponto js. Aqui. Temos uma nova coluna ou esboço presente. E esse esboço já está explicado em vídeos anteriores, então podemos começar a escrever código para fazer nosso projeto. Então, antes de tudo, o que queremos fazer é criar alguns círculos, certo? Então, quero criar uma classe de círculo porque criaremos vários atalhos. Então, talvez centenas de círculos. É por isso que vamos primeiro criar uma classe como as classes Eric. Porque precisa de um construtor. círculo precisa de valores x, y e raio a serem criados. E então vou dizer que este ponto x é igual a x, este ponto y é igual a y, raio é igual a dois raios. E essas linhas apenas fazem os atos das colunas do círculo a partir do parâmetro quando é mudança de tempo. Certo? Agora podemos apenas causar meu sarco. Sarco. E eu lhe darei 100100 para valores x e y, como aqui, 50 para o raio do círculo. Certo? Então, neste momento, se eu disser, você não pode ver nada no navegador porque criamos o círculo. Mas não há nada que conduziu o círculo na coluna estava exatamente onde eles não usaram Honorlock. Não usamos entidade de traçado. Então, para fazer isso. Também precisamos de um método da classe circle, e chamarei esse método dirigido. Certo? O drone precisa usar um parâmetro de contexto. Ele usará o contexto para iniciar o caminho. Noite que fizemos em vídeos anteriores em troca. E então ele desenhará o círculo usando arco. Então, agora, podemos usar o valor x do círculo, valor y fora do círculo. Raio do círculo. Agora eu quero que o ângulo inicial seja padrão 0. Certo? Porque nunca queremos meio círculo. Sempre queremos um círculo completo. É por isso que também observarei que pi vezes 2 por padrão. Tudo bem? E, finalmente, digamos que um traço de contexto. Então salve isso. E ainda acho que está no navegador porque ainda não chamamos o draw. Então meu círculo que dirigiu Enquanto chamamos a função drop e salvamos, ainda serão os destaques funcionam. É porque damos o contexto militar anterior na função de sorteio. Certo? Agora você pode ver que o círculo está aqui. Talvez pudéssemos fazer esse preenchimento apenas para vê-lo facilmente. Também devemos alterar os contextos dot FillStyle para preto. Agora nosso círculo está aqui. Certo, mas o primeiro derrame, e eu só quero mudar Lima. Vamos fazer oito. Razoável agora. Tudo bem, então criamos nosso primeiro círculo usando a classe de círculo. No próximo vídeo, criaremos vários círculos e os manteremos círculos de matriz. E então podemos começar a iterar em círculos. 29. 11GenerateCircles: Pessoal, agora é hora de criar círculos. Só queríamos criar os círculos IRA de uma vez. É por isso que não o implementarei em troca. Porque isso será chamado muitas vezes. C alterará as configurações da animação. É aí que vou chamar círculos. Matriz de círculos. Vou criar círculos aqui. E então precisamos de um loop, aparente demais. 100 círculos em delta emparelhados. Então, em cada iteração, vou empurrar um novo círculo para a NRA. E deixe-me expandir essa guia. Então eu quero valores aleatórios para x, y e raio. Bem, ok, vou apenas dizer aleatórios vezes r, que é 2048. Usarei esse valor para o raio x e alfa y. Eu vou apenas, não sei, talvez 20 seja um grande limite para isso. Tudo bem. Estamos empurrando 100 círculos para a pesquisa do círculo e suas propriedades estão completas, executadas. Tudo bem, então vamos salvar isso. Ainda não podemos vê-los porque não chamamos Joel função dos círculos. Então, aqui, em vez de criar um círculo, vamos usar círculos para cada função. Cada um itera em cada elemento da matriz de círculos. Então, podemos apenas dizer círculo. Podemos dizer um círculo que impulsionou o contexto. Quando eu salvo, você pode ver à direita, os círculos gerados aleatórios estão em nossa tela. Então, toda vez que digo, toda vez que atualizo a página, os círculos são gerados. 30. 12AnimateCirlces: Agora que criamos nossos círculos, é hora de nos mudar hoje. Faremos isso usando a animação de esboço Como. Daremos a cada círculo uma velocidade, direções x e y. Então, vamos seguir em frente e fazê-lo novamente. Função de construtor. Não precisamos de nenhum parâmetro porque vamos gerar a velocidade por padrão. Então eu vou dizer isso, observe a velocidade x sobre esse pensamento, bem como por que estes foram perdidos para Alice, seja aleatório também. É por isso que vou chamar a correspondência na função multiplicada antes. Então esse valor será 04. Mas esses círculos também devem ir para a esquerda. Às vezes. Queremos um valor entre menos 22. Então, para fazer isso, vamos apenas dizer menos dois com o resultado. Então, acabamos de mudar o Altcoin. A expressão aqui retorna um número entre menos 22. Também direi para o valor Y. Tudo bem? Então, cada um dos círculos tem uma velocidade em x e y, onde são números completamente aleatórios. Vamos bem-vindos. Você só quer que próximo passo é criar uma nova função de movimentação. Na classe Circle, chamarei uma nova função. E esses transtornos de humor baixos. Quando um desconto sobre como fazemos isso é simplesmente mudar o valor x do círculo com a velocidade x. Então, estamos adicionando dx recaída à posição em cada quadro porque chamaremos o pequeno função em troca e execute-me habilitar a propriedade de animação. O retorno será chamado de moldura oval. Portanto, a função move será chamada de airframe, e x será alterado em um reframe. Também faça isso por y. perfeito. Então agora nosso círculo de classes já é justo, devemos apenas mover a função e a declaração de retorno aqui, depois de desenharmos o círculo, também queremos nos mover. Esse loop estaria iterando em todos os círculos. Então, escrevendo esta linha se moverá em todos os quadros. Mas lembre-se de inovar na emoção. Você acabou de alterar as configurações. Assim. Não quero apenas dizer, ótimo. Os círculos estão se movendo aleatoriamente. 31. 13BounceCircles: Os círculos estão se movendo, o que é ótimo. Mas querendo notar aqui que estão saindo da tela. Então, em algum momento, acabaremos com círculos. O que você quer, em vez disso, é mantê-los dentro das câmeras. Então, vamos escrever algum código que os círculos saltarão nas bolas. Precisamos de uma função equilibrada. Na função balanceada, verificaremos o valor dos círculos x e vamos compará-lo com a largura. Então, precisamos de uma declaração if aqui. Se este x menor ou igual a 0, isso significa que iremos para o lado esquerdo da tela, ou esse ponto x é maior que a raiz. Lembre-se de que não podemos acessar a largura do comércio de dentro da classe. Vou apenas criar um parâmetro para isso. Então, se o X for menor que 0 ou maior que um whit, o círculo irá saltar, certo? E como nos equilibramos? É tão fácil. É só que devemos mudar a direção do x. e podemos fazer isso multiplicando por menos um. Se você está indo muito bem com a disputa de dois, digamos que se você quiser se recuperar, a velocidade deve ser menos dois. Vamos fazer isso para o Ytambém. Se for menor que 0, ou se o y for maior que a altura, então também devemos no parâmetro height. Então, se esse for o caso, nós discursamos fora das fronteiras. Então, devemos multiplicar y menos um. Certo? Então podemos simplesmente chamar a função de limites. Para cada um. Vou passar os parâmetros de largura e altura. Certo? Isso não funcionou. Tudo bem, então eu estava apenas, em vez de escrever laços, acabei de escrever. Ok, você pode ver o circo agora saltando sobre os papéis que eles não podem sair. 32. 14EuclideanDistância: Já temos uma animação bonita. Vamos torná-lo mais bonito e adicionar as linhas entre os círculos. Faça isso, precisamos calcular a distância entre dois círculos e desenhar uma linha nessa distância. Existe uma fórmula bem conhecida para cálculo de distância entre dois pontos. A distância principal funciona assim. Vamos supor que temos dois pontos e sabemos que eles são valores x e y. Para calcular a distância entre eles, você deve primeiro observar a diferença entre os pontos x e y. Portanto, devemos primeiro descobrir X1 menos X2, Y1 menos Y2. Em seguida, podemos usar a fórmula de oclusão para encontrar a distância entre dois pontos. Então, vamos dar uma olhada neste exemplo. Temos dois pontos no plano de coordenadas. E nossa tela funciona com pixels. Então podemos pensar que existem semelhantes, o que significa que você pode tomar esses pontos como os círculos no meu projeto. Então, entre dois círculos, distância no eixo x é três. E a distância no eixo y é para a fórmula, podemos encontrar facilmente a distância entre dois pontos é cinco. Então, usaremos esta fórmula em são chamados para calcular a distância de nossos círculos. 33. 15DrawLines: Vamos continuar nosso projeto e desenhar linhas entre círculos. Em troca, usaremos for-loop ou iterando cada círculo. Certo? Então, usarei um novo for-loop. Mas desta vez usarei o atalho e mudarei o índice para i. E filmaremos este limite final com os carvões. Agradeceu. Ok, eu mais , mais, estou feliz com isso. Então eu também farei essa linha aqui, círculo um também deve mudar esta. Certo? Então agora temos um loop for que será executado 400 vezes agora. E estamos apenas mantendo o objeto circular em uma nova variável. Dentro desse loop for. Quero criar outro loop for também. Isso será um loop dentro de um loop, e vamos chamar, vamos chamá-lo de j. Desta vez. Também devemos fazer loop de quatro círculos aqui e mudar este também. E chamarei isso constante de ferramenta circular. Agora mesmo. Estamos à procura círculos e estamos mantendo os círculos em constante. E então estamos procurando circuitos. Mais uma vez. Estamos mantendo o círculo constante também. Então, vamos iterar duas vezes na matriz de carvão vegetal. Aqui. Poderíamos traçar uma linha entre esses dois círculos, certo? Mas se você fizer assim, círculo de barco às vezes será o mesmo círculo. Então, na primeira iteração, digamos que o círculo um seja o primeiro carvão na matriz. O círculo dois também é o primeiro artigo. Portanto, não é a melhor maneira em ordem em termos de eficiência. E também, se você desenhar uma linha nisso, dessa maneira, vamos desenhar uma linha em ambos os lados. Então, do círculo 0 ao círculo um, e também do círculo um para mostrar chamado 0. Portanto, não é eficiente também. É por isso que, por esses motivos, quero começar o valor j de I mais um. E assim, os círculos não serão os mesmos novamente. Porque quando eu tiver 0, j será um. E quando eu for um, j será dois, e assim por diante. Então, não estamos desenhando duas vezes e não vamos desenhar, não tentaremos desenhar uma linha entre o mesmo circo. Certo? Então, dessa forma, fazemos opções. Tudo bem, vamos agora tentar desenhar uma linha entre esses dois círculos únicos. Então, como sempre, vou começar com o caminho inicial. E então temos uma nova função aqui, que é o contexto que se moveu para esse bastante autoexplicativo. Faremos valores x e y aqui. Como traduzir esse contexto. Passaremos para esse ponto que possamos começar a desenhar nesse ponto. Então, vou circular um, círculo um ponto y classificado. Estamos agora na posição do círculo. E o que queremos fazer é desenhar um círculo de linha, posição do dente, certo? Assim, igual a isso, x é igual a y. E, finalmente, queremos o traço. Vamos nos livrar de linhas vazias. Vamos salvar isso e ver o resultado. Certo? Na verdade, foi ótimo. Isso significa que o que acabamos de escrever funciona, mas a largura da linha é demais. Então, vamos também alterar a largura da linha. Talvez aqui. Mas eu quero manter, então eu quero manter os círculos, certo? Então, vou adicionar o pulmão aqui. Mas para as linhas, uma é suficiente. Isso parece melhor. O próximo passo é desenhar linhas entre todos os círculos. Isso está muito lotado. E o próximo passo será calcular a distância entre círculos e desenhar as linhas de acordo com essa distância. Para que, quando dois círculos estiverem longe o suficiente, não haverá linha entre eles. 34. 16GetDistance: Encontraremos a distância entre dois círculos usando a fórmula euclidiana que acabamos de discutir. Lu que criarei uma nova função. E usarei a função de seta. Chame sim, obtenha distância. Essa função requer quatro roteadores pi, X1, X2, Y1 e Y2. Então lembre-se da fórmula. Então, sabíamos a distância entre os valores x. Precisamos distanciar entre os valores y. Podemos retornar a função sqrt. Essa é a raiz do valor dentro dos parâmetros. Então devemos multiplicar um com uma potência de dois e mais Muitas vezes p. Portanto, esse valor retornará a distância entre dois pontos se você passar os valores x e y dos pontos. Então, vamos seguir em frente e usar essa função. Aqui. Vou declarar uma nova variável dist e perder essa função de distância. Portanto, os valores x e y são círculos. Então eu direi círculo um ponto x, dois pontos x. Por que circular para y? Agora temos a distância. E o que precisamos aqui é uma declaração if. Então, devemos verificar a distância. Digamos que se for inferior a 250, ok? Então, se dois círculos estiverem mais próximos do que 250, queremos desenhar uma linha. Então, vou mover essas linhas que a instrução IF. Então, quando salvo, podemos ver agora que não estamos desenhando linhas entre todos os círculos, mas só corremos dois círculos são muito próximos. 35. 17ResponsiveLineWidth: Também quero alterar a largura da linha em relação à distância entre círculos. Vi que a banda dois círculos se aproxima. A largura será seletor e depois se separará. A linha será um tumor. Ok, então para fazer isso, mais sobre essa declaração if, vamos mudar a largura da linha aqui. Então eu quero um valor máximo de dez. Vamos começar com dez. E diminuiremos a largura da linha em relação à distância. Mas a distância começa a partir de 250. Vamos dividi-lo por 25. Portanto, esse valor será no máximo dez. Certo? E pode ser 0 para o valor mínimo 0 linha que será tau. E vamos salvar isso. E agora você pode ver que nossas linhas estão ficando mais grossas e finas em relação à distância. Então, uma coisa que eu quero consertar também, as linhas são visíveis dentro dos círculos. Você pode ver que começa a partir do centro do círculo, mas eu quero que ele comece de fora do círculo. Ok, então as linhas não devem ser visíveis no circo. Para fazer isso, podemos sentir o interior dos círculos com cor branca. Certo? Assim, podemos fazê-lo na função dirigida. Vamos preencher o estilo, alterar o estilo de preenchimento aqui para branco. E podemos dizer combustível. Então, toda vez que você desenha uma linha, também desenhamos o círculo. E ao preencher o círculo dentro do círculo com branco sempre laborará as linhas. Então, quando eu salvo, podemos ver que não há linha dentro do círculo. Certo? Mas isso faz com que nossas linhas, você sabe, dez ou mais. Também alterarei a largura da linha. Talvez 12. Certo, isso é ótimo. Então, cabe a você. De agora em diante. Podemos alterar o peso da linha. Podemos mudar nossas linhas valendo, na verdade, você pode mudar as bordas dos círculos, ou você pode mudar a velocidade dos círculos e assim por diante. Então, cabe a você. Experimente. Espero que você tenha gostado desse projeto. 36. Primeiros passos (visualização de áudio 1): Bem-vindo de volta a esta seção. Faremos um incrível visualizador de áudio que responda a qualquer entrada de áudio. Como você pode ver, as bolas estão pulando quando falo, quando eu clipe ou quando eu toco música. E então você ainda está bem. Quando você estiver pronto para fazer isso. Vá para o próximo vídeo para começar. 37. 2Configuração: Como sempre, começaremos a partir da linha de comando. Então deixe-me trazer o meu. Atualmente, estou no desktop. Vamos para a pasta de projetos, onde salvarei e armazenarei meus projetos. Então, se eu digitar ls aqui, você pode ver nossos projetos antigos. Então, vamos criar uma nova pasta aqui. E vamos chamá-lo de visualizador de áudio. Vá para essa pasta. Vamos apenas ótimos arquivos. Então, como de costume, precisamos de um arquivo HTML. Desta vez. Como estamos recebendo os dados do microfone, quero criar um novo arquivo chamado microfone JS. E, finalmente, precisamos de um novo arquivo para visualização. Vamos chamá-lo Visualizer dot js. Certo, estamos prontos para ir. Se você se lembrar do comando ou abrir esta pasta no código de largura. Se você estiver usando dentro desta versão como eu, você pode digitar um comando como este. Ou se você estiver usando a versão normal do código de risco, você pode apenas comandar chamado spacetime. Quando digitamos esse comando, ele abre a pasta no código Oeste para que estejamos prontos. 38. Modelo 3HTML: Vamos começar o projeto importando o modelo HTML5. Como sempre. Então aqui, desta vez usaremos arquivos JavaScript. Primeiro de tudo, vamos mudar o título. Então, queremos importar esses dois arquivos JavaScript, o boilerplate HTML. Então, criarei um novo script e farei um microfone swash JS, e também visualizador JS. Então lembre-se, usaremos a classe de microfone no visualizador. Portanto, o pedido é importante aqui. script de microfone deve ser um arco de script do visualizador. Certo, então, para começar, por favor. Vamos entrar no arquivo JS do microfone e vamos salvá-lo. 39. 4CompleteHTML: Essas tags de scripts não deveriam estar no chapéu, mas devem estar no corpo. Logo depois de termos incontáveis, certo? Vou chamar o id de Michael foi incontável. Embora mais uma coisa que devemos adicionar aqui é o arquivo CSS. Quase esquecemos, mas existe outra maneira de adicionar arquivos. Então você pode fazer isso dentro com Deus. Então, podemos clicar neste novo ícone de arquivo e você pode simplesmente digitar o nome. Certo, e vamos também vincular esse arquivo CSS assim. Ok, então não precisamos criar novos arquivos a partir da linha de comando. Talvez essa seja uma maneira mais fácil. Então agora temos arquivos CSS ou JavaScript, e nosso código foi criado em HTML. Então, podemos começar a escrever código. Microfone, Jess. 40. 5MicrophoneJS: Em vez de escrever todo o arquivo JS do microfone, vou apenas copiar e colar o código aqui. Então eu encontrei isso na web para obter dados do microfone. Esta é uma placa de caldeiras que você pode usar todos os seus visualizadores de áudio. Portanto, não precisamos saber exatamente os detalhes aqui. Ele só obtém os dados do microfone, a entrada de áudio. Você não precisa mudar nada aqui. Ou talvez você queira mudar. Você pode querer alterar o tamanho do FFT se quiser alguma variedade na saída. Então deixe-me explicar rapidamente o que temos aqui. Esta é apenas uma aula casual chamada microfone. Aqui temos o construtor. Portanto, a primeira propriedade é identificar se o microfone é inicializado ou não porque queremos aguardá-lo se ainda não for inicializado, ok? E no final de tudo, isso se tornará verdade. E então nós apenas obtemos a função de mídia do usuário. E tenha em mente que ainda lá, tudo quando religioso. Portanto, não temos bibliotecas de terceiros aqui. E, aparentemente, esse método retorna uma promessa porque ele usa depois de obter a função de mídia do usuário, que basicamente aguardará essa linha. E vamos correr depois que ele retornar alguma coisa. Então, se ele retornar com sucesso, essas linhas serão chamadas. Ou, se houver um erro, ele apenas alerta o erro no navegador. Certo? E quando estiver pronto, essas linhas serão chamadas. Então, temos analisador aqui. E essas linhas decidirão o tamanho do FFT, comprimento do buffer e assim por diante. E, finalmente, altere a propriedade inicializada para true depois de se conectar ao microfone. E, caso contrário, ele apenas alertará o erro no navegador. Tudo bem, então também temos dois métodos aqui. O primeiro obtém as amostras. Portanto, é o resultado que usaremos. objeto de retorno será uma matriz e seu comprimento será metade do tamanho do FFT. Então, declaramos um tamanho 50 512. Aqui estão as amostras. comprimento da matriz será 256, ok? Portanto, é sempre metade do tamanho do FFT. E usaremos essa pesquisa de amostra durante a visualização do áudio. Certo, então pense assim. Podemos ter 256 bolas que cada bola responderá a um elemento nesta matriz. Certo? Você entenderá melhor quando realmente o fizermos, fazemos e colocá-lo em prática. E, finalmente, temos a função de volume que obterá métodos de útero. E acredito que seja bastante autoexplicativo. Esse método retornará o volume das entradas de áudio. 41. 6MicData: Agora que nosso microfone está pronto, podemos começar a escrever o código na visualização. Abra este arquivo. A primeira coisa que quero fazer aqui é mostrar os dados que obtemos do microfone. Para fazer isso, criarei uma nova variável, microfone. Da classe de microfone. Não tínhamos nenhum parâmetro no construtor. Podemos criar um novo microfone ou objeto como este. Vamos também criar essa função animate. Porque queremos obter os dados do microfone em tempo real continuamente. E, como você sabe, precisamos solicitar um quadro de animação para animar essa função. E também precisamos chamá-lo em algum lugar no código. Então, entre essas duas linhas, o que escrevermos será chamado em cada quadro continuamente. Então, eu só quero registrar os dados do microfone no console para que possamos ver o que é exatamente. Mas primeiro, quero verificar se o microfone já está inicializado. Então lembre-se, temos uma propriedade e é verdade quando Eris fez as coisas no microfone. Então, se o microfone for inicializado, vamos obter amostras usando a função samples. E isso aqui. Por enquanto vamos apenas entrar no console. Então eu salvo isso e vou entrar no index.HTML. com o botão direito em abrir com o servidor Se você não tiver essa opção, você sempre pode baixar extensão do Live Server a partir de extensões no VSCode. Fizemos isso antes neste curso. Então, não vou explicar os passos agora. Mas se você instalou a extensão Live Server, você pode simplesmente abri-la assim. E deixe-me trazê-lo para esta tela. E eu também vou o branco minha tela assim. Tudo bem, então nosso código está sendo executado nesta porta. Vamos dar uma olhada no console. Estamos recebendo dados do microfone continuamente. E há muitas, muitas amostras. E está indo continuamente porque estou falando, certo? E isso também usa meu navegador de microfone. Na primeira etapa. Quando você abre o Live Server, ele pode pedir que você permita o uso do microfone, ok? E depois de aceitá-lo, pode usar a entrada de áudio. Ok, então vamos dar uma olhada no único log aqui. Portanto, é uma matriz. Como discutimos. O comprimento é 256 e os valores são apenas alguns valores pequenos. Esses valores são, cada um deles representa algo. Não sou realmente um especialista em som. E eu não sei, na verdade, não sei quais são esses valores. Mas você pode imaginar como se fossem frequências ou alguns sinais que explicam o som nesse ponto exato. Podemos usar esses valores para visualizar o som. E esses valores são valores realmente pequenos. Há como entre menos quatro e mais quatro. E eles geralmente são menos de um. Assim, eles também podem ser valores negativos, ou valores positivos também. E acredito que, à medida que os valores estão aumentando. Agora estamos recebendo alguns sons interessantes. Tudo bem? Então, se eu não falar, os valores serão 0. Por exemplo, neste momento, não há entrada de áudio. Tudo bem? Então, agora que sabemos como são nossos dados de amostras, usaremos esses dados. Podemos pré-processá-lo, é claro. Mas, eventualmente, usaremos esses dados para criar alguns visuais. Ok, então vamos começar a usar nosso comércio para criar alguns visuais. 42. 7BallClass: Vamos começar a desenhar nossos visuais com a criação de Karl Marx. Como de costume, obteremos elemento por ID do modelo HTML. Deixe-me verificar o ID das minhas cores. Vamos copiar e colar aqui apenas para ter certeza de que os nomes tapetes. Vamos também criar CTX, esses métodos de contexto. E queremos 2D. E, finalmente, podemos ajustar o peso à largura da janela e à altura da janela. Tudo bem. Agora, por que os ajustes estão prontos? Podemos começar a criar a primeira aula. Então, no final, o que queremos em inúmeros parafusos, certo? Ou atalhos. Vou chamá-los de bolas porque eles vão pular. Neste projeto. É por isso que eu crio uma classe chamada bola. E, como de costume, teremos um construtor dessa classe. Ele obterá dois parâmetros, x e y. E esses valores serão as posições x e y iniciais da bola que haverá surgir. Então, vamos apenas atribuir este ponto x ponto y. Então, por que queremos aqui é, então vamos criar uma tigela e que é um círculo completo. E se você se lembrar, estamos fazendo isso usando CTX aumentado. Aqui, o que precisamos fazer é o valor do raio. É por isso que também precisamos de um raio. Mas eu não quero obtê-lo de parâmetros porque estávamos apenas querendo fazer todos os raios das bolas estarem dizendo. Então, vou usar apenas um valor padrão de oito. Então, vamos também decidir sua cor. Você pode mudar o que quiser. Você pode usar azul, vermelho, cinza. E eu acho que também vou explicar isso mais tarde, mas eu só quero vamos, vamos pular essa parte. Vamos adicionar essa propriedade. E então o que eu preciso aqui é pular para SSH e também falso. Ok, porque as bolas vão cair e elas saltarão de acordo com o áudio em Detroit. Mas na fase inicial, no primeiro início do projeto, as bolas cairão. Então eles começarão de cima e cairão antes de tudo. É por isso que eu não quero fazer a força de queda 0, mas em vez disso, vou fazer isso 0,1. Tudo bem? Onde eu fiz com o construtor, vamos adicionar mais uma propriedade, mas vou adicioná-la quando a hora estiver correta. Então, como de costume, também precisamos desenhar métodos. É que inclui ela leva FillStyle. Vou atribuir isso a essa cor porque quando quisermos mudar a cor, a bola também estará nessa cor. Então, devemos dizer start Pat também deve dizer CTX bar para desenhar um círculo. Então este ponto x barra, valor x, desculpe, este ponto y para o valor y. Isso eles tentarão usar para o raio. ângulo inicial será 0 e o ângulo será pi vezes dois porque sempre desenharemos um círculo completo que se parecerá com uma tigela. Finalmente, podemos dizer pílula CTX. Ok, então você já deve estar familiarizado com essas linhas. Fizemos muitas práticas sobre isso antes. Então, o que precisamos, o que mais precisamos é de mais dois métodos. Então, só queremos um formatado e um salto. É isso para a aula de bola. E escreveremos o contexto dos métodos de queda e salto mais tarde. 43. 8GenerateBalls: Tudo bem, temos a aula de bola. Vamos em frente e gerar a bola para que possamos vê-las em colunas. Para fazer isso, o que precisamos é de uma matriz. Ele estará vazio no início. E precisaremos de uma função que gere as bolas. Vou usar a função de seta aqui. Certo? Então, nesta função, em primeiro lugar, deixe-me excluir este log para que não vejamos. Então, vamos limpar. Feche o console. Certo. Então, em janeiro falso, desta vez faremos algo diferente. Não quero definir estaticamente o comprimento da matriz de bolas. Então, não quero apenas criar um chefe 100. Digamos. O que eu quero, em vez disso, é criar as bolas, que serão responsivas para o pé Carlos. Então o que quero dizer é, se o carvão foi por que você sabe que eu deveria ser menos bolas para ante, por exemplo, certo? Agora, se tivermos uma comunidade maior, podemos ter 100 títulos. Certo? Então, eventualmente, a terra da matriz de bolas será dinâmica. Para fazer isso, vamos apenas atribuir. Vamos apenas criar uma nova variável, distância. Isso esclarecerá a distância entre cada grade de bola. Então eu só quero fazer uma festa ou o começo. E vamos calcular quantas bolas eu deveria usar. Largura Carlos dividida por distância. Certo? O que faz sentido, certo? Porque B tem uma largura de mil em queremos que eu estou cansado t distância. Então, devemos ter algo por perto. Estou cansado taças de chá, certo? Porque haverá casos e o peso da bola também. Mas vou dizer menos dois aqui porque queremos distância desde o início e no final também. A quantidade de bolas será calculada assim. Ok, então agora ele responde aos Kawasaki. Quando alteramos a largura do navegador, a quantidade de bolas mudará. E o que precisamos é de um loop for. E vamos apenas dizer que eu para iterador. E queremos fazer um loop com isso. Queremos identificar a quantidade de serra Bosch que esta será a quantidade de moles vezes. E no loop de outono, vou apenas dizer que bolas empurram r1 para criar uma nova bola e empurrá-la para as tigelas, certo? Então, vamos chamar nova bola. E só precisamos dar valores x e y aqui. Para valores x e y. Para você raramente, é muito simples. Podemos apenas dar um valor estático. Por exemplo, 500. Certo? Mas qual valor x? Precisamos usar a distância novamente. Então a primeira bola deve estar à distância, certo? Então, quando eu digo um atraso, é x deve estar atrasado. A segunda bola deve ser mais uma distância, certo? Então 2R2 mais Turquia, a exposição da segunda bola deve ser 60. Então, se eu disser distância mais eu vezes a distância, acredito que haverá um chefe um ao lado do outro entre o cosmos. Portanto, haverá ambos ao longo da Guerra Fria, haverá lacunas no início e também entre cada uma das bolas. Isso é o que queremos. E quando salvo isso, nada acontece porque ainda não chamamos de função de bolas genéricas. Quando eu chamo como digamos, as bolas são geradas, mas ainda não podemos vê-las porque nossa cor é o quê? Na verdade, eu só quero mudar o fundo para preto, mas vamos verificar primeiro. Alterando a cor das bolas. Temos a música de bola, Carlos? Não sou exatamente. Isso porque ainda não desenhamos as bolas. Então, apenas geramos o chefe, mas não chamamos a função de desenho. Então, o que precisamos fazer é dizer bola para cada bola, eu estou basicamente iterando em cada bola nessa matriz. E vou chamar negrito de uma função de desenho. Então agora temos as bolas na tela. Tudo bem? Então nossa função está funcionando. Não precisamos desenhar as paredes aqui. Vou apenas excluí-lo. E também farei a cor branca novamente. E vamos entrar em style.css, lead muito real, apenas cor de fundo. Então aqui eu quero selecionar tudo usando asterix. Vamos combinar margem e preenchimento 0, tamanho da caixa, caixa de border-box. Portanto, esses são apenas padrão. Estamos quase fazendo esse array em todos os projetos. E também. Então, agora, se você notar, temos barras à direita. Então, isso é apenas, isso faz com que essas linhas tornem o amigo rolável. Não queremos isso. É por isso que vou apenas dizer transbordamento. Vamos ver. Então as barras vão. Finalmente, vamos mudar. A coluna estava nua, moída , preta ou fora. 44. 9FallingBalls: Certo pessoal, vamos desenhar as bolas e fazê-las cair. Então, antes de tudo, animar a função. Se o microfone for inicializado, quero desenhar as bolas. Então, para fazer isso chamado array de bolas. E use para cada método. Aqui, vamos passar uma bola que itera das bolas. E eu só queria dizer bola sorteada. Quando fazemos isso, você pode ver as bolas em comas. E observe se mudarmos o tamanho da coluna, a quantidade de bolas, correntes, para que tenhamos ambos testes para vacas. E como vamos fazer uma animação aqui, eu só quero limpar os cones em um reframe. Farei isso usando a função clear rect. Passará x e y a partir de 0 até Carl Woese, largura e altura. Então você pode ver que temos bons laços. Se também os fizermos cair. Pouco antes do empate. Podemos ver as bolas caindo. Mas primeiro também devemos procurar função. Então, para fazer isso, vou perder formas de queda e trocar as bolas. Por quê? Na verdade, direi que este ponto y plus é igual a essa força total de ponto, que atualizará o valor y da bola em cada quadro e adicionará força total. Então, quando eu salvo isso, você pode ver que as bolas estão apenas puxando lentamente. Vamos fazer isso parecer mais natural. Na vida real, quando algo está caindo, a força total está aumentando, certo? Por causa da gravidade. É por isso que também aumentarei toda a força em cada quadro, 0,05. Então agora você pode ver um efeito mais natural. Mas em algum momento a bola deve parar. Então aqui vou apenas adicionar a restrição. Só queremos que as paredes caiam se elas forem. Y é menor que a altura de Coleman dividida por dois. Então, se apenas o chefe ou uma tigela, metade das cores, eles cairão. Caso contrário, eles vão parar. Assim mesmo. Deixe-me atualizá-lo novamente. Então eles começaram a partir de bifans de posição. E eles começaram a cair porque estamos chamando a função de queda em cada quadro. E só temos uma restrição, que é a posição y deve ser maior que a altura de Carlos dividida por dois. É por isso que há, há top. Quando chegarem a esse ponto. 45. 10Salões de salto: Quando as bolas para cada um neste ponto, modo que haja impressionantes, marcantes no chão. Queremos fazê-los pular, certo? Para fazer isso, o que precisamos é de outra declaração if aqui. Precisamos verificar se a bola está caindo. Porque se eles não estão caindo, queremos fazê-los pular. E para verificar esse valor, você só precisa de outra propriedade. Vamos adicionar. Uma propriedade está caindo. E será verdade no começo porque o chefe cairá no estado inicial. Então, se as bolas não estão caindo, o que significa que as bolas estão caindo propriedade é falsa. Nesse caso, queremos que ele salte. Tudo bem, vamos subir e aqui declarou um método de salto. Então eu vou, antes de tudo, o que queremos fazer é fazer força total para 0, porque tínhamos uma força total antes. E isso afetará nossa posição y em cada quadro. Então, quando a queda e a propriedade é falsa, primeira coisa que queremos fazer é fazer todos os quatro 0. Então agora podemos afetar nosso y. nós saltamos força. Então desta vez usarei menos iguais porque no sistema de coordenadas de comércio, quando a bola está subindo, é por isso que o RelU está diminuindo. Então, em coisas comuns, 0 está aqui no topo e está aumentando quando as bolas estão caindo. Então, se você quiser que uma bola salte, devemos diminuir seu valor y. Então eu quero diminuir por que o RelU saltaria força. E para torná-lo mais natural, farei novamente a mesma lógica. diminuirei a força de salto. Certo? Então, também temos métodos saltados agora. Mas uma coisa que não devemos esquecer quando o salto termina. Quando ele volta ao estado de queda. Também devemos redefinir. Salte a força para 0, assim como nós caímos força aqui. Ok, então agora eles parecem idênticos. Eles são apenas simétricos para o outro. Tudo bem, vamos tentar. Não funcionou. E isso ocorre porque, isso ocorre porque nossa força de salto é 0. Vamos mudar isso. Então, temos uma força de salto. Bola. Ok, então talvez também devêssemos mudar a bola está caindo propriedade porque nunca a tornamos falsa, certo? É sempre verdade. Então, vou adicionar aqui uma declaração else. E fazer bola está caindo para falsa. E vamos tentar. É. Apenas salta por um tempo. Você vê isso? Deixe-me executá-lo de novo. E, em seguida, queda contínua. Certo? Portanto, isso ocorre porque essa instrução if executa uma, embora a propriedade está caindo é falsa. Então, também devemos dar uma restrição aqui. A verificação se está caindo e caindo estado, certo? Então, se a bola, então estávamos pedindo função, se apenas a bola estiver em estado de queda e sua posição y for menor que o local de coma. Então, vamos salvar isso. E também, talvez devêssemos. Talvez devêssemos mudar o nosso para else-if. E vamos apenas adicionar uma restrição. Se a posição das bolas y for maior do que a causa, a altura dividida por duas. Isso parece melhor, certo? Porque só queremos pular se apenas, se apenas seu valor y for maior que a altura de Carlos dividida por dois. Então, em outras palavras, no meio das colunas. Tudo bem, então vamos mudar as duas forças saltadas aqui mais tarde e aqui quando a bola. Então, basicamente, estamos apenas diminuindo a força de salto, certo? Quando a bola, vamos comentar esta linha. Então, não descendo. Quando eu não comentei cai. Então, também estamos diminuindo a força de salto, e ela começa a partir de 0,1, o que será um valor negativo. Então, em vez de dar um salto, nós apenas, você sabe, fazê-los cair novamente. Então, vamos apenas fazer esse valor dez, digamos 400. Nada muda. Vamos apenas comentar essa linha. Isso acabou, eu fiz um erro de digitação aqui? Portanto, devemos mudar sua posição y em cada quadro. Então, vamos para o console. Estou perdendo alguma coisa. Então, se a bola está caindo, então devemos, esse registro deve se afogar em nosso quadro agora. E é de fato que podemos ver no console, certo? Então, o método de salto está sendo chamado agora reframe e por que ele é chamado. Vamos também registrar aqui. A força de salto. Vamos excluir isso. Então a força de salto é 0. Por que isso está acontecendo? É porque quando estamos caindo, só fazemos força de salto 0, certo? Então, no começo, fizemos dez. Mas toda vez que ele simplesmente o fez cair, para baixo, a força se torna 0, então eles não estão pulando. Então, na verdade, não devemos atribuí-lo aqui. Devemos atribuí-lo executado o estado de votação termina, que está aqui, certo? Quando a bola está puxando ficou falsa. Também devemos declarar uma força de salto. Vou fazer Tanh aqui. Agora, você pode ver nossas bolas estão apenas pulando. Mas talvez dez seja demais. Vamos fazer isso também. Certo, ótimo. Mas temos outro problema agora. O, eles nunca voltam. Tudo bem? Então, para evitar isso, vou apenas adicionar outra restrição aqui e if. Então, quando a bola está pulando, em algum momento, devemos ligar o estado terrível, certo, para que eles voltem. E eu só quero fazer isso. Quando a força salta se torna 0. Ok, então é na vida real. No entanto. Quando saltamos. Na vida real, ouvimos uma força de salto na fase inicial. E a gravidade está diminuindo a força de salto em cada segundo traço. E em algum momento, ou força de salto se torna 0 e começamos a cair. Certo? Então, vamos fazer a mesma lógica. Lógica aqui. Quando a força de salto se tornar 0 ou menor que 0, faça as bolas caírem novamente. Mas para fazer isso, devemos ativar o descomentário, essa linha que diminuirá, pulará força, reformulará. E quando for menor que 0 ou igual a 0, devemos novamente ativar o estado de queda para verdadeiro. Então, vamos tentar isso. Certo. Agora podemos ver que nossas bolas estão pulando em qualquer salto, em cada salto, ou força de salto e força de queda estão apenas aumentando e diminuindo como naturais. E em algum momento, no ponto de pico, a força de salto se torna 0. Quando isso acontece, eles começam a cair novamente. Certo? Então, é assim que você pode fazer uma lógica de gravidade sem usar nenhum mecanismo de jogo e qualquer outra coisa. Com baunilha JS puro. Mais uma equipe que queremos adicionar aqui, essa será a conexão real entre áudio e nossas bolas para alterar a força de salto com as entradas de áudio. E faremos isso no próximo vídeo. 46. 11AudioInput: Tudo bem pessoal, os parafusos estão pulando. E é hora da parte mais emocionante, que é Jim, fazê-los saltar responsivos à entrada de áudio. Portanto, devemos mudar essa linha obviamente, porque queremos apenas pular força o peso dos dados do microfone. Ok, então já recebemos dados do microfone. E lembre-se, matriz amostras A área de amostras inclui 256 elementos. E também temos algumas bolas, mas nossa quantidade de bolas não é específica. Depende do Canvas. Então, poderíamos ter mais de 256 ou poderíamos ter menos. Então, não vou igualá-los exatamente. Mas poderíamos, se pudéssemos ser indexados de alguma forma, envolve array, certo? Poderíamos atribuir cada amostra a uma bola. Então, como a primeira amostra. Portanto, o primeiro elemento na pesquisa de amostra pode ser a força de salto para a primeira bola. E o segundo elemento na pesquisa de amostra pode ser a força de salto para a segunda bola e assim por diante. Acredito que será ótimo. E para fazer isso, devemos rastrear o índice de bolas neste para cada um. E se você apenas o script do Google for ETL, poderá ver os parâmetros dessa função. E o segundo parâmetro é índice. Então, o primeiro que acabamos usar é o valor do elemento atual. Acabamos de chamá-lo de bola. Se você passar em segundo lugar, isso é opcional. Mas você pode passar. E é, está retornando o índice do elemento atual, mas estamos apenas procurando. Então, vamos em frente e usá-lo. Então, para usar isso, vou apenas adicionar um parêntese ao lado da bola. Vou dizer indexado. Agora, nesta forragem, eu posso trancar. Em seguida. Deixe-me excluir as outras linhas de registros. Então, temos apenas este. Vamos salvar isso e verificar o console. Então você vê que ele começa a partir de 0 e aumenta em cada iteração. Tudo bem, então podemos usar esse valor de índice. E aqui eu quero chamar amostra, desculpe. Vamos apenas tentar o índice de amostras. Vamos tentar usar amostras para força de salto. Mas, novamente, lembre-se de que as amostras são valores muito, muito pequenos. Então, vamos também registrar o console, fazer login nas amostras do console para ver. Então eles parecem que não estão pulando. Mas se você olhar de perto, você pode ver alguns pequenos movimentos. E isso ocorre porque nossas amostras são números muito pequenos. Então, devemos, e também há valores negativos. Portanto, não queremos nenhuma força de salto negativa. Assim, podemos usar a função mat abs para obter o resumo do valor. Certo? Quando fazemos isso, não temos mais valores negativos. E também o que queremos fazer é multiplicar esse valor com dez, talvez porque eles são muito pequenos. Vamos torná-los positivos e multiplicá-los por dez e ver o que acontece. Quando eu fecho o Console. Não precisamos mais de fechaduras. Vamos dizer isso. Agora mesmo. Você pode ver você e eu falamos, as bolas estão apenas pulando e parece que multiplicar com dez é suficiente. Você poderia, claro, aumentar esse valor se quiser mais, pular Fox. Ou se você quiser enlouquecer, você pode enlouquecer também. Mas lembre-se, se eles saltarem demais, eles sairão da tela. Então, vou ficar com dez. E acredito que está feito. Então, vamos tentar uma solução diferente. Eles estão se movendo novamente. E neste ponto, você poderia realmente, é realmente com você a partir de agora. Então você pode mudar as cores. Ou você também pode adicionar um método aqui. Não, mude as cores. E talvez você possa fazer um parâmetro aqui, como um valor. E você pode mudar as cores acordo com o índice de amostras. Assim, as bolas podem mudar as cores com o áudio. E aqui você pode usar valores RGB, RGBA e passar parâmetros. Você pode fazer tudo. Você pode mudar, pular força se quiser bolas mais rápidas. Ou o que você pode fazer. Else. Se você quiser bolas maiores ou maiores, você pode simplesmente mudar o raio assim. Mas lembre-se de mudar a distância também. Só para ter certeza de que eles não estão colidindo. Isso os torna menores novamente. Ou você poderia torná-los muito menores assim. Cabe a você. Vá em frente e jogue com os valores e adicione alguns novos recursos para todos. 47. 1GettingStarted: Nesta seção, faremos outro visualizador de áudio que você possa ver na tela. Deixe-me tocar música para que você possa ver o efeito melhor. Trabalho. Se você gosta do efeito. Não trabalho no próximo vídeo, onde começaremos a fazer esse projeto. 48. Configuração para o visualizador de áudio 2: Eu criei o projeto e tudo é mesmo com o visualizador de áudio anterior. Desta vez, basta alterar o título com o visualizador de áudio para. Então, também vinculamos o estilo CSS. vez, temos um comércio com o id Mike sem-teto. Temos microfone JS e visualizador, engenhoso e apo. Este arquivo HTML com exibição ao vivo apenas clicando com o botão direito do mouse e selecionando esta opção. E então você pode usar o mesmo modelo para microfone JS. Porque, novamente, não precisamos de diferenças e é isso que precisamos neste projeto. Também o estilo CSS é o mesmo com o anterior. Basta usar asterix para selecionar tudo para ajustar a margem e o preenchimento. Basta fazer a propriedade de transbordamento oculto do corpo e tornar o fundo preto. Então, ainda não definimos a largura e a altura do comércio. É por isso que nossa Cola vem essa altura do Butão por padrão. Então, vamos mudá-lo no visualizer JS. Se você estiver pronto com esses dois arquivos, podemos começar a visualizar um JS. 49. 3CreateFigures: Como sempre, vamos começar a criar cores. Vamos usar nossa ID de comércio aqui. Vamos também criar o CTX. Vamos ajustar o que para Window. E também altura, que conhecemos em nossas alturas. Portanto, nosso comércio agora está totalmente ajustado e cobre todos os navegadores em sua tela. E o que queremos fazer a seguir é atribuir o microfone ao novo microfone. E lembre-se que chamamos essa classe do microfone js. E podemos fazer isso assim. Não estamos importando nada porque microfone JS é apenas uma tigela do visualizador JS. E, no final, todo o JavaScript é será transformado neste arquivo HTML. Então, na verdade, temos um cluster de microfone no visualizador JS. E vamos verificar se tudo funciona apenas criando a função animate. Solicitar animação de quadro animado. E lembre-se, esses blogs estão nos fornecendo uma animação chamando essa função animate em cada quadro. Então, aqui queremos verificar se o microfone já está inicializado. Esta propriedade. Então, se o microfone for inicializado, quero obter as amostras. Amostras. Microfone que amostras. Vamos apenas registrá-lo para ver se tudo funciona. Vou abrir o console usando f 12º. Não temos amostras. Então deixe-me abrir. Isso vive de novo. Talvez haja alguma caixa. Nós não temos ainda. É porque não chamamos a função animada de Minha ruim. Certo. Agora podemos ver as amostras quando falo. Ele obterá a entrada de áudio correta. Agora podemos nos livrar desse registro do console. Agora podemos começar a criar nossa classe. Desta vez. Quero chamar a figura sem parênteses aqui porque ela terá métodos diferentes. Então, ele será ajustável. Ele vai rodoviar, se teletransportará e encadeiará métodos de dimensionamento, algumas coisas assim. Portanto, não é tão simples bola. É por isso que decidi chamá-lo de figura. Mas, como sempre, precisamos de um construtor. Então, desta vez, vamos começar com X e Y novamente, mas aumentaremos o número de parâmetros mais tarde. Portanto, esse delta x é igual a x, esse ponto y é igual ao tamanho y. Vou usar oito e depois quatro tamanhos iniciais. Mas lembre-se que mudaremos esse valor com a entrada do microfone. Certo? Então, isso é suficiente por enquanto. Vamos apenas desenhar essa figura. E isso é tudo. Não há nada de novo para nós. Então isso acontece, esse estilo de preenchimento de pontos é essa cor escura. Dx também começa o Pat dx arc porque, novamente, queremos desenhar atalhos. Então vou passar carvões X4 x. por quê? E tamanho. Eu não liguei para o raio desta vez. Você também poderia dizer tamanho, a mesma coisa. Então 0 para ângulo de partida. E math.pi vezes 24 e ângulo, que é exatamente a mesma coisa com 260 em graus, mas devemos dar alguns radianos aqui. Então, usamos essa expressão. E, finalmente, devemos sentir o que acabamos de desenhar. Tudo bem, deixe-me salvar isso. E abaixo, devemos creditar o erro dos dedos. Para fazer isso, preciso de um loop for-loop. Vamos mudar seu índice para i. Quero criar dez figuras. Então vou dizer que os números se aproximam da figura. Então todos vocês devem estar familiarizados com essa sintaxe, certo? Fizemos tudo isso muitas vezes. Então, nova figura, mas desta vez, em vez de fazer um x e y específicos, quero gerar essas figuras aleatoriamente. Ok, é por isso que chamarei a função Math.random. E vou multiplicá-lo com o conjunto de cores para que o valor x fique entre 0 e coluna doce. Pode estar em qualquer lugar do Congresso e fazer o mesmo tanque para o valor ytambém. E desta vez diremos a altura dos comas. Tudo bem? Então, vamos tentar desenhar as figuras neste momento. Então, antes de tudo, quero limpar metas. Faremos algumas animações no futuro. Então, vamos limpar a calma, todas as vírgulas na estrutura. E agora podemos, vamos tentar desenhar figuras. Para isso. Eu quero iterar sobre figuras array, certo? E eu vou usar para cada um, eu direi figura. E para todas as figuras, você quer chamar o método de desenho. Certo? Então, não fazemos nenhuma cor. Vamos fazer uma cor clara para que tenhamos as figuras nas colunas. E toda vez que eu atualizo este navegador, ele nos fará uma figura posicionada gerada aleatoriamente diretamente porque nossos valores x e y são aleatórios. Mas eles deveriam estar no incontável. Então, devemos, em cada quadro, eles devem ter figuras bronzeadas, exatamente 12345678910. 50. 4Circular: A próxima coisa que quero fazer com esses números é dar-lhes algum movimento circular. Como movimentos circulares porque faz com que os objetos pareçam um vivo. Tudo bem, então vamos implementar movimentos circulares para o nosso alto-falante. Na classe Figure, criarei um novo método chamado movimento circular. Então aqui estou, na verdade, podemos usar funções de cosseno e seno. Portanto, devemos alterar o valor x e o valor y das figuras com alguns valores para que ele traçará um caminho circular. Certo? Então, se mudarmos apenas o valor x, digamos que não cosseno. Então também precisamos de um contador aqui que faça loop para loop entre 0360. Então, será que todo o grau começa a partir de 0 e vai até 360. Então, para fazer isso, vou implementar o contador nessa figura. Então, ele começará a partir de 0. E então eu vou aumentar isso. Todos os movimentos circulares no final. Na verdade. Vamos começar o contorno mais, mais e executá-lo maior ou igual a 260. Vou torná-lo 0 novamente. Certo? Então esse contorno aumentará o recall do movimento circular. E quando atingir esses 260 graus, ele voltará para 0 e começará a partir daí. Mais uma vez. Isso é o que precisamos, na verdade. Agora, vou chamar esse contador aqui. Mas lembre-se, a função cosseno não está procurando graus. Em vez disso, ele está procurando leitura. Se você se lembrar, radianos graus fórmula x dividido por 180 vezes torta de lama. Certo? Então, vamos fazer isso para o nosso contador dividido por 180 vezes pi para garantir que ele desenhe um círculo completo. Deixe-me salvá-lo assim e chamar o momento circular em um reframe. Vamos ver o que acontece. Então nossas bolas estão se movendo, certo? O que é ótimo. Portanto, custo MC, essa função de custo retorna um valor entre menos um e mais um. E é apenas alternar entre esses valores. E estamos atualizando x com esses valores para que nossas bolas estejam indo para a direita e para a esquerda continuamente. Vamos fazer a mesma coisa por Y também. Mas desta vez vamos usar, na verdade sou levado a usar cosseno novamente para ver o que acontece. Eu posso simplesmente copiar e colar aqui e salvar isso. Então você pode ver quando damos a mesma função ao porquê de ele traçar algum caminho como este, como diagonal, porque estamos aumentando para x e y ao mesmo tempo, o mesmo valor, com o mesmo valor. Mas se você mudar isso para assinar e salvá-lo, você pode ver que eles estão desenhando um círculo por momento. Esta é a chave para fazer algum movimento circular como este. 51. 5ChangeSizeWithMicInput: Tudo bem pessoal, vamos continuar ligando. O próximo passo é adicionar a entrada do microfone ao movimento dos círculos. Na verdade, não o momento, mas o tamanho dos circuitos que queremos. Faça-os maiores. Quando há uma entrada de guerras altas. E seu tamanho dependerá da entrada de voz. Eles ficarão maiores e menores de acordo com a entrada do microfone. Então, para fazer isso, adicionarei um novo método na classe figura. Bem aqui. Vamos adicionar um novo método e você é um nome de mudança de tamanho. Portanto, isso importava precisa de um parâmetro. Vou chamá-lo de valor. E esse parâmetro vem da matriz de amostras, que está conectada com o microfone em retrato. Então, usaremos um parâmetro das barras de entrada e alteraremos o tamanho de cada arco. Então, para fazer isso, vamos primeiro verificar se valor é maior que o tamanho. Então, vamos ajustar o valor apenas uma tigela. Mas primeiro vamos verificar se o valor é maior que o tamanho. Então, se for, faremos com que o tamanho seja igual ao valor S. Em outro caso, queremos alterar o tamanho. Então isso significa que não temos nenhuma entrada de voz ou temos uma, mas é muito, muito baixa para que não possamos ouvi-la, para que o computador não possa ouvi-la. Nesse caso, queremos alterar o tamanho e queremos diminuir seu tamanho. Digamos, eu não sei 0,1. Então isso será chamado em todos os quadros. Portanto, é diminuição de tamanho. Sou Tom por cento em fuselagem. Certo? Então, vamos chamar esse método na função animate. Bem aqui. A sujeira, esse tamanho da corrente. Mas, para dar a ele um parâmetro que virá da amostra separadamente, precisamos obter a taxa de índice de amostras. Portanto, não temos um índice agora. Mas se você se lembrar, podemos obter o índice apenas passando um segundo parâmetro para cada função. Então, se fizermos isso assim, o primeiro será a figura em si que estamos iterando. E o segundo parâmetro será o índice disso. Assim, dessa forma, podemos obter esse índice na matriz de amostras e podemos alterar seu tamanho. Estou usando a entrada de voz. Tudo bem? Então deixe-me salvar isso e ver o resultado. Tudo bem, então não podemos ver nada. Na verdade, vimos algo no começo, mas eles simplesmente desaparecem instantaneamente. Então, por que isso acontece? Porque talvez nosso valor de diminuir seja demais. Vamos mudar isso para 1% e salvá-lo novamente. Então, isso é melhor agora. Eles estão desaparecendo lentamente. Mas no final, não podemos ver nada novamente. Então parece que o valor é muito pequeno, certo? Então, aparentemente, raramente não são suficientes para aumentar o tamanho. Vamos, também podemos verificá-lo. Eu faço login. Vamos ver. Portanto, nosso valor é 0. Hum, isso não é o que eu esperava. Ok, então vamos tentar multiplicar esse valor. Digamos que eu queira criar uma nova variável chamada silenciosa. E será o resultado do valor vezes 200. E vamos usar o som aqui e aqui, Ezra. Deixe-me salvar isso de novo. Não temos nenhuma saída novamente. Então, vou abrir isso em uma nova guia. Isso foi um bug para o Google Chrome. Então, quando o abrimos em uma nova guia, não há problema. Então você pode ver que eles estão ficando maiores quando falo mais alto ou menor quando falo mais alto. Mas também vamos ver valor e o som no console. Vamos primeiro verificar o valor. Então você pode ver que é algo muito pequeno. É por isso que só queremos multiplicá-lo com 200. Tudo bem? Isso é algo que eu encontro tentando? Certo, não há fórmula para isso. Mas eu tentei alguns valores. E 200 parece bom porque eu quero que os números os aumentem, para torná-los maiores. E 200 é bom para mim. Você pode tentar valores diferentes e você pode decidir sobre outro aleatório. Mas o ponto principal aqui é que nós, neste momento, temos círculos e o tamanho está mudando dependendo da entrada de voz. 52. 6PlayMusic: Neste ponto, o tamanho das figuras deve mudar com a contribuição da esposa. Então deixe-me tocar uma música para dizer isso. Obviamente. 53. 7Teleport: Finalmente, quero mostrar alguns exemplos de personalização. Porque eu quero que você personalize seu próprio efeito da maneira que quiser. Certo? Então, por exemplo, vamos adicionar um novo método na classe Figure. Então eu quero adicionar um método de teletransporte porque quando os números se aproximam, é, o fato parece muito melhor. Vamos adicionar efeito de teletransporte e você pode ver o resultado. Então vou dizer teletransporte lá. Devemos alterar seu valor x e também y das falhas. E eu quero que eles se teletransportem aleatoriamente. Então, vamos dizer muitas vezes aleatórias largura de perda de coluna, o que significa que ela será teletransportada em algum lugar dentro do Carlos. Certo? E faça a mesma coisa por você, mas desta vez, digite aqui Hunt. Então, temos nosso método de teletransporte. Vamos chamá-lo de animação lunar. Então, para cada figura, se chamarmos a função de teletransporte, eles são de localização alterados em cada quadro. Isso parece um cos. Certo, não queremos vacas. Portanto, não devemos chamar o teletransporte em todos os quadros. Ou esta é uma verdadeira abordagem de cuidado. Mais uma vez, poderíamos adicionar uma restrição aqui. Então, quando algo acontece do que se teletransportar, não em todos os quadros. Assim, você pode adicionar qualquer restrição. Cabe a você. Por simplicidade. Vou apenas adicionar uma restrição aleatória. Então, isso também pode ser aleatório. Eu estraguei é perfeito se você aleatorizar uma rotina. Então, quando eu adiciono aqui uma restrição como esta, o Math.Random retorna algum número entre 01 e se for maior que 0,99, que é aproximado ser uma pessoa, certo? Em seguida, teleportar para a figura. Deixe-me dizer isso. Você pode ver, é mais raro agora. Vemos alguns teletransporte, mas não é continuamente. Poderíamos diminuir sua frequência apenas aumentando esse valor aqui. Então eles estão quase, não estão mais apoiando. Ou você pode aumentar sua frequência diminuindo o valor da restrição. 50% ainda é demais. Talvez 90% sejam 95. Certo? Mas minha opinião, 99 parece muito legal. Ok, então a razão pela qual eu queria mostrar isso é para mostrar que essa figura, esse efeito é personalizável. Você pode adicionar qualquer método que quiser, brincar com ele. Você pode ver resultados diferentes. E finalmente, no final, quero mostrar mais uma coisa, que está aumentando a velocidade da animação. Certo? Então, neste momento, nosso movimento circular é muito lento. Na minha opinião. Quero aumentá-lo. Então você também pode fazer isso com chamadas. Mas e se você quiser alterar a taxa de quadros? Se você quiser alterar o FPS, você também pode adicionar bibliotecas diferentes e assim por diante para fazer isso. Mas há outra abordagem complicada para isso. Quero te mostrar. Então, estamos chamando a função animate aqui e ela se chama de novo e de novo, certo? E se chamarmos a função enumerar agora para mim? Então, vamos mudar isso para dez ou cinco, talvez. Basta chamar animar uma queda. Então isso aumentará a velocidade de animação cinco x porque estamos chamando a função animate cinco vezes. Deixe-me salvar isso. Então você pode ver que os círculos estão se movendo mais rápido. Tudo bem? Então, isso está basicamente aumentando a taxa de quadros em um segundo. 54. 1O que 1WhatIsThreeJS: Nesta seção, vamos usar o EJS para criar efeitos visuais 3D. Então deixe-me explicar o que é realmente rápido. Basicamente, é fácil usar objetos 3D animados na própria biblioteca como sua própria câmera, cena, geometria. E é a melhor biblioteca de gramados para renderização 3D no mapa. Então você pode pensar que isso como unidade. Como se você estivesse desenvolvendo jogos. Se você estiver desenvolvendo jogos, talvez conheça a unidade. Então, é um motor de jogo, certo? Então, para JS, é tudo mecanismo de física, por isso facilita a criação de efeitos 3D. Tudo bem? Então, e não é um programa ou uma estrutura, é apenas uma biblioteca. Então, avançando, este é o site oficial de dois js. E há muitos, muitos exemplos e casos de uso disso. 55. 2UseCases: Vamos verificar alguns casos de uso. A propósito, dois EJS também são usados por grandes empresas. Então você pode ver a nasa aqui. E isso foi levantar, eu acredito. Sim. Então aqui a rota dissipada é um modelo 3D. E para renderizar este mundo como um modelo 3D, você convida uma animada. Podemos usar três js. Então é isso. Então, a guitarra está usando js de árvore. Vamos verificar o que mais temos? Há também jogos como esse. Parece um bom site. Vamos esperar por isso. Talvez a única vantagem da modelagem 3D seja levar muito tempo para renderizar. Portanto, os sites como esse podem não carregar rapidamente, mas você pode ver que é muito legal. Portanto, existem alguns sites legais como esse, principalmente para agências. E o modelo também é para o agente. Este não é um vídeo. Este é um modelo 3D, então você pode interagir com ele. Certo, essa é a diferença. Vamos ver mais exemplos. O que temos? Então, a Apple também está usando o TJ, como você deve saber, as integrações do iPhone, como quando você desce, para baixo, é só que você pode interagir com ele. Tudo bem. Portanto, há jogos, existem sites e assim por diante. Só não vamos perder muito tempo. Mas você pode, claro, entrar em mais detalhes. Você pode conferir os exemplos aqui. Novamente, este não é um curso JS de árvore. É por isso que não explicarei todos os recursos do t j. Mas aqui eu encontrei um bom site de cursos. Olhe para isso. Não sei, Burner Cyber, mas eu realmente aprecio o trabalho dele. Então esta é uma loja, seu site, mas talvez seja o melhor site do curso que eu já vi. Então você pode ver que é modelo 2D e eles estão apenas animando. E posso arrastar e alterar a rotação da cena, certo? Eu posso subir. Agora. Posso realmente interagir com o objeto com o mouse. Então eu não fiz esse curso. Não conheço o conteúdo, mas parece muito bom. Eu só queria te mostrar. Então, esse tipo de coisas que você pode fazer usando traição. Tudo bem, vamos voltar aqui. Podemos ver exemplos de documentação. À esquerda. Você pode participar do Discord ou fóruns e fazer root e se juntar à comunidade de professores. Então, o que mais? Na verdade, o site é assim mais ou menos. Então, não vamos perder tempo aqui. Vamos começar a fazer nosso primeiro projeto JS, o que está realmente animado porque vamos criar um cubo 3D e movê-lo no espaço 3D em um navegador. Vamos fazer isso no próximo vídeo. 56. 3InstallThreeJS: Anteriormente neste curso, estamos aqui instalamos o Node JS. Se você pular essa parte, você pode verificar se o vídeo chamado Node instalado e npm é o primeiro vídeo da seção de esboço de coma. Tudo bem? Se você estiver assistindo a este vídeo de outro lugar, você pode verificar se há download e instalação do NPM. E depois de instalar o npm, estamos prontos para ir. Então você sempre pode verificar. Você sempre pode verificar se o MPM está instalado usando note que somos npm dash we. Então esta é minha versão Node.js e esta é minha versão do NPM. Tudo bem? Se você não for nada ou MPN, você pode ver a versão do polegar. Se houver, se estiver dizendo que parece algo parecido com esse comando não encontrado, e isso significa que você não tem npm ou Node no seu computador. Tudo bem? E lembre-se, a melhor prática é baixar o tempo globalmente para que você possa acessá-lo em todos os diretórios. Tudo bem, então antes de tudo, vamos limpar nosso terminal e vamos criar uma nova pasta para três JS. Quero fazer isso na minha área de trabalho. Então direi que façam seus três gigantes. Não tenho certeza se esse comando é válido no Windows também, mas estamos apenas criando uma nova pasta, área de trabalho, ok? Se isso não funcionar no Windows, basta clicar com o botão direito do mouse e criar uma nova pasta, ok? Ou você pode encontrar seu próprio comando para a linha atual ou o PowerShell no windows. Tudo bem, então quando eu, quando digito este comando, temos uma nova pasta e queremos instalar três biblioteca JS nessa pasta, ok, para usar em nosso projeto. Então, vamos para a pasta que acabamos de criar. E eu quero instalar três js, certo? Vamos ao Google e verificar como podemos instalar gatilhos. Então, vou para o site oficial. Estou à esquerda. Vamos verificar a documentação. Então aqui temos a seção Introdução, e aqui temos a instalação. Temos sorte que eles forneçam o guia de instalação do NPM. Então, também temos MPM. Podemos usar esse comando que é simples assim. Então, na pasta, quero colar esse comando e instalaremos três minutos muito rápido. Então deixe-me trazer minha pasta aqui. Dois j. Vamos abrir isso. Certo. Vou colocá-lo assim. Então aqui temos pacotes de módulos altos como Jason, package.json, o que significa que instalamos no Pages. E também vamos verificar os módulos Node em três. Vamos para a fonte. Ok, então temos renderizações, luzes, câmeras ou materiais de áudio e assim por diante. Mas aqui temos três arquivos JS de pontos. Portanto, queremos usar comandos, métodos, funções e variáveis desse arquivo. E basta importar esse arquivo para nosso arquivo para usá-los porque o instalamos. Então, quando criamos um novo arquivo aqui e escrevemos nosso código, podemos usar a função e o método de erro. Esses módulos de nó, certo? É por isso que o instalamos no mesmo diretório. 57. 4OpenTheProject: Vamos criar nossos arquivos nesse diretório. Então, há muitas maneiras de fazer isso, mas também gosto de usar estrangeiros de terminal. Vou dizer toque. Digamos que indexe HTML. Podemos ver que criamos um novo arquivo. E também para JavaScript, vamos chamá-lo de index js. Assim, você pode criar o arquivo apenas da maneira que quiser. E também em relação a esse problema, se esses comandos não estiverem funcionando em seu sistema operacional, acredito que fazer ao contrário do limite é o mesmo, mas o Windows pode ser diferente. Então, há algo chamado hiper terminal. Você pode baixá-lo no Mac ou Windows. Então, é algo assim. E lembrei que você pode usar comandos do Linux. Portanto, o mesmo comando em um sistema operacional usando hipertônico e sua interface é muito bom. Portanto, esta é uma boa plataforma para usar como terminal. Certo, então vamos continuar. Criamos nossos arquivos e estamos prontos para codificar, certo? E, finalmente, vamos abrir o projeto. Se você estiver perdendo a versão insiders do código VS, como eu, você pode escrever esse comando para abrir o projeto. Se você estiver usando uma versão normal desse código, faz a versão padrão, você poderia dizer chamado espaço. E se isso não funcionar para você, você pode vir o comando VS Code P ou Command Shift P ou Command Shift P para abrir um comando shell e instalar frio. Ou, novamente, você não precisa usar necessariamente o atalho. Você pode simplesmente abrir manualmente o projeto no VS Code, o que também é bom. 58. 5ImportThreeJS: No arquivo HTML de índice, basta pressionar o ponto de exclamação e pressionar Enter para criar modelos HTML5. Tudo bem, primeiro, vamos mudar o título do projeto. Primeiro. Aplicativo Três Julius. E então podemos simplesmente remover as lacunas entre a Commonwealth e os limites. Então, apenas nós criaremos dois objetos EJS, certo? Então, temos que remover as lacunas em torno de muito amigo. Então, vamos fazer isso na fila. Por enquanto. Eu direi pela margem 0. Poderíamos adicionar um arquivo CSS e fazer isso também. Mas tudo o que precisamos é dessa linha. Então podemos fazer isso na fila, ok? Tudo bem. Agora podemos chamar os três arquivos js que acabamos de baixar no corpo. Para fazer isso, abra uma nova tag de script. E como fonte, digamos que módulos de lote três. Então, vamos verificar se esses são três arquivos JS. Nos módulos Node. Em três, o que precisamos não é de origem, mas construiu duas regiões. Usaremos esse código. Então, no índice HTML, direi que três construíram e selecionam três js. E logo abaixo, abra uma nova tag de script. E tudo o que escreveremos entrará nessa etiqueta. 59. 6CreatingSceneCamera: Para realmente poder exibir qualquer coisa com dois carcereiros, precisamos de três coisas. Parece que a câmera aleatoriamente. Certo? Então, vamos criá-los. Criar uma cena é muito fácil. Podemos simplesmente criar uma nova variável causada pela visão. Podemos usar uma nova palavra-chave. E podemos ouvir três bibliotecas porque acabamos de importá-la logo acima. E vamos chamar matriz de capital C. Certo? Então, o próximo passo é criar o terminal. Mais uma vez, nós me amamos talvez queira criar uma nova câmera vestível. Vamos chamar nova palavra-chave novamente. Usaremos três. Então aqui, na verdade, existem algumas câmeras diferentes, nutricionistas, vamos começar a usar a câmera em perspectiva porque é recomendada pela documentação. E vamos abrir o tapete. Portanto, esse método usa quatro argumentos. O primeiro atributo é o campo de visão. É a extensão da cena que é vista na tela a qualquer momento. Então, devemos fazer alguns graus. Vamos dar 7254 mais e não se preocupe com isso. É mais fácil de entender com exemplos. Tudo bem? O segundo é a proporção. E podemos quase sempre a mesma coisa neste período, que é o peso interno da janela dividido por janela em sua altura. Portanto, isso garantirá que a resolução esteja correta. Ok, a proporção do seu navegador. Tudo bem, então o terceiro parâmetro é, na verdade, deixe-me digitar os dois últimos atributos e explicá-lo. Portanto, se o objeto estiver mais próximo do que esse valor da caloria, não será aleatório. Certo? O objeto, se estiver mais longe da câmera do que esse valor, ele não será renderizado. Tudo bem? Então, essas são as restrições de perto e de longe. Tudo bem? Então, se estiver mais longe do maior que um, não será. Tudo bem. 60. 7CreateRenderer: Em seguida, vamos criar uma nova variável novamente chamada gênero. E usaremos três. Desta vez. Usaremos web random. Portanto, três JS usam a renderização WebGL por padrão, mas também tem opções diferentes para navegadores mais antigos. Certo? Então, depois de criar a renderização, podemos definir o tamanho chamando o método set size. Assim, você pode dar a qualquer valor largura e altura. Para este exemplo, usaremos a tela inteira. É por isso que vou dizer largura da janela e janela no carro dela. Tudo bem. E, finalmente, vamos adicionar ao elemento de renderização à boneca. E vamos apenas usar os scripts ciumentos, anexar criança com ele. Certo. Vou chamar de decrementado pela criança aparente. Então, vamos chamá-lo de render dom. Tudo bem, então este é o plano do Trajano em cada projeto que você criará, você precisa fazer as etapas. Você precisa criar o erro aleatório da câmera de cena. Você precisa definir o tamanho da renderização e você precisa anexar esse elemento à porta. 61. 8CreateACube: Neste ponto, quero abrir o projeto em um navegador e ver o que obtemos. Então, no arquivo HTML, basta clicar com o botão direito do mouse e abrir com o show ao vivo. E todos sabemos que eles explicam isso. Se você não tiver um servidor ativo, você pode baixá-lo a partir das extensões. Tudo bem, então deixe-me tirar meu pincel. Então, esta é uma rainha. Estou aqui. Então, vamos usar a tela. Vamos enfiá-los juntos. Ou ainda não temos algo aqui porque não criamos nenhum objeto. Mas as coisas que fizemos antes foi apenas uma configuração. Então, vamos criar o primeiro objeto, um cubo. Talvez. Estou para criar um objeto, precisamos colorir geometria e material. Tudo bem? Ok, para geometria, vamos criar uma nova linha. Usaremos novamente a árvore, e desta vez chamaremos de geometria de bucks. geometria da caixa é um objeto que contém todos os vértices e faces do cubo. Certo? Em seguida, é o material. Mais uma vez. E vou chamar material básico de malha. Por enquanto. E vamos abrir isso. Usaremos vírgula e podemos dar a cor aqui. E a cor aqui tem os mesmos atributos com a cor CSS. Ok, então ele está procurando por código hexadecimal. Vou apenas copiar o código hexadecimal da documentação para ouvir falar de dez. Por isso, criamos geometria e material. E depois de comprar, você pode aplicar material aos culpados. Certo? Então, podemos fazer isso usando muito. Vamos criar tubo. Nós chamaríamos a função mesh. Usaremos geometria e material como atributos. Portanto, essa função de malha requer dois parâmetros, geometria e material, e podemos usar as coisas que acabamos de criar. Finalmente, podemos adicionar o cubo à cena. E vamos dizer isso. Ainda não vejo nada que não tenha. Então, por padrão, por que chamamos de visto no tanque que adicionamos, será adicionado às coordenadas zeros, zeros. Isso é um problema para nós porque a câmera também está nessa posição. Então, tanto a câmera quanto o cubo, haverá dentro um do outro. Para evitar isso. A documentação nos diz para mudar a posição das câmeras Z. Então o cubo agora está na posição 000, mas a câmera está em 005. 62. 9RenderTheScene: Estamos quase acabando. Criamos o cubo e adicionamos em C. Vamos renderizar a cena para que possamos vê-la no navegador. Na verdade. Vou criar uma função animada. E você deve estar familiarizado com essa função animada das cadeias laterais anteriores. Apenas uma chamada rápida. Função inanimada. Precisamos solicitar quadro de animação e vamos passar e função de peso novamente aqui. Este quadro de animação de solicitação gera o loop. Vi que a função animate será chamada de cada quadro, certo? Você já deve saber se isso, uma vez que tenhamos a função enumerar, podemos chamar mais rounder. Cena rounder que acabamos de criar aqui para o primeiro parâmetro e câmera. Acabamos de criar aqui para o segundo painel. E é isso. Vamos chamar e esperar a função no aplicativo. E quando eu digo isso, aqui vamos nós. Finalmente, temos algo no navegador. Portanto, não está animando o novo incorreto agora porque não tentamos o código para ele. Mas podemos ver o cubo que acabamos de criar, certo? Então é verde porque nós novamente, a cor verde e tudo o mais vem de duas bibliotecas js. Por exemplo, não especificamos a cor de fundo, mas suas colunas da própria biblioteca, certo? Então, especificamos a margem permanente 0. Portanto, não temos margem nas fronteiras. Finalmente, você terá a caixa no final. O próximo passo é animá-lo. 63. 10AnimateCube: Se você se lembra, estávamos mudando a posição dos objetos na função animada para nos mover. Vamos aplicar a mesma lógica aqui. Vamos configurar o movimento. Vamos girá-lo. Certo? Então, em função animada, apenas um arco lá, Angela. Devemos mudar a rotação do cubo. Então, vamos chamá-lo q rotação. Você pode dizer x ou y. Vamos primeiro tentar rotacional x. quero dizer, cada quadro que eu quero aumentar seu valor de rotação x em um. Vamos tentar ver o resultado. Você pode ver que está apenas girando, mas isso é muito rápido. Vamos tentar 0,1. Melhor, mas ainda para 1,01st 0. E isso parece melhor. Certo? E também poderíamos fazer a mesma coisa pelo valor Y. E agora temos um Q. Usamos métodos de rotação. E é claro que também poderíamos usar o atributo do método de posição para, digamos que se você quiser saber, ok, para x , por exemplo, as mães vão sair do carvão foi assim. Deixe-me dizer isso de novo. Assim, podemos avançar para ele e girá-lo. Podemos fazer o que quisermos, na verdade. Então, agora, eu quero que você brinque com ele. Você pode criar muitos mais cubos, girá-los, mudar de posição, fazê-los colidir, o que quiser. Agora podemos jogar em 3D. Perfeito. Ok, brinque em torno do estado Gettier, e te vejo no próximo vídeo. 64. 1Introdução: Nesta seção, vamos criar um efeito de espaço 3D. O resultado ficará assim. Isso se parece com o projeto que fizemos anteriormente, mas desta vez será um 3D. Principalmente desenvolvedores, usuários, esse tipo de defeitos na página de destino de seus portfólios. Tudo bem, se você estiver pronto, vamos começar no próximo vídeo. 65. 2Configuração: Não precisamos abrir um novo projeto. Podemos continuar a partir daqui. Vamos criar um novo arquivo aqui. Vou chamá-lo de espaço, não HTML. E pressione o ponto de exclamação, pressione Enter para criar um modelo HTML e alterar o título para espaço 3D. O próximo passo é importar os ativos. Neste projeto, contratamos apenas um ativo PNG circulado. E fornecerei esse arquivo em recursos para que você possa baixá-lo e importá-lo em seu próprio projeto. Tudo bem, então vamos em frente e adicione uma tag de estilo aqui e altere o CSS do corpo. Portanto, não precisamos fazer muito aqui. É por isso que vou fazer isso na fila. Então, certifique-se de que não temos margem. Nós ajustamos a largura e a altura. Vamos definir o fundo para preto e estouro. Oculto. Morfina sobre configuração é importar a biblioteca de jazz livre incorporada. Vamos fazer referência ao arquivo JS da árvore. Portanto, não são módulos gratuitos. Eu também construí aqui três JS principais. Então, cortar SIG é suficiente para este projeto. Vou abrir uma nova tag de script. E todos os tanques que escreveremos a partir de agora, entraremos nessa etiqueta. 66. 3InitFunction: Como discutimos anteriormente neste curso, precisamos definir câmera cine. E desta vez criarei uma função init que iniciará tudo. Por exemplo, criando a cena. Como mu three sin ou criando a câmera. Da biblioteca 3D. Vou usar a câmera em perspectiva aqui novamente. E vamos dar 64 queda, que significa campo de visão. Para a proporção. Vamos novamente configurá-lo para integrar dividido pelo limite de altura interno, nosso padrão como 11 mil. Então, vamos definir as câmeras que posicionam um e giraram graus para 90. E como você se lembra dos cursos anteriores, podemos configurá-lo para corresponder pi dividido por dois, que é de 90 graus. Então, continuarei com a criação, criando o renderizador da árvore, não limpando o erro aleatório do GEL e definirei o tamanho do renderizador usando métricas de tamanho definido. Finalmente, vamos anexá-lo ao corpo do documento. Podemos usar métodos filhos anexados e esse elemento DOM granular. Quatro parâmetros. 67. 4CreateStars: Neste vídeo, criaremos as estrelas usando um loop for-loop. Use o atalho para for-loop e altere o iterador usando IA. E vou definir o limite para 5 mil porque queremos que muitas ações criem. Então, vamos também excluir a linha e criar a estrela aqui. Usarei o vetor T de três bibliotecas. Portanto, devemos fazer valores X e Y e Z. E eu quero que eles sejam aleatórios. Um número aleatório entre menos trezentos e trezentos. Então, vamos também copiar essa linha para y e esses valores. Tudo bem. Então, uma vez que criamos a estrela, podemos definir sua velocidade porque elas estarão se movendo. E também aceleração. Em seguida, atualizaremos a velocidade com essa aceleração, podemos alterar os valores mais tarde. E também o que precisamos é aqui uma matriz para empurrar a estrela que acabamos de criar. É por isso que vou criar uma nova matriz aqui e empurrá-la, empurrar a estrela para essa matriz. Então precisamos dessa área porque queremos definir a geometria e vamos usá-la aqui. E vamos verificar o que é exatamente. Abrirei este arquivo com o Live Server e deixarei que eu traga minha guia ao lado do Xcode. Vamos expandi-lo e dizer inspecionar para ver o console. Então agora você pode ver que ele não tem uma matriz. E aqui está, a aceleração e a velocidade que acabamos de nos sentar. Ok, então temos uma matriz e cada um inclui as estrelas. Então também devemos criar uma geometria e usaremos esse GO, Eric, vou chamar essa jóia estrela variável, mas vamos primeiro defini-la. E agora podemos definir uma nova geometria de buffer de árvore. Portanto, esse é um novo recurso de três js. Não podemos mais usar geometria, mas devemos usar geometria de buffer. Eu direi set a partir de cervejas. Agora podemos passar a matriz que acabamos de criar. Vamos registrar a estrela Geo e ver o que é exatamente. Portanto, é uma geometria e um objeto fora do EJS e tem atributos como contagem, e é 5 mil porque criamos 5 mil estrelas. Vamos deixar a instrução log aqui. Não precisamos disso. Começaremos a criar a textura no próximo vídeo. 68. 5UseGeoAndMaterial: Criaremos o sprite usando uma textura carregada. Ok, digamos que novos três, carregador de textura. E chamarei os métodos do Senhor. Podemos passar o nome do arquivo PNG nesse parêntese. Digamos que circule PNG que acabamos de importar. E vamos criar o material estelar também. Vamos dizer novo material de três pontos. Então, precisamos ajustar algumas propriedades. Por exemplo, cor. Quero criar estrelas cinzentas, cujo tamanho de 0,6. E usaremos o sprite que acabamos criar para campos de mapa. Tudo bem? Então agora temos material de partida e geometria também. Podemos criar usando três pontos e podemos passar a estrela Geo e material de partida para parâmetros. E, finalmente, devemos adicionar as estrelas que acabamos de criar a cena. Ok, esse bloco de código também deve estar dentro da função init porque não queremos executar essa chamada antes da inicialização, certo? Então deixe-me apenas mover, mover todo esse código para a função init. E fiz um erro de digitação aqui. Estamos usando carvão PNG. Vamos também consertar isso. Renomeie o círculo. Então, vamos também corrigi-lo no arquivo HTML. Alguns códigos não são alvo. 69. 6AnimateFunction: Neste vídeo, adicionaremos a função animate. Você já está familiarizado com isso. Usamos essa função antes muitas vezes. Então, vamos também chamar o quadro de animação de solicitação e chamar a função animate novamente para criar um loop. Tudo bem? Então eu quero mostrar algo sobre geometria em buffer porque é algo novo inteiro e vamos verificar como usá-la. Então, em sua documentação oficial, basta descer. E aqui você pode ver que vamos aleatoriamente em pontos e eles estão usando a matriz de posição de atributos. Então, precisamos da mesma coisa porque também temos que adicionar pontos aleatórios. Então, vamos criar uma nova posição variável. E usaremos a estrela Geo. E o mesmo com a documentação, podemos dizer que homenageia o erro de posição. E para entender melhor, vamos bloquear a posição flanqueada aqui e também o comprimento do geo Eric. Ainda não vemos nada porque não chamamos minha função. Mas deixe-me mover essas três linhas para cima. Podemos deixar ver qualquer coisa novamente porque também não chamamos isso de função. Ok, então vamos, vamos chamá-lo de função. Agora podemos ver o comprimento dos arrays. Então, como você pode ver, 20.000 de luz. Portanto, é três vezes exatamente duas vezes diferença entre eles. E isso porque um deles está em 1D e outro está em 3D. Então, é como se fosse a versão expandida um do outro. Certo? Portanto, na matriz dupla, o primeiro elemento interrompe os valores X, Y e Z das estrelas. Mas em posições, o primeiro elemento só contém o valor x. O segundo elemento interrompe o valor y. E o terceiro valor exato da anfitriã. Portanto, os quatro para ALU serão o valor x da segunda ação. É por isso que está em um. Tudo bem, vamos continuar. Também precisamos de um loop na função animate. Eu criarei um loop for novamente e definirei o iterador. Vamos ligar para Joanne vinculada aqui. Vamos usar isso porque é, é o mais curto. Vou definir a velocidade do gelo da sua matriz. Estamos iterando sobre a matriz e criamos o campo de velocidade dos elementos. Então, vamos definir a velocidade mais igual à aceleração. Então, aqui é muito fácil. O que estamos fazendo é apenas adicionar aceleração à velocidade em um reframe. Além disso, devemos definir uma posição com velocidade, certo? Assim, podemos atualizar a posição com velocidade. Mas primeiro deixe-me bloquear as posições apenas para vê-las facilmente. Eu deveria adorar a posição aqui. Certo? Então, agora você pode ver que é apenas uma matriz mantém, mantém todas as posições. E como eu disse, valores X, Y e Z, e está em 1D, então, você sabe, Ford é o valor x do segundo estilo. Também devemos atualizá-los com velocidade. Então, em cada quadro, podemos dizer duas vezes três mais um. E será o índice correto. Portanto, é a transformação do 3D 1D. Você pode fazer as contas. Então, porque estamos iterando sobre a companhia aérea G0, tudo bem, então o valor máximo será de 5 mil neste loop, mas temos que chegar a 15 mil na matriz de posições. Tudo bem? Deixe-me também chamar uma função amide na função init. Ainda assim, não vemos nada. E isso porque não tentamos a seção de renderização. Certo, vamos continuar. Acabamos por baixo do loop for. Podemos apenas escrever uma linha para atualização. E, na verdade, deixe-me verificar o máximo de atualização porque ela também mudou com a geometria oferecida. Vamos voltar para esta página. Então, abaixo, você pode ver esta linha aqui. Então, se você precisar renderizar, precisará de uma atualização. A sintaxe é essa. Dizemos que a posição dos atributos estrelas que precisa ser atualizada é igual a verdadeira. E também depois disso, vamos renderizar essa cena e câmera. E também finalmente solicitamos e já fizemos esse slide. Deixe-me apenas excluí-lo, salvar este arquivo e ver o resultado. Perfeito. Então, temos a animação. Está funcionando tudo o que escrevemos. Mas também precisamos de mais. 70. 7FinishTheProject: Nosso efeito parece muito bom. Vou tentar agora. Temos um problema. Quando as estrelas fazem parte do cálculo. Não estamos respondendo a eles. Bem ali, apenas saindo de nós e não podemos ver nada na vaca foi depois de um tempo. Então, vamos escolher isso, corrigir esse loop for. Quero abrir uma nova instrução IF. Esta declaração verificará se as posições estão fora das colunas. Portanto, basta verificar o valor y somente se a posição for menor que menos 200, que significa que a estrela está fora dos comuns. E o que podemos fazer aqui é definir a posição para 200, novamente, assim. Então nós apenas respondemos ao ponto da estrela a 200 y. Assim, também podemos mudar sua velocidade para 0 para redefinir sua velocidade, porque caso contrário, ela será muito rápida. Então, à direita da tela, você pode ver o efeito funcionando e as estrelas estão respondendo depois de sair do carro. E isso também é eficiente para o sistema. Não há estrelas fora da Commonwealth, então não estamos prejudicando a CPU. Então, vamos também girar as estrelas. Por quê? Nós também, vamos ver e.com. Certo, isso é muito rápido. Deixe-me fazer isso 0,2. Ainda rápido. 0,020.002 é ótimo. Portanto, é um efeito cinematográfico apenas girando as estrelas um pouco. Acredito que seja melhor. Agora. Terminamos mais um projeto. Você está indo muito bem. Como sempre. Você pode apenas brincar com o efeito. Você pode mudar qualquer coisa, você quiser, a velocidade das cores. Ou você também pode adicionar algumas novas classes de recursos talvez. Então, espero que você tenha gostado desse projeto e tome cuidado. 71. 8SomeThreeJSExemplos: Antes de chegar ao fim, quero mostrar alguns exemplos de JS gratuitos que você pode se inspirar. Gostei muito disso. Então, eu só queria compartilhar com você também para que você possa imaginar mais casos de uso. Tudo bem? Então, a primeira é a chamada Atradius, para que você possa ver na tela, na verdade, deixe-me recarregar a página para que você possa ver a animação inicial também. Então eu acredito que é realmente um bom trabalho dos tapetes do centro Louis. Então você pode ver se você acabou de olhar para o carrinho, ele está escrito com JavaScript e é a biblioteca JS da árvore usada. Acredito que haja algum algoritmo prático e freezers e algum pós-processamento para cores completas. Ok, então o segundo exemplo de 1 segundo é de três biblioteca JS. Então, é do site oficial deles. E é um exemplo de efeito de partículas de modelos 3D. Eles não fornecem o código aqui, mas se dissermos Inspecionar, podemos ver a chamada na seção de fontes. Basta verificar pontos, HTML dinâmico. Podemos ver o código aqui e você pode ver que há apenas usando o modelo HTML, assim como fizemos antes. E aqui a importante biblioteca de árvores. E eles usam SIG gratuito para essa animação bonita. E isso é algo diferente aqui. É apenas todo o formato J usado para modelos 3D desses modelos humanos. Mais uma vez, acredito que algum efeito de partícula seja usado nesses modelos OBJ. Certo. Então é o, é quase a mesma coisa que fizemos anteriormente no efeito de partículas neste curso. E, na verdade, acredito também no Skoll aqui. Acredito que também seja usado no projeto Scout também. Então deixe-me verificar o ativo aqui para que eu possa te mostrar melhor. Aqui podemos ver o ativo que é usado para o crânio. Basta ir lá. Isto é para textura escura que PNG. Mas o que estamos procurando é o formato OBJ para objeto 3D. Então deixe-me colar. Ele deve baixar o modelo para que eu possa abri-lo. Deixe-me trazer meu Xcode nesta cena. Então você pode ver essa opção, esse modelo 3D é usado neste projeto. E então alguns efeitos, algum efeito de partícula é aplicado. Então isso é chamado de modelo. Isso significa que você pode usar qualquer modelo desejado e você pode usar o efeito de partícula para criar o seu próprio. Tudo bem, A ideia principal aqui é importar modelos 3D. Acho que será muito legal se as partículas Skoll se moverem com uma música como fizemos anteriormente na seção de visualizadores de áudio. Quem sabe? Talvez possamos fazer algo assim no futuro. Me avise se você quiser. É totalmente diferente disso. Na seção de comentários. Posso expandir um currículo do curso de acordo com a demanda? Mas, por enquanto, é isso para mim. Sou muito grato a todos vocês que podem assistir até aqui. Espero que vocês tenham gostado se gostarem deste curso. Não se esqueça de fazer uma revisão. Vejo você na próxima vez. Tchau.