Timbre de papel con P5.js y Makey Makey: 9 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Proyectos Makey Makey »

Este proyecto crea un boceto en p5.js que puede reproducir un archivo de audio presionando una tecla y luego crea un botón simple con un lápiz, papel y un Makey Makey para activar el sonido.

Si bien este proyecto usa un sonido de timbre, los pasos incluyen cómo cargar un archivo de audio en su boceto p5.js, por lo que se puede adaptar fácilmente para usar cualquier tipo de sonido.

Obtenga más información sobre p5.js:

Si es nuevo en el uso de p5.js con Makey Makey, le sugiero que consulte este proyecto primero:

Suministros

Lápiz

Un pequeño cuadrado de papel

Kit Makey Makey (con 2 pinzas de cocodrilo)

Laptop con conexión a internet

Paso 1: descargar el archivo de audio

Este proyecto requiere el uso de un archivo de audio que debemos cargar en nuestro boceto p5.js. Para hacer esto, primero necesitamos descargar el archivo de audio.

Si no puede descargar archivos en su computadora o simplemente desea omitir la descarga del archivo y cargarlo en su boceto, puede ir a este enlace para obtener una plantilla p5.js con el sonido ya cargado y continuar con el paso 3. Sin embargo, Si desea trabajar con archivos de audio en p5.js en el futuro, este paso y el siguiente le mostrarán cómo hacerlo.

Hay muchos lugares para descargar efectos de sonido y archivos de audio en la web, algunos que requieren una cuenta, como freesound.org, y otros que no requieren una cuenta, como soundbible.com. Siempre tenga en cuenta los requisitos de licencia y / o atribución cuando utilice un sonido para su proyecto. Más sobre eso aquí:

El sonido del timbre para este proyecto provino de https://freesound.org/s/163730/ proporcionado por Tim Kahn.

Si desea descargar el sonido sin crear una cuenta, he convertido el sonido a un formato mp3 que se puede descargar aquí:

Paso 2: Cargar el archivo de audio en P5.js

Una vez que hayamos descargado el sonido de nuestro timbre, debemos subirlo a nuestro boceto p5.js para poder acceder a él.

Para hacer esto, siga estos pasos:

- Haga clic en el icono '>' en el lado izquierdo del editor web, justo debajo del botón de reproducción. Esto abrirá la barra lateral que muestra los archivos de su boceto.

- Haga clic en el pequeño triángulo orientado hacia abajo que se encuentra a la derecha de 'Archivos de bocetos'. Esto abrirá un menú desplegable con las opciones para 'agregar carpeta' y 'agregar archivo'

- Haga clic en 'agregar archivo'. Esto abrirá una ventana para agregar un archivo. Puede arrastrar el archivo del timbre al cuadro o hacer clic donde el cuadro dice "arrastrar archivos aquí para cargarlos o hacer clic para usar el navegador de archivos". Esto le permitirá navegar a través de los archivos de su computadora para localizar el archivo de audio.

- Una vez que haya arrastrado o seleccionado el archivo, verá que se carga y el nombre del archivo aparecerá en la barra lateral.

Ahora podrá acceder y utilizar este archivo de audio en su boceto.

Paso 3: carga del archivo de audio en P5.js Sketch

Cargar un archivo de audio en un boceto de p5.js requiere que creemos un objeto de archivo de sonido. Un objeto tiene sus propias propiedades y funciones integradas que podemos usar.

Para hacer un objeto, primero necesitamos crear una variable para contener el objeto. Esto nos permitirá acceder al objeto y sus propiedades a lo largo del boceto. Para hacer una variable, vaya a la línea superior del boceto y escriba la palabra dejar. Esta palabra se usa para declarar una variable en javascript. Luego dale un nombre a la variable. Podemos llamar a la variable como queramos, pero es útil darle un nombre que esté relacionado con lo que hará en nuestro código. En este caso, tiene sentido llamarlo timbre.

dejar timbre;

Dado que p5.js está basado en la web, debemos asegurarnos de que el archivo de audio se haya cargado en el boceto antes de que comience a ejecutarse, de lo contrario, es posible que no podamos acceder a las propiedades del objeto. Para hacer esto, necesitamos agregar una función para cargar el archivo de audio antes de que comience el boceto. Esta función se llama preload (). Escribimos esto de la misma manera que la función setup () y draw ().

Dentro de las llaves, asignaremos nuestra variable al objeto de sonido usando la función loadSound (). Dentro de los paréntesis, escriba el nombre exacto del archivo de audio entre comillas:

function preload () {

timbre = loadSound ('timbre.mp3');

}

Paso 4: Reproduzca el archivo de audio usando la función KeyPressed ()

Ahora que el archivo de audio está cargado en el boceto, puede reproducirlo usando el método play (). Los métodos son esencialmente funciones específicas de un objeto.

Si ha utilizado pulsaciones de teclas en p5.js antes, probablemente haya utilizado una declaración condicional con la variable keyIsPressed dentro de la función de dibujo. Sin embargo, cuando trabajamos con archivos de audio, no queremos activarlo dentro de la función de dibujo. La función de dibujo es un bucle, por lo que se actualiza constantemente. Esto significa que el archivo de audio se reproducirá una y otra vez mientras se presione una tecla que no será agradable de escuchar.

Para evitar esto, utilizará una función llamada keyPressed (). Esto también se escribe igual que la función setup () y draw (). Escriba esto en la parte inferior del código debajo de la función draw ().

Dentro de las llaves es donde coloca el método play () que activará el archivo de audio una vez cuando presione una tecla. Para usar un método para un objeto, escriba el nombre de la variable que contiene el objeto seguido de.play ();

función keyPressed () {

timbre.play ();

}

Ahora, cuando ejecute su boceto, puede presionar una tecla y se reproducirá el sonido del timbre.

NOTA IMPORTANTE: Al agregar pulsaciones de teclas en nuestro código, el editor web necesita saber si estamos presionando una tecla para escribir código en el editor de texto o si estamos presionando la tecla para hacer lo que codificamos al presionar una tecla. Cuando haga clic en el botón de reproducción, mueva el mouse sobre el lienzo y haga clic en el lienzo. Esto traerá el foco del editor al boceto y presionar una tecla activará el código de pulsación de tecla que queremos que suceda

Paso 5: haz el botón de papel

Para disparar el sonido con el Makey Makey, usaremos un lápiz y papel normal para hacer un botón.

Dibuja dos semicírculos con un espacio muy pequeño entre ellos para que no se toquen realmente, pero lo suficientemente cerca para que podamos tocar ambas mitades al mismo tiempo con un dedo. Cada semicírculo también debe tener una línea gruesa que se extienda hasta cada extremo del papel. Aquí es donde colocará las pinzas de cocodrilo del Makey Makey.

Asegúrese de llenar ambos lados muy oscuros para que el grafito del lápiz pueda retener la corriente del Makey Makey.

El diseño de los dos semicírculos es tener un espacio tan pequeño entre ellos que es básicamente imposible no tocar ambos lados al mismo tiempo. Esto le permite completar el circuito entre la llave y la Tierra en el Makey Makey sin tener que sujetar el cable de tierra.

Paso 6: Configurar Makey Makey

Saque la placa Makey Makey, el cable USB y dos pinzas de cocodrilo. Adjunte una pinza de cocodrilo a la Tierra y otra a la tecla Espacio (dado que no especificamos una tecla en nuestro código, cualquier tecla que presionemos activará el sonido).

Tome la pinza de cocodrilo que se adjunta a la tecla de espacio y sujétela a un lado del botón de papel. Tome la pinza de cocodrilo que está unida a la Tierra y sujétela al otro lado del botón de papel.

Conecte el cable USB a la computadora portátil.

Paso 7: presione el botón para activar el archivo de audio

En este punto, está listo para tocar el timbre. Inicie el boceto (recuerde hacer clic con el mouse en el lienzo para que la pulsación de la tecla ejecute la función keyPressed ()) y luego toque los dos semicírculos en el papel al mismo tiempo. Debería escuchar el sonido del archivo de audio del timbre.

Paso 8: Extensión: agregue un componente visual al boceto

En este punto, nuestro boceto solo incluye código para reproducir el archivo de audio, por lo que no verá ningún cambio en la pantalla. Esto puede ser todo lo que quieras hacer si estás intentando crear algún tipo de proyecto de sonido interactivo.

Sin embargo, con las capacidades de codificación visual de p5.js, las posibilidades de agregar gráficos son infinitas. Incluso puede tener imágenes que reaccionen a sus archivos de audio de muchas maneras, como aparecer solo cuando el archivo de audio se está reproduciendo, reaccionar a los cambios de volumen y / o frecuencia o incluso hacer una representación visual del sonido en sí.

Paso 9: Extensión: haga que un círculo cambie de color cuando se presione el botón

Para mantener este proyecto simple, solo vamos a hacer un círculo que cambia de color cuando se presiona el botón.

En la función draw (), cree un círculo usando la función elipse (). Por encima de eso, agregue la función fill () para establecer el color del círculo. Para este boceto, el color original será el blanco, que es el valor de la escala de grises de 255. Puede establecer el color que desee utilizando valores de color RGB.

Entre la función fill () y la función ellipse (), cree una declaración condicional usando la variable keyIsPressed entre paréntesis. Entre los corchetes de la declaración condicional, coloque otro conjunto de funciones de relleno () en el color al que desea que cambie el círculo cuando presione la tecla. Para este proyecto, el color cambiará a amarillo, que tiene un valor RGB de 255, 255, 0.

if (keyIsPressed) {

llenar (255, 255, 0);

}

Presione el botón de reproducción para ejecutar el boceto. El círculo blanco debería aparecer ahora cuando se cargue el boceto (recuerde hacer clic con el mouse en el lienzo). Luego presione el botón de papel y debería escuchar el timbre de la puerta y ver que el círculo cambia de color.

Bosquejo de p5.js: