Skip to content

Instantly share code, notes, and snippets.

@dongphilyoo dongphilyoo/app.js
Created Oct 17, 2017

Embed
What would you like to do?
p5.js serial port communication with Arduino
// Be sure to choose File > Import Library > p5.serialport.js from the P5 IDE main menu to load serial library
// Terminal command to install p5.serialserver: npm install p5.serialserver
// Terminal command to start server: node ~/node_modules/p5.serialserver/startserver.js
let serial; // variable to hold an instance of the serialport library
let options = {
baudrate: 9600
}; // set baudrate to 9600; must match Arduino baudrate
//let portName = '/dev/cu.HC-05-DevB';
//let portName = '/dev/cu.Bluetooth-Incoming-Port';
let portName = '/dev/cu.usbmodem14621'; // fill in serial port name
let data; // for incoming serial data
let val;
let r, g, b, c, d;
//let threshold = 10;
let cBtn, bBtn, wBtn, resetBtn, eraseBtn, clearBtn;
let btnPosX, btnPosY;
let radiusHigh;
function init() {
createCanvas(windowWidth, windowHeight); // make the canvas
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on('data', serialEvent); // callback for when new data arrives
serial.open(portName, options); // open a serial port @ 9600
background(220);
btnPosX = width / 10;
btnPosY = height / 10;
cBtn = createButton("Pick Color!"); // color picker button
cBtn.position(width - btnPosX, btnPosY);
cBtn.mousePressed(colorPicker);
resetBtn = createButton("Reset"); // color reset button
resetBtn.position(width - btnPosX, btnPosY + 25);
resetBtn.mousePressed(resetColor);
eraseBtn = createButton("Eraser"); // eraser button
eraseBtn.position(width - btnPosX, btnPosY + 50);
eraseBtn.mousePressed(eraser);
clearBtn = createButton("Clear"); // clear canvas button
clearBtn.position(width - btnPosX, btnPosY + 75);
clearBtn.mousePressed(clearCanvas);
fill(0); // initiate color to black
}
function spray() {
stroke(0);
rect(width - btnPosX + 5, btnPosY - 70, 60, 60);
radiusHigh = d * 0.5;
if (d > 0) {
for (let i = 0; i <= 1000; i++) {
let angle = random(TWO_PI);
let radius = random(0, radiusHigh);
let offsetX = radius * cos(angle);
let offsetY = radius * sin(angle);
let sizeX = random(1.2);
let sizeY = random(1.2);
//fill(r, g, b);
noStroke();
rect(mouseX + offsetX, mouseY + offsetY, sizeX, sizeY);
}
// if pointer stays at one point, increase diameter of spray nozzle
if (d > 0 && mouseX == mouseX) {
for (let i = 0; i <= 1200; i++) {
let angle = random(TWO_PI);
radiusHigh = radiusHigh + 0.032;
let radius = random(0, radiusHigh);
let offsetX = radius * cos(angle);
let offsetY = radius * sin(angle);
let sizeX = random(1.2);
let sizeY = random(1.2);
// let fDist = dist(mouseX, offsetX, mouseY, offsetY);
// let flow = random(-fDist, fDist);
//console.log(fDist);
noStroke();
rect(mouseX + offsetX, mouseY + offsetY, sizeX, sizeY);
// ellipse(mouseX + flow, mouseY + 100, 5, 5);
}
}
}
}
function serialEvent() {
data = serial.readStringUntil("/");
//console.log(data);
// let arr = data.split(",").map((item) => item.trim());
val = data.split(",");
r = Number(val[0]);
g = Number(val[1]);
b = Number(val[2]);
c = Number(val[3]);
d = Number(val[4]);
d = map(d, 50, 1000, 0, 100);
r *= 255;
r /= c;
g *= 255;
g /= c;
b *= 255;
b /= c;
r = parseInt(r);
g = parseInt(g);
b = parseInt(b);
}
function colorPicker() {
fill(r, g, b);
}
function resetColor() {
fill(0);
}
function eraser() {
fill(220);
}
function clearCanvas() {
background(220);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.