Workshop: Using Arduino with p5.embroider
This is a write up of part of the PEmbroider tech skills workshop explaining how to use inputs from Arduino to alter a PEmbroider sketch. It shows the example of using an LDR to vary the radius of a circle.
There are a few steps to this process:
1. Circuit
First, you need to build your circuit. This is the same as you would build any Arduino circuit and can use anything that will give you a reading such as potentiometer, LDR, button, switch, etc. Below is the circuit for an LDR.
2. Arduino Code
The setup for the arduino code is nice and simple, we just need to read our value then print it to serial. Make sure you are using Serial.println() so each value prints on a new line.
void setup() {
Serial.begin(9600);
}
void loop() {
int val = analogRead(A0);
Serial.println(val);
delay(100);
}
If we have multiple readings, we just need to print each one, except the last, with Serial.print() followed by a comma. The last value is printed with Serial.println() to start a new line for the next reading.
void setup() {
Serial.begin(9600);
}
void loop() {
int val1 = analogRead(A0);
int val2 = analogRead(A1);
Serial.print(val1);
Serial.print(",");
Serial.println(val2);
delay(100);
}
Once you have uploaded this, make sure that the Serial Monitor is closed. If left open, p5 won't be able to read the data. Also, make sure that the frequency used in Serial.begin()is 9600, as this is what p5 uses.
3. p5 Code
Below is a template for using serial data with p5.embroider.
// variable to hold an instance of the p5.webserial library:
const serial = new p5.WebSerial();
// HTML button object:
let portButton;
let inData; // for incoming serial data
let outByte = 0; // for outgoing data
let vals;
let dataCount = 0;
let _drawMode = "p5";
let stitchWidth;
function setup() {
createCanvas(400, 400); // make the canvas
//Serial setup
// check to see if serial is available:
if (!navigator.serial) {
alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");
}
// if serial is available, add connect/disconnect listeners:
navigator.serial.addEventListener("connect", portConnect);
navigator.serial.addEventListener("disconnect", portDisconnect);
serial.getPorts(); // check for any ports that are available:
serial.on("noport", makePortButton); // if there's no port chosen, choose one:
serial.on("portavailable", openPort); // open whatever port is available:
serial.on("requesterror", portError); // handle serial errors:
serial.on("data", serialEvent); // handle any incoming serial data:
serial.on("close", makePortButton);
//p5.embroider setup
let drawModeStitchButton = createButton("Draw Mode: Stitch");
drawModeStitchButton.mousePressed(() => {
_drawMode = "stitch";
redraw();
});
let drawModeLineButton = createButton("Draw Mode: Realistic");
drawModeLineButton.mousePressed(() => {
_drawMode = "realistic";
redraw();
});
let drawModeP5Button = createButton("Draw Mode: p5");
drawModeP5Button.mousePressed(() => {
_drawMode = "p5";
redraw();
});
let exportDstButton = createButton("Export DST");
exportDstButton.mousePressed(() => {
exportEmbroidery("colorExample.dst");
});
exportDstButton.position(0, height + 60);
let exportGcodeButton = createButton("Export Gcode");
exportGcodeButton.mousePressed(() => {
exportGcode("colorExample.gcode");
});
exportGcodeButton.position(90, height + 60);
//noLoop();
}
function draw() {
background(0);
stitchWidth = 7;
stroke(255, 255, 255);
noFill();
setDrawMode(_drawMode);
if(typeof(vals[0]) != "undefined" && !isNaN(vals[0])){
beginRecord(this);
strokeWeight(stitchWidth);
setStitch(0.2, 0.8, 10);
setStrokeMode("zigzag");
//p5 sketch goes below!!
ellipse(pixelToMm(200),pixelToMm(200),abs(vals[0]),abs(vals[1]));
endRecord();
}
}
// read any incoming data as a string
// (assumes a newline at the end of it):
function serialEvent() {
inData = serial.readLine();
if(inData != null){
inData = trim(inData);
vals = int(splitTokens(inData, ","));
}
}
// if there's no port selected,
// make a port select button appear:
function makePortButton() {
// create and position a port chooser button:
portButton = createButton("choose port");
portButton.position(10, 10);
// give the port button a mousepressed handler:
portButton.mousePressed(choosePort);
}
// make the port selector window appear:
function choosePort() {
if (portButton) portButton.show();
serial.requestPort();
}
// open the selected port, and make the port
// button invisible:
function openPort() {
// wait for the serial.open promise to return,
// then call the initiateSerial function
serial.open().then(initiateSerial);
// once the port opens, let the user know:
function initiateSerial() {
console.log("port open");
}
// hide the port button once a port is chosen:
if (portButton) portButton.hide();
}
// pop up an alert if there's a port error:
function portError(err) {
alert("Serial port error: " + err);
}
// try to connect if a new serial port
// gets added (i.e. plugged in via USB):
function portConnect() {
console.log("port connected");
serial.getPorts();
}
// if a port is disconnected:
function portDisconnect() {
serial.close();
console.log("port disconnected");
}
function closePort() {
serial.close();
}
Let's take a closer look at some specific parts, first the function serialEvent();
function serialEvent() {
inData = serial.readLine();
if(inData != null){
inData = trim(inData);
vals = int(splitTokens(inData, ",")); //splits up the data at each comma
}
}
This function is called each time a new piece of data is sent from the serial monitor. It then splits the data at the commas and stores them in an array called vals. This data can then be used within the sketch to influence certain variables.
Write out file
This sketch is currently not actually producing an embroidery file so we need to add a trigger that will cause the file to write out. You could use a variety of inputs both from the Arduino or computer to do this. Below, we are using the space bar.
void keyPressed() {
// Export the embroidery file when we press the space bar.
E.optimize(); //important to include - optimizes the embroidery paths
if (key == ' ') {
String outputFilePath = sketchPath("PEmbroider_arduino_demo_" + fileNumber + ".pes");
save("PEmbroider_arduino_demo_" + fileNumber + ".pes");
E.setPath(outputFilePath);
E.endDraw(); // write out the file
fileNumber += 1;
}
}
Here we are using the fileNumber variable we created before so that each time we write out a file, it has a new name and won't overwrite previous one.
Full Code
So, for this sketch, the full code would be as below:
import processing.serial.*;
import processing.embroider.*;
PEmbroiderGraphics E;
Serial myPort; // Create object from Serial class
String val = "0";
int fileNumber = 0;
void setup() {
size(600, 600);
E = new PEmbroiderGraphics(this, width, height);
println(Serial.list());
String portName = Serial.list()[6]; //change the 0 to a 1 or 2 etc. to match your port
myPort = new Serial(this, portName, 9600);
}
void draw(){
background(200);
E.beginDraw();
E.clear();
E.noFill();
// If data is available, read and store in val
if ( myPort.available() > 0) {
val = myPort.readStringUntil('\n');
}
float r = map(float(val),0,800,0,300);
E.circle(width/2,height/2,r);
//----------
E.visualize(true, true, false); // Display the embroidery path on-screen.
}
void keyPressed() {
// Export the embroidery file when we press the space bar.
E.optimize(); //important to include - optimizes the embroidery paths
if (key == ' ') {
String outputFilePath = sketchPath("PEmbroider_arduino_demo_" + fileNumber + ".pes");
save("PEmbroider_arduino_demo_" + fileNumber + ".pes");
E.setPath(outputFilePath);
E.endDraw(); // write out the file
fileNumber += 1;
}
}
Importing Multiple Readings
If you have multiple readings from the Arduino, there are a few ways you could get all the data over to Processing. In this example, we combine all readings into one variable which is sent across then split apart within Processing.
Arduino Code
p5 Code
Once this string is received in Processing, we can split it apart to get each value.
int val1 = int(val.substring(0,4));
int val2 = int(val.substring(4,8));