Skip to main content

Guía Rápida: Watcher & Node-RED hacia p5.js

¿Qué es p5.js?​

p5.js es una librería de JavaScript que hace que la programación sea accesible para artistas y diseñadores. Proporciona una forma sencilla de crear gráficos, animaciones y aplicaciones interactivas utilizando una sintaxis simple. Con funciones como dibujo en lienzo (canvas), manejo de entrada del usuario y soporte para multimedia, p5.js es ideal para proyectos de codificación creativa, fines educativos y arte digital. Su comunidad activa y amplios recursos ayudan a usuarios de todos los niveles a comenzar.

Configuración en Node-RED​

Paso 1. Ejecutar tarea en Watcher​

Primero, necesitas ejecutar una tarea en Watcher siguiendo el siguiente video. Si deseas saber más, haz clic aquí.

Paso 2. Configuración​

Hay 4 módulos que necesitas configurar:

  1. OpenStream: Obtiene datos de Watcher hacia Node-RED. Para más detalles haz clic aquí.

  2. function: Procesa los datos recibidos desde Watcher. Haz doble clic en el módulo function y pega el siguiente código:

msg.payload = {
    content: msg.payload.value[0].content,
    image_url: msg.payload.value[0].image_url
};
return msg;
  1. http request: Envía una solicitud POST al servidor y de ahí a p5.js.
  1. debug: Permite visualizar la salida y depurar.

Paso 3. Despliegue​

Cuando termines la configuración, no olvides hacer clic en Deploy.

Crear un servidor​

Paso 4. Descargar el código del servidor​

Haz clic aquí para descargar todo el proyecto.

Paso 5. Ejecutar el servidor​

Antes de ejecutar el servidor, primero instala algunos paquetes:

npm install express body-parser cors ws

Descomprime el paquete y entra en la carpeta. Luego ejecuta:

node server.js

Ahora el servidor está escuchando en el puerto 3000, así que los mensajes desde Node-RED serán enviados a este servidor y luego a p5.js.

Configuración en VScode​

Paso 6. Instalar extensiones​

Necesitas instalar 2 extensiones: Live Server y p5.vscode

Paso 7. Abrir el proyecto​

Abre el proyecto que acabas de descargar.

La estructura debería verse como en la siguiente imagen:

Paso 8. Ejecutar el proyecto​

Abre el archivo sketch.js y haz clic en el botón Go Live, lo que ejecutará el proyecto localmente en tu navegador predeterminado.

El resultado debería verse como en la siguiente imagen. Este servicio se ejecuta en el puerto 5500.

Cuando se detecte a una persona, se verá así:

tip

Debes mantener ejecutando tanto Node-RED como server.js

¡Felicidades por completar exitosamente tu viaje desde Watcher hasta p5.js! Has adquirido habilidades valiosas, y aún hay muchas funciones emocionantes por descubrir. ¡Sigue experimentando y disfruta de todas las posibilidades creativas que tienes por delante!

Soporte Técnico y Comunidad​

¡Gracias por elegir nuestros productos! Estamos aquí para brindarte soporte y asegurarnos de que tu experiencia con nuestros productos sea lo más fluida posible. Ofrecemos varios canales de comunicación para ajustarnos a diferentes preferencias y necesidades.

Loading Comments...