Transcrições
1. Introdução: Bem-vindo de volta a esta seção. Criaremos um incrível visualizador
de áudio que responde
a qualquer entrada de áudio. Como você pode ver, as bolas
estão pulando quando eu falo, quando eu corto ou
quando 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.
2. Montagem : Como sempre, começaremos pela 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 sempre,
precisamos de um arquivo HTML. Desta vez. Como estamos obtendo
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 de Visualizer dot js. Ok, estamos prontos para ir. Se você se lembrar do comando ou abrir esta pasta
em 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 uma
versão normal do código de risco, você pode simplesmente comandar
chamado espaço-tempo. Quando digitamos esse comando, ele abre a pasta no código
West para que
possamos prosseguir.
3. Modelo HTML: Vamos começar o
projeto importando modelo
HTML5. Como sempre. Então, aqui, desta vez,
usaremos arquivos JavaScript. Em primeiro lugar, vamos
mudar o título. Então, queremos importar esses dois
arquivos JavaScript, HTML clichê. Então vou criar um novo script e fazer um microfone
swash JS, e também visualizador JS. Portanto, lembre-se, usaremos a classe de
microfone no visualizador. Portanto, o pedido é importante aqui. script do microfone deve ser
um arco do script do visualizador. Ok, então, para começar, por favor. Vamos para o arquivo
JS do microfone e vamos salvá-lo.
4. Complete o HTML: Essas tags de scripts não
devem estar no chapéu, mas devem estar no corpo. Logo depois de termos
incontáveis, certo? Vou ligar para a identificação de
Michael foi incontável. Embora mais uma coisa que devamos
adicionar aqui seja o arquivo CSS. Quase esquecemos,
mas existe outra
maneira de adicionar arquivos. Então você pode fazer isso
por dentro com Deus. Então, podemos clicar
neste novo ícone de arquivo e você pode simplesmente digitar o nome. Ok, 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 seja uma maneira mais fácil. Agora temos arquivos CSS
ou JavaScript e nosso código foi
criado em HTML. Assim, podemos começar a escrever código. Microfone, Jess.
5. Microphone.js: Em vez de escrever
todo o arquivo JS do microfone, vou apenas copiar e
colar o código aqui. Encontrei isso na web
para obter dados do microfone. Este é um clichê em
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 foi inicializado ou não
porque queremos
esperar por ele se ainda não foi
inicializado, ok? E no final de tudo, isso se tornará realidade. E então nós apenas obtemos a função de mídia
do usuário. E tenha em mente que ainda está
lá, tudo quando religioso. Portanto, não temos nenhuma biblioteca de
terceiros aqui. E, aparentemente, esse método
retorna uma promessa
porque usa a função then after get
user media, que basicamente
aguardará essa linha. E correremos depois
que ele retornar algo. Então, se ele retornar com sucesso, essas linhas serão chamadas. Ou, se houver um erro, ele apenas alertará o
erro no navegador. Ok? E quando estiver pronto, essas linhas serão chamadas. Portanto, temos analisador aqui. E essas linhas
decidirão o tamanho do FFT, comprimento do
buffer e assim por diante. E, finalmente, altere a propriedade
initialized para true depois de conectar
ao microfone. Caso contrário, ele apenas
alertará o erro no navegador. Tudo bem, então também
temos dois métodos aqui. O primeiro pega as amostras. Portanto, é o resultado
que usaremos. objeto retornado
será uma matriz e seu comprimento será
metade do tamanho FFT. Então, declaramos um tamanho 50 512. Aqui estão alguns exemplos. comprimento da matriz será 256, ok? Portanto, é sempre metade
do tamanho do FFT. E usaremos
essa amostra de pesquisa durante a visualização
do áudio. Ok, então pense assim. Podemos ter 256 bolas que cada bola responderá a
um elemento nesta matriz. Ok? Você entenderá melhor
quando realmente fizermos, fizermos e colocarmos em prática. E, finalmente, temos a função de volume que
obterá os métodos do útero. E eu acredito que é
bastante autoexplicativo. Esse método retornará o
volume das entradas de áudio.
6. Obtenha dados de microfone: Agora que nosso
microfone está pronto, podemos começar a escrever o
código na visualização. Abra esse 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 aula de microfone. Não tínhamos nenhum
parâmetro no construtor. Podemos criar um novo microfone
ou objeto como esse. Vamos também criar essa função
animada. 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 do código. Então, entre essas duas linhas, tudo 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, nós temos
uma propriedade e é verdade quando Eris fez
as coisas no microfone. Então, se o microfone for inicializado, vamos apenas obter amostras
usando a função samples. E isso aqui. Por enquanto, vamos
fazer login no console. Então, eu guardo isso e
vou entrar no index.HTML. Clique
com o botão direito em abrir com servidor ativo Se você não tiver essa opção, você sempre pode baixar extensão
Live Server das
extensões no VSCode. Fizemos isso antes
neste curso. Portanto, não vou explicar
as etapas 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 deixar
minha tela branca assim. Tudo bem, então nosso código está
sendo executado nesta porta. Vamos dar uma olhada no console. Estamos obtendo
dados do microfone continuamente. E há
muitas, muitas amostras. E está acontecendo continuamente porque
eu estou falando, certo? E isso também usa meu navegador de
microfone. Na primeira etapa. Quando você abre o Live Server, ele pode solicitar 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 registro aqui. Portanto, é uma matriz. Conforme discutimos. comprimento é 256 e os valores são apenas
alguns valores pequenos. Esses valores são, cada um
deles representa algo. Eu não sou realmente um especialista em som. E eu não, eu realmente não
sei quais são esses valores. Mas você pode imaginar como se
fossem frequências ou alguns sinais que explicam o
som naquele ponto exato. Podemos usar esses valores
para visualizar o som. E esses valores são valores
muito pequenos. Há entre
menos quatro e mais quatro. E eles
geralmente têm menos de um. Portanto, eles também podem ser
valores negativos ou valores positivos. E eu 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? Agora que sabemos como são nossos dados de
amostra, 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.
7. Crie o curso de bola: 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 a
identificação das minhas cores. Vamos copiar e colar aqui
só para ter certeza de que os nomes estão corretos. Vamos também criar CTX,
esses métodos de contexto. E queremos 2D. E, finalmente, podemos
ajustar o peso à largura 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
uma série incontável de parafusos, certo? Ou atalhos. Eu só vou chamá-los de bolas
porque eles vão pular. Neste projeto. É por isso que estou criando
uma classe chamada bola. E, como sempre, 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á spawn. 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 lembra, 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 a partir de parâmetros porque nós só queríamos fazer todos os raios
das bolas estão dizendo. Então, vou usar apenas um valor
padrão de oito. Então, vamos
decidir também sua cor. Você pode mudar
o que quiser. Você pode usar azul, vermelho, cinza. E acho que também vou
explicar isso mais tarde, mas eu só quero,
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 vão pular de acordo com o
áudio em Detroit. Mas na fase inicial, no
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
apenas fazer 0,1. Tudo bem? Onde eu fiz
com o construtor, vamos apenas adicionar
mais uma propriedade, mas vou adicioná-la quando
a hora estiver correta. Então, como sempre, também
precisamos desenhar métodos. Inclui que
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 começar Pat também deve dizer
barra CTX para desenhar um círculo. Então esse ponto x barra, valor
x, desculpe, esse ponto y para o valor y. Isso eles
tentarão usar para 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
formato e um salto. Isso é tudo para a aula de bola. E escreveremos o contexto dos métodos de queda e
salto mais tarde.
8. Como criar bolas: Tudo bem, nós 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 começo. E precisaremos de uma função
que gere as bolas. Vou usar a função de seta aqui. Está bem? Então, nesta função, em
primeiro lugar, deixe-me excluir esse
log para que não vejamos. Então, vamos limpar. Feche o console. OK. Então, em janeiro falso, desta vez faremos
algo diferente. Não quero definir estaticamente o
comprimento da matriz de bolas. Então, eu não quero apenas
criar um chefe 100. Digamos que. O que eu quero, em vez disso, é
criar as bolas, que responderão ao pé
de Carlos. Então, o que quero dizer é, se o carvão era, por
que você sabe que eu deveria ser
menos ousado, por exemplo, certo? Agora, se tivermos uma comunidade
maior, podemos ter 100 títulos. Está bem? Então, eventualmente, a terra da matriz de bolas
será dinâmica. Para fazer isso, vamos apenas atribuir. Vamos criar uma nova
variável, a 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 apenas calcular
quantas bolas
eu deveria usar. Largura de Carlos dividida
pela distância. Está bem? O que faz sentido, certo? Porque B tem uma largura
de 1 mil em
que queremos , estou cansado da distância. Então, devemos ter
algo por perto. Estou cansado de tigelas de chá, certo? Porque haverá casos e o peso da
bola também. Mas vou apenas
dizer menos dois aqui porque queremos
distância do início e do
final também. A quantidade de bolas será
calculada assim. Ok, então agora ele
responde à Kawasaki. Quando alteramos a
largura do navegador, a quantidade de bolas muda. E o que precisamos é de um loop for. E vamos apenas dizer que
eu para iterador. E queremos fazer um loop nisso. Queremos identificar a quantidade
de serra Bosch que isso será executado quantidade
de moles vezes. E no ciclo de outono, vou apenas dizer que as bolas empurram r1 para criar uma nova bola e
empurrá-la para dentro das tigelas, certo? Então, vamos chamar de bola nova. E só precisamos dar valores
x e y aqui. Para valores x e y. Para você raramente,
é muito simples. Só podemos dar um
valor estático. Por exemplo, 500. Está bem? Mas qual valor x? Precisamos usar a
distância novamente. Então a primeira bola deve
ser a distância, certo? Então, quando eu digo um atraso, é x deve estar atrasado. A segunda bola deve ter mais
uma distância, certo? Portanto, 2R2 mais Turquia, a
exposição da segunda bola deve ser 60. Então, se eu disser distância
mais
eu vezes distância, acredito que
haverá um chefe
ao lado do outro entre o cosmos. Portanto, haverá ambos
durante a Guerra Fria, haverá lacunas
no início e também entre
cada uma das bolas. É isso que queremos. E quando eu salvo isso, nada acontece
porque ainda não
chamamos de função de bolas genéricas. Quando eu chamo isso de dizer, 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. Ao mudar a cor das bolas. Temos a música do
baile, Carlos? Eu não sou exatamente. Isso porque ainda não
tiramos as bolas. Então, nós apenas geramos o chefe, mas não chamamos
a função draw. Então, o que precisamos fazer é
dizer bola para cada bola, estou basicamente iterando
em cada bola nessa matriz. E chamarei negrito
de função de empate. Então agora temos as
bolas na tela. Tudo bem? Portanto, nossa função está funcionando. Não precisamos
desenhar as paredes aqui. Vou apenas deletá-lo. E também
vou deixar a
cor branca novamente. E vamos entrar em style.css, chumbo
muito real, apenas cor
de fundo. Então, aqui eu quero selecionar
tudo usando asterix. Vamos apenas combinar margem e preenchimento 0, tamanho da caixa,
caixa de borda. Então, esses são apenas o padrão. Estamos quase fazendo
essa matriz em todos os projetos. E também. Então, agora, se você notar, temos barras à direita. Então isso é só, isso faz com que essas linhas tornem o
amigo rolável. Não queremos isso. É por isso que vou dizer
apenas transbordamento. Vamos ver. Então as barras vão. Finalmente, vamos mudar. A coluna estava nua,
retificada , preta ou apagada.
9. Bolas quedas: Tudo bem pessoal, vamos sacar
as bolas e fazê-las cair. Então, primeiro de tudo, função
animada. Se o microfone for inicializado, eu quero desenhar as bolas. Então, para fazer isso
chamado de matriz de bolas. E use para cada método. Aqui, vamos apenas passar uma bola
que itera das bolas. E eu só queria
dizer bola empatada. Quando fazemos isso, você pode
ver as bolas em coma. E observe se mudarmos
o tamanho da coluna, a quantidade de bolas, correntes, para que tenhamos
ambas as tentativas para vacas. E já que vamos
fazer uma animação aqui, eu só quero limpar
os cones em uma reformulação. Eu 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 sorteio. Podemos ver as bolas caindo. Mas primeiro
também devemos procurar por função. Então, para fazer isso, vou perder formas de queda
e trocar as bolas. Por quê? Na verdade, direi que esse ponto y mais é igual a
esse ponto com força total, 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
puxando lentamente. Vamos deixar isso
mais natural. Na vida real, quando
algo está caindo, 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. 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 dividido 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 da
posição bifans it. 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.
10. Saltando bolas: Quando as bolas para
cada um neste ponto, modo que não são
impressionantes, batendo 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 isso 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, a propriedade é falsa. Nesse caso,
queremos que ele pule. Tudo bem, vamos subir e
aqui declaramos um método de salto. Então eu vou, em primeiro lugar, 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
quando 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 vou usar menos iguais porque no
sistema de coordenadas do comércio, quando a bola está subindo, é por
isso que o ReLu está diminuindo. Então, em commonwealths,
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 com força. E para tornar isso mais natural, farei novamente a mesma lógica. diminuirei a força de
salto. Ok? Então, também temos métodos
saltados agora. Mas uma coisa que não devemos
esquecer quando o salto termina. Quando voltar
ao estado de queda. Também devemos reiniciar. Força de salto para 0, assim como fizemos com força de
queda aqui. Ok, então agora eles
parecem idênticos. Eles são apenas simétricos
em relação ao outro. Tudo bem, vamos tentar. Não funcionou. E isso é 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
devêssemos também mudar a
propriedade da bola está caindo porque
nunca a tornamos falsa, certo? É sempre verdade. Então, vou adicionar aqui
uma declaração else. E fazer bola está
caindo para falso. E vamos tentar. É.
Só pula por um tempo. Você vê isso? Deixe-me executá-lo novamente. E depois queda contínua. Ok? Portanto, isso ocorre porque essa instrução
if executa uma, embora sua
propriedade em queda seja falsa. Portanto, também devemos dar
uma restrição aqui. A verificação se está caindo
e caindo, certo? Então, se a bola, então estávamos chamando para a função, se apenas a bola estiver
no estado de queda e sua posição y for
menor que o local do 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
altura da causa dividida por dois. Isso parece melhor, certo? Porque só queremos pular
se apenas,
se 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
a força de salto 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 vou cair. Quando eu não comentei, desce. Então, também estamos
diminuindo a força de salto, e ela começa em 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 de, eu
cometi 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 tronco deve se afogar
em nosso quadro agora. E é de fato que podemos
ver no console, certo? Portanto, o método jump está sendo chamado agora reframe
e por que ele é chamado. Vamos também fazer login aqui. A força de salto. Vamos deletar isso. Portanto, a força de salto é 0. Por que isso está acontecendo? É porque quando
estamos caindo, nós apenas fazemos
força de salto 0, certo? Então, no começo,
fizemos dez. Mas toda vez que ele
simplesmente o faz
cair, a força se torna 0, então eles não estão pulando. Então, na verdade, não devemos
atribuí-lo aqui. Deveríamos atribuir que ele executasse
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. Eu vou fazer Tanh aqui. Agora, você pode ver que nossas
bolas estão pulando. Mas talvez dez seja
demais. Vamos fazer isso também. Ok, ótimo. Mas temos outro
problema agora. Eles nunca mais
voltam. Tudo bem? Então, para evitar isso, vou apenas adicionar outra
restrição aqui e se declaração. Então, quando a bola está
pulando, em algum momento, devemos ativar
o estado terrível, certo, para que eles
voltem. E eu só quero fazer isso. Quando a força saltada se torna 0. Ok, então é na vida real. Apesar. Quando pulamos. 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 a 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á,
saltará 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. OK. Agora podemos ver que nossas bolas
estão pulando em qualquer salto, em cada salto, ou a força de
salto e a
força de queda estão apenas aumentando
e diminuindo como natural. 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. Ok? Então é assim que você pode
fazer uma lógica de gravidade sem usar nenhum
mecanismo de jogo e qualquer outra coisa. Com puro Vanilla JS. Mais uma equipe que
queremos adicionar aqui, que será a
conexão real entre o áudio e nossas bolas para
alterar a força de salto
com as entradas de áudio. E faremos isso
no próximo vídeo.
11. Obtenha uma entrada de áudio: Tudo bem, pessoal,
os parafusos estão pulando. E chegou a hora da parte
mais empolgante, que é Jim, fazer com
que eles respondam
à entrada de áudio. Portanto, devemos mudar
essa linha, obviamente, porque queremos apenas pular com
força com o microfone. Ok, então já
temos dados do microfone. E lembre-se, a matriz de amostras Sua área de amostras
inclui 256 elementos. E também temos algumas bolas, mas nossa quantidade de
bolas não é específica. Depende do Canvas. Portanto, poderíamos ter mais de
256 ou menos. Portanto, não vou
igualá-los exatamente. Mas poderíamos, se pudéssemos ser indexados de alguma forma,
envolver matriz, certo? Poderíamos atribuir cada
amostra a uma bola. Então, como a primeira amostra. Portanto, o primeiro elemento
na pesquisa por amostra pode ser a força
de salto da primeira bola. E o segundo elemento
na pesquisa por amostra pode ser a força de salto para a
segunda bola e assim por diante. Eu acredito que vai ser ótimo. E para fazer isso,
devemos rastrear o índice de bolas para cada uma. E se você apenas
pesquisar o script ETL no Google, 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. Nós apenas chamamos isso 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. Eu direi indexado. Agora, nesta forragem, eu posso trancar. Próximo. Deixe-me excluir
as outras linhas de registro. Então, nós temos apenas esse. Vamos salvar isso e
verificar o console. Então você vê que ele começa do zero e aumenta
a cada iteração. Tudo bem, então podemos
usar esse valor de índice. E aqui eu quero
chamar a amostra, desculpe. Vamos tentar o índice de amostras. Vamos tentar usar
amostras para a 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, acessar as
amostras do console para ver. Então,
eles parecem que não estão pulando. Mas se você olhar de perto, poderá ver alguns
pequenos movimentos. E isso ocorre porque nossas amostras
são números muito pequenos. Então devemos, e também
existem valores negativos. Portanto, não queremos nenhuma força de
salto negativa. Portanto, podemos usar a função
mat abs para obter
o resumo do valor. Ok? Quando fazemos isso, não
temos mais valores
negativos. E também o que
queremos fazer é
multiplicar esse valor por dez, talvez porque eles
sejam muito pequenos. Vamos torná-los
positivos e
multiplicar por dez e
ver o que acontece. Quando eu fecho o console. Não precisamos mais de fechaduras. Digamos isso. Então, agora você pode
ver você e eu conversando, as bolas estão apenas
pulando e
parece que multiplicar
por dez é suficiente. Você poderia, é claro, aumentar esse valor se
quiser mais raposas saltadas. Ou se você quiser ficar louco, você também pode enlouquecer. Mas lembre-se, se eles
pularem demais, eles sairão
da tela. Então, vou ficar com dez. E eu acredito que está feito. Então, vamos tentar uma solução
diferente. Eles estão apenas se movendo novamente. E neste momento, você poderia, na verdade, depende de
você a partir de agora. Então você pode alterar as cores, ou você também pode adicionar um método
aqui para mudar 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 de
cor com o áudio. E aqui você pode usar valores
RGB, RGBA e passar parâmetros. Você pode fazer tudo. Você pode mudar, pular com força
se quiser bolas mais rápidas. Ou o que você pode fazer. Senão. Se você quiser bolas
maiores ou maiores, você pode simplesmente mudar o
raio desta forma. Mas lembre-se de mudar
a distância também. Só para ter certeza de
que não estão colidindo. Isso os torna menores novamente. Ou você pode torná-los
muito menores assim. Depende de você. Vá em frente e
brinque com os valores e adicione
novos recursos para todos.
12. Visualizador de áudio 2: Nesta seção,
vamos criar outro visualizador de áudio que
você pode ver na tela. Deixe-me tocar música para que você
possa ver melhor o efeito. Emprego. Se você gosta do efeito. Eu não vou até o
próximo vídeo em
que começaremos a fazer
esse projeto.
13. CONFIGURAÇÃO: Eu criei o
projeto e tudo está igual 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. Novamente, temos um comércio
com o id Mike sem-teto. Temos microfone JS e
visualizador e generoso. E apo. Este arquivo HTML é exibido
ao vivo,
basta clicar com o botão direito do mouse e
selecionar esta opção. E então você pode simplesmente usar o mesmo modelo
para microfone JS. Porque, novamente, não
precisamos de diferenças e é disso que
precisamos neste projeto. Além disso, o estilo CSS é
o mesmo do anterior. Basta usar o asterix para selecionar tudo para ajustar a
margem e o preenchimento. Basta criar uma propriedade
de
transbordamento oculta do corpo e tornar
o fundo preto. Portanto, ainda não definimos a largura e a altura do
comércio. É por isso que nossos Colas vêm com essa largura
e altura por padrão. Então, vamos alterá-lo
no visualizador JS. Se você estiver pronto com
esses dois arquivos, podemos começar a visualizar um JS.
14. Crie as figuras: Como sempre, vamos começar a
criar cores. Vamos usar nosso ID comercial aqui. Vamos também criar CTX. Vamos ajustar o que é Janela. E também a altura, que
conhecemos em nossas alturas. Portanto, nosso comércio agora está totalmente ajustado e abrange todos os
navegadores em suas telas. E o que queremos
fazer a seguir é
atribuir o microfone
ao novo microfone. E lembre-se de que chamamos essa
aula do microfone js. E podemos fazer assim. Não estamos importando
nada porque microfone JS é apenas uma
tigela de JS do visualizador. E, no final, todo
o JavaScript
será transformado
nesse arquivo HTML. Portanto, na verdade, temos uma
classe de microfone no visualizador JS. E vamos verificar se
tudo funciona
apenas criando a função animada. Solicite animação de quadro de animação. E lembre-se, esses
blogs estão nos fornecendo uma animação chamando essa função animada
em cada quadro. Então, aqui queremos verificar se o microfone já
foi inicializado. Essa propriedade. Então, se o microfone for inicializado, quero obter as amostras. Amostras. Microfone
que coleta amostras. Vamos registrá-lo para ver
se tudo funciona. Eu abrirei o console
usando f 12th. Não temos nenhuma amostra. Então, deixe-me abrir. Isso se repete. Talvez haja alguma caixa. Ainda não temos. É porque não chamamos
a função animada de Meu mal. Ok. Agora podemos ver as
amostras quando eu falo. Ele obterá a entrada
de áudio correta. Agora podemos nos
livrar desse log do console. Agora podemos começar a criar
nossa classe. Dessa vez. Quero chamar a figura sem parênteses aqui porque ela terá métodos
diferentes. Então, será ajustável. Será uma rodovia, teletransportará e executará métodos de dimensionamento de
cadeias, algumas coisas assim. Então, não é uma bola
tão simples. É por isso que decidi
chamá-la 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 posteriormente. Então esse delta x é igual a x, esse ponto y é igual ao tamanho y. Vou usar oito e
depois quatro tamanhos iniciais. Mas lembre-se de que alteraremos esse valor com a entrada
do microfone. Ok? 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 dot
FillStyle é essa cor escura. Dx também inicia o
arco Pat dx porque, novamente, queremos desenhar atalhos. Então, vou passar carvão X4 x. Por quê? E tamanho. Eu não ligo para o Radius dessa vez. Você também pode dizer
tamanho, a mesma coisa. Então, zero para o ângulo inicial. E math.pi vezes 24 e ângulo, que é exatamente a mesma
coisa com 260 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 guardar isso. E lá embaixo, devemos
creditar o erro dos dedos, certo? Para fazer isso, preciso de um for-loop. Vamos mudar seu índice para i. Eu quero criar dez figuras. Então, eu 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, eu quero gerar esses
números aleatoriamente. Ok, é por isso que vou
chamar a função Math.random. E vou multiplicá-lo pela suíte
de cores para que o valor de x fique entre
zero e a coluna doce. Ele pode estar em qualquer lugar
do Congresso e também usar
o mesmo tanque
para o valor y. E desta vez vamos
dizer altura da vírgula. Tudo bem? Então, vamos tentar desenhar
as figuras neste momento. Então, antes de tudo, quero esclarecer diretamente porque
faremos algumas animações
no futuro. Então, vamos esclarecer a calma, todas as vírgulas na fuselagem. E agora podemos, vamos tentar desenhar figuras. Para isso. Eu quero iterar
sobre a matriz de figuras, certo? E eu vou usar para
cada um, vou dizer uma figura. E para todas as figuras, você quer chamar
o método de desenho. Ok? Portanto, não demos nenhuma cor. Vamos fazer uma cor clara para que tenhamos as
figuras nas colunas. E toda vez que eu
atualizo esse navegador, ele nos faz uma figura
posicionada aleatoriamente gerada linha reta porque nossos valores x
e y são aleatórios. Mas eles deveriam estar entre
os incontáveis. Portanto, devemos, em cada
quadro ter exatamente dez dedos. 1 234-567-8910.
15. Movimento circular: A próxima coisa que quero
fazer com essas figuras é dar-lhes algum movimento
circular. Como movimentos circulares
porque fazem com que os objetos pareçam vivos. Tudo bem, então vamos implementar movimentos
circulares
para nosso alto-falante. Na classe Figure, criarei um novo método chamado movimento
circular. Então, aqui estou eu, na verdade, podemos usar as funções cosseno e seno. Portanto, devemos alterar o
valor x e o valor y
das figuras com alguns
valores para
que ele desenhe um caminho circular. Certo? Então, se
mudarmos apenas o valor de x, digamos que não seja cosseno. Portanto, também precisamos de um contador aqui que faça um loop para outro de 0 a 360. Então,
os graus inteiros começam do zero e vão
até 360. Então, para fazer isso, vou implementar o
contador nesta figura. Então, vai começar do zero. E então eu vou, vou aumentá-lo. Cada
movimento circular no final. Na verdade. Vamos fazer
esse contorno mais, mais e fazer com que seja maior ou igual a 260, vou torná-lo zero novamente. Certo? Portanto, esse contorno aumentará a lembrança do movimento
circular. E quando atingir
esses 260 graus, voltará a zero
e começará a partir daí. De novo. Isso é o que precisamos, na verdade. Agora, vou ligar para
esse contador aqui. Mas lembre-se, a função
cosseno não está procurando graus. Em vez disso, está
procurando leitura. Se você se lembra, a fórmula x de radianos em
graus é dividida
por 180 vezes a torta de lama. Ok? Então, vamos fazer isso com
nosso contador dividido por 180 vezes pi para
garantir que ele desenhe
um círculo completo. Deixe-me
salvá-lo assim e chamar de momento circular
em cada quadro. Vamos ver o que acontece. Então nossas bolas estão se movendo, certo? O que é ótimo. Tão cósmica, essa
função de custo retorna um valor entre menos
um e mais um. E está apenas alternando
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 com Y também. Mas desta vez vamos usar,
hum, na verdade, vamos usar cosseno
novamente para ver o que acontece. Eu posso simplesmente copiar e colar
aqui e salvar isso. Então você pode ver quando
atribuímos a mesma função a razão pela qual ela
traçará um caminho
como esse, como diagonal, porque estamos aumentando para x e
y ao mesmo tempo, o
mesmo valor, com o mesmo valor. Mas se você alterar isso
para assinar e salvar, você pode ver que eles estão
desenhando um círculo por um momento. Essa é a chave para fazer algum movimento
circular como esse.
16. Alterar o tamanho com a entrada de microfone: Tudo bem pessoal, vamos
continuar ligando. 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 contribuição
de uma grande guerra. E seu tamanho
dependerá da entrada de voz. Eles ficarão cada vez
menores de acordo com
a entrada do microfone. Então, para fazer isso, vou adicionar um novo método
na classe de figuras. Aqui mesmo. Vamos adicionar um novo método e
você é um nome de mudança de tamanho. Então, isso importava
precisa de um parâmetro. Vou chamar isso de valor. E esse parâmetro virá
da matriz de amostras, que é conectada ao
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 o valor é maior que o tamanho. Então, vamos ajustar o
valor em 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. 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,
então não podemos ouvi-la, então o computador não
pode ouvi-la. Nesse caso, queremos alterar o tamanho e
diminuir seu tamanho. Digamos que eu não saiba 0,1. Então, isso será chamado
em cada quadro. Portanto, é uma diminuição de tamanho. Sou Tom por cento na fuselagem. Certo? Então, vamos chamar esse método na
função animada. Aqui mesmo. A sujeira, esse tamanho de corrente. Mas, para fornecer um parâmetro que virá
da amostra separadamente, precisamos obter a taxa de índice de
amostras. Portanto, não temos um
índice no momento. Mas se você se lembrar, podemos obter o índice apenas
passando um segundo parâmetro
para cada função. Então, se você fizer assim, a primeira será a figura em si sobre a qual estamos
iterando. E o segundo parâmetro
será o índice disso. Dessa forma, podemos obter esse índice na matriz de amostras e
alterar seu tamanho. Estou usando a entrada de voz. Tudo bem? Então, deixe-me guardar 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 está 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 verificar isso. Eu faço o login. Vamos ver. Portanto, nosso valor é zero. 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 silent. E será o resultado
do valor vezes 200. E vamos usar o som
aqui e aqui, Ezra. Deixe-me dizer 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 a abrimos em uma nova
guia, não há problema. Então você pode ver que eles estão
ficando maiores quando eu falo mais alto ou mais
baixo quando eu falo 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 por 200. Tudo bem? Isso é algo
que eu encontro tentando, ok, não há
fórmula para isso. Mas eu tentei alguns valores. E 200 parece bom
porque eu quero
números que os tornem maiores,
que os tornem maiores. E 200 é bom para mim. Você pode testar
valores diferentes e escolher outro aleatório. Mas o ponto principal
aqui é que, no momento, temos círculos e seu tamanho está mudando
dependendo da entrada de voz.
17. Reproduzir música: Nesse ponto, o tamanho
das figuras deve mudar
com a opinião da esposa. Então, deixe-me tocar uma música
para dizer isso. Obviamente.
18. Adicionar Teleport: Por fim, quero mostrar
alguns exemplos de personalização. Porque eu quero que você personalize seu próprio efeito da
maneira que quiser. Ok? 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 são terópodes, o fato
parece muito melhor. Vamos adicionar o efeito de teletransporte
e você poderá ver o resultado. Então eu vou dizer que se teleporte para lá. Devemos alterar seu valor x e
também y das falhas. E eu quero que eles se
teletransportem aleatoriamente. Então, digamos que muitas
vezes aleatoriamente a largura da perda da coluna, o que significa que ela
será teletransportada para algum lugar dentro do Carlos. Ok? E faça a mesma coisa para y, mas desta vez, digite aqui Hunt. Então, temos nosso método de teletransporte. Vamos chamar isso de animação lunar. Portanto, para cada figura, se chamarmos função de teletransporte, elas são
alteradas de localização em cada quadro. Parece um policial. Ok, não queremos vacas. Portanto, não devemos chamar de
teletransporte em todos os quadros. Ou essa é uma verdadeira abordagem de cuidado. Novamente, poderíamos adicionar
uma restrição aqui. Então, quando algo
acontece além de se teletransportar, não em todos os quadros. Assim, você pode adicionar qualquer restrição. Depende de você. Para simplificar. Vou apenas adicionar uma
restrição aleatória. Portanto, isso também pode ser aleatório. Eu estraguei, é perfeito se
você randomizar uma rotina. Então, quando eu adiciono aqui uma
restrição como essa, matemática aleatória retorna
algum número 0-1. E se for maior que 0,99, o que é aproximadamente
uma pessoa, certo? Em seguida, teleporte-se para a figura. Deixe-me dizer isso. Você pode ver, é
mais raro agora. Vemos alguns teletransportes, mas não são contínuos. Poderíamos diminuir sua frequência apenas
aumentando
esse valor aqui. Então, eles 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. Ok? Mas na minha opinião, 99
parece muito bom. 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 é aumentar
a velocidade da animação. Ok? Então, neste momento, nosso
movimento circular é muito lento. Na minha opinião. Eu quero aumentá-lo. Então você também pode
fazer isso ligando. 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. Eu quero te mostrar. Então, estamos chamando
a função animada aqui e ela se
chama repetidamente, certo? E se chamarmos a
função de enumeração agora para mim? Então, vamos mudar isso
para dez ou cinco, talvez. Basta chamar a animação de uma queda. Portanto, isso aumentará a velocidade de
animação cinco vezes porque estamos chamando a função animada cinco vezes. Deixe-me guardar isso. Então você pode ver 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.
Yeti Learn, Design | Code | Animate
