Skip to main content

Watcher & Node-RED 到 p5.js 快速入门

什么是 p5.js​

p5.js 是一个 JavaScript 库，让艺术家和设计师能够轻松进行编程。它提供了一种简单的方式来创建图形、动画和交互式应用程序，使用简单的语法。凭借在画布上绘图、处理用户输入和支持多媒体等功能，p5.js 非常适合创意编程项目、教育目的和数字艺术。其充满活力的社区和丰富的资源帮助各种技能水平的用户快速入门。

Node-RED 配置​

步骤 1. 在 Watcher 中运行任务​

首先，您需要按照下面的视频在 Watcher 中运行一个任务。如果您想了解更多信息，请点击这里。

步骤 2. 配置​

您需要配置 4 个模块：

  1. OpenStream： 从 Watcher 获取数据到 Node-RED。详细信息请点击这里。

  2. function： 处理来自 Watcher 的数据。双击 function 模块并将以下代码粘贴到其中。

msg.payload = {
    content: msg.payload.value[0].content,
    image_url: msg.payload.value[0].image_url
};
return msg;
  1. http request： 向服务器发送 POST 请求，然后发送到 p5.js。
  1. debug： 查看输出信息，用于调试。

步骤 3. 部署​

完成配置后，不要忘记部署它。

构建服务器​

步骤 4.下载服务器代码​

请点击此链接 下载完整的项目代码。

步骤 5.运行服务器​

在运行服务器之前，您应该先安装一些包。

npm install express body-parser cors ws

解压包并进入其中，然后运行 node server.js 来运行服务器。

现在服务器正在监听端口 3000，所以来自 Node-RED 的消息将被发送到此服务器，然后发送到 p5.js。

VScode 配置​

步骤 6.安装扩展​

您需要安装 2 个扩展，它们是 Live Server 和 p5.vscode

步骤 7.打开项目​

打开您刚刚下载的项目。

打开时结构将如下图所示。

步骤 7.运行项目​

打开 sketch.js 并点击 Go Live 按钮，这将在默认浏览器上本地运行项目。

效果将如下图所示，此服务运行在端口 5500 上。

当检测到人员时，它将看起来像这样。

tip

您需要保持 Node-RED 和 server.js 运行

恭喜您成功完成了从 Watcher 到 p5.js 的旅程！您已经获得了宝贵的技能，还有许多令人兴奋的功能等待您去探索。继续实验并享受前方的创意可能性！

技术支持与产品讨论​

感谢您选择我们的产品！我们在这里为您提供不同的支持，以确保您使用我们产品的体验尽可能顺畅。我们提供多种沟通渠道，以满足不同的偏好和需求。

Loading Comments...