Cómo escribir una animación de robot sensible a la voz en p5.js

JavaScript es el idioma de internet. Trabajar en el desarrollo de front-end sin que sea imposible. Para los principiantes, especialmente los niños, puede ser un reto acostumbrarse a la sintaxis del idioma.

Para completar a los principiantes, incluso instalar y ejecutar un servidor local en el navegador puede ser un obstáculo. ¿Qué pasaría si hubiera una manera de hacer algo genial con JavaScript, sin instalar nada? Ingrese a p5.js, una biblioteca de codificación diseñada con creatividad en mente.

Aquí le mostramos cómo hacer una cabeza de robot animada reactiva con sonido usando algunos principios de codificación simples.

Que es p5.js?

La biblioteca p5.js fue creada por la artista Lauren MacCarthy, radicada en Los Ángeles. Está diseñado para proporcionar una plataforma similar a Processing, para la expresión creativa y el arte. Las herramientas claras acompañan los tutoriales bien explicados y los documentos de referencia para que sea perfecto para principiantes.

Ya sea que esté haciendo animaciones, música, juegos simples o incluso conectándose a un hardware externo, 8 Amazing Hardware Projects With Processing y p5.js 8 Amazing Hardware Projects With Processing y p5.js DIY electronics es más que Arduino y Raspberry Pi. En este resumen, cubrimos algunos de los proyectos más geniales que puedes hacer con Processing y p5.js! Leer más, p5.js puede ayudar.

El editor de p5.js

Para comenzar, abra la ventana de su navegador y navegue hasta el editor web p5.js. Antes de empezar, hay dos pasos opcionales..

1. Debe iniciar sesión en p5.js para guardar sus bocetos, por lo que es aconsejable crear una cuenta. Registrarse es gratis, y puede usar su cuenta de Google o GitHub para iniciar sesión si lo desea..

2. Haga clic en la rueda dentada de configuración en la esquina superior derecha. Aquí puede modificar el tema y el tamaño del texto para todos los amantes de los temas oscuros..

El editor p5.js combina un editor de código, una consola y una ventana de salida en el mismo espacio. Hasta ahora hay dos funciones ya configuradas para usted..

Fundamentos de p5.js

Cada boceto p5.js comienza con dos elementos. los preparar() función, y la dibujar() función. Para aquellos de ustedes que han programado un Arduino antes, esto les resultará familiar.!

función de configuración () createCanvas (500, 500); 

los preparar() La función se ejecuta al inicio de su programa. En este caso, la configuración crea un lienzo cuadrado de 400 píxeles.. Cambia esto a (500, 500) para un área un poco más grande para trabajar.

El programa de instalación se ejecuta solo una vez y se utiliza para crear las partes necesarias para su programa, junto con los valores iniciales de su programa..

función draw () background (220); 

los dibujar() El método se llama cada fotograma. Esto funciona como la función de bucle en Arduino, o la función de actualización en Unity 3D. Cualquier cosa que necesite cambiar en tu bosquejo pasa aquí. Por ahora, el fondo se vuelve a dibujar cada cuadro. En la parte superior verás dos iconos, jugar y parar. Hacer clic jugar.

Este es el programa hasta ahora: un lienzo de 500 × 500 con un fondo gris.,

Creando una Forma

Trabajar con formas en p5.js es un poco diferente a los objetos de forma preestablecidos que se utilizan en el tutorial de animación web de mo.js. Para crear una elipse simple, agregue esto al código en el dibujar() Método, justo debajo de donde establece el color de fondo.

función draw () background (220); elipse (250,250,50)

los elipse() El método toma varios argumentos. Los dos primeros son su posición X e Y en el lienzo. Dado que el lienzo tiene 500 píxeles de ancho, establecer estos dos valores en 250 coloca la elipse en el centro. El tercer argumento es el ancho del círculo, en este caso, 50 píxeles..

Así que tienes un fondo y un círculo, pero no se ve tan bien. Hora de arreglar eso.

Añadiendo un poco de estilo

Comience por cambiar el color de fondo. El número entre paréntesis representa un valor de escala de grises. Entonces, 0 es negro y 255 es blanco, con diferentes tonos de gris en medio. Para hacer que el fondo negro, cambie este valor a 0.

función draw () background (0); elipse (250,250,50); 

Ahora cuando hagas click en play el fondo será negro. Para darle un poco de color al círculo, queremos afectar sus valores RGB (rojo verde y azul) individualmente. Cree algunas variables en la parte superior de su script (justo al principio, antes de la función de configuración) para almacenar estos valores.

var r, g, b;

En la función de configuración, establezca el valor de r a 255, y dar a los demás un valor de 0. Su color RGB combinado será rojo brillante.!

r = 255; g = 0; b = 0;

Para aplicar el color al círculo, agregue un llenar() Llama al método de dibujo, justo antes de dibujar el círculo..

 llenar (r, g, b); elipse (250,250,50);

Ahora haga clic jugar, y deberías ver un círculo rojo sobre un fondo negro.

Hacer el círculo es un buen comienzo, pero agregar interactividad es donde se vuelve realmente interesante!

Haga clic para cambiar el color

Agregar código para ejecutarse con un clic del mouse es bastante fácil en p5.js. Crear una nueva función debajo de la dibujar() método.

función mousePressed () r = random (256); g = aleatorio (256); b = aleatorio (256);  

los mousePressed () escucha cualquier presión del mouse y ejecuta el código dentro de los corchetes. los aleatorio() La función devuelve un valor aleatorio entre 0 y un número dado. En este caso, está configurando los valores r, g y b entre 0 y 255 en cada vez que presione el mouse.

Vuelva a ejecutar el código y haga clic con el mouse varias veces. El círculo debería cambiar de color cuando lo hagas..

Ahora su animación es reactiva a los clics del mouse, pero ¿qué pasa con el uso de la voz del usuario??

Configuración de control de voz

El uso del sistema de micrófono se simplifica con la biblioteca de sonido p5.js. En la parte superior de su script, cree una nueva variable llamada micrófono.

var r, g, b; var mic

Añade estas líneas a tu preparar() función para asignar micrófono a la entrada de audio.

mic = new p5.AudioIn () mic.start (); 

Cuando haga clic en Reproducir ahora, aparecerá un cuadro de diálogo que le solicitará permiso para acceder al micrófono integrado..

Hacer clic Permitir. Dependiendo del navegador que utilice, puede recordar su elección o puede que tenga que hacer clic en una casilla para confirmar. Ahora el micrófono está configurado y es hora de ponerlo en uso..

Escalado por volumen

Para usar el volumen del micrófono como un valor en su programa, deberá almacenarlo como una variable. Cambia tu dibujar() método para parecerse a esto:

función draw () var micLevel = mic.getLevel (); fondo (0); llenar (r, g, b); elipse (250,250,50 + micLevel * 2000);  

Al inicio de la función, una nueva variable llamada micLevel Se crea, y se asigna a la amplitud actual del micrófono..

La elipse tenía un ancho fijo de 50 píxeles. Ahora 50 píxeles es el ancho mínimo, agregado al valor de nivel de micro que actualiza cada fotograma. El número con el que se multiplica micLevel variará dependiendo de la sensibilidad de su micrófono.

Experimente con valores más altos: un valor de 5000 creará un cambio de escala más dramático!

Nota: si esto no funciona para usted, es posible que su micrófono no esté configurado correctamente. El navegador utiliza el micrófono predeterminado del sistema, y ​​es posible que deba modificar su configuración de sonido y actualizarse.

Construyendo el robot

Ahora tienes todas las herramientas necesarias para crear el robot. Primero, mueva la elipse que ha creado, y agregue otra para hacer que los ojos.

 elipse (150,150,50 + micLevel * 2000); elipse (350,150,100 + micLevel * 2000); 

los “dientes” Son una serie de rectángulos que se extienden desde la parte inferior de la pantalla. Tenga en cuenta que el rect () Método requiere un parámetro extra para su ancho fijo.

 rect (0, 500,100, -100 -micLevel * 5000); rect (400, 500,100, -100 -micLevel * 5000); rect (100, 500,100, -100 -micLevel * 3000); rect (300, 500,100, -100 -micLevel * 3000); rect (200, 500,100, -100 -micLevel * 1000); 

Esta vez, solo desea que la altura de los dientes cambie, y para dar la “sonriente” Efecto deben tener diferentes sensibilidades. La altura mínima es -100 (a medida que sale de la parte inferior del lienzo), por lo que micLevel también debe ser un número negativo.

Haga clic en Reproducir y verá una cara de robot casi terminada.!

Una vez más, es posible que deba ajustar sus números multiplicadores para obtener los mejores resultados.

Añadiendo toques finales

Añade pupilas a los ojos con aún más. elipse() llamadas Usar otro llenar() para hacerlos blancos. Agrega esto a tu dibujar() método, debajo del “dientes” acabas de crear.

relleno (255); elipse (150,150,20 + micLevel * 1000); elipse (345,150,30 + micLevel * 1000); 

Finalmente, para darle a la pieza completa una pequeña definición, cambie el peso del trazo en su preparar() función

strokeWeight (5); 

Eso es!

Si algo no funciona, revise su código a fondo, y puede ver el código completo de este tutorial en el editor p5 si es necesario.

Avanzando con p5.js

Este tutorial para principiantes cubre algunos conceptos básicos con p5.js, que muestra lo fácil que es ser creativo. Como siempre, este proyecto apenas roza la superficie de todo lo que p5.js es capaz de.

Dedicar tiempo a crear arte con p5.js es un tiempo bien empleado, ya que te estás familiarizando con el pensamiento como un programador y la sintaxis de JavaScript. Estas son todas las habilidades importantes que debes seguir si decides bucear de todo corazón y realmente aprendes JavaScript. Really Learn JavaScript con los 5 mejores cursos de Udemy. Really Learn JavaScript con los 5 mejores cursos de Udemy. JavaScript es el lenguaje de programación de la web. Si tiene una razón para aprender JavaScript, estos cinco excelentes cursos de Udemy podrían ser el lugar para comenzar su viaje de codificación. Lee mas !

Explorar más sobre: ​​Tutoriales de codificación, JavaScript.