Pular para o conteúdo principal

Guia Rápido de Watcher & Node-RED para p5.js

O que é o p5.js​

p5.js é uma biblioteca JavaScript que torna a programação acessível para artistas e designers. Ela fornece uma maneira fácil de criar gráficos, animações e aplicações interativas usando uma sintaxe simples. Com recursos como desenhar em um canvas, lidar com entrada do usuário e suporte a multimídia, p5.js é ideal para projetos de programação criativa, fins educacionais e arte digital. Sua comunidade vibrante e seus recursos extensivos ajudam usuários de todos os níveis de habilidade a começarem.

Configuração do Node-RED​

Etapa 1. Executar tarefa no Watcher​

Antes de tudo, você precisa executar uma tarefa no Watcher seguindo o vídeo abaixo. Se quiser saber mais clique aqui.

Etapa 2. Configuração​

Há 4 módulos que você precisa configurar:

  1. OpenStream: Obter dados do Watcher para o Node-RED. Para mais detalhes clique aqui.

  2. function: Para processar dados do Watcher. Clique duas vezes no módulo function e cole nele os códigos a seguir.

msg.payload = {
    content: msg.payload.value[0].content,
    image_url: msg.payload.value[0].image_url
};
return msg;
  1. http request: Enviar uma requisição POST para o servidor e depois para o p5.js.
  1. debug: Para ver informações de saída, para depurá-las.

Etapa 3. Implantação​

Quando terminar a configuração, não se esqueça de Deploy.

Construir um servidor​

Etapa 4. Baixar o código do servidor​

Clique neste link para baixar todo o código do projeto.

Etapa 5. Executar o servidor​

Antes de executar o servidor, você deve instalar alguns pacotes primeiro.

npm install express body-parser cors ws

Unzip the package and get into it, and then run node server.js to run the server.

Now the server is listening port 3000, so the message from Node-RED will be sent to this server, and then to p5.js.

VScode configuration​

Step 6.Install extensions​

You need to install 2 extensions, there are Live Server and p5.vscode

Step 7.Open project​

Open the project you just download.

The structure will like below image when open it.

Step 7.Run project​

Open sketch.js and click the Go Live button, which will run the project locally on default browser.

The effect will like below image, this servcie running on port 5500.

When detected people, it will look like this.

dica

You need to keep running Node-RED and server.js

Congratulations on successfully completing your journey from Watcher to p5.js! You’ve gained valuable skills, and there are many more exciting features waiting for you to explore. Keep experimenting and enjoy the creative possibilities ahead!

Tech Support & Product Discussion​

Thank you for choosing our products! We are here to provide you with different support to ensure that your experience with our products is as smooth as possible. We offer several communication channels to cater to different preferences and needs.

Loading Comments...