p5bots 项目教程
p5bots项目地址:https://gitcode.com/gh_mirrors/p5b/p5bots
项目介绍
p5bots 是一个开源项目,旨在让运行在浏览器上的 p5.js 与使用 Firmata 协议的微处理器(如 Arduino)进行互动。通过 socket.io 和 node.js,p5bots 实现了两个平台之间的通信。该项目已经在 Arduino Uno 上进行了测试,但可以在任何运行 Firmata 的程序上使用。
项目快速启动
环境准备
-
安装 Node.js 和 npm:
# 下载并安装 Node.js 和 npm https://nodejs.org/en/download/
-
安装 p5bots 服务器工具:
npm install -g p5bots-server
-
下载 p5.js 和 p5bots 库:
<!-- 在 HTML 文件中引入库 --> <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script> <script src="scripts/p5.min.js"></script> <script src="scripts/p5bots.js"></script>
示例代码
-
连接 Arduino 并上传 Firmata 固件:
# 打开 Arduino IDE,上传 StandardFirmata 固件到开发板
-
编写 p5.js 代码:
var b = new p5.Board('/dev/cu.usbmodem1421', 'arduino'); var led; function setup() { led = b.pin(9, 'LED'); } function keyPressed() { if (keyCode === LEFT_ARROW) { led.on(); } else if (keyCode === RIGHT_ARROW) { led.off(); } else if (keyCode === UP_ARROW) { led.blink(); } else if (keyCode === DOWN_ARROW) { led.noBlink(); } }
-
启动服务器:
bots-go -d 工程目录
-
在浏览器中访问:
http://localhost:8000
应用案例和最佳实践
控制 LED 灯闪烁
通过 p5bots,你可以轻松控制 Arduino 上的 LED 灯闪烁。以下是一个简单的示例:
var b = new p5.Board('/dev/cu.usbmodem1421', 'arduino');
var led;
function setup() {
led = b.pin(9, 'LED');
}
function draw() {
led.blink();
}
使用传感器数据驱动 p5.js 草图
你可以使用 Arduino 上的传感器数据来驱动 p5.js 草图。例如,使用温度传感器数据来改变草图的颜色:
var b = new p5.Board('/dev/cu.usbmodem1421', 'arduino');
var tempSensor;
function setup() {
tempSensor = b.pin(0, 'ANALOG');
}
function draw() {
var temp = tempSensor.value;
background(temp, 255 - temp, 0);
}
典型生态项目
p5.js
p5.js 是一个基于 Processing 的 JavaScript 库,用于在浏览器中创建图形和交互式内容。p5bots 与 p5.js 紧密集成,使得开发者可以轻松地将硬件交互融入到 Web 应用中。
Arduino
Arduino 是一个开源的电子原型平台,广泛用于物联网和交互式项目。通过 p5bots,Arduino 可以与 p5.js 无缝集成,实现更丰富的交互体验。
socket.io
socket.io 是一个实时通信库,用于在客户端和服务器之间建立实时连接。p5bots 使用 socket.io 来实现 p5.js 和 Arduino 之间的实时通信。
通过这些生态项目的结合,p5bots 提供了一个强大的工具集,用于创建跨平台的交互式项目。