Campainha de papel W / P5.js e Makey Makey: 9 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:36

Projetos Makey Makey »

Este projeto cria um esboço em p5.js que pode reproduzir um arquivo de áudio usando o pressionamento de uma tecla e, em seguida, cria um botão simples com um lápis, papel e um Makey Makey para acionar o som.

Embora este projeto use um som de campainha, as etapas incluem como carregar um arquivo de áudio em seu esboço p5.js, para que possa ser facilmente adaptado para usar qualquer tipo de som.

Saiba mais sobre p5.js:

Se você é novo no uso de p5.js com Makey Makey, sugiro verificar este projeto primeiro:

Suprimentos

Lápis

Um pequeno quadrado de papel

Kit Makey Makey (com 2 garras jacaré)

Laptop com conexão à internet

Etapa 1: Baixar o arquivo de áudio

Este projeto requer o uso de um arquivo de áudio que precisamos carregar em nosso esboço p5.js. Para fazer isso, primeiro precisamos baixar o arquivo de áudio.

Se você não conseguir baixar os arquivos para o seu computador ou simplesmente deseja pular o download do arquivo e enviá-lo para o seu esboço, você pode ir para este link para um modelo p5.js com o som já carregado e ir para a etapa 3. No entanto, se você deseja trabalhar com arquivos de áudio em p5.js no futuro, esta etapa e a próxima mostrarão como fazer isso.

Existem muitos lugares para baixar efeitos sonoros e arquivos de áudio na web, alguns que exigem uma conta, como freesound.org, e alguns que não exigem uma conta, como soundbible.com. Esteja sempre atento a quaisquer requisitos de licenciamento e / ou atribuição ao usar um som para seu projeto. Mais sobre isso aqui:

O som da campainha para este projeto veio de https://freesound.org/s/163730/ fornecido por Tim Kahn.

Se você deseja baixar o som sem fazer uma conta, eu converti o som para um formato mp3 que pode ser baixado aqui:

Etapa 2: upload do arquivo de áudio para P5.js

Depois de baixar o som da campainha, precisamos carregá-lo em nosso esboço p5.js para que possamos acessá-lo.

Para fazer isso, siga estas etapas:

- Clique no ícone '>' no lado esquerdo do editor da web, logo abaixo do botão de reprodução. Isso abrirá a barra lateral que mostra os arquivos do seu esboço.

- Clique no pequeno triângulo voltado para baixo à direita de 'Sketch Files'. Isso abrirá um menu suspenso com as opções para 'adicionar pasta' e 'adicionar arquivo'

- Clique em 'adicionar arquivo'. Isso abrirá uma janela para adicionar um arquivo. Você pode arrastar o arquivo da campainha para a caixa ou clicar onde a caixa diz 'arraste os arquivos aqui para fazer upload ou clique para usar o navegador de arquivos'. Isso permitirá que você navegue pelos arquivos do computador para localizar o arquivo de áudio.

- Depois de arrastar ou selecionar o arquivo, você verá o upload e o nome do arquivo aparecerá na barra lateral.

Agora você poderá acessar e usar este arquivo de áudio em seu esboço.

Etapa 3: Carregando o arquivo de áudio no Sketch P5.js

Carregar um arquivo de áudio em um esboço p5.js exige que façamos um objeto de arquivo de som. Um objeto tem suas próprias propriedades e funções embutidas que podemos usar.

Para fazer um objeto, primeiro precisamos fazer uma variável para conter o objeto. Isso nos permitirá acessar o objeto e suas propriedades em todo o esboço. Para fazer uma variável, vá para a linha superior do esboço e escreva a palavra let. Esta palavra é usada para declarar uma variável em javascript. Em seguida, dê um nome à variável. Podemos chamar a variável de qualquer coisa que quisermos, mas é útil dar a ela um nome relacionado ao que ela fará em nosso código. Nesse caso, faz sentido chamá-lo de campainha.

deixe a campainha;

Como o p5.js é baseado na web, precisamos ter certeza de que o arquivo de áudio foi carregado no esboço antes que o esboço comece a ser executado, caso contrário, podemos não ser capazes de acessar as propriedades do objeto. Para fazer isso, precisamos adicionar uma função para carregar o arquivo de áudio antes que o esboço comece. Essa função é chamada de preload (). Escrevemos isso da mesma forma que as funções setup () e draw ().

Dentro das chaves, atribuiremos nossa variável ao objeto de som usando a função loadSound (). Entre parênteses, escreva o nome exato do arquivo de áudio entre aspas:

function preload () {

campainha = loadSound ('campainha.mp3');

}

Etapa 4: reproduzir o arquivo de áudio usando a função KeyPressed ()

Agora que o arquivo de áudio está carregado no esboço, você pode reproduzi-lo usando o método play (). Métodos são essencialmente funções específicas de um objeto.

Se você já usou pressionamentos de tecla em p5.js antes, provavelmente usou uma instrução condicional com a variável keyIsPressed dentro da função de desenho. No entanto, ao trabalhar com arquivos de áudio, não queremos acioná-lo dentro da função de desenho. A função de desenho é um loop, por isso está em constante atualização. Isso significa que o arquivo de áudio será reproduzido continuamente, enquanto uma tecla for pressionada, o que não será agradável de ouvir.

Para evitar isso, você usará uma função chamada keyPressed (). Isso também é escrito da mesma forma que as funções setup () e draw (). Escreva isso na parte inferior do código, abaixo da função draw ().

Dentro das chaves é onde você coloca o método play () que irá acionar o arquivo de áudio uma vez quando você pressionar uma tecla. Para usar um método para um objeto, escreva o nome da variável que contém o objeto seguido por.play ();

function keyPressed () {

campainha.play ();

}

Agora, quando você executa seu esboço, pode pressionar uma tecla e o som da campainha tocará.

NOTA IMPORTANTE: Ao adicionar pressionamentos de tecla em nosso código, o editor da web precisa saber se estamos pressionando uma tecla para escrever o código no editor de texto ou se estamos pressionando a tecla para fazer o que codificamos com um pressionamento de tecla. Ao clicar no botão reproduzir, mova o mouse sobre a tela e clique na tela. Isso trará o foco do editor para o esboço e pressionar uma tecla acionará o código de pressionamento de tecla que queremos que aconteça

Etapa 5: faça o botão de papel

Para acionar o som com o Makey Makey, usaremos um lápis comum e papel para fazer um botão.

Desenhe dois semicírculos com uma lacuna muito pequena entre eles, de modo que não se toquem de fato, mas próximos o suficiente para que possamos tocar as duas metades ao mesmo tempo com um dedo. Cada semicírculo também deve ter uma linha grossa que se estende até cada extremidade do papel. É aqui que você anexará as pinças de crocodilo do Makey Makey.

Certifique-se de preencher ambos os lados muito escuros para que o grafite do lápis seja capaz de reter a corrente do Makey Makey.

O desenho dos dois semicírculos é ter um espaço tão pequeno entre eles que é basicamente impossível não tocar os dois lados ao mesmo tempo. Isso permite que você complete o circuito entre a chave e a Terra no Makey Makey sem ter que segurar o fio terra.

Etapa 6: Configurar o Makey Makey

Pegue a placa Makey Makey, o cabo USB e duas garras jacaré. Anexe uma pinça de crocodilo à Terra e outra à tecla Espaço (já que não especificamos uma tecla em nosso código, qualquer tecla que pressionarmos acionará o som).

Pegue a garra jacaré que está presa à tecla de espaço e prenda-a em um dos lados do botão de papel. Pegue a garra jacaré que está presa à Terra e prenda-a do outro lado do botão de papel.

Conecte o cabo USB ao laptop.

Etapa 7: pressione o botão para acionar o arquivo de áudio

Neste ponto, você está pronto para tocar a campainha. Inicie o esboço (lembre-se de clicar com o mouse na tela para que o pressionamento de tecla execute a função keyPressed ()) e, em seguida, toque nos dois semicírculos no papel ao mesmo tempo. Você deve ouvir o som da reprodução do arquivo de áudio da campainha.

Etapa 8: Extensão: Adicionar um componente visual ao esboço

Neste ponto, nosso esboço inclui apenas o código para reproduzir o arquivo de áudio, portanto, você não verá nenhuma mudança na tela. Isso pode ser tudo o que você deseja fazer se estiver tentando criar algum tipo de projeto de som interativo.

No entanto, com os recursos de codificação visual do p5.js, as possibilidades de adicionar gráficos são infinitas. Você pode até ter recursos visuais que reagem aos seus arquivos de áudio de várias maneiras, como aparecer apenas quando o arquivo de áudio está sendo reproduzido, reagindo às mudanças no volume e / ou frequência ou mesmo fazendo uma representação visual do próprio som.

Etapa 9: Extensão: faça um círculo mudar de cor quando o botão for pressionado

Para manter este projeto simples, vamos apenas fazer um círculo que muda de cor quando o botão é pressionado.

Na função draw (), crie um círculo usando a função ellipse (). Acima disso, adicione a função fill () para definir a cor do círculo. Para este esboço, a cor original será o branco, que é o valor da escala de cinza de 255. Você pode definir a cor para qualquer uma que desejar usando os valores de cor RGB.

Entre a função fill () e a função elipse (), crie uma declaração condicional usando a variável keyIsPressed dentro dos parênteses. Entre as chaves da declaração condicional, coloque outra função fill () definida para a cor que você deseja que o círculo mude quando você pressionar a tecla. Para este projeto, a cor mudará para amarelo, que tem um valor RGB de 255, 255, 0.

if (keyIsPressed) {

preencher (255, 255, 0);

}

Pressione o botão play para executar o esboço. O círculo branco agora deve aparecer quando o esboço for carregado (lembre-se de clicar com o mouse na tela). Em seguida, pressione o botão de papel e você deve ouvir a campainha tocar e ver o círculo mudar de cor.

esboço p5.js: