通过p5.bots实现p5与Arduino互动

参考：https://github.com/sarahgp/p5bots

简介

p5.bots可以让「运行在浏览器上的p5.js」和「使用Firmata协议的微处理器（这里是Arduino）」互动，它通过socket.io和node.js实现两个平台之间的通信。

简单上手

这里实现了控制LED灯管的闪烁。

需要作好以下准备：

Arduino UNO开发板
面包板、实验跳线
220Ω的电阻、LED灯泡
Node 0.12.x+，下载：https://nodejs.org/en/download/
NPM 2.0.x+

Arduino的准备

连接好设备，打开示例StandardFirmata并上传至开发板。

p5.bots服务器工具

安装：

npm install -g p5bots-server

配置js依赖

下载以下三个库到本地，并通过<script>标签导入（也可以通过CDN）

p5	https://github.com/processing/p5.js/releases
p5bots	https://raw.githubusercontent.com/sarahgp/p5bots/master/lib/p5bots.js
socket.io	https://cdn.socket.io/socket.io-1.3.5.js

<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>

编辑js程序

p5.board()函数第一个参数是端口名，mac系统的端口名一般是"/dev/cu.usbmodem14xx"，win系统的端口名一般是"COMx"。这里注意区分。

var b = 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();}
}

连接电路

要记得LED短的一端对应的是GND。

启动服务器

bots-go -d 工程目录

看到server starting...connected时，即可在浏览器地址栏输入localhost:8000

通过p5.bots实现p5与Arduino互动相关推荐

p5.js 绘制创意自画像（互动媒体技术作业）
p5.js 绘制创意自画像Little Prince(互动媒体技术作业) 作品展示代码&创意点分析 1.设置工具类以获取坐标点:本次实验最有用的东西就是这个了 2.眼睛跟随鼠标运动: 3.披 ...
html p5 绘制图片,p5.js入门教程和基本形状绘制_淋雪_前端开发者
一.什么是p5. 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5. 主讲老师就是开发者之一--还是挺激动的. p5.开发的Javascript库,可以看作是Proces ...
S4A+Arduino互动媒体基础教程第一节 Arduino连接S4A
固件下载地址是:http://s4a.cat/downloads/S4AFirmware15.ino 转载于:https://www.cnblogs.com/IotI/p/8297917.html
P5.js开发之——介绍(1)
一概述 p5.js 是一个JavaScript的函数库它在制作之初就和Processing有同样的目标.就是让艺术家,设计师,教育工作者和编程初学者能够很容易,很轻松地学习和使用程序设计利用插件 ...
.playground文件_部署可教学机器：Circuit Playground Express，Arduino，P5.js，TinyUSB
.playground文件什么是可教学机? (What is Teachable Machine?) Teachable Machine is a web-based tool that makes ...
Processing.js vs P5.js –有什么区别？
几天前, P5.js被释放了. 这是一个遵循处理原则的用于可视化编程的JavaScript库. 根据这篇文章 : 处理是一种环境/编程语言,旨在使视觉交互式应用程序非常易于编写. 它可以用于从教孩子如 ...
p5.js 光速入门中文教程
本文简介点赞 + 关注 + 收藏 = 学会了本文的目标是和各位工友一起有序的快速上手 p5.js ,会讲解 p5.js 的基础用法. 本文会涉及到的内容包括: 项目搭建 p5.js 基础2D图形 ...
p5.js 写个连连看
预览点这里 ,代码在相应的 github 仓库中 (首次加载比较慢,以后可以看看怎么优化一下打包) (一)准备工作 vue3 + vite + p5 + eslint // .eslintrc.cjs ...
【前端】搭建 Vite + P5.js 项目
文章目录前言框架介绍一.初始化项目 1.1 创建一个新项目 1.2 选择框架 1.3 初始化项目二.安装依赖三.开始编程 3.1 添加容器 3.2 编写绘图代码 3.3 运行项目四.打包并 ...

通过p5.bots实现p5与Arduino互动

简介

简单上手

通过p5.bots实现p5与Arduino互动相关推荐

最新文章

热门文章