Skip to main content

Inicio Rápido de Watcher & Node-RED a p5.js

¿Qué es p5.js?​

p5.js es una biblioteca de JavaScript que hace que la programación sea accesible para artistas y diseñadores. Proporciona una manera fácil de crear gráficos, animaciones y aplicaciones interactivas usando una sintaxis simple. Con características como dibujar en un lienzo, manejar entrada del usuario y soporte multimedia, p5.js es ideal para proyectos de programación creativa, propósitos educativos y arte digital. Su vibrante comunidad y recursos extensos ayudan a usuarios de todos los niveles de habilidad a comenzar.

Configuración de Node-RED​

Paso 1. Ejecutar tarea en Watcher​

Primero que todo, necesitas ejecutar una tarea en Watcher siguiendo el video a continuación. Si quieres saber más por favor haz clic aquí.

Paso 2. Configuración​

Hay 4 módulos que necesitas configurar:

  1. OpenStream: Obtener datos desde Watcher a Node-RED. Para detalles por favor haz clic aquí.

  2. function: Para procesar datos desde Watcher. Haz doble clic en el módulo function y pega los siguientes códigos en él.

msg.payload = {
    content: msg.payload.value[0].content,
    image_url: msg.payload.value[0].image_url
};
return msg;
  1. solicitud http: Envía una solicitud POST al servidor y luego a p5.js.
  1. debug: Para ver información de salida, para depurarlo.

Paso 3.Despliegue​

Cuando termines la configuración, no olvides Desplegarlo.

Construir un servidor​

Paso 4.Descargar código del servidor​

Por favor haz clic en este enlace para descargar todo el código del proyecto.

Paso 5.Ejecutar el servidor​

Antes de ejecutar el servidor, debes instalar algunos paquetes primero.

npm install express body-parser cors ws

Descomprime el paquete y entra en él, luego ejecuta node server.js para ejecutar el servidor.

Ahora el servidor está escuchando en el puerto 3000, por lo que el mensaje de Node-RED será enviado a este servidor, y luego a p5.js.

Configuración de VScode​

Paso 6. Instalar extensiones​

Necesitas instalar 2 extensiones, que son Live Server y p5.vscode

Paso 7. Abrir proyecto​

Abre el proyecto que acabas de descargar.

La estructura se verá como la imagen de abajo cuando lo abras.

Paso 7. Ejecutar proyecto​

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

El efecto se verá como la imagen de abajo, este servicio se ejecuta en el puerto 5500.

Cuando se detecten personas, se verá así.

tip

Necesitas mantener ejecutándose Node-RED y server.js

¡Felicitaciones por completar exitosamente tu viaje desde Watcher hasta p5.js! Has adquirido habilidades valiosas, y hay muchas más características emocionantes esperando que las explores. ¡Sigue experimentando y disfruta las posibilidades creativas que te esperan!

Soporte Técnico y Discusión de Productos​

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

Loading Comments...